Hi, welcome to my blog

Hi! My name is Rohan Faiyaz Khan and I am a web developer working out of Dhaka, Bangladesh. I am currently working for Xen Works as a Frontend Web Developer where I work with React and Typescript.

I am passionate about my craft as a web developer and in free time I experiment with a lot things including Svelte, Sapper, TailwindCSS and backend development. I blog about the things I learn in order to create a self-reference and to share the lessons I learned along the way.

How to Make an Accesible Auto Suggest with vanilla Javascript

What is an Auto Suggest? Autosuggest, also referred to semantically as a Combobox, is a web component we are all familiar with. It is comprised of an input where a user can type, and a dropdown menu with suggestions that the user can select. Depending on the use case, there may be some extra caveats. Some components will autofill the user’s response based on the suggests, some will require that the user select something, some will fire a network request and so on. [Read More]

Turning your React Component into a Finite State Machine With useReducer

Why state machines are relevant to frontend development A finite state machine is not a new concept in the world of computing or mathematics. It is a mathematical model that be in one a few finite states. Transition to a new state could depend on the previous state and a set of external factors. This model has become more relevant recently in the field of UI development because we have shifted a lot of the state management to the frontend now. [Read More]

Let It Ripple

Recreating the material design ripple effect in React

We have all seen the ripple effect animation which was part of the material design recommendation. It presents itself as a circle that appears at the point of a click and then enlarges and fades away. As a UI tool, it is a fantastic and familiar way to let the user know that there has been a click interaction. Rippling in React While the ripple effect is perfectly doable in Vanilla JS, I wanted a way to integrate it with my React components. [Read More]

React Custom Hooks: What, Why and How

Now that its been a year since React hooks has been released, I can safely say that I absolutely love them and cannot imagine writing React components without them anymore. However hooks come with some of their own limitations, one of the biggest being that they must be used in a React functional component. This is by design, because we would like our stateful logic to be tied to the component where they are needed and not just any function. [Read More]
react  hooks 

Sharing more with React's Context API

The pains of growing state In learning React, one of the first challenges I faced was figuring out state management. State is a vital part of any application that has more complexity than a simple blog or brochure site. React has a fantastic toolset to manage component level state both in the case of functional components with hooks, and class based components. However global state is a bit of a different story. [Read More]

Efficiency in the Editor : How I overcame my fear of Vim

A colleague at my previous job was once looking at my screen and mentioned that he was impressed with how quickly I was moving around within my code editor. Granted he was not a developer and came from a non-technical background, but his comment surprised me as speed apart from that of typing was not something that I had given much thought before. Navigating through my workspace using a combination of arrow keys, find, go-to-line and the navigation keys such as Home and End were things I had learned simply through practice. [Read More]

NestJS GraphQL API with TypeORM and Postgres

Reap the rewards of GraphQL in a NestJS app

In a previous post, I covered how to make a NestJS REST API using TypeORM and Postgres. While it is a relatively simple process to set up a REST API in NestJS, we still are left with the limitations of a REST API. REST depends on our endpoints being clearly defined and this is usually done using the frontend as a guide, cause obviously we want to provide the exact data the frontend needs. [Read More]

NestJS CRUD with Postgres

A robust and scalable web framework for backends

NestJS is a fantastic framework for writing robust web backends. According to the docs: Nest (or NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming) Under the hood, Nest makes use of robust HTTP Server frameworks like Express (the default) and optionally can be configured to use Fastify as well! [Read More]

Building your first Hugo site

A blazing fast static site generator!

If you are unfamiliar with the concept of static site generators, they allow you to take your content (either as markdown or as input from a CMS) and output a static version of your website. There are several advantages of static sites. They are extremely fast because there is no need to dynamically fetch content. There is next to no cost of hosting them as they can be served up for free (for instance this site is being hosted on Netlify) They are inherently more secure Need any more reasons? [Read More]
hugo  static