Apple is ruining the open web
https://victorwynne.com/apple-open-web/
#ycombinator #Apple #technology #Jekyll #Ruby #HTML #CSS #Swift

Apple is ruining the open web
https://victorwynne.com/apple-open-web/
#ycombinator #Apple #technology #Jekyll #Ruby #HTML #CSS #Swift
What do you think about tailwind?
This was a PITA to make work, getting characters to align so that the letters in either script looks properly kerned, to emulate word-wrapping. Took forever, but it's fully #CSS, no #JavaScript.
I got the idea from how the computer displays on #MurderbotDiaries would first show a sci-fi script and then wipe to English.
The JSX type generator now generates types for the #css custom properties for your #WebComponents!
post: Dropping masonry in Sloth
For about five years Sloth has been using the masonry layout in CSS. As this is my side project and Firefox has been my daily driver, it was great. But it's time to change.
Naked and Semantic:
On Jared Norman’s “Dead Code” podcast, together with Fabien Basmaison, speaking about CSS Naked Day and other web development topics.
We can also create a custom function and make the code easier to use.
No browser support yet, but it's on the way!
Clashes between web and X11 colors in the CSS color scheme
Link: https://en.wikipedia.org/wiki/X11_color_names
Discussion: https://news.ycombinator.com/item?id=44552419
Despite the wider world's innumerable horrors, I continue to host, biweekly, the #IndieWeb Front End Study Hall where we talk about #HTML, #CSS, #WebDev past, present, future. Even if you don't join us Thursday, go make a web page. https://events.indieweb.org/2025/07/front-end-study-hall-032-UNvJ1sfd6VGX
CSS Tip!
Using modern CSS features such as sibling-index() and if(), you can re-create the :nth-child(An + B) selector.
https://css-tip.com/nth-child/
Why? To easily update A and B since now they are variables! I know some of you are in the team: "How to update the values of nth-child() with CSS ?!"
Minimal CSS-only blurry image placeholders, https://leanrada.com/notes/css-only-lqip/.
Pretty clever!
The author represents Low Quality Image Placeholders (LQIP) by integers (20 bits long) then use CSS Math operators to do bitwise operations and extract some values to generate this blurry effect (based on 6 circles, 1 solid background image, and blend everything together with a blur filter). I love it. 100% CSS, no JS required. Of course, there is a first step consisting at generating this integer.
Monorail – Turn CSS animations into interactive SVG graphs
Link: https://muffinman.io/monorail/
Discussion: https://news.ycombinator.com/item?id=44504250
figured out a nice way to do recolorable glyph icons without resorting to a font or inline SVG data:
single icon sheet
set col/row vars to add icons
use inline with <span class="icon icon-mail"></span>
recolor with `background-color` anywhere in the stylesheet
GitHub - Diolinux/PhotoGIMP: A Patch for GIMP 3+ for Photoshop Users https://github.com/Diolinux/PhotoGIMP?tab=readme-ov-file #OpenSource #photoshop #GitHub #patch #gimp #css
Move over Bootstrap.
Web Awesome is an awesome successor to what in my opinion was already the best open source #WebComponents library (Shoelace) on the market. Now we have the best #CSS framework on the market.
All of the CSS is…um…just CSS and all of the components are…um…just web components. Native #WebDev APIs across the board.
Take a first look at the brand new public beta:
https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/
.house {
position: relative;
bottom: -500px;
}
Plain Vanilla - an explainer for web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
When applying a thick border around an element in multiple colors, the corners meet at a 45-degree angle forming a diamond. That is established and seems reasonable.
But, when you set a thick edge on one side, the thin 1px border gets squeezed into a slope, and won't reach the edge! And the sidebar forms a *trapezoid*!
This is most noticable on modern high-DPI screens. It is rather unsatisfying, and hard to unsee...
Howdy! How do you all handle native #CSS Nesting at the moment? Are you using it already? And if so, are you just targeting newer browsers that support it? Or are you using PostCSS, for example?
Asking for a friend who has reduced his build process to the max (nothing but a little esbuild script) and is now hesitating to add PostCSS again…