freeCodeCamp·3y8 React Projects to Build in 2023
8 React Projects to Build in 2023 will show you what's possible to make with React. Check out the React Bootcamp to see how to make each of them step-by-step. Todo apps are a great project to begin with because you don't need any third-party libraries to build them.
Community Picks·3yHow React 18 Improves Application Performance – Vercel
How React 18 Improves Application Performance - Vercel Engineering Wednesday, July 19th 2023. Learn how concurrent features like Transitions, Suspense, and React Server Components improve application performance. We'll explore how these latest features impact and improve your application's performance.
Sysco LABS Sri Lanka·3yThe Art of Micro Frontends
The Art of Micro Frontends is a modular architecture design for web. The concept of micro frontends is an extension of the micro services used in backend. Companies such as Netflix, Zalando and Capital One have pushed the pattern to the front, preparing the groundwork for micro-frontends.
Hacker Noon·3yIs Your Code Slow?: Avoid These 19 Common JavaScript and Node.js Mistakes
We're spotlighting the top 19 performance pitfalls that can secretly slow down JavaScript and Node.js apps. We'll explore what causes them through illustrative examples and actionable solutions to optimize your code. The good news?
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.
Community Picks·3yBuilding a Design System with React Web Components
Building a Design System with React Web Components is a simple way to build a universal design system with React. We compiled React to Web Components using wrappers, polyfills and tooling to make them work in every context. The implementation turned out tougher than we anticipated but we're happy with the result.
freeCodeCamp·2yinnerHTML vs innerText vs textContent – What's the Difference?
Learn about the differences between innerHTML, innerText, and textContent properties in HTML and how they handle HTML markup and content. Be cautious when using innerHTML due to security risks. innerText focuses on rendered text content, while textContent ignores HTML tags and includes hidden content. Update content using all three properties.
Amplication·3yUsing Parallel Processing in Node.js and Limitations
Node.js uses a synchronous event loop that takes in code from the call stack and executes it. The event loop delegates all I/O-related operations to a set of threads that perform these operations in parallel. This means that while the event loop executes a CPU-intensive process, applications are blocked from further execution.
Community Picks·3yThe Complete Guide to Becoming a Web Developer: Part 3
The Document Object Model, or DOM, is a programming interface for HTML and XML documents. When you load a web page, the browser fetches the HTML and parses it, creating the DOM. This DOM is stored in the browser’s memory, not as a string, but as a set of interconnected objects.
Svelte Blog·3ysvelte.dev: A complete overhaul
svelte.dev: A complete overhaul of the old website. The new site comes with accessibility fixes, new features and bottom navbar. The website now has a dark mode toggle, which is also synced with your OS's dark mode settings. It was reimplemented to upgrade to CodeMirror 6.
Medium·3yCallback Refs in React
Callback Refs are a way to set a ref to a function instead of directly to a DOM element. This function is called with the component instance or DOM element as its argument when the component is mounted or updated. Callback refs are particularly useful when you need to access properties or methods that are not directly available through props.
Syncfusion·3yVirtual DOM vs. Shadow DOM
This post discusses the definitions of virtual DOM and shadow DOM, highlighting their significant differences. It explains that virtual DOM is used for solving performance issues, while shadow DOM is used for encapsulating and isolating elements. It also mentions that React.js and Vue.js are JavaScript libraries that implement virtual DOM.
Community Picks·3yThe truth about CSS selector performance
The way you write CSS selectors does play a role in how browsers render your web pages. This heavily depends on the web page, the size of the DOM tree, the amount of CSS rules, and whether the DOM changes often. Microsoft Edge DevTools has a Performance tool that can be a real eye opener when your app starts feeling slow.
builder.io·3yUnveiling the Magic: Exploring Reactivity Across Various Frameworks
React can be broadly defined as the automatic update of the UI due to a change in the application's state. The framework does not need to execute any code and knows exactly which DOM nodes need to be updated. In real-world applications, the state, event, and binding are not always in the same component.
asayer·3yExploring Million.js, a high-performance web framework
Million.js is a minimalistic JavaScript framework designed to handle DOM elements efficiently. Million.js uses a granular approach by updating only the necessary parts of the DOM. The Block virtual DOM is based on the concept of Blockdom, which facilitates virtual DOM diffing for re-rendering the actual DOM.
Community Picks·3yPHP: PHP 8.3.0 Release Announcement
The PHP 8.3 release announcement includes changes to PHP constants, the addition of the #[\Override] attribute, and new methods in the Randomizer class. It also mentions updates to DOM, IntlCalendar, LDAP, mb_str_pad, posix, ReflectionMethod, socket, ZipArchive, and other functions and constants.
Community Picks·3yTeleportation in React: Positioning, Stacking Context, and Portals
React: Positioning, Stacking Context, and Portals are all available in React. We need Portals to escape the "clipping" of content when rendering elements inside elements with. The real thing is not yet available, so let's just teleport components in the DOM for now.
Josh W Comeau·3yThe Perils of Hydration
The Perils of Hydration: Understanding how Gatsby/Next manage server-side rendering and hydration Introduction I ran into the strangest issue recently. In production, the bottom of my blog was doing something… unintended: A bit of digging into the Elements tab in the devtools revealed the culprit… My React component was rendering in the wrong spot.
Laravel News·3yLivewire v3 Has Been Released
Livewire v3 has been released. Caleb Porzio demoed a ton of the new features in his talk at Laracon. The core of Livewire has been totally rewritten from scratch. The new core architecture will also be much easier to maintain for Caleb and the Livewire core contributors.
asayer·3yAn Introduction to React Portals
React Portals is a portal that paves the way for some sort of component to pass through safely without bothering other components. This article will explain everything about the component and how to use it in your code. The main purpose is to render components onto the webpage that may be in the form of an overlay.
asayer·3yReact Social Logins with Passport JS
Passport.js is a popular authentication middleware for Node.js that provides a simple and flexible way to authenticate requests made to a web application. It can be used with various authentication mechanisms, such as username and password, two-factor authentication, or social media login, to provide a secure and flexible authentication system.