Issue #476 (CSS Classes, Frameworks, Jamstack, Uncats)09/01/22
Scout: Powerful Application Monitoring
Easily analyze increased response time with intuitive dashboards that help you drill down into individual endpoints, requests, paths, and users tied to your slow-downs. Scout quickly shows you the exact endpoint causing the issue.
Start a Free Trial!
|
|
Almost every CSS framework available for use today takes advantage of HTML/CSS classes. But developer Keith Cirkel is attempting to make all those frameworks obsolete with his controversial article: CSS Classes considered harmful.
As soon as I saw the title, I immediately said to myself, "Oh great, another old-school expert claiming we should use IDs and descendant selectors for styling more." But that's not at all what this is about and I have to admit, I'm intrigued by his thought process.
First of all, Keith provides a really nice history lesson to show how CSS classes (or more accurately, HTML class attributes) came to be. During that section, I like the following comparison:
"Conceptually you could think of these as classical inheritance (so class Card extends Div) - inherit the semantics and base styles of div while making a re-usable style for a Card class."
This lays the groundwork for a discussion of the weaknesses of using classes in different ways, including BEM, various forms of OOCSS, CSS Modules, and even atomic CSS. He discusses many of the supposed drawbacks of atomic CSS.
 |
An example of BEM-style classes in CSS
He sums things up by explaining:
"The key issue with all of these solutions is that they centre around the class property as the only way to represent the state of an object. Classes, being a list of arbitrary strings, have no key-values, no private state, no complex types (which also means IDE support is quite limited) and rely on custom DSLs like BEM just to make them slightly more usable."
He then presents his solution to the problem, which is based around HTML attributes — specifically custom data-* attributes — and custom HTML tag names.
He expands on the benefits of his solution fairly well, so you should check out the full post. I'm still taking the time to grasp the concepts he presents, but I definitely think there's some validity to his solution. I've never really had a problem with using attribute selectors as an alternative to classes, so this is something to look into that might change how we write CSS in the future.
Now on to this week's tools!
|
Front-end Frameworks
Scout: Powerful Application Monitoring
Easily analyze increased response time with intuitive dashboards that help you drill down into individual endpoints, requests, paths, and users tied to your slow-downs. Scout quickly shows you the exact endpoint causing the issue. SPONSORED
breeze-next
An application / authentication starter kit frontend in Next.js for Laravel Breeze (which provides a minimal, simple implementation of all of Laravel's authentication features).
Puppertino
An unofficial framework designed based on the Human Interface Guidelines from Apple for macOS and iOS.
System.css
A design system for building retro interfaces that resemble Apple's System OS, which ran from 1984-1991.
Saas UI
An advanced React component library and starter kit built with Chakra UI to help you build essential SaaS functionality quickly.
Cloudscape
An open source design system for the cloud from the AWS team, offers UI guidelines, front-end components, design resources, and dev tools for building intuitive, engaging, and inclusive user experiences at scale.
Varnish UI
A library of elegant, yet powerful UI components built using Vue and Tailwind, with dark mode support and live demos for all the components in the docs.
 |
Skeleton
A full-featured component library built with Svelte and Tailwind that allows you to build fast and reactive user interfaces.
Ariakit
A set of React and TypeScript-based components with a strong emphasis on accessibility.
Bedrock UI
A high-performance component library built with TypeScript and SCSS, specifically for building design systems.
secure-electron-template
A security-focused boilerplate and starter kit for building apps using Electron.
Browser Extension Template
A starter kit for building browser extensions, with support for React, Preact, Typescript, and Manifest v3.
|
The Uncategorizables
Stay up-to-date with CSS
Stay up-to-date with the latest trends in CSS by getting the most relevant and valuable articles and tutorials directly into your inbox. Join more than 30,000 developers and designers and sign up today. SPONSORED
browsers.fyi
A quick reference too look up what is the latest version of each major browser, with a link to the latest release notes for each one.
Affine
An open-source, privacy-friendly, next-generation collaborative knowledge base, similar to Notion, Miro, Monday, etc.
Hanko
A Go- and TypeScript-based open-source authentication solution that can do more than just passwords.
Web UI
A set of design templates and app templates for Figma and Adobe XD. Downloads require email address.
Stashpad
A developer notepad that lets you organize and take notes without interrupting your workflow.
grex
Online regex tool to generate a matching regular expression from the test cases you provide.
Whist
A native "cloud-hybrid" web browser with cloud tabs, designed to be crazy fast and light.
privacy.sexy
An open-source tool to enforce privacy and security best-practices on Windows and macOS.
Web Developer
Popular browser extension that adds various useful web developer tools to your browser.
Markwhen
A text-to-timeline tool that allows you to write markdown-ish text that gets converted to a nice looking cascading timeline.
Graphviz
A cross-platform native app to create graph visualizations by converting text-based structural information to diagrams of abstract graphs and networks.
👇 FYI — I've moved most IDE-related links to a new, smaller newsletter called VSCode.Email. This week's issue includes the following:
- Navigating files and projects in VS Code
- An extension for advanced JavaScript/TypeScript refactorings
- How VS Code collects user data
Check the archives for the latest issue, and subscribe for more!
|
Jamstack, CMS's, etc.
Stay up-to-date with CSS
Stay up-to-date with the latest trends in CSS by getting the most relevant and valuable articles and tutorials directly into your inbox. Join more than 30,000 developers and designers and sign up today. SPONSORED
Eleventy Plus Vite
A clean and fast starter kit for Eleventy, powered by Vite and pre- and post-processing using PostCSS and SCSS.
Flamethrower
A blazingly fast 2kb, zero-config router and prefetcher for static sites that makes a static website feel like a blazingly fast SPA.
Capri
A toolkit to allow you to build a component-based static website as if it was a single page app, with no new API to learn, and live CMS previews.
Eternity
A minimalist Hugo theme with a fresh look, designed for portfolio sites.
SaaS Blocks
A searchable and categorized directory of ready-to-use building blocks and APIs for building SaaS apps.
Payload
An open-source headless CMS and application framework built with TypeScript, Node.js, React, and MongoDB.
is-land
A new performance-focused way to add interactive client-side components to your Eleventy web site.
Sphido
A fast, lightweight, and flexible static site generator build with JavaScript, with no dependencies and works based on two function calls.
Jigsaw
A Laravel-based framework for rapidly building static sites that uses the Laravel Blade templating engine.
On the Release Radar:
|
Commercial Apps and Classifieds
These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.
Locofy – Convert Figma designs into production-ready frontend code.
Primary – Platform to ideate, define, and document design solutions.
Tailwind Weekly – A newsletter that levels up your Tailwind CSS skills. AD
Baseblock – A base framework for building your design system.
The Sample – Discover newsletters and blogs in your areas of interest. AD
SupaPass – No-code website builder with subscriptions, digital sales, etc.
Tinybird – A serverless analytical backend build low-latency APIs with SQL.
|
A Tweet for Thought
I've never used a vertical monitor, though I know they're popular among programmers. André Staltz shares a new almost square vertical monitor that he feels is a productivity-enhancing upgrade. Something to try maybe?
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Do you like LinkedIn? Well, if you hate LinkedIn, you'll probably love Viral Post Generator, an AI-based app that helps you write the perfect LinkedIn post.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
