Link tags: css

943

sparkline

A minimum viable experience makes for a resilient, inclusive website or app - Post - Piccalilli

The whole idea of progressive enhancement is using the power that the web platform gives us for free—specifically, HTML, CSS and JavaScript—to provide a baseline experience for the people who visit our sites and/or apps, and then build on that where appropriate and necessary, depending on the capabilities of the technology that they are using.

Responsible Web Applications

An excellent collection of advice and examples for making websites responsive and accessibile (responsive + accessible = responsible).

Nested Media Queries – Bram.us

Huh. I don’t think I ever thought about nesting media queries …and yet I’m pleasantly surprised that it works!

Sticky CSS Grid Items | Melanie Richards

This is a useful technique that future me is almost certainly going to need at some point.

new.css

A minimal style sheet that applies some simple rules to HTML elements so you can take a regular web page and drop in this CSS to spruce it up a bit.

Is Progressive Enhancement Dead Yet? (Webbed Briefs)

Heydon’s newest short video is right up my alley.

My stack will outlive yours

My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step and… will outlive any other stack.

Web Almanac 2020

I spent most of the weekend reading through this and I’ve still barely scratched the surface—a lot of work has gone to the analyses and write-ups!

The sections on accessibility and performance get grimmer each year but the raw numbers on framework adaption are refreshingly perspective-setting.

What Can You Put in a CSS Variable? / Coder’s Block

A reminder that the contens of custom properties don’t have to be valid property values:

From a syntax perspective, CSS variables are “extremely permissive”.

npm ruin dev | CSS-Tricks

Chris is gathering end-of-year thoughts from people in response to the question:

What is one thing you learned about building websites this year?

Here’s mine.

In 2020, I rediscovered the enjoyment of building a website with plain ol’ HTML, CSS, and JavaScript — no transpilin’, no compilin’, no build tools other than my hands on the keyboard.

What Makes CSS Hard To Master - Tim Severien

CSS is simple, but not easy.

If we, as a community, start to appreciate the complexity of writing CSS, perhaps we can ask for help instead of blaming the language when we’re confused or stuck. We might also stop looking down on CSS specialists.

Creating websites with prefers-reduced-data | Polypane Browser for Developers

There’s no browser support yet but that doesn’t mean we can’t start adding prefers-reduced-data to our media queries today. I like the idea of switching between web fonts and system fonts.

CSS Stats

A handy tool for getting an overview of your site’s CSS:

CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of your app, and diagnose complex areas before it snowballs out of control.

All Them Switches: Responsive Elements and More

Container queries are like buses: you’re waiting for ages and then two come along at once.

This switch() syntax looks interesting.

Intent to Prototype: Container Queries

Hell has frozen over! Container queries might actually happen!

Webbed Briefs

Heydon is back on his bullshit, making extremely entertaining and occassionally inappropriate short videos about web stuff.

WEBBED BRIEFS are brief videos about the web, its technologies, and how to make the most of them. They’re packed with information, fun times™, and actual goats. Yes, it’s a vlog, but it isn’t on Youtube. Unthinkable!

The pilot episode is entitled “What Is ARIA Even For?”

This page is a truly naked, brutalist html quine.

I think this is quite beautiful—no need to view source; the style sheet is already in the document.

Boring by default

More on battling entropy:

Ever needed to change “just a small thing” on an old page you build years ago? I recently had the pleasure and the simple task of changing some colors in CSS lead to a whole day of me wrangling with old deprecated Grunt tasks and trying to get the build task running.

The solution:

That’s why starting with HTML, CSS and JavaScript without the need to ever compile anything on your local machine is a good idea. Changing some colors on such a page would indeed only take minutes and not a whole day.

I like this mindset:

Be boring by default and enhance on the way.

Cheating Entropy with Native Web Technologies - Jim Nielsen’s Weblog

This post really highlights one of the biggest issues with the convoluted build tools used for “modern” web development. If you return to a project after any length of time, this is what awaits:

I find entropy staring me back in the face: library updates, breaking API changes, refactored mental models, and possible downright obsolescence. An incredible amount of effort will be required to make a simple change, test it, and get it live.

Always bet on HTML:

Take a moment and think about this super power: if you write vanilla HTML, CSS, and JS, all you have to do is put that code in a web browser and it runs. Edit a file, refresh the page, you’ve got a feedback cycle. As soon as you introduce tooling, as soon as you introduce an abstraction not native to the browser, you may have to invent the universe for a feedback cycle.

Maintainability matters—if not for you, then for future you.

The more I author code as it will be run by the browser the easier it will be to maintain that code over time, despite its perceived inferior developer ergonomics (remember, developer experience encompasses both the present and the future, i.e. “how simple are the ergonomics to build this now and maintain it into the future?) I don’t mind typing some extra characters now if it means I don’t have to learn/relearn, setup, configure, integrate, update, maintain, and inevitably troubleshoot a build tool or framework later.

Full bleed layout using simple CSS | Kilian Valkhof

A follow-up to full-bleed layout post I linked to recently. Here’s how you can get the same effect with using CSS grid.

I like the use of the principle of least power not just in the choice of languages, but within the application of a language.