#Development #Pitfalls
All browsers get this wrong · What DevTools misinterpret about Shadow DOM https://ilo.im/163dax
_____
#Bugs #Specification #WebComponents #ShadowDOM #DevTools #Browser #WebDev #Frontend #DOM #CSS

#Development #Pitfalls
All browsers get this wrong · What DevTools misinterpret about Shadow DOM https://ilo.im/163dax
_____
#Bugs #Specification #WebComponents #ShadowDOM #DevTools #Browser #WebDev #Frontend #DOM #CSS
If you're into #React or #WebDevelopment
"Five years of React Native at Shopify"
https://shopify.engineering/five-years-of-react-native-at-shopify
J'adore les petites animations sur le site de Josh Comeau (https://www.joshwcomeau.com) et notamment ce petit cœur complètement gadget et trop mignon.
J'ai découvert par hasard qu'au clic droit on pouvait aussi réduire les j'aime et depuis je m'amuse à les faire monter / descendre
Just released the new version of my Rust web framework!
**Ratzilla** — Build terminal-themed web apps with Rust!
Now it supports handling the cursor!
Glitches are fixed + more examples are added!
Built with Rust & @ratatui_rs
Nice piece on "How to write error messages that actually help users rather than frustrate them":
#Development #Introductions
What are AI agents? · The evolution, architecture and future of AI Agents https://ilo.im/163a0d
_____
#Programming #Coding #Automation #AI #AiAgents #Browser #WebDev #Frontend #Backend
I had to write 3 tiny new CSS classes this morning. The font size wasn't being reflected on render. Then I remembered !important
....
I think I'm a front end developer now.
A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll.
Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/
Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao
Also uses container queries, CSS trigonometric functions.
Side quest sneak peek: a browser extension that visualizes (Service Worker) Cache Storage for web sites.
Decided to build this after seeing how difficult it is too see what's stored in Service Worker cache. They can (accidentally) take up quite a lot of storage space.
Repo: https://github.com/cheeaun/stakataka
Not released yet, under review in Chrome Web Store.
#Development #Techniques
How to open and close HTML dialogs · You’ll use a little JS today but none in the future https://ilo.im/163b4u
_____
#Dialogs #Modals #Invokers #Browser #WebDev #Frontend #HTML #CSS #JavaScript
#Development #Techniques
Flowing WebGL gradient · A modern and elegant touch to any landing page https://ilo.im/163aih
_____
#Effect #Colors #Animation #Gradients #Shaders #Math #WebGL #WebDev #Frontend #JavaScript
Why I the web.
WebTUI is a modular #CSS library that brings the beauty of Terminal UIs to the browser.
Some nice #SVG tricks. Animated "Knight Rider" bars, table of contents tweaks, and more.
You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on @csstricks https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
And here are cards with gradual left to right inversion: from no inversion at all on the left, to full inversion on the right. Again, minimal code, single div, no pseudos necessary, 2 #CSS declarations.
Live demos on @codepen
#Development #Announcements
Default 'h1' styles are changing · What this means for front-end developers https://ilo.im/1639ni
_____
#Headings #UserAgent #Styles #Sections #Rendering #Specification #HTML #Browser #WebDev #Frontend
"Default styles for h1 elements are changing"
Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.
So basically, it's again just one `background` + one `background-blend-mode` property.
Live demo on @codepen
https://codepen.io/thebabydino/pen/vYyNyER