✅ Javascript Reduce method Example.
▫️ Finding the longest word in a given string.
▫️ Finding the longest word in a given string.
function longerWord(a, b) {
if (a.length > b.length) {
return a;
} else {
return b;
}
}
const sentence = 'Hey there what are you doing this Wednesday night';
const longest = sentence.split(' ').reduce(longerWord);
console.log(longest);
// Wednesday❤14👍9
🏃🏻♀️ 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