I have now encountered several cases of unintelligible documentation - functional requirements, security measures, technical how-tos - where I had to ask the author for clarification, and getting as a reply "oh I don't know; I just asked #ChatGPT".
Now I can bash #ai tools, but people who produce documentation that they themselves don't understand have always been a blight on #IT. It's irresponsible, unprofessional, and makes work harder for everyone.
Hey fellow developers!
If you've ever accidentally caused a security incident, or been part of a team that did, I'd like to hear about it (privately if you want).
I have a few of my own, I'm not just hoping to laugh at others.
I'm writing a presentation about how security incidents come about, from a dev and product perspective. For our learning, but mostly for security people who are flummoxed as to why we would do the things we do.
That last one is just to get your heart rate up.
@anatudor@mastodon.socialHow would you create this in such a way that its individual parts can be scaled independently, including via #CSS animations/ transitions?
Here's my take on it https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/
@anatudor@mastodon.socialSingle `img` element squircle + inner shadow with #SVG #filter magic 
Check it out on @codepen https://codepen.io/thebabydino/pen/MYgNgBa
New Kitten release
• Minor fix: Styles automatically gathered and de-duplicated from the body into the head are now placed _after_ other items in the <head> slot. Since you would expect styles added to the body of the page to override ones in the head, this now brings Kitten’s behaviour in-line with authoring expectations.
Enjoy!
@anatudor@mastodon.socialLittle @codepen demo: stacked avatars https://codepen.io/thebabydino/pen/ogNQryV
@anatudor@mastodon.socialHere's a gradient background version on @codepen too https://codepen.io/thebabydino/pen/KwKrJGp
Shape depends on how the text content naturally wraps.
@anatudor@mastodon.socialTo fix this, we give the assembly a tiny blur.
We don't want blurry edges
either, so we push some of the semitransparent edge pixels to either 0 or 1, whichever is closer. To do so, we use another `feComponentTransfer` and map the [0, 1] alpha interval to [-2, 3]. Basically we're stretching the alpha interval to be 5 times bigger, keeping same midpoint (.5), then it's clamped to [0, 1].
@anatudor@mastodon.social`feComponentTransfer` allows us to manipulate individual RGBA channels. In this case just the alpha (via `feFuncA`) by making all assembly pixels whose alpha is below `.5` fully transparent (alpha = 0). And all other pixels fully opaque (alpha = 1).
This makes edges jagged. 
Maybe not so noticeable in some cases, but it often won't cut it.
@anatudor@mastodon.socialHow the assembly alpha is computed is something I've detailed in 
https://css-tricks.com/adventures-in-css-semi-transparency-land/
Keep in mind that where we have overlap, two corresponding pixels from the two layers may both have an alpha below .5, but their overlap can still give the assembly an alpha above .5!
For example:
.4 + .3 - .4*.3 = .7 - .12 = .58
Both .4 and .3 are smaller than .5, but the overlap alpha .58 is bigger than .5!
@anatudor@mastodon.socialAs you can see in the recording 
blurring makes the pixels around the edges semitransparent. The bigger the blur radius, the more pixels become transparent.
When the particles get closer, their semitransparent areas overlap. This increases the assembly alpha there.
@anatudor@mastodon.socialA little spinner I made years ago on @codepen but never shared publicly https://codepen.io/thebabydino/pen/OJQKbKW
@anatudor@mastodon.socialHere's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.
Live on @codepen https://codepen.io/thebabydino/pen/XJWxLWV
cc @bramus
@anatudor@mastodon.socialWant 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.
Weird tiny pet peeve of the day that I have no real emotional investment in: Devs mentioning their framework/engine/tech stack in their bio without context.
If your bio says "Godot dev", does that mean you're a #Godot user developing your own game, or are you part of the Godot team developing Godot itself?
If you're a "Flutter dev", do you develop Flutter, or develop WITH Flutter?
@anatudor@mastodon.socialHere'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
