Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple pure #CSS + #SVG #filter demo on @codepen doing it https://codepen.io/thebabydino/pen/KwKGrjR
Heavily commented. See also https://mastodon.social/@anatudor/114185324674119212 for details about some of the filter primitives.
Here's a simple image stack with an `--ang` rotation around an `--xy` point (both pseudo-random, generated & set inline via Pug) + a 3D entry animation (click Run to run it again).
Live on @codepen https://codepen.io/thebabydino/pen/qEBJpRb?editors=0100
Because I keep seeing `position: absolute` + lots of of offset + size + transform + sometimes even margin properties to stack + middle align the stacked items... you can easily do it with 3 #CSS properties!
Web Component Base (WCB) by Ayo Ayco (@ayo) | https://ayos.blog/wcb/
Flip card on hover, flip back on hover out...
... but on touchscreens, flip it on click and then flip it back on second click!
A mostly #CSS solution, using #3D transforms, variables, grid, pointer MQ + a little bit of #JS.
Because somebody asked how to do it https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/
Live demo on @codepen: https://codepen.io/thebabydino/pen/MYWPeer
Can't believe this quick little thing made this week's @codepen Spark!
codepen.io/thebabydino/pen/GgRryoa
Oh and for my day job I'm a #FrontEnd #JavaScript developer.
I've built lots of sites over the years and have particularly enjoyed working with Tumblr.
Here's one I'm particularly proud of
https://studiomalarkey.co.uk/
(This is also the studio I share with Jessica my wife and our friend Sam).
No JS #fluid animation. The animation is created in #CSS, where I'm animating the values of two custom properties back and forth. `feTurbulence` creates the background, `feDisplacement` map uses the CSS-animated input to make it move.
My take on this question https://www.reddit.com/r/webdev/comments/1izlhkw/comment/mfedw8s/
Frontend Coffee Break
Episode 39: Best practices, standards and guidelines
We discuss how we work with guidelines, standards and best practices at Cognizant Netcentric. Including our very own ESLint and Stylelint open source configurations.
Do you follow any guidelines when coding FE?
Video and audio: https://frontend.coffee/s1/39
"Styling <details>: Horizontal Accordion"
Just learned of the existence of the "Speculation Rules API"
https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
FE Coffee Break
Episode 38: Morals, ethics and being eco-friendly as a FE Developer
We discuss the moral of working for certain industries, how can we be more green (spoiler: it's web performance) as developers, as well as open source.
Safari works on this thing before any other vendor can't catch up with scroll driven animations? 
Well, thanks... I guess.
AI assistance panel | Chrome DevTools | Chrome for Developers
"nullish coalescing assignment operator"
https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator
You're a Frontend Dev 
In your experience working with designers...
Do they use container queries or still use media queries in their provided designs / style guides?
Was excited to try and implemented the new and shiny Popover API https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
When I couldn't position it relative to my parent element I came across this post from @hdv 
https://hidde.blog/positioning-anchored-popovers/
Which very well explains we can't use Popovers as tooltips for now without JS 
We need to wait until we have Anchor Positioning in CSS in all browsers https://caniuse.com/css-anchor-positioning
I'm very disappointed 
"nasa/openmct"
"A web based mission control framework" written using #Vue (#JavaScript)
"Why Google Sheets ported its calculation worker from JavaScript to WasmGC | web.dev"
"Calculations in Google Sheets were initially done on the server, then on the client in JavaScript, and now on the client in WebAssembly Garbage Collection. This case study explains how and why."
"Ecma International approves ECMAScript 2024: What’s new?"
"On 26 June 2024, the 127th Ecma General Assembly approved the ECMAScript 2024 language specification, which means that it's officially a standard now. This blog post explains what's new."
