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
Meet the 21-year-old helping coders use AI to cheat in Google and other tech job interviews
As artificial intelligence becomes more advanced, employers are trying to build workarounds to prevent candidates from cheating in virtual job interviews.Jennifer Elias (CNBC)
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
A recent post alleged that ChatGPT (and, by association, Microsoft Copilot) was capable of accessing data from private GitHub repositories.Ryan Daws (Developer Tech News)
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
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