DEV Community: Pulkit Singh

Learn React with these cool Projects 😎

Pulkit Singh — Fri, 21 Mar 2025 07:13:40 +0000

React is a powerful JavaScript library for building user interfaces, and mastering it requires hands-on practice. Below, we've compiled a list of exciting projects that will help you improve your React skills while building real-world applications.React continues to evolve, bringing new features like:

✅ React Server Components – Improve performance by rendering on the server.

✅ Concurrent Rendering – Enhances UI responsiveness.

✅ Improved Suspense – Handles asynchronous operations efficiently.

🚀Featured React Projects

The best way to learn React is by building projects! Here are 10 awesome GitHub projects to sharpen your skills. Each project includes a difficulty level (🔹=Easy, 🔸=Intermediate, 🔥=Advanced), estimated time, GitHub stars, and a brief description of what you'll learn.

1️⃣ React Notes App 📝

📌 Description: This simple yet powerful notes application lets users create, edit, and delete notes. Notes are stored in the browser’s local storage.

📌 What You'll Learn: CRUD operations, React Hooks (useState, useEffect), local storage

📌 Difficulty: 🔹 (Beginner)

📌 Stars: ⭐ 100+

📌 Estimated Time: 2-4 hours

📌 Project Link: GitHub Repo

2️⃣ React Pokémon App (PokeAPI) 🎮

📌 Description: This app fetches Pokémon data from the PokeAPI, allowing users to search and view details about different Pokémon.

📌 What You'll Learn: Fetching API data, React Router, state management

📌 Difficulty: 🔸 (Intermediate)

📌 Stars: ⭐ 70+

📌 Estimated Time: 5-7 hours

📌 Project Link: GitHub Repo

3️⃣ React Weather App ☁️

📌 Description: This real-time weather app fetches data from the OpenWeatherMap API and displays weather conditions dynamically.

📌 What You'll Learn: API integration, Tailwind CSS, error handling

📌 Difficulty: 🔹 (Beginner)

📌 Stars: ⭐ 50+

📌 Estimated Time: 4-6 hours

📌 Project Link: GitHub Repo

4️⃣ React Cryptocurrency App 💰

📌 Description: A crypto price tracking application that fetches real-time data on different cryptocurrencies, including price changes and trends.

📌 What You'll Learn: Fetching live crypto prices, dynamic charts, React state management

📌 Difficulty: 🔸 (Intermediate)

📌 Stars: ⭐ 90+

📌 Estimated Time: 6-8 hours

📌 Project Link: GitHub Repo

5️⃣ React Password Generator 🔑

📌 Description: A simple password generator that creates strong, customizable passwords with various security options.

📌 What You'll Learn: Event handling, state management, clipboard API

📌 Difficulty: 🔹 (Beginner)

📌 Stars: ⭐ 120+

📌 Estimated Time: 2-3 hours

📌 Project Link: GitHub Repo

6️⃣ Photo Gallery App (React + Node.js) 🖼️

📌 Description: A full-stack photo gallery application where users can upload, view, and manage images.

📌 What You'll Learn: Uploading images, cloud storage integration, backend API handling

📌 Difficulty: 🔥 (Advanced)

📌 Stars: ⭐ 200+

📌 Estimated Time: 2-3 days

📌 Project Link: GitHub Repo

7️⃣ React Chat App (WhatsApp Clone) 💬

📌 Description: A real-time chat application that mimics WhatsApp, with user authentication and messaging features.

📌 What You'll Learn: Real-time messaging with WebSockets, Firebase authentication

📌 Difficulty: 🔥 (Advanced)

📌 Stars: ⭐ 500+

📌 Estimated Time: 3-5 days

📌 Project Link: GitHub Repo

8️⃣ React Movie & Series App 🎬

📌 Description: A movie and TV series database that fetches data from the TMDb API and allows users to browse and search for content.

📌 What You'll Learn: API integration, React Router, dynamic search

📌 Difficulty: 🔸 (Intermediate)

📌 Stars: ⭐ 150+

📌 Estimated Time: 5-7 hours

📌 Project Link: GitHub Repo

9️⃣ Instagram Clone 📸

📌 Description: A social media application similar to Instagram, with features like posting, liking, and commenting.

📌 What You'll Learn: Firebase authentication, real-time database, styled-components

📌 Difficulty: 🔥 (Advanced)

📌 Stars: ⭐ 600+

📌 Estimated Time: 4-6 days

📌 Project Link: GitHub Repo

🔟 E-Commerce App (MERN Stack) 🛒

📌 Description: A complete e-commerce application with product listings, a shopping cart, and payment integration.

📌 What You'll Learn: Full-stack development (MongoDB, Express, React, Node.js), authentication, payment integration

📌 Difficulty: 🔥 (Advanced)

📌 Stars: ⭐ 1.5K+

📌 Estimated Time: 1-2 weeks

📌 Project Link: GitHub Repo

Conclusion

By working on these projects, you'll gain hands-on experience with API integration, authentication, state management, and UI design.

👉 Which project will you start with? Let us know in the comments! 🚀

Free Database Hosting for Your Next Project

Pulkit Singh — Fri, 04 Oct 2024 15:40:30 +0000

Exploring Free Database Hosting Options for Your Next Project

If you're looking to start a small project or test an idea, free database hosting services can be a game changer. Here’s a curated list of various database platforms offering free tiers, each with its advantages, limitations, and storage capacities.

