Web Development

The Competitive Edge: Why Investing in Website Development Services Matters

Best Image Formats for the Web

The SEO-Friendly Approach to Frontend Architecture

Utilize AI to Master Semantic HTML for Developing SEO-Friendly Web Applications

How to create aesthetically pleasing cards using HTML and CSS

How to Detect Route Changes in Vue.js 3

Effortlessly Track and Respond to Route Changes with Vue Router’s useRouter()

Data Structures in Python Web Development

A Comprehensive Guide to Create, Process, and Store Data with Django

Optimizing Web Performance for Faster Loading

Explore powerful strategies like lazy loading, image optimization, and efficient code splitting designed to enhance your website's speed

The Basics of Web Hosting and Domain Names

Explaining how web hosting and domain names work

How to Get Started with Front-End Development: Learning Path for Beginners

Why JavaScript Knowledge is Crucial for Online Casino Site Development

Your Local LLM using FastAPI

FastAPI is a modern, fast, and easy-to-use web framework for building APIs with Python. It is based on the standard Python pointer type and supports features such as data validation, documentation…

Best Practices for Seamless User Interaction in Vue Application

Deploy Your React App with AWS EC2

How to deploy your React or Node.js application using the EC2 Amazon Web Service

Augmented Reality for Web Development: How to Integrate AR into Your Programming Projects

How the Domain Name System (DNS) Works: A Programmer's Guide

What Is the Difference Between Map and WeakMap

JavaScript provides many data structures for developers to choose from. Two of the most commonly used data structures in JavaScript are Map and WeakMap. Although both of these data structures have…

Integrating Flask and Streamlit

A Guide to Creating Interactive Web Pages and Embedding Them Into Existing Websites

How to Fix the Issue Where We Can’t Type in a React Input Text Field?

In this article, we’ll look at how to fix the issue when we can’t type inside a React input text field. To fix the issue when we can’t type inside a React input text field, we should make sure the…

How To Choose a Tech Stack For Your Next Project

'How to choose technology stack?' is a question that every startuper asks when starting a new project. Our article will try to give you an answer to this question.

How to Append JavaScript Data to FormData

Append primitive values, arrays, objects, and files to a FormData in JavaScript. Follow this tutorial and become a FormData master!

Real-Time Image Processing using WebSockets and Flask in Python and JavaScript

Real-time image processing has gained a lot of importance in recent years due to its various applications. The applications range from facial recognition to autonomous vehicles. In this tutorial, we…

Vue.js Vapor Mode and Other Roadmap Updates from Vue Amsterdam 2023

Vapor Mode is a compilation strategy that compiles a Vue SFC into JS output that is more performant and uses less memory. There are 2 ways to configure this

TS 5.0 Beta: New Decorators Are Here!

TypeScript 5.0 Decorator, TypeScript ES Decorator, TypeScript Decorator, TypeScript Decorators, How To Use Decorators in TypeScript, Decorator in TypeScript, The Magic of TypeScript Decorators, typescript decorators guide, TypeScript 5.0, TS 5.0

Interviewer: Can sessionStorage Share Data Between Multiple Tabs?

The question that most front-end developers don’t know the answer

It’s 2023 Now! React State Management: Context or Redux, Which Side Are You On?

Hi there. Today, I am going to discuss when to use what and why. Before I lay down my points and the foundation of my discussion, I would like to first get all of us on the same page about what…

How to Transfer Your Website Using LAMP Stack

How to Download Files with JavaScript

Support for downloading files is a very common feature of web application. Over the past few years, I have developed this feature many times. In this article, we will learn how to download files…

Creating JavaScript functions and web apps with GPT-3’s free code writer

The new wave of GPT “3.5” models also includes a more powerful davinci model, now version 003, and a new model specialized for writing code, called code-davinci-002. For the moment, this model is…

How to Add an Event listener for When an Element Becomes Visible with JavaScript?

The options object has the rootMargin which is the margin for when the element is considered to be visible. We pass in a callback into IntersectionObserver which runs when the element we’re watching…

How To Solve Hydration Error In Next.js

Today, let’s talk about hydration error that often occurs in Next.js. Most of us used Next.js must be familiar with the following error: The reason for the error has been clearly stated in the error…

Const vs. Function For React Functional Components

