If you’re building any #frontend #apps, you'll want to join us this Wednesday for a #security #livestream. We'll show you why storing your OAuth #tokens in the browser is not the best idea. See the alternative: the IETF-recommended best current practice of Backend for Frontend.
If you're just interested in seeing a #react app get pwned, well, we have that too.
Time flies! Front End Study Hall number 029 is Tuesday. I and a motley assortment of www folk from experienced to novice invite YOU to come inspect code; ask "why"; and make web pages more awesome with HTML, CSS, etc.! Check it. https://events.indieweb.org/2025/06/front-end-study-hall-029-TcOqvxf7kMgv #IndieWeb #frontEnd #webDev
I made a little thing on @codepen :pure #CSS #scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe
Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.
Inspiration https://x.com/avanderpotte/status/1923382432784412771
(via @codrops motion highlights roundup)
cc @bramus
486
Pure #CSS 1 div card backgrounds https://codepen.io/thebabydino/pen/GRRpzNX
Using mask compositing, which I explained in this @csstricks article https://css-tricks.com/mask-compositing-the-crash-course/
Another where I should go through the code and improve it as it can be simplified nowadays... a lot even!
The most customer-focused engineers and UX designers I've worked with don't really care that much about Design Systems.
The user and how tasks work for them are the number one priority. Even if it's inefficient, difficult, or more time consuming.
They still think in design systems, and modularity, and making things easier to build and design--but it's always second fiddle to what the software is actually able to do.
I think that's very right.
Hey, you #JavaScript folks want to build #secure web experiences? Well, join us on this #livestream where we talk about the best current practice of Backend For Frontend to keep your apps safe from token extraction attacks. Works for #react, #angular, #vuejs, #dotnet #blazor, and all web-based #frontend apps.
https://duendesoftware.com/webinars/tokenmanagement
Boosts are appreciated.
"A study in reactive UI toolkits"
with Jan Fooken at #GUADEC2025 24 July
09:40 CEST
Brescia
Can GTK feel like React or SwiftUI? Let’s explore modern takes on building Linux UIs.
501
Slice! https://codepen.io/thebabydino/pen/GRaKbZo
Definitely one of my faves I've made on @codepen in 2024.
No JS, no text duplication whatsoever, no images save for #CSS gradients. #SVG filters take care of both the texture and the slice + offset effect.
Also contenteditable.
Oh, and the code is heavily commented.
Another little thing I made for this week's "sweet treats" @codepen challenge: low poly https://codepen.io/thebabydino/pen/raVadaZ
100% handcoded with
Hey, I have a sweet tooth...
¯\_(ツ)_/¯
521
Pure #CSS #3D toggle with a single `input[type=checkbox]` and its `label` - check it out on @codepen https://codepen.io/thebabydino/pen/ajpqYW
I’ll be open to work with your team starting July and can help with making the team more effective, building more robust code or make it accessible to comply with the “new” EU law.
In the past year I helped a couple of companies transforming their teams and making their web apps accessible and they effect was huge!
Send me a PM if you’re interested or have questions.
593
Cycling gradient glow with no text duplication - see it on @codepen https://codepen.io/thebabydino/pen/rNPOpJK
A super simple, but cool #SVG #filter trick.
We create the gradient text.
The filter creates a blurred copy of it and places it underneath.
736
Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) - see it on @codepen https://codepen.io/thebabydino/pen/NWxBzRv
A bunch of variations on the pure CSS #halftone technique detailed in this article https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
#Business #Collections
Sapiens · A gallery showcasing online presences of web artisans https://ilo.im/163m4i
_____
#Blog #Website #Design #UxDesign #UiDesign #WebDesign #Development #WebDev #Frontend #Backend
749
Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd
The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/
Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.
816
no sprite, no JS twitter
animation https://codepen.io/thebabydino/pen/RRRRZE
Behind the demo https://css-tricks.com/recreating-the-twitter-heart-animation/
Now twitter uses an SVG heart (that path data though
) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!
#Business #Explorations
What would happen if I blocked big search? · Pros and cons of blocking major search engines https://ilo.im/163yb3
_____
#SearchEngine #SEO #AI #Website #Blog #RobotsTxt #Development #WebDev #Frontend #Backend
I'm sure I also fuck up lots of things when it comes to #accessibility.
But this is an easy one to check and fix. Please test your fucking text contrast before putting themes out there for people to use.
#Development #Launches
Introducing NLWeb · Bringing conversational interfaces directly to the web https://ilo.im/1642dj
_____
#Business #AI #Website #Blog #RSS #SchemaOrg #SEO #WebDev #Frontend #Backend