Font AwesomeI think this is the beginning of a beautiful friendship.
We’ve all become used to component-driven development thanks to frameworks like Angular, Vue, and React. Building blocks like components let us encapsulate styles and behaviors. So when it comes to design, development, and testing, they’re great.
But the framework-specific components let us down in a lot of ways, because they’re only good for the framework they were made for, they have a limited lifespan, and changing frameworks/versions can lead to breaking changes that require a lot of work to fix.
Fortunately we can solve these problems with web components. They’re supported by all modern browsers, they’re framework-agnostic, and they’re part of the standard, so we know they’ll be supported for many years to come.
Shoelace is built on this technology — and even better news — Shoelace has partnered up with Font Awesome!
Font Awesome + Shoelace: together at last!
Jump to section titled: Font Awesome + Shoelace: together at last!In its early days, Shoelace was a slimmed-down version of Bootstrap, designed to allow website owners to customize their websites with custom properties. With Shoelace, users can import the library from a CDN and still customize everything to suit their needs.
The Shoelace 2.0 web component library was developed in response to the popularity of web components which allowed web application developers to create their own custom elements and components.
At the beginning, Shoelace was a part-time labor of love for its creator, Cory LaViska. But one fateful afternoon in 2022, Dave Gandy reached out to Cory, which started a conversation that grew into a partnership. (Eventually, they tied the knot, so to speak … )
At the time, FA-founders Dave and Travis had web components on the brain and to scratch their own itch had built an icon chooser in Stencil. They’d also been keeping an eye on Shoelace and paying special attention to a blog Cory published, which outlined his switch from Stencil to Lit. It was then that they realized Shoelace was the perfect tool to use for their web components.
Shoelace’s partnership with Font Awesome shows how web components can make development easier — which is really core to Font Awesome’s value to users. While Font Awesome provides developers with great icons and technology, Shoelace provides an HTML-forward, CSS-forward, standards-forward system that can be easily themed. Now through their collaboration, they’re creating a library of components that designers and developers can use regardless of which stack they’re working on.
How web components relate to design systems
Jump to section titled: How web components relate to design systemsWith web components, developers can create custom HTML elements and solve problems that component models within frameworks tried to solve through APIs built into the browser. In addition to being ideal fit for design systems, web components also allow developers to build “LEGO brick” components that can be assembled to build bigger and better systems. For example, developers can create a custom date picker web component that can be used in multiple places throughout an application, with a consistent design and behavior — which is a feature we don’t want to ever lego of.
Design systems are guidelines and specifications built to brand standards. In addition to colors, buttons, patterns, and layouts, they also include fonts. By creating a design system, developers can create a template and map for their websites. Additionally, design systems allow developers to customize their websites’ look and feel while maintaining brand consistency. In design systems, web components are critical since they enable developers to customize components’ appearance and functionality while maintaining their functionality.
Web components make development easier.
Jump to section titled: Web components make development easier.Web components are highly portable, which is a major advantage for developers. It doesn’t matter what the underlying SPA framework architecture or backend language is, they can be used in any environment. This means developers don’t have to worry about compatibility issues, or making different frameworks work together. Web components also reduce wasted time, as teams can use the same components regardless of their chosen stack.
To make development easier, web components enable powerful tooling. For instance, web components can be used with existing frameworks such as React and Angular. In addition, they can be used as stand-alone components without additional libraries or frameworks. The partnership between Font Awesome and Shoelace is an excellent example of how web components can reduce wasted time and make development easier. Web components are an essential tool for developers to quickly and easily customize their websites.
Web components are also easy to reuse, as they are modular and can be adapted to fit different projects. Finally, web components can improve performance, as they are lightweight and load quickly without the overhead of a framework. All in all, web components are like the Swiss army knife of web development (sadly, they can’t make you a sandwich … )
Additionally, modern browsers fully support web components, which has made them more popular with developers. As an example, Chrome reports that 18% or more of all page loads tracked by Chrome use custom elements. Compared to 1% in 2017 – 2018, this is a dramatic increase and illustrates that web components have traction in the dev community.
What does the future hold for the Font Awesome and Shoelace partnership?
Jump to section titled: What does the future hold for the Font Awesome and Shoelace partnership?While we’re still dreaming about what the future holds for this partnership, we definitely have ideas of how we can have a lot of fun. We can also provide handy tools for designers and developers to simplify their jobs.
For instance, we think it would be awesome to have an AI-driven design assistant that helps choose color palettes, font choices, and more. We are excited to work together to develop upcoming technologies that can make designers and developers’ lives easier and more efficient. We also plan to create a community of people who are passionate about the work they do and who can learn from one another. Finally, we look forward to creating an environment of collaboration and innovation.
Beyond that? We’re still dreaming. And … you know … you can always add more sprinkles. (It’s a life lesson.)
Want to learn more? Listen to Podcast Awesome!
Jump to section titled: Want to learn more? Listen to Podcast Awesome!If you’re looking to geek out even more about this match made in heaven, episode 9 of Podcast Awesome is a great place to start. In addition to the origin story of the FA + Shoelace partnership, they talk about the value of the open-source software community, life-changing career moves, learning web programming through PHP, and more!
