Community Picks·4yJavaScript Patterns Workshop
The goal is to raise awareness to certain patterns, the problems they solve, and their implementation. The patterns covered on this website and in the workshop can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario.
freeCodeCamp·4yHow to Prepare for React Interviews – Front-End Technical Interview Guide
A polyfill is a custom implementation of native JavaScript functions. The.map() polyfill method takes in a callback that gets executed inside the myMap body. This is nothing but the length of the array through which theMyMap function is called. Since map() returns a new array, we create an empty array and push the results into it. In order to implement debouncing, let's take an example.
Better Programming·4yGoodbye Electron. Hello Tauri, A Rust-powered Backend Framework
Electron is a Rust-powered Backend Framework paired with a React frontend to offer an awesome browser-less experience. Tauri is a toolkit that helps developers make applications for the major desktop platforms — using virtually any frontend framework in existence. For completeness, you can find the entire code base for my community project on my Gitlab.
Community Picks·4ygitignore.io is great
gitignore.io is a tool that is so profoundly helpful that I've forgotten what life was like without it. Its purpose is simple: for any project you're working on, it'll generate a valid.gitignore file for you. You can write it by hand, or grab one from another project you work on.
freeCodeCamp·4yHow to Lazy Load Images in React
Lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern. For browsers like Firefox, the loading= "lazy" property doesn't work in an iframe element. To use the placeholder image, add a PlaceholderSrc attribute to the image with the value of the image. You can see how it is.
Community Picks·4yBuilding a Full Stack Web3 YouTube Clone with Next, IPFS, The Graph, Solidity, and Polygon
Next, IPFS, The Graph, Solidity, and Polygon Table of contents. Building a full-stack YouTube clone on top of the Polygon blockchain using the below tech stack. The next step is to set up a next.js app and install the required dependencies. The smart contract is a decentralized program that responds to events by executing business logic.
Tuts+·4yLearn React 18: The Complete React Developer Course
Learn React 18: The Complete React Developer Course is 3 hours 40 minutes long and it’s split into 27 lessons in total. In React, we primarily use props (short for properties) to pass data to our components. The easiest way to understand props is to think of them like the attributes you can pass to HTML elements in web development.
Community Picks·4yESLint + Prettier + Typescript and React in 2022
ESLint is a JavaScript linting open source project and is used to find problems and syntax errors in your code. It will help us find broken logic that would be found only in run time. We are going to use the basic configuration of ESLint and Prettier. If you want to learn more about ESLint rules you can check out the rules page. Don’t hesitate in commenting below.
Next.js·4yBlog - Next.js 12.3
Next.js has built-in support for automatically configuring TypeScript. The next/image and next/future/image will be able to easily migrate using our next-image codemod. This previously experimental option is now stable and can be used with the following configuration option: s // next.config.js. The new Image component is currently stable and no longer requires an experimental flag. The next major version of Next.JS will be available.
freeCodeCamp·4yHow to Animate Your React Apps with 1 Line of Code
The power of AutoAnimate is that it allows you to animate your entire app using a single function called autoAnimate. In this tutorial, we will see how to implement virtually every common animation in your React apps with one line of code. You can become a pro in 30 minutes a day with my React Bootcamp. Go from absolute beginner to React professional in just 30 minutes.
Community Picks·4yBuilding a beautiful Kanban board with Node.js, React, and Websockets 🦄 ✨
Novu is the first open-source notification infrastructure. Users will be able to sign in, create and update various tasks, and add comments. We will do it with a beautiful drag-and-drop feature using React, Socket.io, and React beautiful DND. It is divided into three pages: the Login page, Task page – the central part of the application, and The Comments page – where users can comment on each task.
LogRocket·4yVite 3.0 vs. Create React App
Vite is built on top of esbuild, a JavaScript bundler written in Go, which bundles dependencies 10-100 times faster than JavaScript-based bundlers. Vite leverages the browser’s native ESM to parse and compile your code as the browser requests it. The browser only needs to pre-bundle your dependencies.
ITNEXT·4yFront-end Testing Principles
For the Front-End we need to focus on only two targets for our tests: the end-user who interacts with your component in the browser and the developer who renders and uses your component. Writing your tests in isolation will guide us to a better way to write your tests to improve their reliability, simplify the code, and increase confidence.
Community Picks·4yThe new wave of Javascript web frameworks
This post will get us up to speed on the bleeding edge of frameworks in the Javascript ecosystem. It's challenging for those entering the industry to follow what’s happening amongst the new libraries, frameworks, concepts, and strong opinions. We’ll make sense of the current landscape by looking at the past pain points when Frameworks like Backbone and Knockout and many others popped up.
asayer·4yBetter Tables with React-Table
React-Table is a headless utility used to build robust tables and datagrid experiences for React applications. In this article, you will learn how to use react-table to build a table with sorting, filtering, and pagination. The useTable hook, in turn, returns a table instance. This optimizes and improves the component’s performance. The using this hook, on the table.
Community Picks·4yWhy Create React App is Outdated in 2022
Create React App uses Client Side Rendering (CSR) to bundle the Javascript files and builds one single file to render it all on the client. This is all done within the client’s browser as React does not have access to Server Side Renders (SSR) in the default configuration.
Community Picks·4yReact I Love You, But You're Bringing Me Down
React I Love You, But You're Bringing Me Down Dear React.js, we've been together for almost 10 years. We have to split contexts to avoid unnecessary rerenders. Most of the time, when a component uses a ref, it passes it to a child component. It's been 10 years, and you still have that flaw.
Community Picks·4yReact 18 Upgrade Guide and New Features
React 18 can now adapt the rendering process to suit client devices. You can either create a new React project or reinstall React in an existing project to migrate from React 17 to React 18. In React 18, hydration uses the hydrateRoot() API imported from “react-dom/client” and doesn’t require a separate render() method as in the code snippet below. The callback function is not allowed in React 18.
Syncfusion·4yJavaScript API Mocking Techniques
API Mocking Mocking is a client-side mocking framework that mocks the API in the browser by using the Pretender library. It has many built-in tools: serializer, route handlers, database, models, fixtures, and factories. It enables emulating dynamic behavior between the front end and back end, rather than mocking the same response over and over again by hitting an endpoint.
Vercel·4yNext.js Layouts RFC in 5 minutes – Vercel
Next.js team at Vercel released the Layouts RFC a few months ago. The RFC is detailed and covers both basic and advanced features. This post will cover the most important features of the upcoming Next.js changes landing in the next major version that you should be aware of.
DEV·4yMe & React: 5 years in 15 minutes
React has finally started making sense to me. It was almost the same as my old pal HTML, except JSX allowed splitting HTML pages into tiny dynamic building blocks. A stateful component had a state which was triggering a re-render on change, while the stateless had only the render part and were rendering the same thing. It made debugging quite mind bending, as sometimes console.log has been printed a microsecond before the state was actually propagated. Redux has treated me a bit better.
asayer·4ySEO Tips for Next.js sites
Next.js is an open-source react framework tool created by Vercel. It enables you to use React to create server-side rendering and static web applications. Next.js has a few different techniques and APIs that developers can use to ensure we’re providing as much SEO value as possible.
Community Picks·4yUnderstand call, apply, and bind functions in JavaScript like never before.
JavaScript's call() and bind() functions are often misunderstood. In this post, we'll take a detailed look at how call, apply, and bind work in JavaScript. We'll discuss the differences between the three, and when you would want to use each one.