How to set up a React project using Vite to achieve a 100% Lighthouse score — Introduction As a big fan of Next.js, I created a repository to achieve a 100% lighthouse score with the Next.js framework as a boilerplate for my other projects. The whole journey is logged in a medium story. Feel free to check out the post if you are interested. How to Set Up Next.js with TypeScript to Get a 100% Score in Google Lighthouse and Vercel Analytics Build a PWA to get a green light in Google Lighthouse, Vercel Analytics, and Webpagetest.org securityjavascript.plainenglish.io

Migrate your CRA project to Vite, carry out benchmarks, and compare the two projects. — Introduction Create React App is an official support way to create a single-page React application. It offers many features out of the box and is the best way to start learning React. …

Wrap a RESTful API with GraphQL and deploy to Vercel — Introduction As a web developer, I bet you are already very familiar with RESTful APIs and have built awesome applications with these. RESTful API is viewed as a conventional standard for designing APIs, which uses HTTP methods to perform CRUD operations. GET to retrieve, POST to create, PUT to update, and…

Build a PWA to get a green light in Google Lighthouse, Vercel Analytics, and Webpagetest.org security — Introduction This article covers how to build a Progressive Web Application with Next.js to achieve a 100% score in Google Lighthouse and Vercel Analytics. Here we will go through the whole journey to optimize a fresh new Next.js project. It can also be considered as an updated composition of the following…

Achieve top rank in Google Lighthouse + Next.js Analytics + Webpagetest.org — This article covers how we upgrade our nextjs-100 application to Next.js 12 framework. We will also optimize nextjs-100 to achieve 100% in Google Lighthouse and Next.js Analytics, all band A in Next.js Analytics. Last week on 26th October 2021, Vercel announced the launch of Next.js 12 at its annual conference…

Create a sign-in page with Next.js and Tailwind CSS | Episode 2 Introduction In the previous story, we built a sign-in page with form validation with Next.js and Tailwind CSS. …

Create a sign-in page with Next.js and Tailwind CSS | Episode 1 Introduction As a web developer, you should have heard about The State of JavaScript Survey which has been conducted every year since 2016. The creator also surveyed CSS, The state of CSS survey. …

The 2nd episode of the Cookbook app — Introduction In this day and age, internet search is a habitual behaviour in daily life. People search in medium.com to learn, search videos on YouTube, search products on Amazon and search on Google for decision-making. It makes the search bar become a must-have element in every website. Why is a search box essential? According to the survey…

The 1st episode of the Cookbook app — Introduction More often than not, we make requests to external service APIs to retrieve data for our applications. For instance, integrate openweathermap.org with a weather forecast application or build a dictionary application with WordAPI. …