Skip to main content

Search

Items tagged with: coding

#coding
#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

@property --f { syntax: '<number>'; initial-value: 1; inherits: true } .scale { scale: var(--f); animation: scale 2s ease-in-out infinite alternate; /* no need for another animation on ::before to revert scale */ &::before { scale: calc(1/var(--f)) } } @keyframes scale { to { --f: .5 } }
#dev #web #webdev #code #css #coding #frontend #webdevelopment #transform #tinyCSStip

#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

#dev #web #webdev #code #css #coding #frontend #webdevelopment #cssgrid #csslayout #csswish

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

#dev #web #webdev #javascript #code #css #coding #frontend #js #webdevelopment @CodePen

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

#dev #web #webdev #code #css #a11y #coding #frontend #js #webdevelopment #dropdown @CodePen

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)
#knowledge #News #ai #technology #software #Google #job #coding #interviews #program #cheat

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

Screenshot showing the interactive demo showing that setting a `border-image` on an element with `border-radius` makes the `border-radius` be ignored.
Screenshot of the solution when the desired corner rounding is not bigger than the border-width: ``` border: solid $r; border-image: linear-gradient(90deg, purple, orange) 1; clip-path: inset(0 round $r) ```
#dev #web #webdev #code #css #coding #frontend #webdevelopment #borderimage #borderradius #tinyCSStip #clippath #cssclippath @CodePen

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

Comparative look at the old Sass code vs. the new and much simpler plain CSS code, both producing the same result (a nice-looking rainbow) shown before both of them. Old SCSS solution: ``` @function get-rainbow($n: 12, $sat: 90%, $lum: 65%) { $unit: 360/$n; $s-list: (); @for $i from 0 through $n { $s-list: $s-list, hsl($i*$unit, $sat, $lum) } @return $s-list } html { background: linear-gradient(90deg, get-rainbow()) } ``` New plan CSS solution: ``` html { background: linear-gradient(in hsl longer hue 90deg, hsl(0, 95%, 65%) 0 0) } ```
#dev #web #webdev #code #css #coding #frontend #rainbow #loop #webdevelopment #cssgradient #sass #scss #looping #newcss #hueinterpolation @CodePen

The assembly code for the userspace test program, which opens /dev/tty, writes a message, then reads till it finds the escape key is pressed, at which point it exits. Full code follows: .section .text # fd = open("/dev/tty",O_RDWR,0) plw a0 4 pls a1 path plw a2 0x060000 plw a3 0 sca pmv r19 rv # if (fd < 0) exit(1) plw r0 0 clt r1 r19 r0 pls r0 writenotice jzr r0 r1 plw a0 1 pmv a1 a0 sca brk # write(fd,notice,51) writenotice: plw a0 13 pmv a1 r19 pls a2 notice plw a3 51 sca # char buf[4] msr r10 r10 r10 psh r10 # while read(fd,buf,1) > 0 loop: plw a0 12 pmv a1 r19 pmv a2 sp plw a3 1 sca plw r0 0 clt r1 rv r0 pls r0 quit jnr r0 r1 # if (buf[0] == 27) quit() lbm r0 sp plw r1 27 pls r2 loop ceq r0 r0 r1 jzr r2 r0 quit: # close(fd) plw a0 5 pmv a1 r19 sca # exit(0) plw a0 1 plw a1 0 sca brk .section .data # 8 characters long path: .ascii "/dev/tty" # 51 characters long notice: .ascii "Pre-Init userspace test - press escape to shutdown\n"
#programming #Unix #coding #thingsidowhenbored #osdev

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

Comparative screenshot of a few of the blobs in both light and dark mode.
Demo screen with the info section. Each distorted blob starts out as a circle, tightly fit inside its parent svg element (which has its viewBox set so its 0,0 point is dead in the middle). This circle then gets a radialGradient fill. Choosing the SVG radial gradient over the CSS one as it also allows setting focal point coordinates (fx,fy) distinct from cx,cy - hover a blob to see how its focal point follows the cursor. <radialGradient id='g' gradientUnits='objectBoundingBox' fx='.35' fy='.65'> <stop stop-color='var(--c0)'/> <stop stop-color='var(--c1)' offset='.5'/> <stop stop-color='rgba(from var(--c1) r g b/ 0)' offset='1'/> </radialGradient> The circle with the gradient is then blurred, distorted & given a grainy/ dithered look. The last two actions make use of the same concept of altering the input using noise generated by feTurbulence as a displacement map. The displacement used for distortion is relative to input size. The noise used for dithering is finer (larger baseFrequency). <filter id='distort' primitiveUnits='objectBoundingBox' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='.00713'/> <feDisplacementMap in='SourceGraphic' scale='.3' yChannelSelector='R'/> </radialGradient> <filter id='grain' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='7.13'/> <feDisplacementMap in='SourceGraphic' scale='32' yChannelSelector='R'/> </radialGradient>
#dev #web #webdev #code #filter #coding #frontend #svg #webdevelopment #SVGFilter #cssgradient #distortion #Blob #svggradient #grainy #radialgradient #grain #filtereffect @CodePen

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

Comparative result of the SVG radialGradient vs. the CSS radial-gradient() blob.
#dev #web #webdev #code #css #filter #coding #frontend #svg #webdevelopment #SVGFilter #cssgradient #distortion #Blob #svggradient #grainy #radialgradient #grain

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

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)
#security #News #ai #technology #infosec #github #programming #tech #microsoft #openai #coding #chatgpt #developers

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

Screenshot showing the result with the grid overlays on top. The DevTools panel is open on the right, showing the CSS for the second item. In case the grid container is at least as wide as the base width for two columns plus the gap between them, then offset this item on the second column by one row down.
#dev #web #webdev #code #css #coding #frontend #webdevelopment #cssgrid #csslayout

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
#metal #python #coding #doommetal #deathmetal #heavymetal #metalheads #powermetal #blackmetal #grindcore #Streamlit

⇧