Editor's Pick
Plain JavaScript Replacements of Lodash Functions
This is intended to be a complete catalog of all the functions that Lodash provides, along with a description of how one would go about doing the same thing in plain JavaScript.
At the time of this writing there are currently 265 out of 294 entries that have been done.
CSS
Gradient Craft
Gradient Craft is a gradients library for Front-End which you can copy and paste into your projects.
CSS Fan Out with Grid and @property
A “fan out” is an expanding animation where a group of items appear one after another, next to each other, as though they were spread out from a stack. There’s usually a subtle bounciness in the reveal.
Note: You can try this method with any grid compositions — rows, columns, or both.
Tables with Fixed Headers and Horizontal Scroll
Turns out, creating an HTML table that has both horizontal scroll and fixed headers can be a tricky problem. As another developer said about this problem, You would think this is easy. But is really isn't.
Hopefully this helps anyone that is struggling to figure out a good solution for their scrollable table.
Drawing with CSS: Clay Character
Attempt to draw a figure that looks like made out of clay.
Source code here.
HTML
HTML Whitespace is Broken
Recently, I was working on a project which required a deeper understanding of how whitespace works in HTML. I was never a fan of HTML's whitespace behavior before as I've been burned by it a few times. But as I dug into it more deeply, I found myself discovering complex design issues that I wanted to explore in a blog post. This is partially to write down my knowledge in this space for future reference and partially to vent about how unnecessarily complicated it all is.
I’ve Been Doing Blockquotes Wrong
True to form, Heydon Pickering has written another blistering account of one of the most ubiquitous HTML elements, the <blockquote>. You’ve probably used a <blockquote> when writing HTML. I know I’ve used literally hundreds of them. What I didn’t know is that I’ve been using them wrong all these years.
JavaScript
How Microsoft Edge Is Replacing React With Web Components
Microsoft's Edge browser team is on a mission to swap out React UI components with native web platform components. We speak to the team lead.
Time duration in JS
This article explains how to use JavaScript's Temporal API to manage time durations effectively. It covers key topics like creating and balancing Temporal.Duration objects, handling complex scenarios such as time zones and Daylight Saving Time (DST), and comparing durations for accurate time calculations.
Plain JavaScript Replacements of Lodash Functions
This is intended to be a complete catalog of all the functions that Lodash provides, along with a description of how one would go about doing the same thing in plain JavaScript.
At the time of this writing there are currently 265 out of 294 entries that have been done.
React Pulsable
This is a simple react component that can be used to wrap other components and add a pulsing/skeleton effect to them.
Demo here.
LocalStorage vs. IndexedDB vs. Cookies vs. OPFS vs. WASM-SQLite
Compare LocalStorage, IndexedDB, Cookies, OPFS, and WASM-SQLite for web storage, performance, limits, and best practices for modern web apps.
The State of ES5 on the Web
In 2017, I wrote an article showing web developers how they could deploy ES6+ code (a.k.a. ES2015) to production, without needing to transpile it to ES5. This technique was liberating for website developers who wanted the freedom to write modern code without having to worry about transpiler or polyfill bloat.
Unfortunately, while many website developers were able to use this technique, most JavaScript library authors could not.
So what is the current state of ES5 on the web today? And what are the best practices for web developers when building code for production?
This article looks at the data we have to answer these questions. It also offers some concrete recommendations (based on that data) for how both website developers and library authors should approach legacy browser support moving forward.
Handling Paste Events in JavaScript
Welcome to the third and final post in the series. In the first article, I explained how JavaScript can read from the user’s clipboard. In the last article, I explained the opposite, writing to the user’s clipboard. Now I’m going to demonstrate how to add basic “paste event” handling in your web app. Luckily, much of what we learned in the past two articles will come in handy as the ‘shape’ of the data will be the same.
Color Thief
Grab the color palette from an image using just Javascript. Works in the browser and in Node.
TC39 Advances 10+ ECMAScript Proposals: Key Features to Watch
TC39 met in Tokyo and they have approved nearly a dozen proposals to advance to the next stages.
How to convert CommonJS to ESM
Here’s a thorough guide that covers everything you need to know to migrate your CommonJS project to ESM.
UX
Three UX Laws That Optimize Information Seeking
Some designers reference a set of “UX laws.” These are principles and biases known to psychologists and human behavior specialists. Three of these laws apply well to IA: Law of Proximity, Hick’s Law, and Selective Attention.
Miscellaneous
Open Source SVG Loading Icons
Collection of 100+ Open Source SVG-based icons you can use to show content is being loaded. Absolutely free with no attribution required.