For some time now I have been wondering if there is a benefit to using function over const when declaring functional components, and vice versa. So, I decided to do a little research, and I will sum…

5 Ways to Download Front-end Files

1. a label, 2. window.open, 3. location.href, 4. location.? Other properties, and 5. XMLHttpRequest. What are the pros and cons of each method?

How to Check if a Value is Within a Range of Numbers in JavaScript

We can use the JavaScript’s greater than or equal to and less than or equal to operators to check if a number is in between 2 numbers. We can use the JavaScript’s greater than or equal to and less…

Batch Updates in React 17 or Earlier Versions

React batch updates for multiple setState() calls inside setTimeout, promises, and native event handlers

Angular DOM Manipulation: ElementRef, TemplateRef, and ViewContainerRef

An overview of elements, templates, views, and view containers in Angular and how to modify the DOM programmatically.

5 Ways To Detect Mobile Browsers in JavaScript

Responsive web design is not only about CSS

An Amazing Visual Studio Code Extension You Might Not Know About

Introducing Blackbox: The AI that gives you code solutions in response to the questions you enter.

How to Set Focus on an Input in React

Make the user experience better by automatically applying focus to inputs

Passing Arguments to Event Listeners in JavaScript

JavaScript essentials that you might not know about

How to Remove Duplicates From an Array of Objects in JavaScript

JavaScript: How to Add and Remove Event Listeners

What is the purpose of event listeners? Event Listeners ensure your page responds accordingly when a specific action occurs.

How to Create Your Own Layout Component in Vue.js

A guide on how to create basic layout components with Header, Footer, and content section.

React Router: How to Use the useParams() Hook

A guide (with examples) on how you can use the useParams() hook to improve your web applications.

Building A Beautiful Link Preview With Web Components

Recently, I improved the design of my Web Highlights app's dashboard by showing a link preview for each highlighted page. Here is what the new design looks like: In this article, I want to share how…

A Simple Way to Load Data Before Page Load in Angular

Create a Ping Pong Game Using JavaScript

Learn how to make a ping pong game with JavaScript and HTML

10 Best React Notification Libraries in 2022

Custom Dropdown Element with React & TypeScript

A guide on how to create a simple React dropdown component using TypeScript.

Angular: Reload/Refresh a Component or Entire Application & Reuse Logic Across Multiple Components

An Angular tutorial on how to reload/refresh a single component or the entire application and reuse the logic across multiple components.

Build a Sudoku Solver App With JavaScript

A JavaScript app to solve sudoku puzzles using backtracking

How to Sign In with Google in Node.js

A guide on how to sign in with Google for websites created in JavaScript.

How To Create A Custom-Made Search Bar Using HTML And CSS

How to Implement a File Upload Server with Node.js

Parse form data using the busboy module.

Why it is important to improve your visual/UI design skills for good web development

Async/Await in Angular ngOnInit using TypeScript Decorator

These TypeScript method decorators make lazy loading easy by making sure that certain async functions are always called before others.

Understanding the '413 Request Entity Too Large' Error

Dealing with the HTTP '413 Payload Too Large' error in Express

Convert Time From AM/PM to 24-Hour Format Using JavaScript

A tutorial on converting time from AM/PM to 24-hour format using JavaScript.

How to Find the Odd Numbers in an Array with JavaScript

How to Dockerize Your Angular Application

How to Handle Mouse Hover Events in React

Addressing the absence of the onHover event handler in React

Why Your Web Development Team Needs to Set Up a VPN

How to Create a Download Button Using React

A guide on creating a download button using React.

5 Free Courses for Students to Learn JavaScript in 2022

Custom Select Component in React and Styled Components

A guide on how to create a custom dropdown in React.

How to Boost Your Skills to Become a Better Developer

How to Upload Large Files Using Plain JavaScript

A guide on implementing a large file upload and breakpoint resume — solving an interview problem.

What is “void 0” in JavaScript?

Is it similar to undefined? Should we avoid it or not?

How to Use the JavaScript Nested Ternary Operator

2 JavaScript Approaches to Encode/Decode HTML Entities

No plugins required. 2 strategies — (1) A <textarea> HTML element & (2) Regex pattern implementations.

7 React Frameworks for Developers to Use in 2022

Comprehensive list of React frameworks for software developers to increase website speed and responsiveness in 2022.

Django Social Authentication: Login With Google

