Skip to main content

Search

Items tagged with: coding


#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.

codepen.io/thebabydino/pen/MYW…

#CSS #code #coding #frontend #transform #web #dev #webDev #webDevelopment


#cssWish That we could have a zero count for the number of columns in `repeat()`.

That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:

```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```

#CSS #code #coding #cssGrid #frontend #web #dev #webDev #webDevelopment #cssLayout


Someone hearted this button ripple effect demo on @codepen (coded about half a decade ago) and made me notice it still said "only works in Chromium" - as of last summer, it's cross-browser! 🥳🎉

codepen.io/thebabydino/pen/LYZ…

#CSS #JS #JavaScript #code #coding #web #dev #webDev #webDevelopment #frontend


Made this a couple of years ago on @codepen but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown codepen.io/thebabydino/pen/qBJ…

Based on a thing at a now dead link which did something of the kind with a huge div soup.

#css #js #a11y #dropdown #coding #code #web #dev #webDev #webDevelopment #frontend


Meet the 21-year-old helping coders use #AI to #cheat in #Google and other tech #job #interviews


Source: cnbc.com/2025/03/09/google-ai-…

“Everyone programs nowadays with the help of AI,” said Lee, a 21-year-old student at Columbia University


#software #news #technology #knowledge #coding #program


Know how border-image & border-radius don't play nice together?

(interactive codepen.io/thebabydino/pen/jxZ…)

#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

@codepen demo: codepen.io/thebabydino/pen/qBE…

(and yes, this is a tip I first shared on twitter over half a decade ago x.com/anatudor/status/12199161… )

#CSS #clipPath #cssClipPath #coding #web #dev #webDev #webDevelopment #code #frontend #borderImage #borderRadius


Because someone just hearted a 5 year old @codepen demo codepen.io/thebabydino/pen/GRo… I made using a #Sass function + looping to generate a #CSS 🌈: we don't need *any* Sass for this anymore! 🎉

We can now do it with

background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)

#SCSS #loop #looping #newCSS #rainbow #cssGradient #coding #code #frontend #web #dev #webDev #webDevelopment #hueInterpolation



Made a gallery of such #SVG gradient + #filter effects blobs on @codepen
codepen.io/thebabydino/full/YP…

Also includes an explanation of the how behind and interaction: the focal point of the `radialGradient` the blobs start from follows the cursor on hover.

Different blobs for light/ dark mode. 😼

#svgGradient #cssGradient #blob #grainy #radialGradient #svgFilter #grain #code #coding #frontend #distortion #web #dev #webDev #webDevelopment #filterEffect


Grainy distorted gradient blob: 1 #SVG `radialGradient` (setting a focal point `fx,fy`) vs. multiple #CSS `radial-gradient()` layers (no option to control focal point).

Using filters for distortion & grain effect.

A bit more detail on this reddit.com/r/css/comments/1j03…

#svgGradient #cssGradient #blob #grainy #radialGradient #svgFilter #filter #grain #code #coding #frontend #distortion #web #dev #webDev #webDevelopment


Microsoft Copilot continues to expose private GitHub repositories developer-tech.com/news/micros… #microsoft #openai #chatgpt #github #developers #coding #programming #security #infosec #ai #tech #news #technology


Someone asked how to get such an offset grid for any number of items, so here's my take on it reddit.com/r/css/comments/1ixn… - define a 2 col grid via grid-template-columns, make all items span 3 rows, then offset down the 2nd item (placed on the second column) by one row to start from the 2nd.

#CSS #cssGrid #cssLayout #code #coding #web #dev #webDev #webDevelopment #frontend


Hails #metalheads!
Check out my new site to research and discover #metal 🤘
randommetaltools.streamlit.app…
Five tools at the moment:
- Random Metal Record with its link to Spotify
- Random Metal Record from Bandcamp with embedded player
- Random New Release with links to Spotify and/or Bandcamp.
- Random by Genres: Pick a genre and search a random record with links to Spotify and/or Bandcamp.
-Lastfm manual scrobbler
#heavymetal #deathmetal #blackmetal #doommetal #grindcore #powermetal #python #streamlit #coding