The SEO-Friendly Approach to Frontend Architecture
Utilize AI to Master Semantic HTML for Developing SEO-Friendly Web Applications
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
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…
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
What Is the Difference Between Map and WeakMap
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.
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…
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…
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…
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?
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.
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
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…
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.
How to Sign In with Google in Node.js
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
How to Handle Mouse Hover Events in React
Addressing the absence of the onHover event handler in React
How to Create a Download Button Using React
A guide on creating a download button using React.
Custom Select Component in React and Styled Components
A guide on how to create a custom dropdown in React.
A guide on implementing a large file upload and breakpoint resume — solving an interview problem.
Is it similar to undefined? Should we avoid it or not?
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.
Build Your Own Search Engine Using Python
Part 2: Build a front-end visualization for your search engine
An introduction to destructuring function parameters for beginners
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.
The Difference Between useState and useRef in React
useState vs useRef in React: everything you need to know.
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.
Which UI Frameworks Support Vue 3?
About the state of Vue 3 support
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
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.
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
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.
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 a “Read More” Collapsible Component in React
The -webkit-line-clamp way
I wondered how easy it is
How To Keep Component State Across Pages in Next.js
Using the session storage & useLayoutEffect
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.
Fun VSCode Extensions Every Developer Should Try
7 VSCode Extensions for Web Development in 2021
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 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…
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 Pass Props from Child to Parent Component in React
Learn this neat little trick to pass chunks of props back up the component tree!
Creating an Interactive Background in React with Particles.js
A tutorial for making responsive and elegant interactive backgrounds in a few simple steps.
Build A Hybrid App Using Cordova + Angular
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.
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
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?
How to Count Page Views With The Count API
The Complete Full Stack Web Developer RoadMap 2022
The ultimate guide to becoming a modern full-stack web developer.
How To Reload a Page Whenever a User Makes a Change with React/Redux
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…
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
How to Render Next.js with NestJS
Did I just make Next.js better?
How to Show a Loader Until the Fetch API Has Finished Loading the Page
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
A simple technique for static or dynamic sites
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…
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
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.
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
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
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.
What Is The Best Way To Display A PDF In A Web App?
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
DangerouslySetInnerHTML in React JS Explained
Let's Build a MERN Stack E-Commerce Web App
Part 1: Setting up the Project
Create awesome scroll-triggered animations on elements on your website.
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!