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 |
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
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 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
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: 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.
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.
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.
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
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.
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 → https://youtu.be/M4vPIkwaHro?si=kmRYy6WsVQWAf7xJ
Listen → https://www.podcastawesome.com/2092855/episodes/19986866
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. 👌
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.
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.
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.
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)
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.
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 🔥
https://chromewebstore.google.com/detail/lit-inspector/faojnglflincboehhgkjgehnapjgiieh
"Snacktivities" are bite-size projects small enough to finish during a Snuggle week and built on the stuff you can only really do in person. The Icon Wizard is one of those projects.
Font Awesome paid plans can now add extra Kits, Custom Icons, pageviews, or bandwidth individually. No more upgrading a whole tier because one number ran out. https://blog.fontawesome.com/add-without-upgrading/
New Podcast Awesome: Font Awesome is fully remote, and twice a year we all meet up for a week we call the Snuggle. This episode traces the name back to the "Cape Cuddles" and covers what actually happens when a remote team gets together. 🧸 https://www.podcastawesome.com/2092855/episodes/19924901-cape-cuddles-icon-farts-and-hoobastank-the-story-of-the-snuggle
You can open and close <wa-dialog> from anywhere on the page without writing JavaScript. (The same concept works for <wa-drawer>)
Web Awesome Blazor Bindings: a community-maintained wrapper for C# devs.
Great work! 👏
More in the docs: https://webawesome.com/docs/components/otp-input
<wa-otp-input> can group passcode segments for you using the format attribute. Just add `#` to represent a character. Everything else is decoration.
<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.
More info in the docs: https://webawesome.com/docs/components/combobox
Web Awesome 3.14 is out! 🪜
🪜 <wa-stepper> (experimental) for breaking checkout, signup, and setup into clear stages
🔍 <wa-combobox> can load options from your server as the user types (Pro)
🤖 A rewritten webawesome-design skill with a DESIGN.md template
➖ <wa-divider> takes a label, like the "OR" between sign-in options
Aaand .... the Nintendo Power Glove was rushed to market in about five months, launched with a single compatible game, and only sold close to a million units thanks to the movie, "The Wizard" saying it was "so bad". BUT, the Power Glove is often cited as part of the path to the Wii Remote.
Dave Gandy's first Y Combinator interview, years before Font Awesome: no prep, and it went nowhere. His second, with Travis Chase: a session at the Mountain View Public Library with a childhood friend, working through Adobe Typekit comps. That one ended with a surprise second interview.
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: https://webawesome.com/docs/ai/agent-skills
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
New Podcast Awesome: the Font Awesome CDN experiment that took four people three months and converted one person, and what it taught us about failing well. Plus a few exhibits from the real Museum of Failure.
🎧 Listen: https://www.podcastawesome.com/2092855/episodes/19845860-the-cdn-experiment-that-converted-one-person-and-what-it-taught-us-about-failing-well
📺 Watch: https://www.youtube.com/watch?v=DMGJAk2XXEg
Get it here: https://webawesome.com/docs/components/otp-input/
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.
New Podcast Awesome episode is out: the Font Awesome CDN experiment that took four people three months and converted one person, and what it taught us about failing well. Plus a few exhibits from the real Museum of Failure.
Listen → https://www.podcastawesome.com/2092855/episodes/19845860-the-cdn-experiment-that-converted-one-person-and-what-it-taught-us-about-failing-well
Watch → https://www.youtube.com/watch?v=DMGJAk2XXEg
#Startups #Entrepreneurship #FontAwesome
https://loveandpickpockets.com/ is #BuiltAwesome by Gary Beason 🏆
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! https://blog.fontawesome.com/web-awesome-random-content/
🚀 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.
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:
https://codepen.io/editor/team/webawesome/pen/01a08cc3-720b-7cce-b267-a78562b64929
Web Awesome 3.13 is out! 🏷️
What's new:
🏷️ <wa-tag-input> (experimental) for collecting keywords, email addresses, or labels as removable tags
📊 A handful of <wa-data-grid> fixes for formatter clicks, flex columns, date filters, and icons
🎓 11 components promoted to stable, including accordion, pagination, date picker, and video
♿ Tab now reaches every <wa-accordion> header
Full changelog: https://webawesome.com/docs/resources/changelog
✨ 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 @vkc@linuxmom.net about creating a Podcasting Platform using static websites and the magical powers of 🪄 RSS!
Did you know that Norm Cox designed the original 3-line icon at Xerox PARC in 1981? He didn't find out it was nicknamed "hamburger" until a reporter called him in 2013 more than 30 years later. Ahmazing.
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 → https://blog.fontawesome.com/font-awesome-ai-agent-tools/
The hamburger menu icon started in 1981 as a Xerox screen-space hack. It disappeared for 20 years, came back on the first iPhone, got torn to shreds by UX researchers, and won anyway. The new Podcast Awesome episode is on how and why our own menu icon is an actual burger. 🍔
Watch → https://youtu.be/rkZ6ZfxWVIU?si=IccGgiy9KaIdC79a
Listen → https://www.podcastawesome.com/2092855/episodes/19714222
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. https://blog.fontawesome.com/web-awesome-docs-prose/
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 and @fontawesome too!) by @stefanfrede
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 → https://fontawesome.com/icons/wizard
In this post @justsnook describes a method to create exclusive RSS-only content: https://snook.ca/everything/secret-rss-posts/
@mattdsteele is trying out @davatron5000’s new MicroLighter Syntax Highlighting plugin (using CSS Custom Highlights) and shows how you can do the same on your Build Awesome/Eleventy project:
Icon Wizard is in beta and the team wants feedback: feedback@fontawesome.com. There's also a contest running through September 7 if you want to build something and get it into the public gallery.
Testing out some new OpenGraph images: https://build.awesome.me/
Icon Wizard is in beta and the team wants feedback: feedback@fontawesome.com. There's also a contest running through September 7 if you want to build something and get it into the public gallery.
All the ways to follow along to Build Awesome news and updates: https://build.awesome.me/how-to-follow/
The whole project traces back to an internal idea called F.A.R.Ts (Font Awesome Reusable Tidbits and Shapes) all within the context of "Snuggles": dedicated, in-person time for proof-of-concept work. Both versions of the Icon Wizard started there.
Watch → https://youtu.be/xbjXi0eXXFA?si=PAr-5PQI0Bv1kiS1
Listen → https://www.buzzsprout.com/2092855/episodes/19660934
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 → https://youtu.be/xbjXi0eXXFA?si=-V4VKN7xqvPA-qj8
Listen → https://www.buzzsprout.com/2092855/episodes/19660934
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 👇 https://codepen.io/editor/team/webawesome/pen/019ffca1-bd82-7c52-a88a-d090696114d5
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: https://webawesome.com/docs/resources/changelog#wa_3120
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 → https://fontawesome.com/icons/gallery
Proposal: should we add a new `parseDateString` universal filter?
https://github.com/11ty/buildawesome/issues/4346
Feedback welcome!
🤝 From the desk of @justsnook: “I Added Syntax Highlighting Using the 11ty PrismJS Plugin”
New pre-release of Dev Server: v3.0.0-alpha.11 features some lovely dependency reduction work from @tmcw 🙌🏻
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) 👀
https://youtu.be/7GpnRBcACK0?si=XBMeDhqkNVctaV4y
🚨 Live Now! Catch up with Jory & Noah on all things Icon Wizard 2.0 ✨
https://www.youtube.com/live/vKRvIfHP4vg?si=KDU5FkUpwAOp1IAA
https://learneleventy.dev/ is a great resource from @uncenter! #BuiltAwesome
Join us tomorrow on YouTube for a live Icon Wizard demo, a few sneak peeks at what's next, and our best attempt at building icons from your chat requests. Bring your weirdest ideas.
📅 Aug 19 at 1pm ET / 12pm CT / 10am PT → https://www.youtube.com/live/vKRvIfHP4vg?si=okbpaatHDTuWlXbX
New release: Import v2.0.1
Bug fix for <code> import as Markdown, dependency upgrades, Node minimum bump to v20.19+
RE: https://mastodon.social/@webawesome/117112173438258454
See what's new on the blog → https://blog.fontawesome.com/how-does-web-awesome-stack-up-against-shoelace/
Did you know? Eleventy v3 shipped with JavaScript front matter built-in (no plugin or extra config needed!)
Use ---js to enable it. Easier than a separate JavaScript data file!
Learn more: https://www.11ty.dev/docs/data-frontmatter/#java-script-front-matter
https://varun.ch/ is #BuiltAwesome by Varun Biniwale
Web Awesome ships a native.css layer that styles your actual HTML—headings, tables, forms, not just custom elements. Styles live in their own layer, so your CSS wins. Delete your !important declarations.
Still on Shoelace? https://blog.fontawesome.com/how-does-web-awesome-stack-up-against-shoelace/
Also covered in this episode: the many aliases for the beach ball, including SBBOD, SPOD, marble of doom, and (our genuine favorite) "bun of death," coined after someone spotted it on a bakery sign in Vienna.