Gatsby team recently introduced a new feature to their framework called incremental builds which trims down build time significantly. Here will experiment with its implementation.

Image for post
Image for post

Creating static websites or setting up JAM(Javascript, API and Markup) application Gatsby is an amazing toolkit for both. There are tons of plugins we can leverage the power of using Gatsby. There isn’t much problem of using Gatsby for our website or personal projects. It handles well with decent number of blog posts as smaller site results in smaller build times.

But the major downside of using Gatsby when dealing with a site with large number of blog posts and scaling it up. Which can result in long build times. And correcting a single typo requires the same amount of time for rebuilding the site as the first-ever initial build. But, thats no longer is the case. Gatsby team recently in April announce the new feature release of Incremental builds for Gatsby cloud — giving us up to 1000x faster builds. That is an average build time of < 10 seconds! .


There are a tons of companies who practice UX design. In this article we will shed some light on the stages and the understand what it takes to deliver better UX.

Image for post
Image for post

Great software products does not happen by accident, it takes rigorous and continuous effort to make one. It definitely is the team work indeed to make this possible. This is also a result from the combination of usability, functionality and aesthetics that helps to convert a visitors to possible customers which can also lead to increase in customer satisfaction, higher sales due to the ease of use or reflection of the value proposition provided my the product.

UX is a team sport its practice inside an organization falls on a broad spectrum in their ability to create maintain high quality, digital UX. …


A native way to render browser based images responsively

Image showing the resolution switching of images in different devices.
Image showing the resolution switching of images in different devices.
View port based image switch

In today’s digital age, 1000s of devices types are being used daily. As developers and designers, we are responsible to ensure our product works seamlessly across all devices, without a glitch. Responsive design isn’t an option, it’s a need. When developing a responsive web design (RWD), there are tons of CSS libraries available to help, or if you are confident enough, you could do the same with flex box and grids — a great combination for RWD.

We also use images in almost all applications we create. Making them display responsively is straight forward, but for better UX and page load time, we must consider the use of different images on different device sizes — this can be tricky. For example, you may need to compute the viewport size and render the file from the source. If not, the user will have to downloading full images when they visit a page. To solve it, there’s a ready-to-use feature in plain HTML. This is not a new feature though. It was introduced around 2014, and has already been shipped to major browsers. …


In this article we will dig in what and why data-driven design is a better approach in delivering a great user experience. We will also learn why this helps in making our decision more concrete.

Banner image of the article Designing driven data
Banner image of the article Designing driven data
Credit: Unsplash

“As designers, we need to accept and embrace the world of metrics and use their amazing powers to change the way we’re doing things.”

— Jared Spool

We deal with a tremendous amount of data these days. These data come from user interaction after all. We have a vast number of tools that can help us in staying informed about the product we make. We are making products for humans. …


Here we will explore how we can do Web Scraping using NodeJS with Puppeteer. We will scrape a web page using the automation with Javascript.

Image for post
Image for post

Let’s assume we want to extract some information from the web. We still can copy the information we need from the desired website. But, what if we want to extract large amount of data quickly as possible. In that case we need some automation needed. There is where web scrapping comes into play. Unlike, tedious and manual task of copy and paste the information required it helps in receiving thousands and even millions of data sets in a smaller amount of time.

What is Web Scraping?

Web Scraping is basically the process to extract data from a website. This technique mostly focuses on the transformation of unstructured data (HTML format) on the web into structured data (database or spreadsheet). Many large websites provides us with an API’s which allows us to access their data. …


Digital products are made to be operated by all people but we designers still don’t address and ensure all users have equal access to any digital product.

Image for post
Image for post
Universal Accessibility

We consume the information from the internet where in 2019 we had 4.4 billion active internet users. As designers we design numerous of products but we definitely don’t think of designing with web accessibility in mind which creates inclusive flow of information to all the kind of users.

Here we will learn how we can design digital products which are universally accessible to the users with visual, auditory, motor and cognitive disorder. It is not only about those who can’t see or can’t hear or any other specific category of disability. …


Here we will get into simple steps on how u can create your next website or blog with easily integrated content management and supercharge your website overall.

Image for post
Image for post

There has been lot of debate going on with the static site generators due to rise of JAMStack application. Despite the debate Gatsby has been widely used and have decent numbers of stars in Github. You can find the top static generators collection here.

🔋There are number of noticeable advantage of Gatsby. Some are:

  • Less configuration needed, most done out of the box.
  • SEO, Speed and performance optimization.
  • Great community, nice documentation and growing plugin ecosystem.
  • Ultimately better developer experience.

In this article we will be covering on showing how we can set up a system for managing content on any page of our Gatsby site. We will be making use of gatsby-node API to pull in content from Contentful and dynamically generate pages with it. …


Sending email is one of the most demanded features in most applications. Here we will implement one ourselves.

Image for post
Image for post
React(hooks) + Tailwind + Nodemailer

Here we will implement a request access feature for our demo application. When a users can go into our application they can fill the form with name email and message, and submit it. We will configure and send that particular form data directly into our desired email.

For the form we will implement it using React hooks alongside with Tailwind CSS. Let’s take a look at the form we will be making.


Image for post
Image for post
Gatsby + ConvertKit

User Retention is one of the most needed feature in our product. Our product need a element factor which attracts the user to revisit to our product. Ultimately user retention lead to more engaging traffic and builds more close relationship between the user and the product.

There are lots of available online newsletter in the market like Mailchimp, Hubspot, Postcard, Smore, Aweber to name a few. Among them ConvertKit is distinguishable because it has better usability and clean UI and good of all it has a free tier we can use to test it out for about 1,000 subscribers. …


Here we will go into steps on building fully function simple paginated react application with the use of hooks.

Image for post
Image for post
Credit

One of the most widely used UI component in our application is pagination. It can make website more friendly and keep us updated to other data as we requested. This also helps a lot in reducing the cognitive load and also enhances UX of the product.

There are many ways how we can implement pagination inside our application. We can hit request on each page or just fetch all the list at once and reflect inside our UI only the desired one we need are most common two ways. …

About

Ishan Manandhar

Product Designer and Frontend Developer | https://twitter.com/ishan02016

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store