@catraxx@tech.lgbtAlright ... i finished my new website.
I hope you like it. If anyone wants to link to me for whatever reason, there is a 88x31 thing on the first page. Likewise if you'd like to be linked, let me know. I can either make you a generic button or put in your 88x31.
@kkarhan@infosec.space
@anatudor@mastodon.social
Pure CSS 1 div animated 
∞ logo
https://codepen.io/thebabydino/pen/zRZKxK
Also has a video of me live coding it.
@anatudor@mastodon.social
Pure CSS 
animation https://codepen.io/thebabydino/pen/bGwYVOm
This one also has a video of me live coding it.
@anatudor@mastodon.socialWe can simplify things further to not even include a wave animation. Instead, the 3D surface is static in this case.
Live on @codepen https://codepen.io/thebabydino/pen/gOzGEqb
Basically, we don't have
z = f(x, y, t)
but
z = f(x, y)
because the surface shape doesn't change in time anymore.
@anatudor@mastodon.socialIf that's laggy for you, check out this version https://codepen.io/thebabydino/pen/LYJQpzQ which just uses 1 element per square grid cell, instead of 1 element and its 2 pseudos, each creating one of the 2 triangles for that grid cell.
This also doesn't use an SVG filter for corner rounding.
@anatudor@mastodon.social
Pure CSS prisms with rounded corners https://codepen.io/thebabydino/pen/wvmRXeM
In case you're wondering about the how behind https://github.com/w3c/csswg-drafts/issues/9843#issuecomment-1951351003
@anatudor@mastodon.social
Pure CSS waving surface https://codepen.io/thebabydino/pen/rNZJmPa
Given a 3D function varying in time
z = f(x, y, t)
make a pure CSS 3D representation of it.
Went through a lot of iterations, partly because support for some features wasn't always there, partly because I had ideas to improve.
Say hello to our brand new website!
Written with Hugo, no tracking, no analytics, no cookies, no JS. Only HTML and CSS goodness!
Also, check out our Gemini capsule!
Please boost so we can reach to a larger audience!
@anatudor@mastodon.social
This big collection of pure #CSS, no SVG 1 div #spinners https://codepen.io/thebabydino/pen/WNrbGBz
They are all different - can you spot the differences between similar ones?
@anatudor@mastodon.social
Pure CSS icosahedron candy https://codepen.io/thebabydino/pen/xxwveWZ
Fair warning: it now looks broken in Chrome until bringing up DevTools or resizing the result panel or switching to another CodePen editor layout. Should have found time to file a bug... Still love it.
@anatudor@mastodon.social
Pure CSS sphere of randomly positioned, non-intersecting spheres https://codepen.io/thebabydino/pen/LYXJPEb
Uses the spherical distribution tactic described here https://mastodon.social/@anatudor/110745736820689528 and then makes sure no two spheres intersect. Also: pure CSS 3D shading!
@anatudor@mastodon.social
Pure CSS morphing polyhedra: dodecahedron → rhombicosidodecahedron → snub dodecahedron → rhombicosidodecahedron → icosahedron https://codepen.io/thebabydino/pen/gOjGyby
Positions & makes faces morph using CSS transforms. Which depend on CSS vars to keep code compact https://css-tricks.com/logical-operations-with-css-variables/
@anatudor@mastodon.socialI turn 12 on @codepen tomorrow, so after my most hearted demos https://mastodon.social/@anatudor/112511958366259967
... here are 12 of MY personal faves!
Pure CSS music toy - this one's a really special one for me https://codepen.io/thebabydino/pen/WNGPjLx
CSS transforms for the 3D, CSS variables for the dynamic shading.
The how behind:
If you are a fullstack developer, take some time to write an application with HTMX, and as a challenge, make it fully degradable (works without JS).
You'll find yourself understanding HTML5 + CSS and see that it is in fact extremely powerful. A huge multitude of problems JS frameworks + UI libraries try to solve is already addressed by HTML.
In short, stop writing bloaty JS code for a while and enjoy the zen of a simple web-app.
@anatudor@mastodon.socialHere's a pure CSS char by char text reveal on scroll!
@codepen demo https://codepen.io/thebabydino/pen/MWPeLmp
No splitting text into individual characters!
Inspired by an old Toblerone Story page, except that used JS (reasonable for cross-browser support) and was splitting the text into individual characters (yikes! 
)
cc @bramus
Protecting Your Email Address Via SVG Instead of Javascript: https://rouninmedia.github.io/protecting-your-email-address-via-svg-instead-of-js/ #privacy #email #svg #nojs
And... My website is live! 
I've created it using Hugo, which is a great static-site generator that takes markdown files and converts them to HTML and CSS, following a theme.
I used the only theme I could find that doesn't require Javascript.
I used Codeberg Pages to host it.
The website is at https://skivling.codeberg.page
I still have a couple things to sort out, like a page with a privacy policy and explanation on how I created the website.
solarpunk prompts @alxd@writing.exchange#blog #writers of Mastodon: can you recommend any #ux #UXDesign practices for designing a #multilingual / #i18n blog?
I'm writing my small #staticgen at https://alxd.org/ but I'm seeing the limitations of my half-custom theme and Pelican engine.
Is there value to tags? A search function? #noJS ?
Is it better to have a homepage in one language? All languages? Dependent on user browser? Should un-translated posts show up in other langs?
@thomasfuchs I get even more of that because I try not to take (enable) sweets ( #JavaScript / #JS) from anyone except me.
metallic