I stopped destructuring everything
I used destructuring every object in JavaScript. Here's why keeping objects intact often makes code easier to read, debug, and maintain.
Matt Smith
Latest posts
The quiet problem with unnecessary async
Not every JavaScript function needs to be async. Unnecessary async boundaries can spread Promise-based complexity through an entire application.
I keep tripping over "true, false, true"
createUser(user, true, false) works. It's also surprisingly hard to read. Here's why I've stopped writing APIs like this in JavaScript.
Why I don't chain everything in JavaScript anymore
JavaScript chaining looks clean at first, but it can hurt readability and hide extra work. Here's when to break chains into simpler steps.
You probably don't need to lift state
A quick React tip: don't lift state by default. Keep it close to where it's used unless you actually need to share it.
Native JSON modules are finally real
JSON imports finally work natively. Learn how import ... with { type: 'json' } changes runtime behavior, caching, and makes bundlers optional.
From instanceof to Error.isError: safer error checking in JavaScript
Why instanceof error fails across realms in JavaScript, and how Error.isError() fixes it.
Explicit resource management in JavaScript
JavaScript is getting explicit resource management. Learn how 'using', 'Symbol.dispose', and scoped lifetimes make cleanup safer and simpler.
Stop turning everything into arrays (and do less work instead)
Do less work in JavaScript: lazy data pipelines with iterator helpers instead of arrays.
React has changed, your Hooks should too
Modern React has moved beyond overusing useEffect. Discover the Hook patterns that enable cleaner logic, fewer bugs, and scalable architecture in 2026.
Error chaining in JavaScript: cleaner debugging with Error.cause
Use JavaScript's 'cause' property to chain errors, preserve context, and simplify debugging. Cleaner stack traces, better test assertions.
Rethinking async loops in JavaScript
Struggling with 'await' in loops? Explore common mistakes and modern solutions to optimize async code for performance.
How to group arrays in JavaScript without reduce()
Ditch the reduce() boilerplate! Learn how to use Object.groupBy() and Map.groupBy() in JavaScript to group data with cleaner, more expressive code.
Stop using .reverse().find(): meet findLast()
Learn how Array.prototype.findLast() and findLastIndex() let you search JavaScript arrays from the end—no .reverse() required. Cleaner, safer, and perfect for UI logic.
Finally, safe array methods in JavaScript
Learn how to safely sort, reverse, and splice arrays in JavaScript using ES2023 methods toSorted(), toReversed(), and toSpliced(). Perfect for React and modern JS development.
Understanding Promise.any(): when one success is enough
Learn how Promise.any() helps you handle multiple promises by resolving with the first success, perfect for fallback APIs and progressive features in JavaScript.
Logical assignment operators in JavaScript: small syntax, big wins
Logical assignment operators streamline conditional assignments in JavaScript, making your code cleaner, safer, and easier to read.
Modern async iteration in JavaScript with Array.fromAsync()
JavaScript's 'Array.fromAsync()' offers a concise alternative to 'for await...of' when working with async iterables and streams.
Default parameters: your code just got smarter
Say goodbye to manual fallbacks! Explore how JavaScript default parameters make your functions more robust, readable, and bug-free.
Using await at the top level in ES modules
Modern JavaScript is evolving. Learn how top-level 'await' works, where to use it, and when to avoid it in your modules.
Write more reliable JavaScript with optional chaining
Avoid runtime errors and write cleaner JavaScript with optional chaining, a powerful way for safely accessing deeply nested properties.
How JavaScript's at() method makes array indexing easier
Learn how JavaScript's 'at()' method simplifies array and string indexing with cleaner syntax, negative indexing, and broad browser support.
The power of the spread and rest syntax in JavaScript
Learn how the spread and rest syntax in JavaScript can power up the front-end, from array handling to React state updates, with tips every developer should know.
When to use map() vs. forEach()
Learn the key differences between 'map()' and 'forEach()' methods in JavaScript, when to use each, and why map() is often the better choice for transforming data and writing cleaner, more functional code.
Mastering default values in JavaScript with the nullish coalescing (??) operator
The nullish coalescing operator ('??') provides a simple way to handle null or undefined values in JavaScript. It's a must-have, let me show you why.
Leveraging "unknown" instead of "any"
Learn why using 'unknown' instead of 'any' in TypeScript leads to safer, more maintainable code. Discover best practices, benefits, and examples for improved type safety and error handling in TypeScript.
CSS fix for 100vh in mobile WebKit
WebKit handles 100vh in a way that differs from other browsers, which can complicate some layouts. But using -webkit-fill-available might be a good enough alternative to get by.
Using closest() to return the correct DOM element
Sometimes you need JavaScript to target specific selectors in the DOM. The closest() method can help you do just that.
Phone number links and accessibility
Phone number links are a great feature but styling them to not show on larger screens can be an accessibility concern and detected by screen readers. Here's a useful tip on making the links both functional and accessible.
Nope, nope, nope, line-height is unitless
When setting line-height in CSS, a common mistake is to pass a specific unit for the value. Here's why we should be following the preferred approach and set line-height to a unitless value.
The front-end is...
Front-end development has many skills associated with it, and it's been my experience that the role is often misunderstood. The front-end is tough to describe, but here's a brief nod of recognition to just some of what developers do.
CSS reset for minimalists
Browsers have built-in CSS for native styling. Using a CSS reset helps you enforce consistent styling. Here's a 3-line snippet that may do just enough of what you need.
Add line height to body
It's not necessary to add line height to each separate textual element. Here's a helpful tip for elements to inherit line height from the body.
Zero-based date, Christmas, and emoji
Not every method in JavaScript's Date object returns a zero-based number. Here's a tip will help you understand that a little better.
Responsive video resizing
There are many different solutions for responsive images, but video is a media element that's often ignored in fluid layouts. Let's change that by looking at how we can keep video responsive across viewports.
Flexible type with :root
There are a few different ways to manage responsive type on the web. My personal approach is to use the :root selector for maximum flexibility.
Use attribute selectors with empty links
If a hyperlink doesn't have a text value, use CSS attribute selectors to insert the href value in its place.
Math.floor, Math.random, and Jurassic Park
If you're new to math methods in JavaScript here are a few words about Math.floor and Math.random and a fun way to use them to build a custom text generator.
Show my password, please
Allowing users to view the password they've entered helps avoid frustration and improve engagement. This is a quick JavaScript example.
Splitting a border around another element
Here's an effect that you may have seen but not realized that can be done with some straightforward CSS.
Responsive table layout
Data tables on the web are used to communicate important information to a user. Yet so many of these aren't mobile-optimized. Here's one easy way to do just that.
Accessible floating labels
Accessibility is a key piece to building the web, but for some reason using labels is considered unattractive. However, there's a design-friendly way to make accessible labels.
Checking if Font Awesome loaded
Icon fonts are a very popular visual web asset today. Unlike JavaScript libraries there's no straightforward way to detect if an icon fonts library has loaded. Here's a clever way to do just that.