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...
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!
🌶️ HTML should've had includes 25 years ago.
We got tired of waiting.
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...
Spinners shouldn't erase your button's label.
With <wa-button loading>, screen readers still hear "Save" even when the spinner is showing.
Details in the docs: webawesome.com/docs/compone...
Customer: "How was your experience?"
Me: *makes a face*
<wa-rating>: "Noted."
In this demo, we use custom icons with the Rating component:
webawesome.com/create/evBE0...
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...
The magic lives here: webawesome.com/docs/utiliti...
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.
Congrats to Dave Shea (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.
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 → youtu.be/M4vPIkwaHro?si=e3KYR...
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.bsky.social
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.
The only skeleton we ship year-round. 💀
<wa-skeleton effect="sheen">
<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 → youtu.be/M4vPIkwaHro?si=kmRYy...
Listen → www.podcastawesome.com/209285...
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.
"Make it look nice" is not a design system.
Our Agent Skills keep things looking the way they're supposed to. 👌
Finding it: Account → Billing → Manage Add-ons. Takes about a minute, and you don't have to switch plans to do 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." 🤗
Get it here: webawesome.com/docs/compone...
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.
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. 🤫
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.
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)
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.
Well done! 👏
Another site in the Awesome-verse! ✨ lgs1920.fr/registration/ is #BuiltAwesome with Font Awesome, Web Awesome, and Build Awesome by Christian Denat.
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 Web Awesome user created this Chrome extension that lets you inspect custom elements built with Lit 🔥
Things that have come out of a week where a remote team is finally occupying the same physical space: the Icon Wizard, a bunch of "snacktivities," at least one new hire, and a Hoobastank chorus that'll get stuck in your head just as you lay down to go to sleep. (Blame Ed.)
New: Font Awesome Plan Add-ons. Need more Kits but your pageviews are fine? Add Kits. That's it. No tier jump, no paying for stuff you won't use. Uncle Owen has been overruled. blog.fontawesome.com/add-with...
New Podcast Awesome: our company's biannual meetup is called the Snuggle. We're a software company. We're adults. This episode is the story of how that happened and why we're never changing it. 🧸 www.podcastawesome.com/209285...
You can open and close <wa-dialog> from anywhere on the page without writing JavaScript. (The same concept works for <wa-drawer>)
*slaps roof of backpack*
On a scale from zero to “I design my own backpack with its code in it”, how much do you like @11ty.dev?
Web Awesome Blazor Bindings: a community-maintained wrapper for C# devs.
Great work! 👏
More in the docs: webawesome.com/docs/compone...
<wa-otp-input> can group passcode segments for you using the format attribute. Just add `#` to represent a character. Everything else is decoration.
More about random content over at blog.fontawesome.com/web-awesome-...
<wa-random-content> is stable as of 3.13!
Slot tips, call randomize(), or turn on autoplay. Set mode="unique" so you don’t get the same tip twice in a row. Works on static pages, too!
View the docs webawesome.com/docs/compone...
<wa-random-content> is stable as of 3.13!
Slot tips, call randomize(), or turn on autoplay. Set mode="unique" so you don’t get the same tip twice in a row. Works on static pages, too!
More info in the docs: webawesome.com/docs/compone...
<wa-combobox> can pull options from your server now!
Set a dataSource callback, get debounced fetch + loading/error/empty slots, and improve performance by not shipping thousands of options in your DOM.
Here comes the hot stepper! 🪜 WA 3.14 is out.
The experimental <wa-stepper> breaks checkout and signup into stages. We also taught <wa-combobox> (Pro) to load from your server, rewrote our AI design skill, and fixed a stack of a11y bugs.
The Nintendo Power Glove had about 5 months to go from lab prototype to trending Xmas gifts for 1989. But the Power Glove got cheaper finger sensors to hit the deadline, and launched only one game built for it. Years later it's cited as part of the road to the Wii Remote. The long game is weird.
The word "Drupal" is derived from the English pronunciation of the Dutch word "druppel' which means "drop", and someone just _dropped_ Web Awesome into it with this helper. Nice work! 🫡
More info in the docs: webawesome.com/docs/ai/agen...
Don't let your agent make guesses about your component library. Agent skills help them get it right the first time.
Web Awesome ships two:
- webawesome for using components
- webawesome-design for designing with WA
Myth-bust from this episode: the famous "Colgate Beef Lasagna" image isn't real. Colgate did test frozen chicken and crabmeat entrees in 1964, though. Ew. So the truth is a toothpaste company selling frozen crab dinners, which isn't any better.
Get it here: webawesome.com/docs/compone...
Six separate inputs for a verification code? Nah.
<wa-otp-input> acts as one form control and supports paste and constraint validation.
Web Awesome and done.
Font Awesome CDN experiment that took four people three months & converted exactly one person. Plus "Fort Awesome," a product name that confused customers, and a tour of the real Museum of Failure.🏛️
Watch → www.youtube.com/watch?v=DMGJA...
Listen → www.podcastawesome.com/209285...
<wa-dropdown-item href="..."> works as of v3.12
Click it and it navigates like a link. A lot of folks asked for this one. Happy to deliver 🫡
Use Web Awesome's Random Content component to add some random content (in the right places) to your UI. Here are 10 places to start! blog.fontawesome.com/web-awesome-...
🚀 Web Awesome 3.13.0 shipped last week!
🏷️ New <wa-tag-input> for keywords, emails, labels, etc.
🎓 Also graduation day: accordion, OTP, pagination, known date, time input, and friends are now STABLE.
Changelog: webawesome.com/docs/resourc...
Most devs have had to build a star rating component from scratch at least once.
Web Awesome ships it as one tag:
<wa-rating>
Half-stars, custom icons, accessible out of the box. Try it here:
codepen.io/editor/team/...
Tag, you're it! 🏷️ Web Awesome 3.13 is out.
The new experimental <wa-tag-input> turns keywords, emails, and labels into tidy, removable tags. We also fixed up the data grid and promoted 11 components to stable.
✨ Duotone just joined the Icon Wizard.
Now you can mix, match, stack, and blend Duotone icons with other icons, modifiers, and shapes to conjure up custom creations.
The Wizard has leveled up. 🪄
https://www.youtube.com/watch?v=53kc2QjGxnY is a great video from Veronica about creating a Podcasting Platform using static websites and the magical powers of 🪄 RSS!
The guy who invented it, Norm Cox, didn't even know it was called a "hamburger icon" until someone called to interview him about it in 2013. He'd been sitting on one of the most-used UI symbols in the world without even knowing its nickname. 🤣
Your AI assistant knows your code. Now it can know your icons, too. 🤖
Meet Font Awesome Agent Tools: authenticated, Kit-aware tools that help your coding agent find and use the icons you actually have access to.
Read all about it on the blog → blog.fontawesome.com/font-awe...
The hamburger menu started as a 1981 Xerox screen-space hack. Users didn't get it. Years later, researchers said it was bad UX. It won anyway. So with true FA-flair, we made ours an actual burger. 🍔
Watch → youtu.be/rkZ6ZfxWVIU?si=IccGg...
Listen → www.podcastawesome.com/209285...
Web Awesome styles your words, not just your components. Wrap your blog post, docs, or changelog in one class & every heading, list, blockquote, & code block lands on your theme's scale. A 3xs–5xl type scale handles the rest, + CSS @scope stops leaks. blog.fontawesome.com/web-awesome-...
Biggest performance gain on the Built Awesome Leaderboards this week goes to Bryon Tjanaka: improved 23 Lighthouse points with a ~3s improvement in LCP!
https://www.gildaconarne.de/ is #BuiltAwesome (using @webawesome.com and @fontawesome.com too!) by Stefan Frede
websites deserve weekends
The Icon Wizard Contest runs through September 7. Build something weird, clever, or fun, and submit it to the gallery, and it might get featured. There's already a Starry Night icon and a centaur in there!
Get to building → fontawesome.com/icons/wizard
In this post @snook.ca describes a method to create exclusive RSS-only content: https://snook.ca/everything/secret-rss-posts/
https://www.whimsybyjules.com/ is #BuiltAwesome by Josh Vickerson
@mattdsteele.carhenge.club.ap.brid.gy is trying out @davatron5000.bsky.social’s new MicroLighter Syntax Highlighting plugin (using CSS Custom Highlights) and shows how you can do the same on your Build Awesome/Eleventy project:
The Icon Wizard Contest runs through September 7. Build something weird, clever, or fun, and submit it to the gallery, and it might get featured. There's already a Starry Night icon and a centaur in there!
Icons look like the small stuff in a design system. They're not. They communicate faster than words and become some of the most recognizable parts of your brand. (We might be a little biased.) Part IV, live now: blog.fontawesome.com/art-of-i...
Testing out some new OpenGraph images: https://build.awesome.me/
Reminder: the Icon Wizard Contest closes September 7. Build something with the Wizard, submit it to the gallery, and it might end up featured. Gallery entries need a paid plan, but anyone can go play with the tool.
fontawesome.com/icons/gallery
All the ways to follow along to Build Awesome news and updates: https://build.awesome.me/how-to-follow/
Fun bit: the OG Icon Wizard almost got named F.A.R.Ts (Font Awesome Reusable Tidbits and Shapes). Version 2 almost became the "Icon Genie." They landed on Wizard. Mike says he's only 2/10 disappointed about it
Watch → youtu.be/xbjXi0eXXFA?si=PAr-5...
Listen → www.buzzsprout.com/2092855/ep...
Icon Wizard 2.0 is out and it's a real upgrade: mix icon styles, layer up to 20 elements, build your own custom characters, and (new) run Power Transforms in web fonts, not just SVG. New Podcast Awesome episode has the whole story.
Watch → youtu.be/xbjXi0eXXFA?si=-V4VK...
New around here: we're spotlighting a few things that Web Awesome does that you might've missed.
First up, QR codes in one tag:
<wa-qr-code value="..."></wa-qr-code>
Try it live 👇
codepen.io/editor/team/...
WA 3.12 is a small but mighty release:
🎨 New components, variables, and slots added to the Figma Kit.
🔗 <wa-dropdown-item> navigation
🧰 Fixes and improvements
See it all: webawesome.com/docs/resourc...
Another week, another batch of ridiculously clever Icon Wizard creations.
From useful to hilarious to "how did they even think of that?"—the gallery keeps getting better. Submit yours for a chance to win a free year of Font Awesome Pro!
Check out the gallery → fontawesome.com/icons/gallery
https://sensorsandsensibility.com/ is #BuiltAwesome by Francis Berriman and @infrequently.org 🏆
Proposal: should we add a new `parseDateString` universal filter?
https://github.com/11ty/buildawesome/issues/4346
Feedback welcome!
🤝 From the desk of @snook.ca: “I Added Syntax Highlighting Using the 11ty PrismJS Plugin”
https://accessibilite.p11e.dev/ is #BuiltAwesome by Pascal Cauhepe
New pre-release of Dev Server: v3.0.0-alpha.11 features some lovely dependency reduction work from @macwright.com 🙌🏻
Dependency package count reduced from 31 to 22 (-9)
Disk weight reduced from 2.1 MB to 1.7MB (-20.8%)
https://github.com/11ty/dev-server/releases/tag/v3.0.0-alpha.11
If you rely on YAML front matter timestamp (date) parsing in your projects (outside of the special `date` property that informs content dates), you’ll want to review this `canary` breaking change: https://github.com/11ty/buildawesome/issues/4333
Please weigh in with feedback!
Missed the livestream? Check out our screencast on using the Icon Wizard 2.0 (beta) 👀
🚨 Live Now! Catch up with Jory & Noah on all things Icon Wizard 2.0 ✨
www.youtube.com/live/vKRvIfH...
⏰ Last call for the big event!
In 2.5 hours, Jory & Noah are showing off the new and improved Icon Wizard. Bring your weirdest ideas, and we'll bring them to life — live today at 1pm ET / 12pm CT / 10am PT!
🔗 Be there or, you know, be square:
www.youtube.com/live/vKRvIfH...
https://learneleventy.dev/ is a great resource from @spacegirl.ing! #BuiltAwesome
