Skip to main content

Items tagged with: coding

Search

Items tagged with: coding

Influencers and AI.

#influencer #influencers #ai #coding #math #maths #algorithms

A plane flying towards land. Plane labeled “influencers” land labeled “people talking about ai hype” Second picture. Influencers plane making a U-turn. Land labeled “people talking about coding, maths, algorithms…”
#ai #coding #math #maths #Algorithms #Influencer #influencers

Here'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 codepen.io/thebabydino/pen/XJW…

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

#dev #web #webdev #code #css #coding #frontend #webdevelopment #cssanimation #scrollanimation #scroll #gradienttext @Bramus @CodePen

How’s them vibes?

(Almost like it’s good to know what you’re doing when you do something.)

Via @stefan (Web Weekly newsletter #155 – stefanjudis.com/blog/web-weekl…)

#vibeCoding #coding #tech #bullshit

Screenshot of two social media posts with arrow from first to second titled “Vibe Coding”: First post: saas was built with Cursor, zero hand written code Al is no longer just an assistant, it's also the builder Now, you can continue to whine about it or start building. P.S. Yes, people pay for it 4:34 am • 15 Mar 2025 • 52.2K Views Second post: guys, i'm under attack ever since I started to share how I built my SaaS using Cursor random thing are happening, maxed out usage on api keys, people bypassing the subscription, creating random shit on db as you know, I'm not technical so this is taking me longer that usual to figure out for now, I will stop sharing what I do publicly on X there are just some weird ppl out there 9:04 am • 17 Mar 2025 • 53.6K Views

Web Weekly #155

Good-looking CSS-only carousels, unsafe flexbox alignment and `document.currentScript`.
Stefan Judis (Stefan Judis Web Development)
#tech #bullshit #coding #vibecoding @Stefan Judis

#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

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

⇧