Amazon DynamoDB

Amazon DynamoDB is a fully managed NoSQL database service that provides fast and predictable performance. DynamoDB is great for applications requiring low-latency data access.

Type: NoSQL (Proprietary)
Storage: 25 GB

Pros ✅

Automatically scales as your application grows
Integrates seamlessly with AWS services

Cons ⚠️

Payment method required
The free tier is limited, and charges apply beyond usage limits

Amazon RDS

Amazon RDS is a managed relational database service that supports multiple engines like MySQL, PostgreSQL, Oracle, and SQL Server.

Type: RDBMS (Proprietary)

Pros ✅

Automated backups, patching, and scaling
Wide range of supported database engines

Cons ⚠️

Free only for one year
Payment method required for continued service

Azure SQL Database

Azure SQL Database is a fully managed SQL database service built for cloud applications.

Type: MS SQL Server

Pros ✅

Integrates with Microsoft products and services
Built-in high availability and disaster recovery

Cons ⚠️

Free for one year
Payment method required for extended use

Clever Cloud

Clever Cloud offers PostgreSQL, MySQL, MongoDB, and Redis as managed services for developers.

Type: PostgreSQL, MySQL, MongoDB, Redis
Storage: 256 MB (PostgreSQL)

Pros ✅

Automatic scaling for your projects
Multi-cloud and hybrid architecture support

Cons ⚠️

Maximum of 5 connections for PostgreSQL

ElephantSQL (Discontinued 😭)

ElephantSQL provides managed PostgreSQL database hosting services with simple scaling.

Type: PostgreSQL
Storage: 20 MB

Pros ✅

Easy-to-use management console
Fast setup for small applications

Cons ⚠️

5 concurrent connections allowed
Discontinued More here

Fly.io

Fly.io offers fast global PostgreSQL database services.

Type: PostgreSQL
Storage: 3 GB

Pros ✅

Global app deployment
Built-in redundancy and failover

Cons ⚠️

Requires a credit card
Limited outbound traffic
Risk of accidental overage fees

Google Cloud Firestore

Google Cloud Firestore is a flexible NoSQL document database for mobile and web applications.

Type: NoSQL (Proprietary)
Storage: 1 GB

Pros ✅

Integrated with Google Cloud ecosystem
Ideal for real-time applications

Cons ⚠️

After the first year, there is no way to avoid accidental overage fees

Heroku Postgres (Discontinued 😭)

Heroku’s Postgres service has been discontinued, but it was a popular choice for developers.

Type: PostgreSQL

Pros ✅

Easy integration with Heroku apps
Well-suited for small projects

Cons ⚠️

Discontinued, no longer available for new sign-ups

IBM Cloud Cloudant

IBM Cloud Cloudant is a NoSQL database optimized for handling large volumes of distributed data.

Type: NoSQL (Proprietary)
Storage: 1 GB

Pros ✅

Handles distributed workloads effortlessly
Fully managed with high availability

Cons ⚠️

Data is deleted after 30 days of inactivity

IBM Cloud Db2

IBM Cloud Db2 offers a powerful, enterprise-grade SQL database service.

Type: Db2
Storage: 200 MB

Pros ✅

Industry-grade SQL performance
Great for enterprise use cases

Cons ⚠️

Users must re-extend the free account every 90 days via email

MongoDB Atlas

MongoDB Atlas is a fully managed cloud database service for modern applications.

Type: MongoDB
Storage: 512 MB

Pros ✅

Multi-cloud support
Easy scaling options

OpenShift Developer Sandbox

OpenShift Developer Sandbox provides free access to MariaDB, MongoDB, MySQL, and PostgreSQL databases.

Type: MariaDB, MongoDB, MySQL, PostgreSQL
Storage: 15 GB

Pros ✅

Pods are deleted after 12 hours of inactivity
Full Red Hat OpenShift experience for developers

Cons ⚠️

Expires after 30 days, can resubscribe but not extend subscription

Oracle Cloud

Oracle Cloud offers a free tier that includes access to Oracle databases.

Type: Oracle Database
Storage: 20 GB per database (up to two databases)

Pros ✅

Powerful performance for enterprise-level projects
Built-in AI and machine learning integrations

Cons ⚠️

Payment method required

Redis Enterprise

Redis Enterprise provides a free Redis cloud database for quick data storage and retrieval.

Type: Redis
Storage: 30 MB

Pros ✅

Low-latency data access
High availability with automatic failover

Scalingo

Scalingo offers a PostgreSQL database with free tier limits ideal for testing and small apps.

Type: PostgreSQL
Storage: 128 MB

Pros ✅

Simple setup and deployment
Integrated with Scalingo’s PaaS platform

Cons ⚠️

Maximum of 10 connections
Payment required after 30-day trial

Supabase

Supabase offers an open-source alternative to Firebase with PostgreSQL as the database layer.

Type: PostgreSQL
Storage: 500 MB

Pros ✅

Integrated authentication and API services
Fast setup for web and mobile apps

Cons ⚠️

Paused after 1 week of inactivity
2 GB transfer limit

For small projects, testing, or learning, these services provide excellent free options. However, most have limitations, so it's important to choose based on your needs. Be mindful of potential overage fees or expiration dates, especially if you plan on scaling your application.

Install Nerd Fonts (or any fonts) easily in Linux