How to sign in and sign out using Google and Django framework.

How to Change an HTML Selected Option Using JavaScript

A tutorial on changing an HTML selected option with JavaScript.

Build Your Own Search Engine Using Python

Part 2: Build a front-end visualization for your search engine

Destructuring Function Parameters in JavaScript

An introduction to destructuring function parameters for beginners

How to Get the Difference Between Two JavaScript Objects

Get the list of the keys that are different between two objects using the Lodash isEqual method.

Enable HTTPS for Localhost During Local Development in Node.js

A tutorial on how to go from http://localhost:PORT to https://localhost:PORT.

How to Create a Toggle Button in React Using Conditional Rendering

Create a toggle button to show and hide data using the useState hook.

Step-by-Step Tutorial: React Redux 2022 with Hooks

Create a store from the ground up and integrate it with hooks.

How to Convert the Number of Seconds to a Time String in the hh:mm:ss Format with JavaScript?

The Difference Between useState and useRef in React

useState vs useRef in React: everything you need to know.

How to Declare Static Constants in ES6 Classes?

React with TypeScript or JavaScript — Which Side are You on?

JavaScript is the beloved child of frontend development, but TypeScript is the father of this beloved child. Learn to embrace it and get ahead in 2022.

Animating SVGs as React Components

Learn how to edit your favorite SVG in Figma and render it as a React component, to animate it using CSS.

Angular vs React vs Vue.js: Which is the Best Choice for 2022

Angular vs React vs Vue: Which is the Best Choice of Framework in 2022?

Sort React Components Using .sort()

A guide on the process of rendering child components from an array of objects and creating a Sort button using React.

Let's Create a Pagination Data Table with React and an External API

A guide on how to create a pagination data table with React using react-data-table-component

How Many Hooks are Present in React?

The hook is a way to write less and cleaner code in React.

6 Security Tips Every Web Developer Should Follow

Which UI Frameworks Support Vue 3?

About the state of Vue 3 support

How Students Can Easily Do JavaScript Homework

How to Detect Arrow Key Presses in JavaScript?

A guide on how to detect arrow key presses in JavaScript.

Top 9 Reasons You Should Pick The Best WYSIWYG Editors For Your Website

Planning to use a WYSIWYG editor but confused about whether it's a perfect pick or not? Read this blog. It covers the 9 best reasons to use WYSIWYG Editor.

The 13 Most Iconic Ways to Make the Most Out of Your Dashboard

Here are the 13 most iconic ways to ensure a modern dashboard with all essential features enabled. Read this blog and make the most out of your dashboard.

Which is Better? Class Component Or Functional Component in React?

Differences between functional components and class components in React.

Introduction to Closures with React

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). If you are having trouble understanding what Closures are or…

The Evolution of Web Development 2022

Will JavaScript Frameworks Rule the World?

Top 5 Tools For Web Developers

Essential Software Tools to Build Web Applications

Create Your Own Layout Component in React

A guide on how to create basic layout components with Header, Footer, and content section.

40 Portfolio Templates Free For Web Design

Today we will together learn about beautiful, free portfolio templates for website design and development.

10 Primary Skills You Need to Possess to Become a Front End Web Developer Within JavaScript

Error: Reanimated 2 failed to create a worklet — Maybe You Forgot to Add Reanimated’s babel Plugin?

