Learn From Remix
I’ve built websites that are used by millions of people all over the world. I’ve made more mistakes than I care to count and I’ve had to deal with the
The Invisible JavaScript Backdoor
An interesting (scary) trick of an nearly undetectable exploit. Wolfgang Ettlinger:
Test Your Product on a Crappy Laptop
There is a huge and ever-widening gap between the devices we use to make the web and the devices most people use to consume it. It’s also no secret
Spicy Sections
What if HTML had "tabs"? That would be cool, says I. Dave has been spending some of his time and energy, along with a group of "Tabvengers" from OpenUI, on
Reduce Your Website’s Environmental Impact With a Carbon Budget
As I write this, world leaders are gathering in Glasgow for COP26, the international climate change conference, in the attempt to halt (or at least slow down)
Low framerate in Safari on M1 Mac
John James Jacoby:
Exactly What You Want
What is one thing people can do to make their website better?
Embrace the Unpredictable
In nature, no two things are ever the same. Life is imperfect, unpredictable, and beautiful. We can walk through the same forest every day and see differently
A Look at the Cloudinary WordPress Plugin
Cloudinary (the media hosting and optimization service) has a brand new version (v3) of its WordPress plugin that has really nailed it. First, a high-level
Diagonal Stripes Wipe Animation
I was playing this game on Apple Arcade the other day called wurdweb. It's a fun little game! Little touches like the little shape dudes that walk around the
Using the Reflog to Restore Lost Commits
This article is part of our “Advanced Git” series. Be sure to follow us on Twitter or sign up for our newsletter to hear about future articles!
Recreating the Apple Music Hits Playlist Animation in CSS
Apple Music has this "Spatial Audio" feature where the direction of the music in your headphones is based on the location of the device. It's tough to explain
A Handy Little System for Animated Entrances in CSS
I love little touches that make a website feel like more than just a static document. What if web content wouldn’t just “appear” when a page loaded, but
When is it "Right" to Reach for contain and will-change in CSS?
I've got some blind spots in CSS-related performance things. One example is the will-change property. It's a good name. You're telling the browser some
Creating Generative Patterns with The CSS Paint API
The browser has long been a medium for art and design. From Lynn Fisher's joyful A Single Div creations to Diana Smith's staggeringly detailed CSS paintings,
Control Layout in a Multi-Directional Website
Many business websites need a multilingual setup. As with anything development-related, implementing one in an easy, efficient, and maintainable way is
Which SVG technique performs best for way too many icons?
Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge
Responsive Layouts, Fewer Media Queries
We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a
Coding Font Game
A tournament bracket UI where you pick your favorite between two coding fonts and your choices are whittled down all the way to a final winner. A clever way
PHP Date and Time Recipes
Dealing with dates and times is one of those things that can frustrate programmers a lot. At the same time, they are fundamental to software development, used
Cherry-Picking Commits in Git
In part 5 of this series, we looked at rebasing and merging. Although there are a couple of differences between git merge and git rebase, both commands have the same goal: they integrate changes from one branch into another.
The Gap (Design Engineering)
Egor Kloos describes a situation where a (purely visual) designer asks for some changes to a component. There is a misunderstanding where the (code monkey)
Jamstack TV
That's the name of Netlify's YouTube Channel. Love that. I linked up Rich's talk the other day, which was a part of this past JamstackConf, but now all the
Line length revisited: following the research
Mary Dyson produces nitty gritty research on the long-accepted notion that shorter line lengths are more legible than longer ones. The study finds that
Generate a Pull Request of Static Content With a Simple HTML Form
Jamstack has been in the website world for years. Static Site Generators (SSGs) — which often have content that lives right within a GitHub repo itself — are
Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library
Theming UI refers to the ability to perform a change in visual styles in a consistent manner that defines the “look and feel” of a site. Swapping color
Interactive Rebase: Clean up your Commit History
Interactive Rebase is the Swiss Army knife of Git commands: lots of use cases and lots of possibilities! It's really a great addition to any developer's tool chain, because it lets you revise your local commit history—before you share your work with the rest of the team. Let's see what you can do with an interactive rebase and then look at some practical examples.
Other Looks at the Conditional Border Radius Trick
Remember when Ahmad Shadeed wrote about that border-radius "toggle" he found in Facebook's CSS? It was interesting! I covered it. A few weeks after that surge
Semantic menu context
Scott digs into the history of the <menu> element. He traced it as far back as HTML 2 (!) in a 1994 changelog. The vibe then, it seems, was to mark up a
Quick and Dirty Bootstrap Overrides at Runtime
Bootstrap 5.2 shipped with solutions for the methods covered in this post. So, if you're using Bootstrap 5.2 or newer, you should be able to tinker with CSS
Don't Snore on CORS
Whatever, I just needed a title. Everyone's favorite web security feature has crossed my desk a bunch of times lately and I always feel like that is a sign I
Detecting Specific Text Input with HTML and CSS
Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:
React Suspense: Lessons Learned While Loading Data
Suspense is React’s forthcoming feature that helps coordinate asynchronous actions—like data loading—allowing you to easily prevent inconsistent state in your
Introducing Svelte, and Comparing Svelte with React and Vue
Josh Collingsworth is clearly a big fan of Svelte, so while this is a fun and useful comparison article, it's here to crown Svelte the winner all the way
Fixing the Drift in Shape Rotations
Steve Ruiz calls this post an "extra-obscure edition of design tool micro-UX," but I find it fascinating! If you select a bunch of elements in a design tool,
Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline
The Scroll-linked Animations specification is an upcoming and experimental addition that allows us to link animation-progress to scroll-progress: as you
Rebase vs. Merge: Integrating Changes in Git
This article is part of our “Advanced Git” series. Be sure to follow us on Twitter or sign up for our newsletter to hear about the next articles!
Responsible JavaScript
High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a
Proxying Third-Party JavaScript as First-Party JavaScript (and the Potential Effect on Analytics)
First, check out how incredibly easy it is to write a Cloudflare Worker to proxy another URL:
GUI Challenges
I keep bookmarking Adam's GUI Challenges posts/videos and, before I even have a chance to review and link them up, another one is already published!
Have Single-Page Apps Ruined the Web? ("Transitional Apps")
A big heaping 19-minute bowl of not-too-hot, not-too-cold baby bear porridge website building from Rich Harris.
Buttons vs. Links
There are thousands of articles out there about buttons and links on the web; the differences and how to use them properly. Hey, I don't mind. I wrote my own
So, You Want to Build an @mention Autocomplete Feature?
There’s no reason a composition box has to be a dull text area. You can mention another person, a channel, a file, or some other queryable object using triggers, such as the @ or # characters.
CSS-ing Candy Ghost Buttons
Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have
Create Your Own Automated Social Images With Resoc
There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is
Some Articles About Accessibility I’ve Saved Recently IV
A guide to designing accessible, WCAG-compliant focus indicators — Sara Soueidan says you can make more accessible focus outlines by doing your own, rather
Building an Angular Data Grid With Filtering
Kendo UI makes it possible to go from a basic idea to a full-fledged app, thanks to a massive component library. We're talking well over 100 components that
Sticky Definition Lists
I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this
The Greatest CSS Tricks Vol. I eBook (PDF and EPUB)
When I wrote the "book" The Greatest CSS Tricks Vol. I, I put "book" in quotes because there wasn't anything terribly book-like about it. The only way you
Can Include (a Certain HTML element within another Certain HTML Element)
A single-serving website from Alexander Vishnyakov for testing if it's valid to put any particular HTML element within another type of HTML element. Kinda
Exploring the CSS Paint API: Rounding Shapes
Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue! That’s
What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?
It's not uncommon for my front-end workflow to go something like this:
An Interview With Elad Shechter on "The New CSS Reset"
Hey folks! Elad reached out to me to show me his new CSS reset project called the-new-css-reset. It’s quite interesting! I thought a neat way to share it with
Bonsai Browser
Web-browser for research that helps programmers think clearly.
Less Absolute Positioning With Modern CSS
Ahmad Shadeed blogs the sentiment that we might not need to lean on position: absolute as much as we might have in the past. For one thing: stacking elements.
WooCommerce + Google Analytics
Google Analytics is powerful analytics software. A common way to use it is to just slap the JavaScript snippet on every page template you have and let it
Cash (Tiny jQuery Alternative)
The README for Cash is straightforward:
Those "Get The App" Banners
Why would a company promote a native app over their perfectly usable website?
Comparing Google Analytics and Plausible Numbers
I saw this blog post the other day: 58% of Hacker News, Reddit and tech-savvy audiences block Google Analytics. That's an enticing title to me. I've had
The Case for ‘Developer Experience’
A good essay from Jean Yang.