💡 CSS Tip!
Create a responsive grid of hexagon shapes with fewer than 15 CSS declarations, minimal HTML, and without media queries!
https://css-tip.com/hexagon-grid/
Improving a 5-year old implementation using modern CSS (corner-shape, sibling-index(), math functions, etc)
Just me or was webGL tooling on 🔥 in 2025?
https://nerdy.dev/the-year-of-webgl-tools
What an ingenious clock component by Jon Kantner. Check the time in different cities around the world, with smooth animations and light/dark mode (the dark mode looks especially good). A really neat demo.
💡 CSS Tip!
Do you know that One-Time password field? You can create it using only one input and a few lines of CSS.
The HTML: <input type="text" maxlength="6">
Code & Demo: https://css-tip.com/single-digit-inputs/
As a bonus, you can control the number of characters by adjusting the "maxlength" attribute (thanks to the new attr() function!)
Redoing the line-up section of @cssdayconf with a cool hover effect! 🤩
Demo: https://codepen.io/t_afif/full/raNNbyG via :codepen: @codepen
Psst, there is no keyframes in the code! Can you guess how it's done?
Web colors combinations for people with color blindness:
https://davidmathlogic.com/colorblind/
Check this out! You can use it to batch compare colors and find accessible pairings. Really handy tool by @ericmikkelsen, especially when dealing with a Design System’s palette.
The winners of the 13th edition of the js13kGames competition are here
This is an excellent read that unfortunately hit very close to home.
P.S. anyone who deems frontend "less technical" should spend a day managing a bunch of async states (while of course reflecting them on the UI - looking good, accessible) and avoiding race conditions, have fun!
tl;dr I have taken over https://oss.love from Netlify! Go send some cards to your fave open source developers and projects. 💚
A collection of useful JS, HTML and CSS interactive cheat sheets:
https://htmlcheatsheet.com/js/
A comprehensive list of web development concepts and skills:
h/t @Meyerweb
CSS quick tip: if you're adding quotation characters use `open-quote` and `close-quote` as content because they consider the document language. 💪
https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/
Creating a Scroll-Driven Animation is as easy as taking an existing CSS animation and declaring `animation-timeline: scroll()` on the element.
The function accepts two parameters: a `<scroller>` and an `<axis>`
Some great `:has()` ideas from @belldotbz https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world/
The results of WebAim’s screen reader user survey are out. 👇
February Demos:
K Denerz: Electric Spinner
https://codepen.io/konstantindenerz/pen/XWQWYVW
大漠: Path Animation
https://codepen.io/airen/pen/NWJQPeE
Josetxu: Leaping Loader
https://codepen.io/josetxu/pen/yLwWMoB
J Dillon: Toggles
https://codepen.io/jdillon/pen/PoLBVmV
Giana: Scroll animation layout
https://codepen.io/giana/pen/gOEQWpR
K Denerz: Video To ASCII
https://codepen.io/konstantindenerz/pen/YzgRQZj
T Afif: Heart reveal
https://codepen.io/t_afif/pen/abMPBdg
K Kondrashova: Eye Pattern
https://codepen.io/ksenia-k/pen/poYZpyQ
B Evans: CSS Art
https://codepen.io/ivorjetski/pen/MWxPVBo
J Kantner: Bubble Loader
https://codepen.io/jkantner/details/poYZMXX
Today I discovered https://www.whocanuse.com and I wanted to yell it to the world, but 56 people will have to do.
