Why I 🧡 the web.

WebTUI is a modular #CSS library that brings the beauty of Terminal UIs to the browser. 💻

webtui.ironclad.sh/

#frontend #webdev

WebTUI

Modular CSS Library that brings the beauty of Terminal UIs to the browser

^{webtui.ironclad.sh}

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

fuma-nama.vercel.app/blog/svg-…

#webdev #frontend #CSS

NICE. 🎉

#opensource and #selfhostable private file converter.

vert.sh/
github.com/VERT-sh/VERT

- Convert files directly on your device using WebAssembly.
- No file size limits.
- Supports multiple file formats.

#webdev #webtools #Svelte

VERT.sh — Free, fast, and awesome file convert

With VERT you can quickly convert any image, video and audio file. No ads, no tracking, open source, and all processing is done on your device.

^vert.sh

"Default styles for h1 elements are changing"

#frontend #webdev #HTML

developer.mozilla.org/en-US/bl…

Default styles for h1 elements are changing | MDN Blog

Browsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for conformant and better-structured pages.

^{MDN Web Docs}

Apache ECharts:
An #opensource visualization library in #JavaScript.

echarts.apache.org/en/index.ht…

Also see chartscss.org/

#CSS #webtools #webdev #charts

“Ever start writing documentation for users but then just give up?”

🤔

#memes #webdev

I couldn't be more excited about the new attr() syntax in CSS! Check out my latest blog post all about this! #css #syntax #newcss #webdev #uidesign #webdesign

blog.gardinerbryant.com/the-ne…

The new CSS attr() syntax

I'm a web developer by trade and I'm extremely passionate about CSS. The last few years have been truly exciting and I can't wait to share the new attr() function syntax with you!

^{Gardiner Bryant (The Bryant Blog)}

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on @codepen codepen.io/thebabydino/pen/XJW…

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.

codepen.io/thebabydino/pen/MYW…

#CSS #code #coding #frontend #transform #web #dev #webDev #webDevelopment

Someone hearted this button ripple effect demo on @codepen (coded about half a decade ago) and made me notice it still said "only works in Chromium" - as of last summer, it's cross-browser! 🥳🎉

codepen.io/thebabydino/pen/LYZ…

#CSS #JS #JavaScript #code #coding #web #dev #webDev #webDevelopment #frontend

Made this a couple of years ago on @codepen but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown codepen.io/thebabydino/pen/qBJ…

Based on a thing at a now dead link which did something of the kind with a huge div soup.

#css #js #a11y #dropdown #coding #code #web #dev #webDev #webDevelopment #frontend

Know how border-image & border-radius don't play nice together?

(interactive codepen.io/thebabydino/pen/jxZ…)

#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

@codepen demo: codepen.io/thebabydino/pen/qBE…

(and yes, this is a tip I first shared on twitter over half a decade ago x.com/anatudor/status/12199161… )

#CSS #clipPath #cssClipPath #coding #web #dev #webDev #webDevelopment #code #frontend #borderImage #borderRadius

.van {
.van {
.car {
color: blue;
}
}
}

#meme #webdev #css

How browsers REALLY load Web pages

When browsers load a Web page and its subresources, A LOT happens under the hood. They need to take into account render/parsing blocking resources, use a preload scanner, listen to resource hints (like preload/preconnect), loading modifiers (async/defer/module), fetchpriority, responsive images, and much more. […]

📺 fosdem.org/2025/schedule/event…

#video #web #browser #webpage #http3 #webdev #http #https #async #http2 #fossdem25 #foss #floss #fossdem

FOSDEM 2025 - How browsers REALLY load Web pages

^fosdem.org