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! . …
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. …
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. …
“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.”
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. …
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.
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. …
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. …
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:
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. …
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.
Here we will go into steps on building fully function simple paginated react application with the use of hooks.
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. …
Here will will add spotlight to some CSS features that can be used today. We will go through each features and understand how can we use and experiment on them.
Every year a brand new CSS Feature is released. It’s obvious human nature to try out something new and experiment with it to see its potential. It’s fascinating to see and implement the new ways to try new CSS techniques and push boundaries in what CSS can do.
Here we will explore the pieces of newly introduced CSS features and also understand the features in accompany with the code snippets. …