Missing; 🕸️ awesome; Showcase

We’ve got two very distinct CSS (with a wee bit of JS tossed in) frameworks to look over in today’s Drop, with the last section providing a demo of their use IRL.

(Drop title homage reference…)

---

TL;DR

(This is an LLM/GPT-generated summary of today’s Drop using SmolLM3-3B-8bit via MLX and a custom prompt.)

(Aaaand…we’re back to the desired output, still having changed nothing.)

• Missing CSS framework builds in three layers: foundation for default styling, second layer for semantic patterns, and third for modern needs. It emphasizes semantic HTML and uses CSS custom properties for customization, targeting smaller projects and encouraging proper markup. (https://missing.style/)
• Web Awesome is a modern web component library built on Shoelace with improvements like Font Awesome support, extensive testing, and modern tooling (LitElement, esbuild). It prioritizes framework-agnostic components, theming via CSS custom properties, and accessibility. (https://webawesome.com/)
• The showcase demo demonstrates both frameworks by creating a CVE lookup app using Caddy and CIRCL’s API, showcasing clean, professional results without templating. It includes JSDoc and contributions from Claude and myself, with a README for setup. (https://codeberg.org/hrbrmstr/vl-missing-awesome)

---

Missing

Longtime Drop readers know I’m a sucker for “just link to this style sheet and your project will automagically look 10x better” CSS stacks, and Missing is a solid entry into said genre.

The framework builds systematically through three distinct layers. The foundation provides polished default styling for standard HTML elements. That means headings, paragraphs, forms, and tables look professional immediately without requiring any classes. This goes beyond typical classless libraries by adding intelligent semantic pattern recognition in the second layer.

The second layer automatically styles common HTML patterns when they follow semantic conventions. Navigation lists, for instance, receive appropriate styling and ARIA attributes without manual class application. This encourages proper semantic markup while delivering visual polish.

The third layer addresses modern web needs that HTML hasn’t fully solved, providing utility classes and custom elements for specific styling requirements that semantic HTML alone cannot handle.

This approach teaches solid HTML fundamentals. Developers learning with utility-first frameworks often skip semantic HTML mastery, constantly reaching for classes instead. Missing inverts this by requiring proper semantic markup first, then progressively enhancing it.

The customization system relies on CSS custom properties for theming and adjustments. This proves more maintainable than style overrides and enables multiple themes without rewriting CSS rules.

The creators explicitly target the “complexity sweet spot” for smaller projects and personal sites. This honest assessment of use cases distinguishes Missing from frameworks attempting universal application. A personal blog requires different tooling than a large application, and Missing embraces this reality.

Definitely check out the linked showcase sites, as they demonstrate this philosophy super well. They appear clean and professional without feeling templated, suggesting the framework successfully balances visual polish with individual character preservation.

---

🕸️ awesome

Web Awesome (GH) is a comprehensive open-source library of web components that evolved from the Shoelace component library. It’s built by the same team but with significant improvements and backing from Font Awesome.

As we’ve covered extensively, web components are reusable pieces of user interface code that work across all modern web frameworks—React, Vue, Angular, or vanilla HTML. They’re built on web standards, giving them incredible longevity without requiring framework-specific syntax.

Shoelace was an earlier open-source web component library known for its clean design and framework-agnostic approach. Web Awesome builds on this foundation with several improvements:

• it is now supported by the Font Awesome team, bringing substantial resources and expertise
• it’s been extensively tested and refined for real-world use
• is crafted with modern tooling, including LitElement (!!!), esbuild, and NPM workspaces

Web Awesome follows key principles for modern web development:

• components should work regardless of JavaScript framework choice
• they must also rely on native web technologies for longevity
• theming should not be an afterthought and should be handled via CSS custom properties
• accessibility is paramount

Web Awesome offers flexible installation options: CDN for quick prototyping, NPM for sophisticated projects, or building from source for customizations. The development workflow includes scaffolding tools and automatic reload functionality.

The core library remains free and open-source with clear contribution guidelines. This creates a sustainable ecosystem where the community benefits from high-quality components while maintainers can support advanced features through potential commercial offerings.

---

Showcase

Blather is fine, but both resources in today’s Drop are visual beasts, so it makes more sense to both tell and show.

I threw together a quick demo of how one might go about using each framework by creating a small CVE lookup web application. There’s no “build” or package.json. The examples are 100% client-side, vanilla (outside the use of the frameworks) JS, CSS and HTML.

To make it as simple as possible, it relies on a Caddy server configuration that listens on port 8000 for the web interaction and also sports a caching reverse proxy on 9292, which fronts requests to CIRCL’s Vulnerability-Lookup API (to both avoid bothering their server too much and to set up a CORS-friendly environment).

The README has all the info on how to use the demo, so we’ll leave y’all to the git clone-ing and justing.

Claude wrote all the JSDoc (b/c “lazy”) and ~60% of the README (b/c “tedious”). I had to learn the Missing and Web Awesome bits the hard/fun way and also tried to show some best practices regarding JS safety & resilience, one of which Claude did correct me on after it finished the JSDoc (the JSDocs are only in the Web Awesome demo files since I didn’t trust Claude to leave the single-file Missing demo HTML unscathed).

After building both, I’m definitely quite fond of Web Awesome (it being based on Lit elements just adds icing on the cake), and backed the 3.0 release so I can (eventually) kick the tyres on the premium bits in a future Drop.

---

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

• 🐘 Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev
• 🦋 Bluesky via https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy

☮️