Pulkit Singh — Mon, 09 Sep 2024 12:38:06 +0000

Switching to Linux can be a liberating experience, offering a highly customizable and secure environment. However, there are some tasks that can be a bit tedious, especially if you're coming from Windows, where things are often automated. One such task is installing fonts. Imagine you've set up your Linux system just the way you like it, and you're about to download and install some new fonts. You find a collection of beautiful Nerd Fonts, but the process of downloading, unzipping, and installing each font individually is time-consuming. With over 40 fonts in a single zip folder, it can feel like a daunting task.

I recently faced this exact situation when I switched to Linux Mint and decided to ditch Windows. After some frustration, I found a clever way to install fonts directly from a URL, saving a lot of time and hassle. Here's how I did it, and you can too!

A Simple Bash Script to Install Fonts

To streamline the process, I created a simple bash script that allows you to install fonts directly from a URL. The script automates the download, extraction, and installation of fonts, making the process quick and painless.

Here's the script:



#!/bin/bash

# Check if the URL is provided
if [ -z "$1" ]; then
  echo "Please provide a URL to a font zip file."
  exit 1
fi

# Create a temporary directory
TEMP_DIR=$(mktemp -d)

# Download the font zip file
wget -O "$TEMP_DIR/font.zip" "$1"

# Unzip the font file
unzip "$TEMP_DIR/font.zip" -d "$TEMP_DIR"