If you ever chance upon this error, fret not. Pop over to babel.config.js, simply add 'react-native-reanimated/plugin' under “plugins” in'module.exports' (The above is a basic example to recreate the…

20 Header Design HTML For Website

Today we will learn about beautiful header examples built with HTML, CSS, JavaScript for web design and development!

Build a Dark Mode Toggle with JavaScript and localStorage

A brief article explaining how to build a dark mode toggle switch using JavaScript and localStorage.

Build a Simple React Login Form using Event Handlers and React Hook

A simple beginner-friendly React login form tutorial using the onChange and onSubmit event handlers and the useState hook.

10 Best Websites for Practising and Perfecting Front-End Development

How to Structure Your React Redux App

Feature folder structure of the react-redux app for easy maintainability.

How to Structure Your Django Project

Understanding the file structure and project layout of a Django web application.

How to Create an Object of React Components

How to Create a “Read More” Collapsible Component in React

The -webkit-line-clamp way

How To Create and Download Files in the Browser With Vanilla JavaScript

I wondered how easy it is

How To Keep Component State Across Pages in Next.js

Using the session storage & useLayoutEffect

How to Loop Through a Date Range with JavaScript?

How to Setup AWS Amplify Infrastructure with Terraform

A short tutorial on setting up the Terraform infrastructure required for a static web app built with React. The article focuses on the Terraform code and settings needed to set up an AWS Amplify project for continuous deployment. The AWS Amplify project makes use of CodeCommit as a source repository.

How to Match an Exact String with JavaScript

Fun VSCode Extensions Every Developer Should Try

7 VSCode Extensions for Web Development in 2021

How to Disable Dragging an Image from an HTML Page

5 useEffect Infinite Loop Patterns

Python and Django: Create a Dependent Chained Dropdown Select List

A Guide to the 20 Best VSCode Extensions for Frontend Developers

A comprehensive guide to the most useful extensions for VSCode for frontend development

How to Dynamically Load Scripts in React

How to Make the React useEffect Hook Not Run on Initial Render?

We can make the React useEffect callback not run on the first render by creating a ref that keeps track of whether the first render is done. Then we can check the ref’s value to see when the first…

Let's Build a Website Login Page with HTML, CSS, JavaScript and an External API

7 Awesome APIs for All Frontend Developers

Useful APIs that you might need for your next projects.

Build a Blog App with React — Intro and Setup

Part 1: In the first part, we deal with the basics of the project and set it up.

How to Create a Page Load Animated Loader in React

How to Pass Props from Child to Parent Component in React

Learn this neat little trick to pass chunks of props back up the component tree!

Hiding DOM Elements in React Based on Scrolling

Creating an Interactive Background in React with Particles.js

A tutorial for making responsive and elegant interactive backgrounds in a few simple steps.

How to Detect the Closing of a Browser Tab

Build A Hybrid App Using Cordova + Angular

Cordova is a cross-platform tool used to develop a Hybrid App. Hybrid apps using Cordova are web apps written using HTML, CSS, and any JavaScript framework/library. Cordova is responsible for…

The Modern CSS Developer Roadmap

Key Concepts to Mastering CSS

Create a browser-agnostic PWA install button

The whole point of PWAs is that they work everywhere. So an install button should by definition be browser-agnostic. Here is how to build the perfect PWA install button.

How To Escape Tutorial Hell

The 5 Things That Helped Me Escape Tutorial Hell

Number Base Conversion in JavaScript

Converting from one base to another in JavaScript is easier than you thought

Improve Your End to End Tests with Cypress Intercept

Learn how to capture network calls for stubbing, assertions, and more.

How to set up SonarQube locally on a React TypeScript Project

Hosting a Node.js app on Heroku in Less than 5 Minutes

Connecting React with LocalStorage

A Guide to Creating a LocalStorage React Hook

User Gesture Restricted Web APIs

API can only be initiated by a user gesture — what does this error mean, and how can you fix it?

Build a Captcha Generator Using JavaScript

How to Count Page Views With The Count API

An easy way to count your page views with JavaScript.

The Complete Full Stack Web Developer RoadMap 2022

The ultimate guide to becoming a modern full-stack web developer.

What is the Difference Between Java and JavaScript?

How To Reload a Page Whenever a User Makes a Change with React/Redux

How to Create a Custom Table Component in React

Top Node.js Frameworks For Web Apps In 2022

6 Best Node.js Framework For Web Apps in 2022

50 VS Code Extensions That Will Make You a Better Developer

If you are a programmer, there is a high chance that you are using the Visual Studio Code for your development. It is a free source code editor released in 2015, developed by Microsoft and runs in…

JavaScript Frameworks, Performance Comparison 2020

The ultimate performance battle between JavaScript frameworks

Creating a Simple Accordion with HTML, CSS and JavaScript

A simple guide on how to build an accordion

How to Add Emoji to Your Angular application

Nowadays, it is impossible to escape emojis. We are surrounded by smilies that express our feelings or have the sole purpose of shortening our sentences. Whether you are laughing 😂 or whether the…

How To Create Horizontal + Vertical Scroll Shadows

In Pure CSS or with CSS + JavaScript

How to Render Next.js with NestJS

Did I just make Next.js better?

4 Ways to Check if the Property Exists in JavaScript Object

How To Add, Modify and Delete JavaScript Object Literal Properties

How to Show a Loader Until the Fetch API Has Finished Loading the Page

How to Create a Toggle Button in Vue.js

Building an Animated Counter with React and CSS

A guide on how to create your own version of an animated counter component that you come across all over the web

Easy table sorting with JavaScript

A simple technique for static or dynamic sites

4 Ways to Create a Modal Popup Box with HTML, CSS and Vanilla JavaScript

How to create a basic calculator using HTML, CSS and JavaScript

How to Optimize your Angular Application for Production

Optimizing your Angular application for production

Build a Simple Referral System With Node.js and MySQL

Get more signups on your next project with a referral program

6 Browser APIs You Need To Know As A Front End Developer

Browser APIs (or web APIs) are the APIs that come built-in with the browsers. They allow developers to perform complex operations without dealing with the sophisticated lower-level code. There are a…

Creating a dynamic HTML table with JavaScript

A hands-on guide for a Server-Side Rendering React app

In the previous article, we described how to make a production build and deploy it to a server. Naturally, the next step is the server-side rendering. We are going to walk through the process by…

A Simple encryption library in Node.js with TypeScript

How to encode and encrypt simple data

A guide to creating a React app without create-react-app

Creating a React App from scratch

How to build a website with only JavaScript

How to Build a Search Bar with JavaScript

A quick walkthrough on how to build a search bar feature with JavaScript

Next.js With Sequelize Web Application, a Full-Stack Web Development

Next.js has become more advance and cutting edge to developers for use as a Full-Stack web Application. The community and people behind Vercel have done a great job on Next.js future.

Public, private, and role-based routes in React

How to Create a Slider in JavaScript

Learning Web Development in Practice

Parsing post data 3 different ways in Node.js without third-party libraries

application/json, application/x-www-form-urlencoded, and multipart/form-data

Implementing Flask login with hash password

A concise post that helps improve your authentication system

Using Node.js to Display Images in a Private AWS S3 Bucket

Bypassing the File System and Using Streams

32+ funny Code Comments that people actually wrote

Well, This writing will show you how code commenting can be funny too. I have listed some funny code comments people encountered in production code. Note: If you want to learn more about JavaScript…

How to display images from local assets/images folder when working with React

It's not as straightforward as it might seems to be

React: Updating a value in state array

How to update just one value in an array of objects in a state

Create a CRUD Rest API with Node and Express.js

To build APIs in Node.js we will use Express.js framework. Any other framework can also be used but Express.js is very popular when using Node.

Angular: Use Observable Subscriptions & Async-Pipe to Prevent Memory Leaks.

Everything you need to know about HTML5 local storage and session storage

Understand it by building actual practical applications

Convert String to Different Case Styles: Snake, Kebab, Camel and Pascal Case in JavaScript

Conversion from string to different ways of word combination in JavaScript.

I created the exact same app in React and Svelte. Here are the differences.

React vs Svelte. Finally, a side-by-side code comparison! Because you've heard the fuss about Svelte, and now you want to know what the hype is all about.

Closing a Window with JavaScript

What works, what doesn't, in a nutshell

How to Detect a Sequence of Keystrokes in JavaScript

What Is The Best Way To Display A PDF In A Web App?

Understanding The Set Object in JavaScript

Learn about the Set object with practical examples

Send Emails From Your Website With EmailJS

Are you struggling with the behind code of your website contact form, then let this article be your life-saver.

Light and Dark Mode in React Web Application with Tailwind CSS

How to make a simple React web application using Tailwind CSS

How to Use the Geolocation API in Your React App

Get the user's coordinates and use them in your next React app

How to convert any web page into a React web page

DangerouslySetInnerHTML in React JS Explained

Let's Build a MERN Stack E-Commerce Web App

Part 1: Setting up the Project

8 on Scroll Animation JavaScript Libraries You Can Consider

Create awesome scroll-triggered animations on elements on your website.

5 Useful Tricks JavaScript has been Hiding from You

A little guide that might benefit you

5 Skills All Front-End Developers Need to Learn in 2021

Things you should know as a frontend developer in 2021.

2 Excellent Websites For Web Developers

If you're a Web Developer, you should check these two resources out!

7 Free React Templates You can Use for Your Projects

Awesome React templates and themes you can start with to build your next project.