WebTUI – A CSS Library That Brings the Beauty of Terminal UIs to the Browser

Link: https://webtui.ironclad.sh
Discussion: https://news.ycombinator.com/item?id=43668250

https://StreamGrid.link

#UI
#UX
#CSS
#Web
#Dark
#Code
#Form
#HTML
#Color
#Reset
#Design
#Theming
#Frontend
#WebDev
#Customization

Some nice #SVG tricks. Animated "Knight Rider" bars, table of contents tweaks, and more.

https://fuma-nama.vercel.app/blog/svg-art

I've had a statuslog section on my now page (https://reillyspitzfaden.com/now/) for a while, and I added it to my homepage as well (https://reillyspitzfaden.com/#homepageStatus).

The especially nice part is that I now have a script (https://github.com/reillypascal/personalsite-ssg/blob/main/status) so I can simply type `./status` in the terminal, write the status text in the resulting .md file that pops open, and then commit/push!

I've seen some IndieWeb people (e.g., @binarydigit) do something similar via one of omg.lol's tools (https://home.omg.lol/info/statuslog) and liked it, but I wanted to see if I could DIY it just for the heck of it. Very happy with how easy the result is!

Holographic Masks via @kerrick https://lobste.rs/s/xgbs35 #css
https://codepen.io/HejChristian/full/YPzLbYX

Charts.css

Link: https://chartscss.org/
Discussion: https://news.ycombinator.com/item?id=43663880

Charts.css

https://chartscss.org/

#HackerNews #Charts.css #open-source #webdev #data-visualization #CSS-framework

Default styles for h1 elements are changing

https://developer.mozilla.org/en-US/blog/h1-element-styles/

Discussions: https://discu.eu/q/https://developer.mozilla.org/en-US/blog/h1-element-styles/

#Development #Introductions
Custom CSS functions in the browser · Start to experiment with author-defined functions https://ilo.im/163a5h

_____
#ModernCSS #Prototype #CssFunctions #CustomProperties #Chromium #Browser #WebDev #Frontend #CSS

#CSS 変数を活用したフレームワークの #OpenProps の作者で Chrome for developers でも最新の #CSS を中心にたくさんの記事を執筆してる Adam Argyle さん、急に Google での仕事を失った（クビになった？）っぽい…
何があったんだ…

G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025
https://nerdy.dev/ex-googler

RSVP | Homebrew Website Club - Americas | April 16, 2025

https://events.indieweb.org/2025/04/homebrew-website-club-americas-xCttvgRnN4Pl
https://reillyspitzfaden.com/interactions/2025/04/rsvp-homebrew-website-club-americas-april-16/

CSS Powered Componentry: "New #CSS features help us in all sorts of different ways, but here we’re going to look at them when they power a specific type of component, or make a type of component newly possible with less or no JavaScript." https://blog.codepen.io/2025/03/31/chris-corner-css-powered-componentry/

Top 5 #CSS Navigation Menu Mistakes: "Improve the UI of your navigation with a few lines of CSS. You’ll learn how to create a delayed closing effect for the dropdown menus with transition-behavior, how to utilize `:has()` to simplify your HTML, and more." https://www.youtube.com/watch?v=p_hXB12BWQM

a:focus-visible {
outline-offset: 0.25em;
outline-width: 0.25em;
outline-color: currentColor;
}
…makes any website better. #CSS https://adactio.com/notes/21812

Two years later and I’m still nodding my head to “I no longer understand prefers-contrast”:
https://kilianvalkhof.com/2023/css-html/i-no-longer-understand-prefers-contrast/

Not getting much help looking at CSSWG issues:
https://github.com/w3c/csswg-drafts/issues/?q=is%3Aissue%20state%3Aopen%20prefers-contrast%20label%3Amediaqueries-5

So, dear lazyweb and owing to deadlines, anyone got a good example / resource?

New Kitten feature: Icons!

You can now make use of a subset of the icons in the Phosphor icons set by @minoraxis and @rektdeckard.

https://kitten.small-web.org/reference/#icons

Search through them in your editor by referencing `kitten.icons.categories` and `kitten.icons.tags`.

Add this to a file called index.page.js and run `kitten` to see a large duotone pink cat (because why not?):

export default function () {
return kitten.html`
<${kitten.icons.c.Cat}
size=40%
weight=duotone
colour=deeppink
/>
`
}

(And yes, the set includes icons for the fediverse. This one of the reasons I chose it.) ;)

Enjoy!

There is a flag for container style queries in Firefox!

I repeat, there is a flag in Firefox!

You just need to switch it to true!

Thanks, @nicolaschevobbe!

“Tailwind's @apply Feature is Better Than it Sounds” by Zell Liew

https://css-tricks.com/tailwinds-apply-feature-is-better-than-it-sounds/

> Tailwind’s utilities are very powerful by themselves, but they’re even more powerful if you allow yourself to use `@apply` (and allow yourself to detach from traditional Tailwind advice). By doing this, you gain access to Tailwind as a tool instead of it being a dogmatic approach.

#CSS #Sass #Tailwind

️ https://nicolas-hoizey.com/links/2025/04/11/tailwind-s-apply-feature-is-better-than-it-sounds/