# Move the font files to the system fonts directory
sudo mv "$TEMP_DIR"/*.{ttf,otf} /usr/local/share/fonts/

# Update the font cache
fc-cache -f -v

# Clean up
rm -rf "$TEMP_DIR"

echo "Fonts installed successfully!"

That's it, now you can save it as install.sh and run it to install bunch of fonts easily.

How to use this script

1) Save the Script: Save the script above as install-font.sh anywhere on your Linux system.

2) Make the Script Executable: Before running the script, you need to change its permissions to make it executable. You can do this by running the following command in your terminal:



chmod +x /path/to/install-font.sh

3) Run the Script: Now, you're ready to install fonts! Open your terminal and run the script with the URL to the font zip file. For example:



./install-font.sh https://github.com/ryanoasis/nerd-fonts/releases/download/v3.2.1/Hack.zip

The script will download, extract, and install the fonts for you automatically.

NOTE: You can install any fonts not just nerd fonts.

Another Approach

Alternatively, there's another script by dDeedev that can make it even more easy for you! You can find the script here!

Where to Find More Nerd Fonts

You can find more Nerd Fonts to install from the official Nerd Fonts website. Simply copy the URL of the font zip file you want and use the script to install it.

Conclusion

I hope this script makes your Linux experience a bit smoother. Bash scripting is a powerful tool that can help automate repetitive tasks and save you time. Whether you're a Linux newbie or a seasoned pro, small scripts like this can make a big difference in your workflow. Do let me know your favourite fonts in the comments below.

🔥 VS Code Tip of the Day 🔥

Pulkit Singh — Wed, 25 Jan 2023 06:19:44 +0000

Stay Organized with the TODO Highlight Extension

Are you having a hard time keeping track of all the tasks you need to do in a project? Are you looking for an easy way to navigate back to them? Then the TODO Highlight extension for Visual Studio Code is the perfect tool for you!

This extension allows you to quickly and easily add TODO and FIXME comments to your code. With those comment tags in place, you can quickly generate a helpful list of all the tasks you need to do. This makes it a breeze to move around your project, find the tasks you need to do, and stay organized.

To get started, all you have to do is search for the “TODO Highlight” extension in the Visual Studio Code marketplace.

After you install it, you’ll be able to start adding TODO and FIXME comments to your code.
You can then use the “TODO List” command to generate a list of all your tasks. This list will include the line numbers where you added your comments, as well as some helpful details about each task.

The TODO Highlight extension is a great tool for quickly and easily keeping track of your tasks and staying organized. With just a few clicks, you can stay on top of all the TODOs in your project. So, if you’re looking for an easy way to keep your code organized and get things done, look no further than the TODO Highlight extension for Visual Studio Code from here!

Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.

What can you build with WASM?

Pulkit Singh — Sat, 21 Jan 2023 11:17:44 +0000

WebAssembly (WASM) is a binary instruction format for a stack-based virtual machine. It is designed as a portable target for the compilation of high-level languages like C, C++, and Rust, enabling deployment on the web for client and server applications.

One of the main advantages of WASM is its small size and fast execution. Because it is a binary format, it can be loaded and executed quickly, making it an excellent choice for performance-critical tasks like gaming, video and image processing, and cryptography.

Should you use WASM?

There are several reasons why WebAssembly (WASM) is an attractive option for web development:

Performance: WebAssembly is designed to be a portable target for the compilation of high-level languages like C, C++, and Rust, allowing for near-native performance on the web. This makes it an excellent choice for performance-critical tasks like gaming, video and image processing, and cryptography.
Small size: WebAssembly code is a binary format, which means it can be loaded and executed quickly. Because it is a compact format, it can be downloaded faster and take up less space than equivalent JavaScript code.
Language support: WebAssembly supports multiple programming languages, including C, C++, and Rust. This allows developers to use their existing knowledge and skills to build web applications.
Interoperability: WebAssembly can be used in conjunction with JavaScript, which makes it easy to integrate with existing web apps and frameworks. This allows developers to use the best of both worlds.
Security: WebAssembly is designed with security in mind, and it runs inside a sandboxed environment. This makes it a good choice for building secure web apps that perform cryptographic operations such as encryption and decryption.

Progressive enhancement: WebAssembly can be used to progressively enhance web apps, providing better performance for users on modern browsers while still providing a functional experience for users on older browsers.

Developing cross-platform apps: WebAssembly can be used to create apps that run on multiple platforms, including web, mobile, and desktop, with little to no modification.

Getting Started

Getting started with WebAssembly (WASM) projects can be done in several ways, depending on the language you are using and the development environment you are working in. Here are some general steps to get started:

Install the necessary tools: To start working with WebAssembly, you will need to have a few tools installed on your computer. These include a WebAssembly binary toolchain, such as Binaryen or LLVM, as well as a WebAssembly runtime, such as Wasmtime or Wasmer. You can find instructions for installing these tools on the respective websites.
Choose a programming language: WebAssembly supports several programming languages, including C, C++, and Rust. If you are new to WebAssembly, it might be easier to start with a language you are already familiar with.
Write your code: Once you have the necessary tools and have chosen a language, you can start writing your code. When writing WebAssembly code, it's important to keep in mind that it is designed to be run on a stack-based virtual machine, so you will need to use stack operations instead of register operations.
Compile your code: After writing your code, you will need to compile it to the WebAssembly binary format (.wasm). You can use a tool like Emscripten to do this for C and C++ code, or you can use the WebAssembly Binary Toolkit (WABT) for other languages.

To easily get started with WebAssembly, you can try out some of the example repositories available on GitHub. Here are a few to check out:

wasm-game-of-life: This is an example of a Game of Life implementation built with WASM.
wasm-examples: This repository contains several examples of using WebAssembly with different languages, including C, C++, and Rust.
wasm-crypto-examples: This repository contains examples of using WebAssembly for cryptography, including a WebAssembly implementation of the popular encryption library OpenSSL.
wasm-machine-learning: This repository contains examples of using WebAssembly for machine learning, including a WebAssembly version of TensorFlow.js.

Here are a few examples of what you can build with WASM:

Games: WASM allows for high-performance gaming on the web, with several examples such as the popular game "2048" which is built with WASM.
Image and video processing: WebAssembly can be used to build image and video processing apps that run on the web. A good example of this is the wasm-imagemagick project, which is a WebAssembly port of the popular image manipulation library.

Summary

Overall, WebAssembly is a powerful tool that can be used to build high-performance web apps that run smoothly on all devices. With its small size, fast execution, and support for multiple languages, it is becoming an increasingly popular choice for web development. With the above examples, you can start experimenting and build your own web apps with WebAssembly.

Learning Python in 2023: A Roadmap

Pulkit Singh — Sun, 15 Jan 2023 13:39:38 +0000

Step 1: Familiarize yourself with the basics

Start by learning the basic syntax and data types of Python. Get a good understanding of how variables, loops, and control structures work.
You can use resources like Codecademy, Coursera, or edX to learn the basics.

Step 2: Practice writing basic programs

Once you feel comfortable with the basics, start practicing writing simple programs like calculators, guessing games, and to-do lists.
This will help you solidify your understanding of the language and develop your problem-solving skills.

Step 3: Learn Object-Oriented Programming (OOP)

Python is an object-oriented programming language, so it's important to learn the concepts of OOP.
Learn about classes, objects, inheritance, polymorphism, and encapsulation.

Step 4: Learn a web framework

Learn to use a web framework like Flask or Django to build web applications.
This will give you a good understanding of how Python can be used to create web applications and the web development process.

Step 5: Learn a data analysis library

Learn to use a data analysis library such as Pandas, NumPy, or Matplotlib.
This will give you the skills to analyze and visualize data using Python.

Step 6: Learn Advanced Topics

Once you have a solid foundation in the basics, you can start diving into more advanced topics such as functional programming, decorators, and generators.
Also you can start learning other libraries such as Tensorflow, Pytorch, etc.

Step 7: Practice, Practice, Practice

The most important step in learning any programming language is practice.

Participate in coding challenges, contribute to open-source projects, and keep building your own projects to solidify your knowledge and improve your skills.

By following this roadmap and dedicating time and effort to your learning, you can become proficient in Python in 2023. Remember that learning to code is an ongoing process and you will continue to learn new things and improve your skills as you gain more experience.

References

There are several references available for learning Python, including online tutorials, video courses, and books. Some popular resources for learning Python include:

The official Python website (python.org) which provides an interactive tutorial and documentation on the basics of the language.
Codecademy's Learn Python track, an interactive online course that covers the fundamentals of Python. "Python Crash Course" by Eric Matthes, a beginner-friendly book that covers the basics of Python programming and data science
"A Byte of Python" by Swaroop C H, a free online book that covers the basics of Python programming "Automate the Boring Stuff with Python" by Al Sweigart, a beginner-friendly book that covers the basics of Python programming and teaches you how to automate common tasks using Python
"Python Fundamentals" by Pluralsight, a video course that covers the basics of Python programming.

Top Rendering Patterns for your Next Web App

Pulkit Singh — Wed, 11 Jan 2023 10:22:53 +0000

What is Content Rendering?

In simple words, rendering is converting structured data or content into a visual format that can be displayed on a webpage or application. In web development, content is typically stored in a database and then retrieved by the application and rendered for the user. The rendered content is usually HTML, CSS, and JavaScript, which are interpreted by the browser to display the webpage to the user.

This can be done on server or browser, and all at once or partially depending on your project's requirement.

Content Rendering Patterns

There are several content rendering patterns for frontend development, each with its own set of trade-offs and best suited for different types of applications. Here are some examples of popular patterns with their advantages and disadvantages:

1. Static Website

A static website is a type of website that uses pre-written HTML, CSS, and JavaScript to display content. The content on a static website is fixed, and does not change unless the developer manually updates the HTML, CSS, and JavaScript files.

A static website does not require any processing on the server-side or client-side to render the content. This means that static websites can have faster loading times and lower server costs, compared to dynamic websites and Good SEO.

Static websites are suitable for simple websites that don't require any dynamic functionality or frequent updates such as landing pages, portfolio websites, blogs or small online stores.

Frameworks that supports SSG (Static Site Generation): Hugo, 11ty, Gatsby, Gridsome, Jekkyl

2. Multi Page Apps

A multi-page app (MPA) is a type of web application that uses multiple distinct pages to display content, with each page typically having its own unique URL. In terms of content rendering, the most common pattern for a multi-page app is server-side rendering (SSR).

In SSR, the server is responsible for generating the HTML for each page of the app based on the requested URL. When a user requests a page, the server retrieves the necessary data from a database or API and then uses a template engine, such as EJS, Handlebars, or Pug, to generate the HTML for that page. The generated HTML is then sent to the browser as a fully rendered webpage, which can improve load times and SEO.

Once the page is loaded, the client-side JavaScript can take over and handle any dynamic interactions, such as form submissions or updating the content without requiring a full page reload.

A common web development frameworks that supports SSR and building multi-page application are: Next.js, Nuxt.js, and Express.js. Each framework has its own set of features and tools that can help developers build and maintain MPAs.

3. Single page App (SPA)

A single-page app (SPA) is a type of web application that loads a single HTML page and dynamically updates the content as the user interacts with the app. In terms of content rendering, the most common pattern for a SPA is client-side rendering (CSR).
When a user requests a specific resource or view, the JavaScript code in the SPA makes an API call to the server to retrieve the necessary data and then updates the content of the page accordingly. This can provide fast and responsive interactions but can also lead to slower initial load times and potential issues with SEO.

Popular JavaScript frameworks for building Single page application are React.js, Angular, Vue.js and Ember.js, Svelte. These frameworks all provide tools for building client-side rendered applications, as well as features for handling dynamic updates and routing, making it easy to build complex SPAs.

4. Server-Side Rendering with Hydration

Rendering with hydration is a technique used in certain JavaScript frameworks, such as React, to improve the performance of client-side rendering.

When a SPA (Single Page Application) is initially loaded in the browser, the HTML is typically rendered on the server and sent to the browser as a fully rendered webpage. However, for a SPA, the HTML is often just a "shell" or "skeleton" of the final page, with the majority of the content being filled in by JavaScript after the page has loaded. This process is called hydration.

The advantages of hydration is that, it improves the initial load performance as compared to traditional client-side rendering, where the entire HTML is generated by JavaScript. Additionally, hydration allows for better SEO as the search engines can crawl the initial HTML content and also it provides a better user experience as the initial load will be faster.

Also there are frameworks such as Next.js and Nuxt.js that provide the hydration process out of the box.

Web apps like this are called JAM Stack.

Know More about Jam Stack here =>

These are called metaframeworks but there is a major drawback that you need an actual server for these stuff.

5. Static Site Generation with Hydration

Static site generation is the process of pre-rendering HTML files from a set of templates and content, while hydration refers to the process of dynamically adding interactivity to a static site using JavaScript after it has been loaded in the browser. Combining these two techniques, a website can be built as a set of static HTML files that are served quickly to the user, and then enhanced with dynamic features and data updates as the user interacts with the page, providing a faster and more responsive experience for the user.

Most popular frameworks to support this feature are Nuxt.JS, Next.JS, SvelteKit.JS

6. Incremental Static Regeneration

Incremental static regeneration is a technique that allows for updating a static site without having to regenerate the entire site from scratch. The process only regenerates the specific pages that have changed, rather than regenerating the entire site, which can save time and resources. This technique makes it possible to only rebuild the affected pages while keeping the rest of the site the same, resulting in a much faster regeneration process. This is especially useful for sites with a large amount of content, and can be used in conjunction with a CMS that supports this feature. This way the content can be updated and only the updated pages will be regenerated and deployed. This can be especially beneficial for sites that are hosted on a CDN, as it can save on bandwidth and costs.

7. Partial Hydration

Partial hydration is a technique that enables selective enhancement of specific parts of a static website, where only certain parts of the website receive dynamic functionality, rather than the entire site. This allows for faster loading times and improved performance, as well as reducing the amount of JavaScript needed to be loaded. It can be useful in cases where some pages are not in need of dynamic functionality, such as e-commerce website product listings, or a blog's static pages, but some parts that need interaction and dynamic functionality, such as product detail pages or commenting system. This way, the site can load faster and allow user to interact with the dynamic functionality only when needed.

My go to pick is GatsbyJS

8. Islands

This pattern allows for modular and reusable components that can be used on different parts of a web page, without being affected by the styles or behaviours of other elements on the page. This allows for greater flexibility and maintainability of the code, as well as improved performance.

Astro.JS is presumably based on Islands pattern.

9. Streaming SSR

Streaming Server-Side Rendering (SSR) is a technique in which the server sends HTML to the browser in chunks as it is generated, rather than waiting for the entire page to be rendered before sending any content to the browser. This allows the browser to start displaying the content of the page sooner, resulting in faster rendering times and a better user experience. In addition, it can reduce the time to first byte (TTFB), making the site to be perceived as faster by the users. Streaming SSR can be implemented using dedicated libraries or by creating a custom solution, although it is not a default feature in most of the web development frameworks or libraries.

Frameworks like NextJs or Gatsby are heavily compatible with that feature.

10. Resumability

The idea behind this pattern is to break the long running process into smaller chunks that can be resumed if the process is interrupted. For example, when uploading a large file, the file is divided into smaller parts, and each part is uploaded individually, with the state of the upload being saved at the end of each successful upload. This approach also applies to other long-running processes on the client-side, such as video rendering, image manipulation, etc. This pattern allows for a smoother and more reliable user experience and it's especially useful for complex and large web apps that need to maintain the state of a process across multiple pages and user interactions.

Next.JS and React server components are designed with this pattern in mind.

Summary

In conclusion, rendering patterns play a crucial role in web development as they allow for efficient and effective ways of handling various aspects of building web pages and applications. These patterns are designed to optimize performance, scalability, and user experience, making web pages faster and more reliable. Whether it's improving the loading time, providing dynamic functionality, or handling long-running processes, rendering patterns are essential tools for building high-quality web pages and applications.

References

How to debug JavaScript like a pro?

Pulkit Singh — Thu, 05 Jan 2023 17:25:46 +0000

Debugging is an essential part of the software development process. It involves identifying and fixing errors, or "bugs," in your code that prevent it from running correctly. JavaScript, being a dynamic and interpreted language, is particularly prone to bugs, but fortunately, there are many tools and techniques available to help you debug your code effectively.

Here are some common techniques for debugging JavaScript code:

Using the browser's developer console: Most modern web browsers come with a built-in developer console that allows you to view errors, log messages, and inspect the state of your application at runtime. To open the developer console in Google Chrome, for example, you can use the Ctrl + Shift + I keyboard shortcut or click on the "Menu" button (the three vertical dots) and select "More tools > Developer tools."

Inspecting variables: The developer console allows you to inspect the values of variables at a given point in your code. You can use the console.log() function to log the values of variables to the console for inspection. For example:

let x = 10;
console.log(x);  // Output: 10

Stepping through code: Most modern browsers also come with a "debugger" tool that allows you to pause the execution of your code at a specific line and inspect the state of your application. You can use the "Step Over" and "Step Into" buttons to execute one line of code at a time and see how the variables and function calls are affecting your application.
Using breakpoints: A breakpoint is a marker that you can set in your code to pause the execution of your code at a specific line. You can set a breakpoint by clicking on the line number in the developer console's source code viewer or by using the debugger; statement in your code.

let x = 10;
debugger;  // Execution will pause here
let y = 20;

Catching exceptions: JavaScript provides a try-catch statement that allows you to "catch" exceptions, or runtime errors, and handle them gracefully. For example:

try {
  // Code that may throw an exception
} catch (error) {
  // Code to handle the exception
}

Here's an example of how you might use the try-catch statement to debug a runtime error:

try {
  let x = y;  // y is not defined, so an exception will be thrown
} catch (error) {
  console.log(error.name);  // Output: "ReferenceError"
  console.log(error.message);  // Output: "y is not defined"
}

These are just a few of the many tools and techniques available for debugging JavaScript code. With practice and patience, you can learn to identify and fix bugs effectively and become a more efficient and effective developer.

In conclusion, debugging is an essential part of the software development process, and JavaScript, being a dynamic and interpreted language, is particularly prone to bugs. Fortunately, there are many tools and techniques available to help you debug your JavaScript code, such as using the browser's developer console, inspecting variables, stepping through code, using breakpoints, and catching exceptions. By becoming familiar with these tools and techniques, and with practice and patience, you can learn to identify and fix bugs effectively and become a more efficient and effective developer.

Top UI libraries for Vue JS in 2023

Pulkit Singh — Tue, 03 Jan 2023 08:04:58 +0000

Vue.js is a popular JavaScript framework for building web applications, and there are many UI libraries available that can be used to enhance the look and functionality of your Vue.js projects. These libraries provide a range of pre-designed and customizable UI components, such as forms, buttons, and layout elements, which can be easily integrated into your Vue.js projects. In this list, we will introduce you to a selection of popular UI libraries for Vue.js that you may want to consider for your projects.

Vuetify: A Material Design component framework that provides a wide range of pre-designed and customizable UI components.

Element: A library of UI components that is designed to be easy to use and customize.

Quasar: A comprehensive UI library that provides a wide range of components, including forms, buttons, and layout elements.

Buefy: A lightweight UI library that provides a range of customizable UI components, including forms, buttons, and navbars.

Vuesax: A library of UI components that includes a wide range of elements, such as forms, buttons, and layout components.

Bootstrap-Vue: A UI library that provides a range of components based on the popular Bootstrap framework, including forms, buttons, and navbars.

Vue-Material: A Material Design component library that provides a wide range of customizable UI elements, including forms, buttons, and layout components.

Vue-MDC: A library of UI components based on the Material Design specification, including forms, buttons, and layout elements.

Ant Design Vue: A library of UI components based on the popular Ant Design framework, including forms, buttons, and layout elements.

Vue-Lumino: A library of UI components based on the popular Lumino framework, including forms, buttons, and layout elements.

Vue-Kendo: A library of UI components based on the popular Kendo framework, including forms, buttons, and layout elements.

Vue-Fomantic-UI: A library of UI components based on the popular Fomantic UI framework, including forms, buttons, and layout elements.

Vue-Tailwind: A library of UI components based on the popular Tailwind CSS framework, including forms, buttons, and layout elements.

These are just a few examples of the many UI libraries available for Vue.js. There are many other options to choose from, and the best choice will depend on your specific needs and preferences.

In conclusion, there are many UI libraries available for Vue.js that can be used to enhance the look and functionality of your projects. These libraries provide a range of pre-designed and customizable UI components, such as forms, buttons, and layout elements, which can be easily integrated into your Vue.js projects. It is important to carefully evaluate the available options and choose the UI library that best meets your needs and preferences.

Have you used any of the UI libraries mentioned in this list? Do you have any experience with other UI libraries for Vue.js that you would recommend? Let us know in the comments below.

💅🏻If you're beautiful, follow this JS Code Style

Pulkit Singh — Sun, 01 Jan 2023 17:07:39 +0000

Summary 📑

Soft tabs with two spaces
Never use semicolons
Always use single quotes
Keep else in the same line of closure of the if
Add spaces between operators
Avoid single letter names
Use lowerCamelCase
Use the === operator
Add spaces outside parentheses () but avoid it inside
Use function expressions instead of function declarations
Anonimous function
Ternary operator single line only
Don't be dumb with ternary operator
Use const for all of your references, avoid using var
If you must reassign references, use let instead of var
Declare one const or let per declaration statement
Use the literal syntax for object creation
Use the literal syntax for array creation
Declare array items in list
Function arguments indentation
Method chaining
Any non-trivial conditions must be assigned to a variable or function with a descriptive name
Try to write comments that explain higher level mechanisms or clarify difficult segments of your code
Don't use comments to trivial things
References

Soft tabs with two spaces

Eslint: indent

Wrong:

if (true) {
    console.log('True')
}

Correct:

if (true) {
  console.log('True')
}

Never use semicolons

Eslint: semi

Wrong:

if (true) {
  console.log('True');
}

Correct:

if (true) {
  console.log('True')
}

Always use single quotes

Eslint: quotes

Wrong:

if (true) {
  console.log("True")
}

Correct:

if (true) {
  console.log('True')
}

Keep `else` in the same line of closure of the `if`

Eslint: brace-style

Wrong:

if (true) {
  console.log('True')
}
else {
  console.log('False')
}

Correct:

if (true) {
  console.log('True')
} else {
  console.log('False')
}

Add spaces between operators

Eslint: space-infix-ops

Wrong:

for (i=0;i<10;i++) {
  ...
}

Correct:

for (i = 0; i < 10; i++) {
  ...
}

Avoid single letter names

Be descriptive with your naming. Eslint: id-length

Wrong:

function q() {
  ...
}

Correct:

function query() {
  ...
}

Use lowerCamelCase

Eslint: camelcase

Wrong:

let is_error

Correct:

let isError

Use the === operator

Eslint: eqeqeq

Wrong:

const example = 'Is a example'

if (example == 15) {
  ...
}

Correct:

const example = 'Is a example'

if (example === 15) {
  ...
}

Add spaces outside parentheses `()` but avoid it inside

Eslint: keyword-spacing

Wrong:

if(condition){
  ...
}

Correct:

if (condition) {
  ...
}

Use function expressions instead of function declarations

Eslint: func-style

Wrong:

function foo() {
}

Correct:

const foo = function () { }

When you must use function expressions (as when passing an anonymous function), use `arrow function` notation

Eslint: prefer-arrow-callback

Wrong:

[1, 2, 3].map(function (x) {
  const y = x + 1
  return x * y
})

Correct:

[1, 2, 3].map((x) => {
  const y = x + 1
  return x * y
})

Ternary operator single line only

The ternary operator should be used on a single line.

Wrong:

const foo = (condition)
  ? 1
  : 2

Correct:

const foo = (condition) ? 1 : 2

Don't be dumb with ternary operator

Disallow ternary operators when simpler alternatives exist. Eslint: no-unneeded-ternary

Wrong:

const isYes = answer === 1 ? true : false;

Correct:

const isYes = answer === 1;

Use `const` for all of your references, avoid using `var`

Eslint: prefer-const

Wrong:

var foo = 'bar'

Correct:

const foo = 'bar'

If you must reassign references, use `let` instead of `var`

Eslint: no-var

Wrong:

var count = 1

if (condition) {
  count += 1
}

Correct:

let count = 'bar'

if (condition) {
  count += 1
}

Declare one `const` or `let` per declaration statement

Eslint: one-var

Wrong:

const foo = require('./bar'),
      foo = require('./foo')

Correct:

const foo = require('./bar')
const foo = require('./foo')

Use the literal syntax for `object` creation

Eslint: no-new-object

Wrong:

const foo = new Object()

Correct:

const foo = {}

Use the literal syntax for `array` creation

Eslint: no-array-constructuor

Wrong:

const foo = new Array()

Correct:

const foo = []

Declare `array` items in list

>= 4 arguments: indent. Eslint: array-element-newline and array-bracket-newline

Wrong:

const foo = [
  'hello', 'world'
]

const foo = ['hello', 'world', 'lore', 'impsum']

Correct:

const foo = ['hello', 'world']

const foo = [
  'hello',
  'word',
  'lore', 
  'impsum'
]

Function arguments indentation

>= 4 arguments: indent (excerpt callbacks brackets). Eslint: function-paren-newline

Wrong:

const foo = (
  'lore', 
  'impsum'
) => {}

const foo = ('carls', 'farls', 'karen', 'logan') => {}

foo.bar(
  'string',
  () => {
    statements
  }
)

Correct:

const foo = ('lore', 'impsum') => {}

const foo = (
  'carls', 
  'farls', 
  'karen',
  'logan'
) => {}

foo.bar('string', () => {
  statements
})

Method chaining

Eslint: newline-per-chained-call

Wrong:

user
.findOne({ name: 'foo' })
.populate('bar')
.exec(function(err, user) {
  return true
})

user.findOne({ name: 'foo' })
  .populate('bar')
  .exec(function(err, user) {
    return true
  })

Correct:

user
  .findOne({ name: 'foo' })
  .populate('bar')
  .exec(function(err, user) {
    return true
  })

Any non-trivial conditions must be assigned to a variable or function with a descriptive name

Wrong:

if (password.length >= 4 && /^(?=.*\d).{4,}$/.test(password)) {
  ...
}

Correct:

const isValidPassword = password.length >= 4 && /^(?=.*\d).{4,}$/.test(password)

if (isValidPassword) {
  ...
}

Try to write comments that explain higher level mechanisms or clarify difficult segments of your code

Wrong:

const foo = "var(--bar)"

// Regexp
if (foo.replace(/var\(/, "").replace(/\)/, "") === "--bar") {
  ...
}

Correct:

let foo = 'var(--bar)'

let value = foo
            .replace(/var\(/, '') // Remove the 'var('
            .replace(/\)/, '') // Remove the ')'

if (foo === '--bar') {
  ...
}

Don't use comments to trivial things

Wrong:


// Create the passwors
const password = 'carls1234'

Correct:

const password = 'carls1234'

References

Project inspired by valle-style-guide

Async Await v/s Promises?

Pulkit Singh — Sun, 18 Dec 2022 16:45:01 +0000

Both async/await and promises are ways to handle asynchronous code in JavaScript. They are not mutually exclusive and can be used together or independently, depending on your needs and preferences.

Async Await

Async/await is a more modern and concise syntax for working with promises. It allows you to write asynchronous code that looks and behaves like synchronous code, using the async and await keywords.

For example, with async/await, you can write code like this:

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

Promises

Promises are a pattern for handling asynchronous operations in JavaScript. They represent the result of an asynchronous operation that may not be available yet. You can use the .then() method to specify what should happen when the promise resolves (i.e., when the asynchronous operation is completed).

For example, with promises, you can write code like this:

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

In general, async/await can make your code easier to read and understand, especially for longer or more complex asynchronous operations. However, it's important to note that async/await is built on top of promises, so you will still need to understand how promises work in order to use async/await effectively.

What is Jam Stack? Is jamstack the future of static website?

Pulkit Singh — Sat, 17 Dec 2022 04:42:17 +0000

What is Jamstack?

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity. Mathias Biilmann, CEO of Netlify, coined JAMstack and describes it as

“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.”

The three elements of JAMstack include –

JavaScript – Entire execution on client-site for dynamic functionality
APIs – Reusable APIS for backend interaction accessed using HTTPS
Markup – Templates prebuilt with static site generators at deploy time!

Why choose jamstack? A Jamstack architecture can bring all sorts of benefits to the sites and to project workflows. Some of the key benefits are:

1. Security The Jamstack removes multiple moving parts and systems from the hosting infrastructure resulting in fewer servers and systems to harden against attack.

Serving pages and assets as pre-generated files allows read-only hosting reducing attack vectors even further. Meanwhile dynamic tools and services can be provided by vendors with teams dedicated to securing their specific systems and providing high levels of service.

2. Scale Popular architectures deal with heavy traffic loads by adding logic to cache popular views and resources.

The Jamstack provides this by default. When sites can be served entirely from a CDN there is no complex logic or workflow to determine what assets can be cached and when. With Jamstack sites everything can be cached in a content delivery network. With simpler deployments, built-in redundancy and incredible load capacity.

3. Performance Page loading speeds have an impact on user experience and conversion.

Jamstack sites remove the need to generate page views on a server at request time by instead generating pages ahead of time during a build. With all the pages are already available on a CDN close to the user and ready to serve, very high performance is possible without introducing expensive or complex infrastructure.

4. Static sites builders There are many static site builder tools for every framework possible, and others like Hugo and Jekyll. My go to pick is GatsbyJS

Conclusion

We learned about jamstack, and how jamstack sites are faster and more secure than traditional web building methods which requires additional web servers and databases. In traditional web methods like JAVA Spring or Laravel, database is hit each time a page is refreshed to fetch content. But in jamstack we only hit a database request at the time of build and all pages are generated statically which are faster and more secure, cause there's no database layer connected to the static HTML files, hence no fear of SQL-Injection or such things.