A versioned archive of posts from Bluesky, Mastodon, GitHub, npm, YouTube, Hacker News, and blogs. See the most popular posts.
Last built .
| Since | posts | replies | likes | reposts and quotes | views | |
|---|---|---|---|---|---|---|
| Bluesky | 669 | 761 | 4,243 | 919 | ||
| Mastodon | 357 | 509 | 2,142 | 930 | ||
| npm | 56 | 465 | 877,374,316 | |||
| YouTube | 31 | 846 | 28,826 | |||
| Blog | 63 | |||||
| Podcast | 93 | |||||
| Hacker News | 6 | 311 | 384 | |||
| All | 1,429 | 1,581 | 7,615 | 1,849 | 877,403,142 |
Pixel sits on a 24-pixel grid, similar to Google's Material Design. Getting there took three or four rounds of test sets, each 10 to 16 icons, with different line weights and base grids, before anything felt right.
Watch → youtu.be/ocLrWbA3sJs?si=1ZNr8...
Listen → www.podcastawesome.com/209285...
Noah's daily pixel art inspiration is the Playdate, Panic's little yellow handheld. Its black-and-white, non-backlit screen is an intentional creative constraint, and that same spirit shaped Pixel.
Watch → https://youtu.be/ocLrWbA3sJs?si=1ZNr8bMta4I7ZhRc
Listen → https://www.podcastawesome.com/2092855/episodes/20024730-game-boy-meets-icon-grid-introducing-pixel
Well, we recently audited what AI agents see on fontawesome.com. And the short version is: our JS-rendered pages were mostly empty HTML to them, including the homepage section promoting our AI agent tools. But as of Oct 20, key pages also ship as markdown, plus a new llms.txt. https://blog.fontawesome.com/blog-key-pages-readable-by-ai-agents/
#WebDev #Accessibility #FontAwesome
Well, here's a fun audit result: our homepage promotes our AI agent tools, install command in a little code block and everything. The problem is an AI agent reading that page saw the install command zero times. Because JavaScript. Anyway, we fixed it: blog.fontawesome.com/blog-key...
Your agent didn't design that settings page, it spit out an average of every settings page on the internet.
Point it at a real design system instead. We have skills for that!
Utility to import content from multiple services (and a CLI, too)
🌶️ HTML should've had includes 25 years ago.
We got tired of waiting.
chokidar 5 with chokidar 3 glob support.
chokidar 4 with chokidar 3 glob support.
New Podcast on Awesome: Noah + Jory on Pixel, our Game Boy-inspired icon pack. Fun fact: none of it is actual pixels. Every "pixel" is a vector square someone copied and pasted into place. A lot of times. 👾
Watch → youtu.be/ocLrWbA3sJs?...
Listen → www.podcastawesome.com/2092855/epis...
New on Podcast Awesome: Noah Jacobus and Jory Raphael on Pixel, Font Awesome's Game Boy-inspired Pro+ icon pack. Playdate, Susan Kare, a 24-pixel grid, and the surprisingly sneaky math of faking pixels with vectors. Best watched, not just heard. 👾
Watch → https://youtu.be/ocLrWbA3sJs?si=IRsFtcOm2K0FaHci
Listen → https://www.podcastawesome.com/2092855/episodes/20024730
A simpler static site generator.
What happens when you take icons built to scale cleanly at any size and deliberately make them look like they were drawn on a Game Boy? You get Pixel, Font Awesome’s retro video game–inspired Pro+ icon pack.
On this episode of Podcast Awesome, Matt sits down with Font Awesome designers Noah Jacobus and Jory Raphael to dig into how Pixel came together. They cover the Game Boy, Panic’s little yellow Playdate, a tip of the hat to original Mac icon designer Susan Kare, and the surprisingly sneaky math behind faking pixels with vectors. Bonus: Jory admits to lying about file sizes in real time.
This one gets visual, with grids, key shapes, and pixel cheats on screen, so it’s worth watching on YouTube instead of just listening.
What We Cover
Timestamps
00:00 – A quick heads-up: watch this one
00:30 – Welcome to Podcast Awesome
01:00 – The Game Boy as Pixel’s muse
02:30 – The Playdate and creative constraints
03:15 – Susan Kare and the classic Mac nods
04:15 – Icon fonts vs. raster: how Font Awesome got its start
05:45 – Pixel cheating and the skull’s eyes
07:15 – The Space Awesome rocket and the 200-icon baseline
08:30 – The Font Awesome flag goes pixel
09:15 – Jory’s Space Invaders prototype
10:15 – Finding the 24-pixel grid
11:30 – Drawing pixels with vectors: paper sketches and key shapes
12:30 – Why one pixel matters so much
14:00 – Jory’s file size confession
15:45 – Jack White, four-tracks, and working with limits
18:00 – Easier and harder at the same time
19:45 – Spotting Pixel in the wild
21:00 – Making things just because they’re fun
22:15 – Wrap-up and credits
Links
Using Pixel or another Pro+ pack in a project? Send it our way. We’d love to see what you’re making.
Credits
Produced, edited, and hosted by Matt Johnson
Theme song by Ronnie Martin
Music interstitials by Zach Malm
Video editing by Isaac Chase
#FontAwesome #PixelArt #IconDesign #GameBoy #Playdate #RetroGaming #PodcastAwesome
Stay up to date on all the Font Awesomeness!
Spinners shouldn't erase your button's label.
With <wa-button loading>, screen readers still hear "Save" even when the spinner is showing.
A fork of `recursive-copy`: Simple, flexible file copy utility
A fork of `recursive-copy`: Simple, flexible file copy utility
A forked, reduced implementation of lodash `get`, `set`, and `chunk` for use internally in Eleventy.
Details in the docs: https://webawesome.com/docs/components/rating#custom-icons
Customer: "How was your experience?"
Me: *makes a face*
<wa-rating>: "Noted."
In this demo, we use custom icons with the Rating component:
https://webawesome.com/create/evBE0DoA6C1K6aCqJKzaM
The design constraint behind Notdog: every shape needs room for a highlight on one side. That set the minimum size of every element in the pack, and everything else was built up from there.
Pro tip from the designer himself: use Notdog's Duo style. Set both layers to the same color and the shine disappears, leaving you with solid, bubbly shapes. Your personal Notdog vision, achieved.
Most layouts are a stack, a cluster, or a split, so those get classes. Your button padding doesn't.
<div class="wa-stack">
<div class="wa-cluster">…</div>
</div>
Here's a way to visualize layout utilities.
Stack. Cluster. Split. | Create
Three cards built with a handful of layout classes and a few lines of readable CSS, no class soup. Flip “Show the layout” to outline every wa-stack, wa-cluster, wa-split, wa-flank, wa-grid and wa-fram...
Most layouts are a stack, a cluster, or a split, so those get classes. Your button padding doesn't.
<div class="wa-stack">
<div class="wa-cluster">…</div>
</div>
Here's a way to visualize layout utilities: https://webawesome.com/create/kqDlMQR3WXFGUoEo2vF2p?view=preview
The magic lives here: https://webawesome.com/docs/utilities/native
Look awesome, even without components.
<button class="wa-brand">Save</button>
<input type="text">
<table>…</table>
<dialog>…</dialog>
Native Styles make the HTML you already write look like you meant it.
Utility to import content from multiple services (and a CLI, too)
A framework independent partial hydration islands architecture implementation.
Utility to import content from multiple services (and a CLI, too)
Congrats to @daveshea (of CSS Zen Garden!) for their new #BuiltAwesome website! 🏆
Wide table on a phone? Wrap it in a scroller.
<wa-scroller>
<table>…</table>
</wa-scroller>
The edges fade to show you there's more to scroll, and it's keyboard accessible.
Our AI agent tools have a page of their own, linked from the main nav, with everything you need to get set up.
Head to AI Agent Tools to set up your agent in one step, see what you can ask it, and connect it to your Kits.
A framework independent partial hydration islands architecture implementation.
A framework independent partial hydration islands architecture implementation.
Notdog started out tubular, like the Frankfurter typeface it's based on. But icons need filled shapes, not just strokes, so the forms got blobbier & viscous. At that point, the icons looked less like hot dogs and more like condiments squeezed onto a plate.
Watch → https://youtu.be/M4vPIkwaHro?si=e3KYR5bND0_no1zT
Utility to import content from multiple services (and a CLI, too)
10 design systems benchmarked with tests that fail when a component is too slow. Web Awesome opened a country selector in 137ms, only 76ms behind than the top performer. Not bad, but we can do even better!
Thanks for the open tests, @denodell!
https://denodell.com/blog/design-systems-should-be-fast-by-default
The scariest thing in your codebase this Halloween is a feature your coding agent made up.
🙅♀️ <wa-fancy-card glow>
Our agent skills are checked against the library on every build, so you can create faster and more consistently with AI.
Utility to import content from multiple services (and a CLI, too)
The only skeleton we ship year-round. 💀
<wa-skeleton effect="sheen">
Use Vue 3 Single File Components (SFC) in Eleventy.
Use Svelte 5 components in Eleventy.
Use Svelte 5 components in Eleventy.
Use Vue 3 Single File Components (SFC) in Eleventy.
Utility to import content from multiple services (and a CLI, too)
Utility to import content from multiple services (and a CLI, too)
Utility to import content from multiple services (and a CLI, too)
Utility to import content from multiple services (and a CLI, too)
Utility to import content from multiple services (and a CLI, too)
Utility to import content from multiple services (and a CLI, too)
<wa-toast> used to be a Pro thing. Now it's in Core.
Free toast. Butter sold separately. 🧈
New Podcast Awesome: Notdog, the icon pack named after a Silicon Valley gag and modeled on a sausage-shaped typeface. Noah Jacobus explains how a "could we even do this?" experiment turned into a full Pro+ pack. 🌭
Watch → https://youtu.be/M4vPIkwaHro?si=kmRYy6WsVQWAf7xJ
Listen → https://www.podcastawesome.com/2092855/episodes/19986866
What do a scene from Silicon Valley, a typeface shaped like sausages, and a bottle of mustard have in common? They're all part of the origin story of Notdog, one of Font Awesome's small-batch Pro+ icon packs. It's glossy, it's gooey, and it is very much not a hot dog.
On this episode of Podcast Awesome, Matt sits down with Font Awesome designers Noah Jacobus and Jory Raphael to talk about how a challenge from Dave Gandy ("can we make an icon pack that looks like this?") turned into one of the first proofs that Pro+ packs could work at all. Noah explains why one simple rule about shine shaped every icon in the set, why his early emoji faces looked like dino nuggets, and how a pack inspired by tubes ended up looking like condiments. Plus: the actor who plays Milton in the Font Awesome marketing videos eats a lot of hot dogs on set, and we settle nothing about which regional hot dog is best.
What We Cover
Timestamps
00:00 Not a hot dog
00:45 Welcome to Podcast Awesome
01:00 Jory lists his favorite hot dogs
02:00 Why is it called Notdog?
03:45 The Glyph book and the "could we even do this?" challenge
05:15 Mood boards and sausage balloon animals
06:45 From tubes to condiments
08:15 The shine rule
09:00 Building a brief: from 200 icons down to 10
11:15 Core Font Awesome vs. Pro+ personality
13:45 Where you'd actually use Notdog
16:15 The easy icons and the dino nugget faces
19:00 Why Duo is the Notdog to use
20:15 Diner art, Milton, and hot dog consumption on set
24:15 Notdog, Jelly, and Slab: the first Pro+ packs
27:15 The best regional hot dog?
29:30 The $1.50 Costco hot dog legend
32:00 Wrap-up and credits
Links
Credits
Hosted produced and edited by Matt Johnson
Guests: Noah Jacobus and Jory Raphael
Theme song by Ronnie Martin
Music interstitials by Zach Malm
Video editing by Isaac Chase
#FontAwesome #PodcastAwesome #IconDesign #GraphicDesign #DesignProcess #Typography
Stay up to date on all the Font Awesomeness!
Your notification bell has been sitting there doing nothing. Make it buzz.
<wa-icon name="bell" animation="buzz">
Other animations include wag, jello, float, and swing, and all of them respect prefers-reduced-motion.
Small utility to efficiently fetch the colors from an image.
Low level utility to perform build-time image transformations.
Fetch and locally cache remote API calls and assets.
Fetch and locally cache remote API calls and assets.
"Make it look nice" is not a design system.
Our Agent Skills keep things looking the way they're supposed to. 👌
A new Platform License lets the people using your CMS, page builder, app, or plugin pick and use Pro icons inside it.
Building a product where your own customers choose icons? This one's for you. Owners, admins, and billing contacts on a paid plan can request one from the Platform License page.
Low level utility to perform build-time image transformations.
Overages still exist as a fallback for traffic spikes, but if your growth is predictable, add-ons cost roughly 25% less for the same usage.
Finding it: Account → Billing → Manage Add-ons. Takes about a minute, and you don't have to switch plans to do it.
Dave Gandy on why the meetup is called the Snuggle: it's such a ridiculous name that it has one great side effect. You have to tell the story. So we made an episode out of it.
@supercodepoet.bsky.social 's best line from the episode: when your whole workday runs through a text interface, you lose context. Then you get together, remember these people are great, and rebuild it. "It's almost like we emotionally snuggle." 🤗
WebC support for Eleventy adds for Single File Web Components
Single File Web Components
Use Vue 3 Single File Components (SFC) in Eleventy.
Get it here: https://webawesome.com/docs/components/known-date
Nobody should have to click "previous month" 400 times to enter their birthday.
<wa-known-date> gives you day, month, and year. Three plain inputs that submit as a single form control with a clean ISO date.
Your users' thumbs say thanks.
Follow the changelog in any feed reader, and AI agents can now read our key pages as markdown.
You no longer have to remember to check back here. The changelog now comes to you, and it's easier for your tools to read too.
Fact: you can use Native Styles with any Web Awesome theme and the components are optional.
Learn more at webawesome.com/docs/utilities/native
Your plain <button> showed up to the party in browser defaults again.
Web Awesome's native.css styles the HTML you already wrote: buttons, inputs, selects, tables, dialogs, details. It all matches your theme.
Nobody has to know. 🤫
A minimal, modern, generic, hot-reloading local web server to help web developers.
Web Awesome works in React, Vue, Svelte, Astro, Rails, and that .html file from 2009 you're scared to open.
They're web components. They don't care about your framework drama.
chokidar 5 with chokidar 3 glob support.
A fork of `recursive-copy`: Simple, flexible file copy utility
A minimal, modern, generic, hot-reloading local web server to help web developers.
chokidar 5 with chokidar 3 glob support.
EVERYBODY LOVES MAINTENANCE
Core v3.1.7 is out now: https://github.com/11ty/buildawesome/releases/tag/v3.1.7
🚨 Erases our npm audit balance
🧱 Eliminates 21 third party dependencies (121 to 100)
🍤 -8.1% size on disk (22.3 MB to 20.5 MB)
A simpler static site generator.
A powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired)
Pricing: 5 Kits for $10, 100 Custom Icons for $5, 250K pageviews/mo for $18/yr, 1 GB bandwidth/mo for $9/yr. Add-ons renew with your subscription.
For the spreadsheet people, here's the math: pageview and bandwidth add-ons run about 25% cheaper than overages for the same usage. Overages are for spikes you didn't see coming. Add-ons are for the ones you did.
A minimal, modern, generic, hot-reloading local web server to help web developers.
A minimal, modern, generic, hot-reloading local web server to help web developers.
chokidar 4 with chokidar 3 glob support.
Well done! 👏
Another site in the Awesome-verse! ✨ lgs1920.fr/registration/ is #BuiltAwesome with Font Awesome, Web Awesome, and Build Awesome by Christian Denat.
chokidar 4 with chokidar 3 glob support.
Another site in the Awesome-verse! ✨ lgs1920.fr/registration/ is #BuiltAwesome with Font Awesome, Web Awesome, and Build Awesome by Christian Denat.
The experimental badge isn't marketing fog, it means we need testers and feedback and things _could_ change between now and the final version. (Rarely happens unless we find a critical issue)
Stable = battle-tested, ready to build.
We label both so you don't have to guess.
A powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired)
A minimal, modern, generic, hot-reloading local web server to help web developers.
Finds all local JavaScript and TypeScript dependencies (ES module imports and CommonJS require()) from a filename.
Low level internal utilities to be shared amongst Eleventy projects
Low level internal utilities to be shared amongst Eleventy projects
Finds all local JavaScript and TypeScript dependencies (ES module imports and CommonJS require()) from a filename.
A Web Awesome user created this Chrome extension that lets you inspect custom elements built with Lit 🔥
https://chromewebstore.google.com/detail/lit-inspector/faojnglflincboehhgkjgehnapjgiieh