Editor's Pick
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
CSS
Building a Magical 3D button with HTML and CSS
Every action we take on the web starts with a button click, and yet most buttons are ho-hum and uninspired. In this tutorial, we'll build an animated 3D button with HTML and CSS that sparks joy.
CSS Bonfire
What would you create by blending 17 layers of gradients and Perlin noises with background-blend-mode, mix-blend-mode and 4 animations? You'd craft a render-intensive CSS-only bonfire, of course.
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
HTML
HTML attributes vs DOM properties
They're completely different, but often coupled.
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. It seems like fewer and fewer developers know this, partially thanks to frameworks.
Most of the time, these distinctions don't matter. I think it's good that developers can have a long and happy career without caring about the differences between properties and attributes. But, if you need to dig down into the DOM at a lower level, it helps to know.
JavaScript
Tremor Raw - Copy & Paste React Components for Dashboards
Tremor Raw offers customizable, accessible React components to build dashboards and modern web applications. Built on top of Tailwind CSS and Radix UI.
Everything about the AbortSignals (timeouts, combining signals, and how to use it with window.fetch)
If you use plain old window.fetch() to make your HTTP requests, sometimes you will want to timeout the request after a few seconds.
For the last few years I've made use of AbortController and manually trigger an AbortSignal.
But I learned today there are a few more advanced things you can do with these signals.
Design of Gesture Recognition Libraries for Web (2022)
If you are a web developer, you might have dealt with mouse and touch gestures. You might have written code to detect a swipe from a stream of native browser events like touchmove, or you might have used a dedicated software library for the task. If you were mad enough, you might even have thought about building a neat gesture recognition library yourself. I happen to be that mad kind. To help us all, this article attempts to put together what is needed to build such a gesture library.
jsfxr - 8 bit sound maker and online sfx generator
Jsfxr is an online 8 bit sound maker and sfx generator. All you need to make retro sound effects with jsfxr is a web browser. It's a JavaScript port of the original sfxr by DrPetter. You can also use it as a JavaScript library for playing and rendering sfxr sound effects in your games.
Ky - a tiny and elegant HTTP client based on the browser Fetch API
Ky targets modern browsers, Node.js, and Deno. It's just a tiny file with no dependencies.
Benefits over plain fetch:
- Simpler API
- Method shortcuts (ky.post())
- Treats non-2xx status codes as errors (after redirects)
- Retries failed requests
- JSON option
- Timeout support
- URL prefix option
- Instances with custom defaults
- Hooks
pragmatic-drag-and-drop: Fast drag and drop for any experience on any tech stack
Pragmatic drag and drop is a low level drag and drop toolchain that enables safe and successful usage of the browsers built in drag and drop functionality. Pragmatic drag and drop can be used with any view layer (react, svelte, vue, angular and so on). Pragmatic drag and drop is powering some of the biggest products on the web, including Trello, Jira and Confluence.
canvas-confetti: performant confetti animation in the browser
Performant confetti animation in the browser.
Various demos here.
Miscellaneous
10x Engineers
I've been reflecting on our engineers’ diverse impact on our projects and the true meaning behind labels like "10x engineer". Over the years, many articles have discussed this concept, some labeling it a myth and others saying you need to have at least one on your team. It’s a hot topic; understandably, this term often sparks debate. Still, I think it's essential to understand the real value a developer brings to the team beyond any numerical label and their leetCode score.
Visual Studio Code - The Essentials
This work is part of the authors "daily" work as Microsoft employees. We strived to make this content the most useful for everyone, irrespective of your technology stack (or hosting company). We welcome feedback at https://aka.ms/vscode-essentials-book.
The Front End Developer/Engineer Handbook 2024
This handbook is a resource for both seasoned professionals and newcomers in the field of front-end web development to learn and explore the practice of front-end development.
A brief history of web development. And why your framework doesn't matter.
History is very important. It helps keep our perspectives in check. This is how I remember the crazy journey that web development has gone through in the past few years. This is my telling of it. So I will omit events. I may mess up the timeline. This whole article may not be of any use to you. But for me, putting all of it into writing helped me appreciate how much things stay the same no matter how much they change. So if you’re curious and undeterred, allow me to start with …