freeCodeCamp·3yIntroducing freeCodeCamp Press – Free Books for Developers
FreeCodeCamp has published more than 10,000 tutorials over the years. Now we're publishing more comprehensive books and handbooks that will teach you everything you need to know to get started with a certain programming language or tool. The freeCodeCamp community publishes shorter, more focused guides that aim to answer a specific question.
Hacker Noon·3yMastering JavaScript Shorthands
We'll explore the art of JavaScript shorthands - nifty techniques that make your code more concise and elegant. We'll dive into real use case examples in both vanilla JavaScript and shorthand form. The Ternary Operator: Conditional Assignment Use Case.
Medium·3yA Front-End Application Folder Structure that Makes Sense
The goal is to apply some kind of modularisation that will make the codebase easier to understand by setting boundaries between features and minimizing code coupling and side effects. By default when scaffolding a new project using one of the popular front-end frameworks the component structure is flat and follows no hierarchy whatsoever.
This is Learning·3yChrome Debugger is easier to use than you might think
Chrome Debugger is easier to use than you might think - DEV Community Please, don't tell me you’re still using to debug your application. If you never used a debugger, imagine being able to run the code line by line, where you can see all values of your variables at any given time.
asayer·3yLazy Loading in JavaScript
Lazy Loading in JavaScript Back Lazy loading is a method used to defer the loading of non-essential content until it becomes necessary for users to view it. It delays the display of certain elements, such as images, videos, and other multimedia, until the user actively interacts with the webpage. This article will look into the benefits of lazy loading.
freeCodeCamp·3yJavaScript Tips to Help You Build Better Web Development Projects
JavaScript is a widely used web among programming language. I recently had a 30 Days of JavaScript Tips challenge on Twitter (now, X) where I shared 30 different JavaScript tips with my followers daily for 30 days. I decided to compile those tips into one giant tutorial for campers and everyone else on the internet.
habr·3yReact Custom Hook: useArray
"useArray" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The useArray hook uses the useState hook from React to manage the array state. The advantages of using this custom hook are twofold: it simplifies the management of array states and provides a cleaner and more readable code structure.
builder.io·3yUI over APIs
Server-driven UIs are not just a theoretical concept; they are being implemented by some of the biggest names in the tech industry. They offer a dynamic and flexible way to generate UIs on the server and send them to the client through APIs. This approach can provide faster iteration and more personalized user experiences.
This is Learning·3yLearning Web Development Together with a Real Project
The app is currently based on Next.js with TypeScript and Tailwind CSS. We manage some data, specifically from the GitHub APIs using the GraphQL endpoint and React Query. There's a login feature with NextAuth using GitHub as a provider. The project is open to any kind of contribution, from fixing typos to adding new features.
Community Picks·3yPatterns for Reactivity with Modern Vanilla JavaScript
Patterns for Reactivity with Modern Vanilla JavaScript are Core to Web Development. ‘Reactivity’ is how systems react to changes in data. Reactive Object Properties with Proxies in JavaScript can be the foundation for performing reactivity after setting or getting properties on an object.
habr·3yReact Custom Hook: useAsync
The useAsync hook takes in a callback function that performs the asynchronous operation and an optional array of dependencies. It returns an object with three properties: loading, error, and value. The hook employs the useState and useEffect hooks to manage the loading state and invoke the memoized callback function when necessary.
freeCodeCamp·3yReact Server Components – How and Why You Should Use Them in Your Code
React has changed how we think about building user interfaces. We must adapt to this new mental model to fully leverage its power in building applications. In this tutorial, you'll learn about React Server Components (RSC) You'll learn exactly what they are and how they work, and more importantly, what problem they solve.
Hacker Noon·3yA Quick Module Design Pattern Example in JavaScript
A Quick Module Design Pattern is a way to encapsulate and organize code in a self-containing module that can expose certain functionalities while keeping the rest of the code private. This helps prevent variable and function name clashes, improves code maintainability, and promotes the concept of separation of concerns.
habr·3yReact Custom Hook: useDarkMode
"UseDarkMode" Hook is one of the many carefully crafted hooks available in the collection of React custom hooks. It combines two other handy hooks and, to provide a seamless dark mode experience. It automatically detects the user's preferred color scheme and persists the dark mode state in the browser's local storage.
freeCodeCamp·3yMastering JavaScript Functions for Beginners
A crash course on the freeCodeCamp.org YouTube channel will teach you everything you need to know about functions in JavaScript. Tapas Adhikary has over 18 years of coding experience and has a passion for teaching and creating open source communities. The crash course will provide you a comprehensive overview of functions and JavaScript.
habr·3yReact Custom Hook: useClickOutside
The useClickOutside hook is designed to simplify the process of detecting clicks outside a specified component. It listens for click events on the document level, allowing you to trigger a callback function when a click occurs outside the provided component's reference. It works seamlessly with functional components using the useState and useRef hooks.
Hacker Noon·3yHow to manage state in Next.js 13 using Redux Toolkit.
We will go through a real world example whereby, we need to store authentication data in redux state and in this case, it will be persisted. We will also access this data in the some of the components that need it. We will use Redux Toolkit to manage state in Next.js.
habr·3yReact Custom Hook: useDebugInformation
React Custom Hook: useDebugInformation is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook tracks the number of renders, changed props, time since the last render, and the timestamp of the last rendering. UseDebugInformation can be applied in various scenarios.
freeCodeCamp·3yHow to Build a JavaScript Utility Library like Lodash
Lodash uses a functional programming approach in implementing common tasks in JavaScript. With a package size of over 1.4MB, having Lodash on your front-end can hinder the performance of your website. In this article, I'll be showing you how to implement some of the key functionalities provided by Lodash.
Community Picks·3yFantastic closures and how to find them in React
React Closures in JavaScript must be one of the most terrifying features of the language. We use it every time we write any React code, most of the time without even realizing it. But there is no getting away from them in the end: if we want to write complex and performant React apps, we have to know closures.
Hacker Noon·3yHow to Build an Invoice PDF System Using React.js, Redux and Node.js
How to Build an Invoice PDF System using React.js, Redux and Node.js. The GitHub repository for the project is available for reference. Testing, Debugging, and deployment are covered. The tutorial guides you through building an invoice PDF system using React, Redux, and node.js.
asayer·3yBuilding a drawing application with HTML5 Canvas
The HTML5 Canvas element provides a drawing surface allowing you to manipulate pixels and programmatically create various shapes and graphics. Drawing applications built with HTML5 canvas allow users to interact with the canvas, capturing mouse movements and clicks to draw, erase, or manipulate elements in real-time.
