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.
Jekyll doesn't do components? Liar!
I like the pushback from Katie Kodes here. I've said in the past that I don't think server-side languages haven't quite nailed "building in components" as
Building a Tennis Trivia App With Next.js and Netlify
Today we will be learning how to build a tennis trivia app using Next.js and Netlify. This technology stack has become my go-to on many projects. It allows
A Themeable React Data Grid With Great UX-Focused Features
KendoReact can save you boatloads of time because it offers pre-built componentry you can use in your app right away. They look nice, but more importantly,
The Options for Password Revealing Inputs
In HTML, there is a very clear input type for dealing with passwords:
Branching Strategies in Git
In this article I'm going to talk about branching strategies and different types of Git branches. I’m also going to introduce you to two common branching workflows: Git Flow and GitHub Flow.
Quickly Testing CSS Fallbacks
Dumb trick alert!
Animation Techniques for Adding and Removing Items From a Stack
Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when
ShopTalk Goes Video
Dave and I slapped up a little videos section of the ShopTalk website. Twelve so far! They are short-ish, between 10-20 minutes, each focused on one fairly
Links on React and JavaScript II
How To Use The Vite Build Tool with React — Vite is hot, in part, because it's based on esbuild and wickedly fast. It's from Evan You of Vue fame, but it's
Using the platform
I'm certainly not dogmatic about it, but I think if you can pull of a project with literally zero build process, it feels good while working on it and feels very good when you come back to it months/years later and can just pick up and go.
Working With Built-in GraphQL Directives
Directives are one of GraphQL’s best — and most unspoken — features.
Creating the Perfect Commit in Git
A commit can be something that helps us stay on top of things. It can be a container for related changes that belong to one and only one topic, and thereby make it easier for us to understand what happened. In this post, we’re talking about what it takes to produce the "perfect" commit.
Comparing HTML Preprocessor Features
Of the languages that browsers speak, I'd wager that the very first one that developers decided needed some additional processing was HTML. Every single CMS
The Self Provisioning Runtime
Big thoughts on where the industry is headed from Shawn Wang:
Our Learning Partner: Frontend Masters
Frontend Masters has been our learning partner for a couple of years now. I love it. If you need structured learning to up your web development skills,
What is Your Page Title on a Google Search Engine Results Page?
Whatever Google wants it to be. I always thought it was exactly what your <title> element was. Perhaps in lieu of that, what the first <h1> on the
Working With GraphQL Caching
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Learn How to Build True Edge Apps With Cloudflare Workers and Fauna
There is a lot of buzz around apps running on the edge instead of on a centralized server in web development. Running your app on the edge allows your code to
Container Units Should Be Pretty Handy
Container queries are going to solve this long-standing issue in web design where we want to make design choices based on the size of an element (the
Twitter's div Soup and Uglyfied CSS, Explained
When I came up in web development (2005-2010 were formative years for me), one of the first lessons I learned was to have a clean foundation of HTML. "What
How to Implement Logging in a Node.js Application With Pino-logger
Logging, on its own, is a key aspect of any application. Logging helps developers comprehend what it is that their code is doing. It also helps save
Proposal for CSS @when
CSS is on a tear lately. Again, I've heard of a brand new thing I've never seen before, and again it's via Miriam: CSS Conditionals.
An Event Apart Fall Summit 2021! (Use Coupon AEACSST21)
The web's premier conference is online this fall, October 11–13, 2021: An Event Apart Fall Summit. If you already know how good of a conference this is (i.e.
7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS
CSS ::before and ::after pseudo-elements allow you to insert "content" before and after any non-replaced element (e.g. they work on a <div> but not
Exploring the CSS Paint API: Polygon Border
Nowadays, creating complex shapes is an easy task using clip-path, but adding a border to the shapes is always a pain. There is no robust CSS solution and we
Resources aren't requested by CSS, but by the DOM
This is a good tweet from Harry:
Embracing Asymmetrical Design
I'll never forget one of Karen McGrane's great lessons to the world: truncation is not a content strategy. The idea is that just clipping off text
imba
It's not every day you see a new processor for building websites that reinvents the syntax for HTML and CSS and JavaScript. That's what imba is doing.
Designing Beautiful Shadows in CSS
My favorite kind of blog post is when someone takes a subject that I’ve spent all of five minutes considering and then says—no!—this is an enormous topic
Minding the "gap"
Read an updated article with an approach that uses modern CSS features.
Shadow Roots and Inheritance
There is a helluva gotcha with styling a <details> element, as documented here by Kitty Giraudel. It's obscure enough that you might never run into it,