Tags: class

58

sparkline

Wednesday, August 9th, 2023

Progressively Enhanced Form Validation, Part 1: HTML and CSS – Cloud Four

A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!

Thursday, June 1st, 2023

Automate the CEOs - by Hamilton Nolan - How Things Work

Let’s be rational here. If I were to imagine a job that was a perfect candidate for replacement by AI, it would be one that consists of measurable tasks that can be learned—allocation of capital, creation and execution of market strategy, selection of candidates for top roles—and one that costs the company a shitload of money. In other words: executives.

The logic is sound. However…

The CEOs will be spared from automation not because they should be, but because they are making the decisions about who is spared from automation.

Sunday, December 4th, 2022

dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots

A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.

Wednesday, January 26th, 2022

Here’s what I didn’t know about :where() - Manuel Matuzović

I feel like I’m starting to understand how the CSS :where pseudo-class works and why it’s useful. The cogs are slowly turning in my brain.

Wednesday, May 26th, 2021

No, Utility Classes Aren’t the Same As Inline Styles | frontstuff

This is supposed to be a defence of utility classes …but it’s actually a great explanation of why classes in general are a great mechanism for styling.

I don’t think anyone has ever seriously suggested using inline styles—the actual disagreement is about how ludicrously rigid and wasteful the class names dictated by something like Tailwind are. When people criticise those classes they aren’t advocating for inline styles—they’re advocating for better class names and making more use of the power of the class selector in CSS, not less.

Anyway, if you removed every instance of the word “utility” from this article, it would still work.

Saturday, May 15th, 2021

Can I :has()

This would be such a great addition to CSS—a parent/ancestor selector!

With the combined might of :has(), :not(), nth-child(), and calc(), CSS has become a powerful language for specifying rules to account for all kinds of situations.

Wednesday, December 30th, 2020

Here Lies Flash » Mike Industries

Flash, from the very beginning, was a transitional technology. It was a language that compiled into a binary executable. This made it consistent and performant, but was in conflict with how most of the web works. It was designed for a desktop world which wasn’t compatible with the emerging mobile web. Perhaps most importantly, it was developed by a single company. This allowed it to evolve more quickly for awhile, but goes against the very spirit of the entire internet. Long-term, we never want single companies — no matter who they may be — controlling the very building blocks of the web.

Friday, July 31st, 2020

British & Exotic Mineralogy

A really lovely unmonetisable enthusiasm:

All 2,242 illustrations from James Sowerby’s compendium of knowledge about mineralogy in Great Britain and beyond, drawn 1802–1817 and arranged by color.

You can dive in and explore or read more about the project and how it was made.

It reminds me of Paul’s project, Bradshaw’s Guide: the both take a beloved artifact of the past and bring it online with care, love, and respect.

Saturday, July 11th, 2020

A little bit of plain Javascript can do a lot

I decided to implement almost all of the UI by just adding & removing CSS classes, and using CSS transitions if I want to animate a transition.

Yup. It’s remarkable how much can be accomplished with that one DOM scripting pattern.

I was pretty surprised by how much I could get done with just plain JS. I ended up writing about 50 lines of JS to do everything I wanted to do.

Sunday, July 5th, 2020

Dark Ages of the Web

Notes on the old internet, its design and frontend.

Thursday, February 20th, 2020

monica.css – Monica Dinculescu

Monica shares the little snippet of handy CSS she uses at the start of any project.

Wednesday, January 22nd, 2020

28c3: The Science of Insecurity - YouTube

I understand less than half of this great talk by Meredith L. Patterson, but it ticks all my boxes: Leibniz, Turing, Borges, and Postel’s Law.

(via Tim Berners-Lee)

28c3: The Science of Insecurity

Thursday, October 3rd, 2019

A Modern CSS Reset - Andy Bell

Some very smart ideas in here for resetting default browser styles, like only resetting lists that have classes applied to them:

ul[class],
ol[class] {
  padding: 0;
}

I select only lists that do have a class attribute because if a plain ol’ <ul> or <ol> gets used, I want it to look like a list. A lot of resets, including my previous ones, aggressively remove that.

Saturday, August 3rd, 2019

Standard Ebooks: Free and liberated ebooks, carefully produced for the true book lover.

Books in the public domain, lovingly designed and typeset, available in multiple formats for free. Great works of fiction from Austen, Conrad, Stevenson, Wells, Hardy, Doyle, and Dickens, along with classics of non-fiction like Darwin’s The Origin of Species and Shackleton’s South!

Friday, July 5th, 2019

Smashing TV — Webinars and Live Sessions — Smashing Magazine

Don’t miss this—a masterclass in SVG animation with Cassie (I refuse to use the W word). Mark your calendar: August 20th.

Wednesday, January 16th, 2019

Use the :lang pseudo-class over the lang attribute selector for language-specific styles

This is a great explanation of the difference between the [lang] and :lang CSS selectors. I wouldn’t even have thought’ve the differences so this is really valuable to me.

Monday, January 7th, 2019

CSS-only multiple choice quizzing - Matthew Somerville

In which Matthew disects a multiple choice quiz that uses CSS to do some clever logic, using the :checked pseudo-class and counter-increment.

Oh, and this is how he realised it wasn’t using JavaScript:

I have JavaScript disabled on my phone because a) it cuts out most of the ads, b) it cuts out lots of bandwidth and I have a limited data plan, and c) my battery lasts longer because it’s not processing tons of code to show me some text (cough, Medium).

Wednesday, November 21st, 2018

Folding Beijing - Uncanny Magazine

The terrific Hugo-winning short story about inequality, urban planning, and automation, written by Hao Jinfang and translated by Ken Liu (who translated The Three Body Problem series).

Hao Jinfang also wrote this essay about the story:

I’ve been troubled by inequality for a long time. When I majored in physics as an undergraduate, I once stared at the distribution curve for American household income that showed profound inequality, and tried to fit the data against black-body distribution or Maxwell–Boltzmann distribution. I wanted to know how such a curve came about, and whether it implied some kind of universality: something as natural as particle energy distribution functions, so natural it led to despair.

Thursday, May 10th, 2018

Coding with kids

James shares his experience of teaching a class of 9 and 10 year old children how to code, and offers some advice:

  • Don’t dumb it down
  • Use real-world examples
  • Make it hands on
  • Set clear expectations
  • Award certificates and/or stickers

As members of the web community we have a responsibility to share what we have learned. I can’t think of a better way of doing that then helping kids get started.

Hear, hear!

Thursday, April 12th, 2018

Notes on `lang` by Taylor Hunt on CodePen

A really deep dive into the lang attribute, and the :lang() pseudo-class (hitherto unknown to me). This is all proving really useful for a little side project I’m working on.