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
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
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
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
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:
Quickly Testing CSS Fallbacks
Dumb trick alert!
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.
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
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
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.
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.
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,
Jamstack Conf 2021
What? Jamstack Conf! It's the best! Learn what's happening and what's next for this hot ecosystem.
Social Image Generator + Jetpack
I feel like my quest to make sure this site had pretty sweet (and automatically-generated) social media images (e.g. Open Graph) came to a close once I found
"Just in Time" CSS
I believe acss.io is the first usage of "Atomic CSS" where the point of it is to be a compiler. You write CSS like this:
EyeDropper API Dropped
I had no idea this was coming but it's pretty neat! Chrome has shipped the EyeDropper API in v95 (Canary, as I write).
Frameworks Helping Image Usage
I recently blogged about how images are hard and it ended up being a big ol' checklist of things that you could/should think about and implement when placing
Can we have custom media queries, please?
Stefan Judis notes that there is a spec for custom media queries, but seemingly no momentum on it at the moment. That lack of movement is unfortunate, as it's
Fire SVG animations (SMIL) when the SVG is visible
When requirements read "when visible" your brain should go straight to IntersectionObserver. That's exactly what Zach is doing here to kick off an animation
Early Days for CSS Scoping
There is a working draft spec for CSS scoping now. Other than a weird period where <style scoped> shipped and then was subsequently removed from the
Some Typography Links VII
All-things-typography, from a hard-edged monospaced variable font to fonts in the "Twilight Zone" ... and much, much more.
Application-Specific Links
You know like https:? That's a URL Scheme. You're probably familiar with the concept, thanks to others that come up in front-end development, like mailto:.
Designing for the Unexpected
When I think about what front-end development really is and feels like, this is at the heart of it: designing around a huge set of unknowns, and really
Architecting With Next.js
Free event hosted by Netlify coming up next week (Wednesday, August 25th): Architecting with Next.js. It's just a little half-day thing. No brainer.
Detecting Media Query Support in CSS and JavaScript
You can't just do @media (prefers-reduced-data: no-preference) alone because, as Kilian Valkhof says:
Native JavaScript Routing?
We can update the URL in JavaScript. We've got the APIs pushState and replaceState:
Tabs in HTML?
Brian Kardell shares a bit about the progress of bringing "Tabs" to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It's tricky.
Cutouts
Ahmad Shadeed dug into shape "cutouts" the other day. Imagine a shape with another smaller shape carved out of it. In his typical comprehensive way, Ahmad
Unicode Arrows
Looks like... 253 of them. I love the little water ⥾ spout one. (U+297e). Because. And I like how it's a fairly useful little site at a great domain and with
Wanna see a whiter white?
Heck of a CSS trick here from Dongsung Kim.
Napkin
We took a surface level look at Pipedream the other day, which really does look cool. It's like a much more modern and fancy version of what Yahoo Pipes was.
WooCommerce With Apple Pay and Google Pay
Got a WooCommerce store? It behooves you to offer a variety of payment methods. Just anecdotally, I'm sure both you and me have been annoyed and even
View Source (on Mobile)
Have you ever wished you could see the HTML source of a web page while on a mobile browser, which generally doesn't offer that feature? If you have a desktop
Choice Words about the Upcoming Deprecation of JavaScript Dialogs
It might be the very first thing a lot of people learn in JavaScript:
The Large, Small, and Dynamic Viewports
We've got viewport units (e.g. vw, vh, vmin, vmax), and they are mostly pretty great. It's cool to always have a unit available that is relative to the entire
Learnings From a WebPageTest Session on CSS-Tricks
I got together with Tim Kadlec from over at WebPageTest the other day to use do a bit of performance testing on CSS-Tricks. Essentially use the tool, poke
ES2021 Features
Hemanth HM very succinctly shows off ES2021 features. Gosh it doesn't feel like that long ago that all we could talk about is ES2015, and now that's over a
Demystifying styled-components
Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey.
Slinkity
Perhaps the #1 reason I love Astro is that it brings the JavaScript component authoring experience to the Static Site Generator world with zero JavaScript