For those following along, the AutoCopy plugin is now called Html Relative Passthrough Copy and is part of the `addPassthroughCopy` API.

Coming soon to an Eleventy canary release near you:

Adds `html-relative` Passthrough Copy mode for relative asset references in HTML #3552 by zachleat · Pull Request #3573 · 11ty/eleventy
export default async function(eleventyConfig) { // glob here is relative to project root eleventyConfig.addPassthroughCopy("content/**/*.mp4", { mode: "html-relative" }); }...

Introducing <wa-page> with @webawesome.com ! Want to unlock the power of web components? Back the Web Awesome Kickstarter today at webawesome.com 🚨

🎁 Backers, check your inbox! Today we begin unwrapping Web Awesome, one feature preview per week, starting from <wa-page>, our favorite new component. 🧡

Not a backer yet? Get in on the action! You can still back Web Awesome for a limited time at webawesome.com

— Web Awesome (December 11, 2024 at 4:12:32 PM UTC)

🎁 Backers, check your inbox! Today we begin unwrapping Web Awesome, one feature preview per week, starting from <wa-page>, our favorite new component. 🧡

Not a backer yet? Get in on the action! You can still back Web Awesome for a limited time at webawesome.com

Myth, Meme, or Madness? The Truth About Ballmer’s Peak 🤔

🍺 What’s the deal with the Ballmer Peak? Myth, meme, or just good old-fashioned developer humor? In this episode of Podcast Awesome, we unpack the hilarity and history behind this coding legend, complete with personal stories, team insights, and a responsible PSA. Whether you’re debugging at 3 a.m. or just love a good laugh, this episode has something for everyone.

(And check out the episode on our YouTube for an even more fun! https://www.youtube.com/watch?v=qb77NS_zFgQ)

🍻 0:00 - Introduction to Ballmer's Peak 
💡 1:31 - What Is Ballmer's Peak? 
🎉 3:13 - Ballmer's Peak at Font Awesome Snuggle 
⚡ 5:15 - Steve Ballmer and Developer Energy 
🚀 7:07 - Achieving Peak Developer Performance 
🎶 8:32 - Real Developer Strategies for Peak Performance 
🔬 9:06 - DIY Breathalyzer and Exploring Ballmer's Peak 
🎬 10:23 - Conclusion and Credits 

Font Awesome: https://fontawesome.com/
The Font Awesome theme song was composed by Ronnie Martin
Audio mastering by Chris Enns and Lemon Productions

Font Awesome on Social 

🌤️ Bluesky: @fontawesome.com
🐦 Twitter/X: @fontawesome
📸 Instagram: @font.awesome
💼 LinkedIn:   / fontawesome   

🖥️ Don’t forget to like, comment, and subscribe for more nerdery, tech insights, and fun!

Stay up to date on all the Font Awesomeness!

If there are other expenses that folks think are good candidates for consolidation—please let us know! Happy to cover these

11ty Meetup followers...

Zach agreed to fund the 11ty meetup within 11ty. I donated our remaining Open Collective balance into the main 11ty one and archived ours.

All recurring donations are now cancelled (thanks Cory D and @bobmonsour.com !)

To donate to us in future, just donate to 11ty!

— Sia Karamalegos (December 2, 2024 at 6:18:21 PM UTC)

The Logic Defying Way to Creating an Awesome Place to Work

In this episode of Podcast Awesome, Matt chats with Font Awesome co-founder Dave Gandy about building a workplace that doesn’t just work — but works for everyone. Whether you’re hustling in a startup, navigating open-source communities, or just trying to figure out if your boss actually values your humanity, this one’s for you. 

Dave dishes on the magic of finding the right co-founder (hint: they need to tell you when you're off your rocker), why open-source is about more than just writing code, and how empathy might just be the ultimate leadership hack.  So, if you’re dreaming of cultivating a positive work culture — or just want to avoid soul-sucking jobs — this episode is for you.

Timestamp Summary
🧑‍🤝‍🧑 0:15 | Finding Balance and Empathy in Co-Founder Relationships 
🏢 6:04 | Finding a Workplace That Values Employees as Human Beings 
🌐 14:56 | The Value of Empathy and Community in Open Source 
💡 19:29 | Empathy and Leadership: Building Teams That Care 
🎙️ 24:27 | Behind the Scenes of Podcast Awesome Production   

Key Takeaways: 
The Co-Founder Code: Pick a partner who balances your strengths and isn’t afraid to call out your crazy ideas (yes, you have them). 
Open Source Awesomeness: It’s not just about profit—it’s about passion, collaboration, and making something bigger than yourself. 
Empathy is Everything: Forget power suits; your best leadership tool is actually understanding your team. 
Work-Life Reality Check: When scouting a new job, look for a place that respects *you*, not just what you produce. 
Leadership Done Right: The best managers focus on building teams that are better than them at what matters most. 

Notable Quotes:  
💡 “You need someone next to you that’s going to tell you when you’re crazy—or not—and that is of *such* extreme value.”  
💖 “Empathy is your qualification for leadership.”  
🚀 “Management is more about how you inspire and execute, not just delivering outcomes.”  
🏆 “The best managers hire people who are better than them at the job that needs to be done.”  
🌟 “You call it a lifestyle company like it’s a bad thing. Spoiler: every company is a lifestyle.”  

Resources: 
🎨 Font Awesome: FontAwesome.com 
🐦 Twitter: @fontawesome
📸 Instagram: @font.awesome
🌌 Bluesky: https://bsky.app/profile/fontawesome.com
🎶 The Podcast Awesome theme song was composed by Ronnie Martin: https://ronniemartin.org/
🎵 Music interstitials by Zach Malm: https://muzach.bandcamp.com/
🎛️ Audio mastering by Chris Enns at Lemon Productions: https://www.lemonproductions.ca/ 

Stay up to date on all the Font Awesomeness!

Nerd Show and Tell: Meet Zach Leatherman

Ready to geek out? In this episode of Podcast Awesome's Nerd Show and Tell, Matt sits down with none other than Zach Leatherman, the tech dynamo and creator behind Eleventy — the static site generator that’s got web devs buzzing. Zach’s tech-world experience is a wild ride of innovation, grit, and love for the open web. With a little help from our team here at Font Awesome, Zach’s pushing to make open-source sustainable and bring back the glory days of personal websites, free from algorithm overlords.

Zach gets real about the rollercoaster ride of building Eleventy and why owning your corner of the internet is more important than ever. Expect some hot takes on the tech industry, social media, and how platforms like Eleventy could just be the ticket to a new wave of web independence. Plus, you’ll get a peek into the collaborative brainpower with our founders Dave and Travis backing Zach’s mission. Hold onto your icons — this one’s packed!

Key Takeaways:

  • Eleventy: Zach’s creation was inspired by Jekyll, but it’s packed with unique features — no messy databases or plugins here! Simple, secure, and seriously impressive.
  • Sustainable Open Source: Zach’s career shines a light on the need for open-source projects to be sustainable, allowing devs to thrive without burning out.
  • Browser Dev Tools Love: Remember Firebug? Zach does. He spills on how these tools have shaped modern web development practices.
  • Indie Web Comeback: Forget the social media maze. Zach’s all about owning your digital real estate, championing a return to independent web publishing.
  • Font Awesome Collab: It’s a team effort! With the support of our founders and a shared mission, we’re backing Zach and Eleventy for a brighter, algorithm-free web future.

**Timestamp Summary 

🚀 0:00** | Zach Leatherman Discusses Eleventy and Open Source Challenges  

💸 1:59 | Navigating the Challenges of Open Source Project Funding  

⚖️ 13:04 | Balancing Open Source Passion with Sustainable Business Models  

🌟 20:15 | The Joy of Building Websites and Creative Storytelling  

🧻 25:26 | Debating the Proper Way to Hang Toilet Paper  

🌌 26:27 | Eleventy's Future and Integration into the Awesome Universe  

Links and Resources:

Credits:

Stay up to date on all the Font Awesomeness!

🤫 Spoiler alert! Thanks to @jabron.us ’s superhuman icon design efficiency, we were able to slot the new CSS logo into the imminent 6.7 release!

fontawesome.com/icons/css?f=...

However, we moved fast and broke things 🥲: we accidentally made it Pro-only, but it will be included in FA Free in 6.7.1.

Screenshot from https://fontawesome.com/icons/css showing the new CSS logo in rebeccapurple

New CSS logo just dropped. Thanks for the tip, @jabron.us!

More info: github.com/CSS-Next/log...

A rebeccapurple-colored rounded box with the top left edge left sharp. The text "CSS" appears at the bottom right.

— Cory LaViska (November 15, 2024 at 6:26:56 PM UTC)

New release: 🦴🐀 Eleventy Fetch v5.0.0

👑 Using platform `fetch()` (with timeout support!)
🎂 Adds URL, arbitrary function sources
🍣 Adds XML, parsed XML, raw response types
🗄️ Custom cache filename callbacks

Release Eleventy Fetch v5.0.0 · 11ty/eleventy-fetch
npm install @11ty/eleventy-fetch@5.0.0 Breaking: requires Node 18+ Breaking: Use native fetch() and drop node-fetch dependency by @uncenter in #37 Support URL instance target #41 Use AbortSignal ...

anildash.com is #BuiltWithEleventy 🏆

Hi everybody! In anticipation of doing more writing, I’ve brought all 25 years of my blog archives online, cleaned up lots of dead links, and even added a basic search capability. I hope there’s something there you find valuable! www.anildash.com (And let me know what I should write about next.)

Anil Dash
A blog about making culture. Since 1999.

— Anil Dash (November 15, 2024 at 10:14:47 PM UTC)

Introducing 📥 11ty/import: a CLI tool to import content as static files

👋🏻 Easily export all of your WordPress posts
👀 Show recent 🦋 Bluesky posts on your web site without expensive embeds
✅ Make a CMS out of anything on the web using PESOS

Try it out:

GitHub - 11ty/eleventy-import: Utility to import content from multiple services (and a CLI, too)
Utility to import content from multiple services (and a CLI, too) - 11ty/eleventy-import

Why 'Lifestyle Company' Is a Badge of Honor at Font Awesome

🎙 In this episode, Font Awesome founder Dave Gandy joins our host Matt Johnson for an honest, unfiltered convo about what it means to build a *lifestyle company* (and wear that badge proudly 💪). This isn’t your typical startup hustle. We’re diving into the “people-first” culture that makes Font Awesome a standout, from character-driven hiring to redefining what success means beyond growth on charts and graphs. 🏆💼

As Dave says, instead of climbing someone else’s ladder, Font Awesome is building its own way up, with purpose, transparency, and some solid work-life balance goals. Here’s why we believe that putting *people* over profit isn’t just good business — it’s just the way the work should be. 🌱💼

 🔑 Key Takeaways:

Lifestyle Company, Proudly: We’re embracing the “lifestyle” label, focusing on growth, happiness, and well-being over sky-high returns. 📈💆‍♂️

Character > Skills: At Font Awesome, character-first hiring = trust, respect, and people who actually *want* to stick around. **🫶✨

VC Vibes Not Required:** Font Awesome skips the “thousand-X-or-bust” mentality for a sustainable, fulfilling work culture. 👋💸 

 Life Outside Work Matters: The best parts of life are outside the office—so why not bring those values in? 🏠🌅 

The Right Partner in Crime: Success means finding a partner who balances your quirks. 👯‍♂️ The perfect co-founder is a friend, critic, and cheerleader rolled into one.

Timestamp Summary

0:12 | 🌱 Building a Lifestyle Company Focused on Well-Being and Growth 
6:52 | 💼 Creating a People-First Company Against Conventional Practices 
12:04 | 🧑‍🤝‍🧑 Human-Centric Product Design and Company Culture 
15:59 | 🤝 The Importance of Balanced Partnerships in Business 
20:38 | 🫶 Embracing a People-First Culture at Font Awesome

Links and Resources:

Credits:

Stay up to date on all the Font Awesomeness!

Character First: The Font Awesome Key to Hiring Success

In this edition of Podcast Awesome, Matt sits down with Font Awesome founder, Dave Gandy, at the 2024 Snuggle in Bentonville, Arkansas. Between karaoke sessions and Hoobastank choruses (blame Ed), Matt and Dave discuss a topic on a lot of minds lately: How do you build a company where people actually want to stick around?

With a tech industry average of just 18 months at a job, Font Awesome breaks the mold — no one has left in over 10 years. Dave and Matt dive into Font Awesome’s  hiring philosophy, the importance of building a people-first culture, and how giving employees autonomy and treating them like adults might just be the magic recipe for success. 

Key Takeaways:

  • Loyalty Beyond the Paycheck: At Font Awesome, it’s about treating people as humans first — loyalty comes from loyalty. Simple, right?
  • Hire for Character: Skills are important, but character and culture fit are what truly makes a team thrive.
  • Autonomy Matters: Give people the freedom to make decisions, and watch creativity and innovation skyrocket.
  • It’s Not Just Business: A company’s culture is built on everything someone brings from outside of work, not just the hours they log in the office.

Timestamp Breakdown:

  • 0:05 | 🎤 Welcome to the Snuggle: Karaoke, Game Nights, & Company Culture
  • 2:30 | 🏢 The Importance of Building a People-First Culture in Tech
  • 6:45 | 🧠 How Loyalty and Trust are Built When You Hire for Character
  • 11:10 | 👨‍💻 Autonomy is Key: Why Giving Employees Freedom is Essential
  • 15:55 | 💡 Solving Problems vs. Solving Interesting Problems: Finding the Balance
  • 21:30 | 🚀 How Font Awesome Created a Company People Want to Stick With

Links and Resources:

Credits:

Stay up to date on all the Font Awesomeness!

The Great Debate: Web Fonts vs. SVGs – Which Should You Use? It Depends

In this episode of Podcast Awesome, Matt and Rob take you on a wild ride through the evolution of web icons — because who doesn’t love a good glow-up story? From the pixelated mess of Geocities and MySpace days (RIP low-res images) to the sleek world of custom web fonts and SVG's moment in the sun, they break down each tech's pros and cons so you don’t have to.

Ever wondered how icons went from blurry to brilliant? We've got questions and Rob’s got the answers! He explains how web fonts came in like a hero to save the day, improving performance and making your designs look sharp when retina screens appeared on the scene. But wait—SVGs are here too, offering even more flexibility, accessibility, and crispness for those big graphic-heavy projects. Plus, with Font Awesome Kits, you’ll learn how to easily mix and match your icons for peak performance without breaking a sweat.

So. What kind of icon is best for your project — Webfont or SVG. Rob dodges the dogmatism and simply says, "well, it depends."

Key Takeaways:

  • Evolution of Icon Technology: An overview of the shift from low-resolution images to web fonts and SVGs, highlighting their impact on web design.

  • Pros and Cons: Detailed comparison of the advantages and disadvantages of web fonts and SVGs, including aspects like performance, accessibility, and usability.

  • Font Awesome Kits: Explanation of how Font Awesome Kits help developers navigate between web fonts and SVGs, offering features to optimize icon usage.

  • Accessibility and Semantics: Discussion on the importance of accessibility and semantic considerations in choosing icon technology.

  • Practical Advice: Guidance on how to decide between web fonts and SVGs for specific projects, with practical examples and insights.

    Timestamp Summary
    0:09 | 🌐 The Evolution of Icon Tech on the Web
    2:16 | 🖼️ Evolution of Web Icons from Images to Custom Fonts
    7:33 | ⚡ Web Fonts Versus SVGs for Faster and Accessible Icons
    12:13 | 🔍 Choosing Between SVG and Other Formats Depends on Your Project
    13:01 | 🎬 Web Fonts Versus SVG: Pros and Cons for Icon Animation
    15:40 | 🛠️ Making Web Fonts Accessible with Font Awesome Kits
    16:57 | 🎨 Advantages and Challenges of Using SVGs for Web Icons
    20:17 | 🚀 Optimizing Font Awesome: Web Fonts vs SVG
    26:40 | 🔧 Simplifying Font Awesome Upgrades with Kits
    28:27 | ✅ Making the Right Choice: SVG Versus Web Font

    Podcast Awesome: https://www.podcastawesome.com/
    Font Awesome Pro:  Level up with Font Awesome Pro!
    Webfont or SVG: Well, it Depends: https://blog.fontawesome.com/svg-or-webfont/
    https://fontawesome.com/plans
    Twitter: @fontawesome
    The Podcast Awesome theme song was composed by Ronnie Martin: https://ronniemartin.org/
    Audio mastering by Chris Enns at Lemon Productions: https://www.lemonproductions.ca/

Stay up to date on all the Font Awesomeness!

The Story Behind the Poo-Storm Icon

💩⚡️ Hold onto your butts, folks, because this episode of Behind the Icon on Podcast Awesome is about to get ...  messy! We’re diving headfirst into the iconic history of one of Font Awesome’s quirkiest creations — the Poo-Storm icon. But if not for the creation of a stinker of a particular emoji, the poo-storm icon may never have come to fruition.

It all starts with the legendary rise of the poo emoji, a cultural masterpiece that has made its way into countless texts, memes, and conversations (whether you admit it or not). 💬

This episode is packed with everything you never knew you needed to know about emoji and icons, including a hilarious behind-the-scenes look at how Jory Raphael, Font Awesome’s own Icon Making Boss, got an icon mash-up idea. From the humble beginnings of the cloud icon to its thunderous twist into a storm of poo, Jory breaks it all down with plenty of laughs and middle-school humor. ✨💩

And yes, "icon creation", "poo emoji origin", and "Font Awesome magic" are the real stars here. Whether you're a design nerd or just here to catch a case of the goofballs, this episode is sure to entertain. 💥

Key Takeaways:
💩 The history of the poo emoji dates back to the late '90s in Japan 🇯🇵, thanks to Shigetaka Kurita, who basically invented emoji communication as we know it.

⚡️ And when boredom and eye-crossing monotony set in on a particularly long day of icon design, Jory Raphael mashed up the poo emoji into something even more fun — thus the Poo-Storm icon was born. 💡 Humor + design is the name of the game at Font Awesome!

🌍 Thanks to the Unicode Consortium, the poo emoji officially went global in 2010, becoming the symbol for all things cheeky and lighthearted in digital communication.

🎨 Font Awesome’s philosophy? Playful design with a side of absurdity — the Poo Storm icon embodies this perfectly.

🚽 Pro tip: The Poo Storm icon isn’t just for giggles — it’s been spotted in the wild at a plumbing company, proving even the weirdest icons have a purpose!

Timestamp:
0:09 - The Evolution and Cultural Impact of the Poop Emoji 💩
4:58 - The Creation of the Poo Storm Icon ⚡️
8:04 - The Perfect Use of a Fun Icon 🚽
10:20 - Clever Use of Poo Storm Icon on a Home Inspections Website 🏠
12:26 - Awesome Theme Song and Video Editing Credits 🎶

Notes:
💡 Shigetaka Kurita: https://emojipedia.org/shigetaka-kurita/ 
🔤 Unicode Consortium: https://unicode.org  
💩 The Poo-storm Icon: https://fontawesome.com/icons/poo-storm?f=classic&s=solid  
🏠 ROI Home Inspections: https://roihomeinspections.com/ 
🎨 Font Awesome: https://fontawesome.com  
🐦 Twitter: @fontawesome: https://twitter.com/fontawesome  
📸 Instagram: @font.awesome: https://www.instagram.com/font.awesome 
💬 Threads: @font.awesome https://www.threads.net/@font.awesome  
💼 LinkedIn: Font Awesome: https://www.linkedin.com/company/fontawesome  
🎶 The Podcast Awesome theme song was composed by Ronnie Martin: https://ronniemartin.org/

Stay up to date on all the Font Awesomeness!

Behind the Icon: How the Double Horns Became a Metalhead’s Salute

In this headbanging episode of Podcast Awesome, we explore the story behind the devil horns gesture—an iconic symbol in the world of heavy metal. 🤘 From its origins in ancient superstitions to its popularization by metal legend Ronnie James Dio, this gesture has a history as rich as the riffs that accompany it. We also chat with Font Awesome’s own Jory Raphael, the creative mind behind the hand horns icon, to get an inside look at how this powerful symbol became part of the Font Awesome library. Whether you're a metalhead or just love a good story, this episode is a must-listen! 🎸

🕒 Timestamps: 
⏳ 00:09 - Heavy Metal and Visual Cues
🤘 00:35 - The Double Horns Hand Gesture
🧙‍♂️ 02:08 - Origin of the Devil Horns Gesture
🎤 02:49 - Ronnie James Dio and the Devil Horns
🧿 05:11 - The Evil Eye and Cultural Connections
🤟 06:56 - The Devil Horns as a Metalhead Salute
🎨 07:41 - The Creation of the Hand Horns Icon
🚀 09:56 - Call to Action for Font Awesome Community
🎧 12:36 - Credits and Closing Remarks

#DevilHorns #HeavyMetal #PodcastAwesome #IconDesign #MetalCulture #RonnieJamesDio

Podcast Awesome: https://www.podcastawesome.com/
Hand Horns Icon: https://fontawesome.com/icons/hand-horns
Font Awesome Pro: Ready to rock? Level up with Font Awesome Pro! https://fontawesome.com/plans
Twitter: @fontawesome
The Podcast Awesome theme song was composed by Ronnie Martin: https://ronniemartin.org/
Audio mastering by Chris Enns at Lemon Productions: https://www.lemonproductions.ca/

Stay up to date on all the Font Awesomeness!

The Story Behind the Dumpster Fire Icon: From Meme to Iconic Design

Ever wonder how a chaotic internet meme became an iconic design? Join us in this episode as we dive into the fascinating journey of the Dumpster Fire icon—from its fiery beginnings as a viral GIF to its status as a symbol of modern times. 🔥

(And if you want ever more entertainment from this episode, make sure to check out the YouTube version!)
 
We’ll explore the history behind the phrase “dumpster fire,” its cultural impact, and how it inspired the creation of one of Font Awesome’s most beloved icons. Plus, hear behind-the-scenes stories from our design team and discover why this icon is as relevant as ever!

🕒 Timestamps: 
⏳ 00:00 Intro and Overview of the Dumpster Fire
👋 01:15 Origins of the Phrase "Dumpster Fire"
📈 03:22 The Rise of the Dumpster Fire Meme
🖥️ 05:45 Tracing the Source of the Original Dumpster Fire GIF
🎨 07:35 Designing the Dumpster Fire Icon for Font Awesome
🔥 09:10 Why the Dumpster Fire Icon Belongs in the Political Category
💡 11:50 Fun Facts and Design Insights from the Font Awesome Team
🙌 14:20 How You Can Use the Dumpster Fire Icon in Your Projects
🎉 16:05 Conclusion and Final Thoughts

#DumpsterFire #FontAwesome #IconDesign #MemeCulture #InternetHistory

Podcast Awesome: https://www.podcastawesome.com/
YouTube video version of this episode: https://youtu.be/8X40p-kfxYo
Dumpster Fire Icon: https://fontawesome.com/icons/dumpster-fire
Font Awesome Pro: Want to put the Icon Wizard to use? Grab a Font Awesome Pro subscription! https://fontawesome.com/plans
The Origin of the Internet's Most Famous Dumpster Fire: https://www.entrepreneur.com/science-technology/the-origin-of-the-internets-most-famous-dumpster-fire/284041
Twitter: @fontawesome
The Font Awesome theme song was composed by Ronnie Martin https://ronniemartin.org/
Audio mastering by Chris Enns at Lemon Productions https://www.lemonproductions.ca/

Stay up to date on all the Font Awesomeness!

The Story Behind the Mullet Icon: Celebrating an Enduring Cultural Symbol

The Story Behind the Mullet Icon: Celebrating an Enduring Cultural Symbol

🎬 Join us as we delve into the resilient history of the mullet, from its uncertain origins to its pop culture prominence in the '80s and '90s. 🎸 Learn about the creation of Font Awesome's 'User Mullet' icon and enjoy entertaining stories from team members who sported mullets. ✂️ Discover the evolution of this iconic hairstyle and how it has shaped popular culture over the decades.

🕒 Timestamps:
⏳ 00:00 The Enduring Legacy of the Mullet  
👋 00:55 Introduction to the Series  
📜 01:24 Historical Origins of the Mullet  
🎤 02:19 Cultural Impact and Popularity  
📚 03:17 Etymology and Alternative Names  
🔄 05:13 The Mullet's Modern Resurgence  
🖌️ 05:35 Creating the Mullet Icon  
🎨 06:10 Design Insights from Jory Raphael  
🎉 08:47 Personal Mullet Stories  
🙌 15:57 Conclusion and Community Engagement

#MulletMadness #FontAwesome #IconicStyles #PopCulture #MulletIcon

Podcast Awesome: https://www.podcastawesome.com/
User-hair-mullet icon: https://fontawesome.com/search?q=user%20hair%20mullet&o=r
Twitter: @fontawesome
The Font Awesome theme song was composed by Ronnie Martin
Audio mastering by Chris Enns and Lemon Productions

Stay up to date on all the Font Awesomeness!

The Story Behind the Sharp Icons: How a Whiteboard Idea Accidentally Turned into a Full Icon Set

In this deep dive into the creation of Font Awesome's Sharp Icon Set, designers Jory and Noah share the behind-the-scenes story of transforming a casual idea into a reality. 

Jory recounts the unplanned inception of the Sharp Icon Set, initially just a bullet point on a whiteboard that evolved into a full-fledged project due to a promotional video. The discussion sheds light on the challenges they faced, such as maintaining consistency with the existing icon grid sizes and artboard constraints, while exploring the potential for new design directions in the future. Noah elaborates on his journey from Figma advocate to a pivotal member of the Font Awesome team, charged with defining the rules and styling for a sharp rendition of their iconic set.

Timestamp **Summary
**
 | 0:01:04  | The idea of Sharp icons accidentally made it into a video.
 | 0:02:01  | Sharp icons originated during a brainstorming session.
 | 0:03:31  | The concept of sharp icons was included in the version six video.
 | 0:04:09  | We'd committed ourselves to Sharp icons, and Noah was hired to help.
 | 0:06:26  | Noah played a significant role in designing the Sharp icons.
 | 0:07:47  | Noah initially declined to help, but eventually joined the team.
 | 0:09:44  | Jory worked on the Sharp icons while quarantined with COVID.
 | 0:10:53  | Matt and Noah collaborated on copy and graphics for the Sharp icons.
 | 0:11:47  | The main challenge was adapting the icons to a different grid size.
 | 0:12:20  | The challenges of maintaining consistency between icon families.
 | 0:12:50  | Making design choices to ensure compatibility with existing designs.
 | 0:13:33  | The challenges of showcasing different icon families on the website.
 | 0:14:18  | Updating icon search to include references to Sharp & Classic styles.
 | 0:15:03  | Jory and Matt discuss the user-friendly design of the icon search tool.
 | 0:15:26  | The complexity of managing a large number of icons and styles.
 | 0:16:22  | How Noah got involved with the Sharp project and his initial work.
 | 0:18:22  | Noah and Jory's collaboration on a Figma event.
 | 0:19:22  | Noah explains how he joined the Sharp project.
 | 0:20:36  | Noah discusses the challenges of creating Sharp icons.
 | 0:21:24  | The visual density between rounded and sharp corners in icons.
 | 0:22:39  | Establishing constraints for the Sharp icon set.
 | 0:25:11  | Using Sharp icon sets and their suitability for different types of UI.
 | 0:26:37  | Sharp icons work well with stark and geometric typefaces.
 | 0:27:51  | Sharp icons may be suitable for fintech and professional themes.
 | 0:28:16  | The difference between icon families and styles in Font Awesome.
 | 0:30:38  | Choosing the right icon weight based on the legibility required.
 | 0:32:23  | New icons based on a mathematical shape called the super ellipse.
 | 0:32:51  | Good design should go unnoticed and guide the user intuitively.

Show Notes

Stay up to date on all the Font Awesomeness!

The Latest on Web Awesome's Alpha Release

Dive into the wild world of web development with the Web Awesome team! Listen as Matt, Lindsay, and the (podcast) elusive Corey dish about their successful Kickstarter, the alpha launch of Web Awesome, and the exciting future of web components. You'll get the inside scoop on their perfectionist struggles, theming API adventures, and how they're revolutionizing the way teams collaborate. Plus, bonus cat cameos!

Timestamp **Summary
**
 | 0:10  | Web Awesome Alpha Launch and Team Reflections
 | 3:22  | Redesigning Theming API for Web Awesome's Alpha Release
 | 9:22  | Challenges in Developing Complex UI Components
 | 10:49  | Building Web Awesome: From Open Source to Paid Product
 | 15:38  | Web Awesome Pro Features and Launch Timeline
 | 19:04  | Revolutionizing Team Collaboration with Functional Design Systems
 | 23:04  | Exciting Updates on Alpha Release and Lifetime Discounts

"I think I can speak for the whole team that we're all a bit of perfectionists, so I don't think we were ever ready to release an alpha."

Lindsay - (0:02:54)

"The theming was a big thing that I think we wanted to have pretty much a bow on when we released the alpha."

Lindsay - (0:03:22)

"Shout out to Lindsey for her amazing work on the theming API, which is completely redesigned a lot, lot easier."

Cory - (0:03:59)

"Shout out to Connor, who's not on this chat today, but he did some amazing work to convert to all of the form controls to use a new API that never existed when these form controls were originally created."

Cory - (0:05:59)

"We've had quite a few issues reported so far that we're looking into a lot of discussion started."

Lindsay - (0:02:27)

"Obviously, we couldn't have done this without you."

Lindsay - (0:23:23)

"I kind of have a component addiction. I really like doing this stuff. So my hobby is also my career, and so that it's cool that that got to converge in such a way that I can work full time on something I actually really enjoy working on."

Cory - (0:13:46)

----------------------
Show Notes

Stay up to date on all the Font Awesomeness!

Podcasting 101: How Podcast Awesome Came to Life

In this episode of Podcast Awesome, host Matt Johnson takes listeners behind the scenes of starting and producing Podcast Awesome. Despite being a newbie to podcasting, Matt shares his journey, from finding the initial idea buried in a Basecamp thread to releasing 20 episodes. He discusses capturing the podcast's vibe, and choosing the right software and equipment. Matt also shares insights from podcasting veteran Matt Carter and highlights the challenges and triumphs of what it takes to capture an authentic feel. And if gear and software is your thing, there's some conversation about that, too.

Feeling intimidated by starting your own podcast? Don't know what you're doing? You're in good company, we're figuring it out, too, as we "build the plane in the air." !

Timestamp **Summary
**
 | 0:00:08  | Introduction to the podcast and its purpose
 | 0:01:04  | The decision to start recording episodes without much feedback
 | 0:02:04  | Importance of capturing the podcast's vibe and subject matter
 | 0:03:33  | Emphasis on Font Awesome's nerdery and company culture
 | 0:05:14  | Determining the purpose and voice of the podcast
 | 0:05:47  | Meeting with creative team and understanding brand guidelines
 | 0:06:25  | Advice from podcasting buddy Matt Carter
 | 0:08:06  | Choosing the right software for recording and editing
 | 0:09:58  | Workflow for editing using GarageBand, Audio Hijack, and Descript
 | 0:11:50  | Importance of quality gear for audio capture
 | 0:12:50  | Tips for getting good audio and avoiding common mistakes
 | 0:13:24  | Creating a checklist for podcasting setup
 | 0:13:49  | Importance of capturing good audio at the beginning
 | 0:14:19  | Editing tips: finding the right balance, getting feedback
 | 0:15:37  | Choosing theme music: options and licensing agreements
 | 0:16:42  | Using interstitials to create a relaxed atmosphere
 | 0:18:37  | Nerd show and tell: short episodes featuring team members
 | 0:19:08  | Constantly improving editing, hosting, and content marketing
 | 0:19:32  | Getting over the discomfort of hearing one's own voice
 | 0:19:57  | Rolling the credits: acknowledgments and production details

**Quotes

Matt-(0:02:49)**

"If you've spent any time with developers and designers, then you know they're really into the stuff that they're into, and it tends to be pretty dorky."

Matt-(0:04:43)"What's the purpose of your podcast? Maybe it's to share company news, to educate your customers, or to entertain."

Matt-(0:06:25)"The whole idea of making sure your conversation partner feels relaxed, and so the conversation feels natural."

Matt-(0:08:06)"The good news is that there's a ton of tools out there, and some of them are even free."

Matt-(0:09:11)"I started with GarageBand because I had a basic understanding of it from years past recording music demos with friends."

Matt-(0:11:50)"I don't know a single soul who likes to hear the sound of their own voice, and I'm definitely no different, but it's just something you have to get over."

Stay up to date on all the Font Awesomeness!

Nerd Show and Tell: Meet Konnor Rogers

Episode Summary:

In this episode of Podcast Awesome we have an inspiring chat with Konnor Rogers, a developer at Web Awesome with a fascinating career trajectory. Starting his professional life as a paramedic and self-teaching his way into web development, Connor's journey epitomizes the relentless pursuit of a  career in technology. 

Konnor shares insights into his transition from paramedic to coder, highlighting the challenges of being self-taught and the breakthrough opportunities that led to his role alongside Corey at Web Awesome. He discusses current projects such as component development, the intricacies of form association, and the excitement of tackling the much-anticipated Kickstarter stretch goals like date pickers and rich text editors. Listeners can expect to hear a developer-centric conversation enriched with the technical specifics of Web Awesome's ongoing efforts to deliver awesome components to customers.

 
Timestamp | Summary

2:58 | From Paramedic to Web Developer: A Journey of Learning
4:05 | Balancing Education, Work, and Family Life
4:38 | Discovering and Contributing to Shoelace Components
5:04 | From Startup to Microsoft and Beyond
6:45 | Unconventional Paths to Tech Careers and Self-Taught Success
9:40 | Improving Form Controls in Web Development
12:58 | Refining Radio Button Accessibility and Behavior
14:09 | Challenges of Building an Accessible Date Picker Component
17:02 | Embracing Iterative Progress in Product Development
17:03 | Challenges in Building Advanced Web Components
20:00 | Early Mornings and Unusual Paramedic Tales
23:15 | Discussing Favorite Fonts, Icons, and Web Components
25:11 | Competitive Gaming and Balancing Family Life
26:42 | Recognizing Personal Limits with Hobby Enthusiasm

Resources:

Stay up to date on all the Font Awesomeness!

Nerd Show and Tell: Meet Lindsay Miller

Episode Summary:

In this episode of Podcast Awesome, we chat with the Lindsay Miller, the first brave soul from the Web Awesome team to take the hot seat on the Nerd Show and Tell. 

Beginning with a look into the inception of Lindsay's career and her interaction with Font Awesome before joining the Web Awesome team, we discuss the significance of a design system — a topic often shrouded in industry jargon yet fundamental to cohesive digital experiences. Lindsay also recounts  being part of the recent Web Awesome Kickstarter campaign, which hit the 700,000 milestone.

Timestamp | **Summary
**
0:00 | Chatting Design, Tech, and Font Awesome with Lindsay Miller
3:14 | From Solo Designer to Font Awesome Enthusiast
4:13 | Embracing Company Culture and Innovative Products
6:53 | From Childhood CSS Fascination to UX/UI Professional
10:32 | Landing the Dream Job (While Experiencing Imposter Syndrome)
14:56 | Addressing Inconsistencies in Development Practices
15:54 | Design Systems: Building Blocks for Developer Efficiency
19:47 | Developing and Perfecting Thematic Web Design Systems
23:47 | Kickstarter Success Brings Exciting Yet Daunting Challenges
24:36 | The Complexities of Building an Accessible Date Picker
27:59 | Icon Design Delights and the Font Awesome Possum
32:37 | Homeownership Inspires Mario-Inspired Wall Art
34:59 | Nostalgic Reflections on Star Wars and Creative Inspirations

Resources:

Stay up to date on all the Font Awesomeness!

Introducing the Icon Wizard: Where F.A.R.T.S. Become Arts

Designing custom icons is a gas-tly important part of modern design. It can make or break a brand, and sometimes you just need to let one rip and add a bit of spice to a website or app. However, creating custom icons can be a real stinker – a time-consuming and tedious task that can leave you feeling deflated. But don't worry, the Font Awesome team has a new feature that's a real breath of fresh air: The Icon Wizard — otherwise known by the internal code name, F.A.R.T.S (Font Awesome Reusable Tidbits and Shapes.) The Icon Wizard is a new-ish Font Awesome feature that allows Pro users to add icon modifiers, which allows for nearly limitless icon options! 

Join us as we yuck it up with Jory Raphael, Mike Wilkerson, and Ed Emanuel from the Font Awesome team as we channel our inner middle schooler humor (and talk about the making of very serious software, of course!)

The project was conceived during the team's Snacktivities, which are small creative projects undertaken during their gatherings. While the initial concept did not focus on customizing icons, it evolved into the idea of applying modifiers to icons to create unique variations. The team's enthusiasm and dedication to the project led to its development during their collaborative sessions.

The Icon Wizard project presented challenges, such as user interface design and technical issues related to SVG fill rules. Despite these obstacles, the team worked together to overcome them and create a functional and user-friendly feature. This feature allowed users to select and apply modifiers to icons, providing them with the flexibility to customize icons according to their preferences.

Aside from the obviously humorous nature of this conversation, the tea, explores the practicality of the feature, highlighting the ability to add useful modifiers like a slash or a circle-plus to any icon in different styles. The team's playful banter and creative thinking during the development process added a fun and lighthearted element to the project, showcasing their innovative and humorous approach to icon design and customization.

---------------------

**Time Stamps
**
[00:00:43] Icon Wizard project and F.A.R.T.S.

[00:04:34] Customizable Icons.

[00:09:38] Challenges with SVG fill rules.

[00:11:16] SVG path winding rules.

[00:14:43] Modifier challenges and favorites.

[00:19:25] Icon Wizard and modifiers.

[00:22:26] Burrito modifiers and bacon.

------------------
**Show Notes
**
https://fontawesome.com/icons
The Font Awesome theme song was composed by Ronnie Martin
Audio mastering by Chris Enns and Lemon Productions

Stay up to date on all the Font Awesomeness!

Managing content management (with no vendor lock-in) — David Large, Liam Bigelow (11ty Conf 2024)

Watch Managing content management (with no vendor lock-in) — David Large, Liam Bigelow (11ty Conf 2024) on YouTube

CloudCannon is the Recommended CMS Partner of 11ty:

https://cloudcannon.com/11tyconf/
https://cloudcannon.com/blog/how-to-manage-hundreds-of-connected-websites-with-a-git-based-headless-cms/

This was a talk given at the 11ty International Symposium on Making Web Sites Real Good (2024): https://conf.11ty.dev/2024/managing-content-management/

If Jamstack has taught us anything, it’s that websites work best when they’re generated from folders full of flat files. Even massively interconnected websites!

We talk through a classically Jamstacky approach to content management for large organizations: mounting shared layout and component repositories, creating a central content lake to aggregate content like news articles, and automating site builds and deployments when your content or dependencies change.

11ty and Large-Project Tooling — Paul Everitt (11ty Conf 2024)

Watch 11ty and Large-Project Tooling — Paul Everitt (11ty Conf 2024) on YouTube

This was a talk given at the 11ty International Symposium on Making Web Sites Real Good (2024): https://conf.11ty.dev/2024/11ty-and-large-project-tooling/

JetBrains has a knowledge base with lots of content, customizing, authors, developers… so we built it in Gatsby. Then switched to 11ty. But we wanted to keep some of the large-project tooling, so we added it. In this talk, we'll cover component driven development through TypeScript and TSX, unit testing with Vitest, in-editor validation of Markdown frontmatter for authors, content queries, and more.

Digital Frontiers, IndieWeb Cowboys, and A Place Online To Call… — Henry Desroches (11ty Conf 2024)

Watch Digital Frontiers, IndieWeb Cowboys, and A Place Online To Call… — Henry Desroches (11ty Conf 2024) on YouTube

This was a talk given at the 11ty International Symposium on Making Web Sites Real Good (2024): https://conf.11ty.dev/2024/digital-frontiers-indieweb-cowboys-and-a-place-online-to-call-your-own/

The IndieWeb is a community of developers and designers and web-surfing wraiths connected by a belief in personal websites/domains as identity, digital self-publishing, and perhaps most chiefly owning one's content. In this talk, Henry will explore the key principles of the IndieWeb, and specifically focus on the concept of POSSE (or "Publish (on your) Own Site, Syndicate Elsewhere"), its benefits, and how it empowers folks to reclaim ownership of their online content or data. They will also discuss concrete and actionable strategies for implementing POSSE in one's own online presence (PERHAPS USING ELEVENTY?!?!?) and the potential impact it can have on the wider web

You're Probably Doing Web Performance Wrong —  Sia Karamalegos (11ty Conf 2024)

Watch You're Probably Doing Web Performance Wrong —  Sia Karamalegos (11ty Conf 2024) on YouTube

This was a talk given at the 11ty International Symposium on Making Web Sites Real Good (2024): https://conf.11ty.dev/2024/you-re-probably-doing-web-performance-wrong/

Lighthouse 100 is a common goal for developers seeking to make their sites fast, but does this really center user experience? In this talk, Sia will cover how to get a broader perspective on how real users are experiencing your website performance and better strategies for improving it.

Building a Town That Doesn't Exist — Dan Sinker (11ty Conf 2024)

Watch Building a Town That Doesn't Exist — Dan Sinker (11ty Conf 2024) on YouTube

This was a talk given at the 11ty International Symposium on Making Web Sites Real Good (2024): https://conf.11ty.dev/2024/building-a-town-that-doesnt-exist/

The town of Question Mark, Ohio has a city hall, a newspaper, a library, a chicken joint, an ice cream store, a dump, a haunted factory, two cults, a sordid past, and a mysterious glowing void in the woods.

None of it is real, of course, but all of it exists on the web, thanks to Eleventy, Tailwind CSS, and Alpine.js, the crucial building blocks for creating a year-long immersive novel told not in a book but across the entire internet. This talk looks under the hood at how one person built 40 websites to tell the story of Question Mark, Ohio, a town that disappears into time.

Don't Fear the Cascade — Mayank (11ty Conf 2024)

Watch Don't Fear the Cascade — Mayank (11ty Conf 2024) on YouTube

This was a talk given at the 11ty International Symposium on Making Web Sites Real Good (2024): https://conf.11ty.dev/2024/dont-fear-the-cascade/

In this talk, Mayank will teach the audience how to make sense of the cascade, clear up some common misconceptions (e.g. shadow DOM vs host context styles), and ultimately offer practical advice on how to make best use of the cascade.

They will show off some newer game-changing CSS features (like :where, cascade layers, and @scope) that enable us to write styles with confidence and intention. They may also sprinkle in some tips on how these new features interact with current workflows, including frameworks, build tools, browser devtools, and IDEs.