frontend development

Styled Components have emerged as a popular solution for incorporating CSS into modern JavaScript. They serve as a successor to CSS Modules, enabling developers to write CSS that is scoped to a specific component without leaking styles to other elements on the page. A Brief History In the early days of the web, CSS didn’t exist, and layouts were created using tables and frames. Eventually, frameworks like Bootstrap and Foundation emerged to simplify grid and layout creation....

The package.json file is an essential component in many Node.js-based app codebases. If you work with JavaScript or have interacted with a JavaScript project, Node.js, or a frontend project, it’s likely that you are familiar with the package.json file. But what exactly is it for? What should you know about it, and what can you do with it? In this guide, we will explore the package.json file, its structure, and its properties....

In frontend development, there are several terms that may be unfamiliar to you. This glossary provides explanations of these terms to help you better understand JavaScript and frontend development concepts. Let’s dive in! Terms Asynchronous Asynchronous code allows you to initiate a task, forget about it, and receive the result when it’s ready, without having to wait for it. An example is an AJAX call, where you can continue with other tasks while waiting for the response....

I created this cheat sheet to serve as a quick reference for common CSS properties in Tailwind along with their corresponding classes. As a beginner, I often find myself needing to look up these classes in the Tailwind documentation. With this cheat sheet, you’ll have a handy resource at your fingertips to help you build muscle memory and speed up your development process. Here are the CSS properties and classes that I use most frequently:...

In this article, we will provide you with a comprehensive cheat sheet of common commands and instructions that you can use while coding in Vue.js. This cheat sheet covers a wide range of topics, including directives, working with form elements, modifying events, mouse event modifiers, keyboard event modifiers, lifecycle hooks, built-in components, global configuration of the Vue object, methods of the Vue object, and options passed to a Vue object....

Recently, I’ve been exploring Vite, which is often referred to as “the new create-react-app”. While there are many tools that serve a similar purpose, such as Parcel, esbuild, Rollup, Rome, webpack, and Turbopack, Vite stands out in its unique approach. Vite describes itself as a “next-generation frontend tool”. It functions as a module bundler like webpack or Turbopack, but with a significant difference. Instead of creating a single bundled JavaScript file that is sent to the browser, Vite leverages the native browser’s ES modules support to directly ship modules to the browser....