🏃🏻♀️ Improving rendering performance with CSS content-visibility
Recently I got an interesting performance bug on emoji-picker-element:
Recently I got an interesting performance bug on emoji-picker-element:
I’m on a fedi instance with 19k custom emojis […] and when I open the emoji picker […], the page freezes for like a full second at least and overall performance stutters for a while after that.
👍6❤5
🥷 Two CSS Properties for Trimming Text Box Whitespace
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the first formatted line of text and below the last formatted line of text in a text box, making the text box vertically larger than the content within.
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the first formatted line of text and below the last formatted line of text in a text box, making the text box vertically larger than the content within.
👍5❤4
🐹 Introducing @bramus/style-observer, a MutationObserver for CSS
A shortcoming of MutationObserver (imho) is that it cannot be used to subscribe to value changes of CSS properties.
To plug that hole I built a library allowing just that: @bramus/style-observer. It allows you to attach JavaScript callbacks to changes in computed values of CSS properties.
A shortcoming of MutationObserver (imho) is that it cannot be used to subscribe to value changes of CSS properties.
To plug that hole I built a library allowing just that: @bramus/style-observer. It allows you to attach JavaScript callbacks to changes in computed values of CSS properties.
❤7👍3
🌍 Submitting form data to Google Sheet from a React App
One thing that Google does that amazes me is the use cases that come with working with their workspace tools, be it Gmail, Google, or Meet. There are different ways to work with them.
In this article, we will explore integrating Google Sheets, a workspace tool created to serve as an online spreadsheet. It's a feature-rich text editor where you can create, edit and collaborate. How do we intend to do this? Imagine we are making a waitlist for a start-up product and need to get people's data and store it for a campaign. You can leverage the Google Sheets API to get this data instead of worrying yourself about the problem of creating a backend and some database.
One thing that Google does that amazes me is the use cases that come with working with their workspace tools, be it Gmail, Google, or Meet. There are different ways to work with them.
In this article, we will explore integrating Google Sheets, a workspace tool created to serve as an online spreadsheet. It's a feature-rich text editor where you can create, edit and collaborate. How do we intend to do this? Imagine we are making a waitlist for a start-up product and need to get people's data and store it for a campaign. You can leverage the Google Sheets API to get this data instead of worrying yourself about the problem of creating a backend and some database.
❤9👍4
📯 Memory Management in JavaScript with WeakRef and FinalizationRegistry
Today, we’re diving into the topic of memory management in JavaScript—but not in the traditional sense of garbage collection. Instead, we'll explore the powerful capabilities of WeakRef and FinalizationRegistry. These tools give developers control over weak references and asynchronous object finalization, allowing for more refined and efficient memory handling.
Today, we’re diving into the topic of memory management in JavaScript—but not in the traditional sense of garbage collection. Instead, we'll explore the powerful capabilities of WeakRef and FinalizationRegistry. These tools give developers control over weak references and asynchronous object finalization, allowing for more refined and efficient memory handling.
👍8❤3
👑 How to create Shapes with Inner Curves using CSS Mask
Naming those shapes is not that easy, same as creating them using CSS. Most of the time we reach for many elements/pseudo-elements and we try to stack them in a way to simulate the curvature. It’s a bit hacky, not flexible and it’s a lot of magic numbers everywhere! I will show you how to create those CSS shapes using one element and a flexible code that you can easily reuse.
Naming those shapes is not that easy, same as creating them using CSS. Most of the time we reach for many elements/pseudo-elements and we try to stack them in a way to simulate the curvature. It’s a bit hacky, not flexible and it’s a lot of magic numbers everywhere! I will show you how to create those CSS shapes using one element and a flexible code that you can easily reuse.
👍7❤4🔥3
💥 New scroll badge in DevTools: Find scrollable elements faster
Debugging scroll-related issues just got easier with DevTools' new scroll badge! This post explains what scrollable elements are, why they can be difficult to find, and how this new feature helps you quickly locate them. We'll also take you behind the scenes to see how we developed the scroll badge.
Debugging scroll-related issues just got easier with DevTools' new scroll badge! This post explains what scrollable elements are, why they can be difficult to find, and how this new feature helps you quickly locate them. We'll also take you behind the scenes to see how we developed the scroll badge.
👍7❤6
What do you need to grow as a frontend developer?
Select one or more options:
Select one or more options:
Anonymous Poll
26%
Courses on modern technologies
18%
Premium Figma templates for your projects
8%
Ready-to-use open-source solutions
18%
Step-by-step guides and tutorials
15%
Practical tasks and portfolio projects
3%
News, trends, and tool reviews
12%
Mentorship or project assistance
👍5
🪴 Come to the light-dark() Side
You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on prefers-color-scheme as well as extra complications that arise when letting visitors choose whether they want light or dark mode separately from the OS setting. And let’s not forget the color palette itself! Switching from a “light” mode to a “dark” mode may involve new variations to get the right amount of contrast for an accessible experience.
You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on prefers-color-scheme as well as extra complications that arise when letting visitors choose whether they want light or dark mode separately from the OS setting. And let’s not forget the color palette itself! Switching from a “light” mode to a “dark” mode may involve new variations to get the right amount of contrast for an accessible experience.
👍8❤5
💠 Migrating from Webpack and react-scripts to Vite: The Path to Fast and Lightweight React
Hello everyone! For a long time, my projects were built using Webpack. While powerful, Webpack often felt like a challenge to configure. Recently, my colleagues have been raving about Vite — a lightweight and fast tool for building web applications. Curious to try it out, I encountered some interesting discoveries and challenges, which I’ll share in this article. I hope my experience will help you make a decision and simplify your migration process.
Hello everyone! For a long time, my projects were built using Webpack. While powerful, Webpack often felt like a challenge to configure. Recently, my colleagues have been raving about Vite — a lightweight and fast tool for building web applications. Curious to try it out, I encountered some interesting discoveries and challenges, which I’ll share in this article. I hope my experience will help you make a decision and simplify your migration process.
🔥7👍2
⛅️ Meet the New Safe Assignment Operator (?=) in JavaScript
Modern JavaScript development often encounters tasks involving asynchronous operations and error handling. Typically, try-catch and async-await constructs are used for these purposes. However, they can bloat the code and make it harder to read. To address this issue, a new safe assignment operator ?= has been proposed, which significantly simplifies error handling and improves code readability. In this article, we’ll explore how this operator works, its features, and the benefits it offers developers.
Modern JavaScript development often encounters tasks involving asynchronous operations and error handling. Typically, try-catch and async-await constructs are used for these purposes. However, they can bloat the code and make it harder to read. To address this issue, a new safe assignment operator ?= has been proposed, which significantly simplifies error handling and improves code readability. In this article, we’ll explore how this operator works, its features, and the benefits it offers developers.
❤13👍3👎1