Skip to main content

Items tagged with: webdev

Search

Items tagged with: webdev

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

p.s. Does anyone know how BlueSky is able to avoid showing the go.bsky.app address when you hover over the link in a browser? Seems a bit dangerous to be able to hide it in a browser?

#AskFedi #WebDev

#askfedi #webdev

#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

One thing I am loving about @eleventy is I can make one snippet and use it everywhere, and if I wanna update that one snippet I just change the NJK file, like this one. Displays all tags with a counter! github.com/rkingett/myblog/blo… #11ty #WebDev #Eleventy

myblog/_includes/tags.njk at main Β· rkingett/myblog

Contribute to rkingett/myblog development by creating an account on GitHub.
GitHub
#webdev #eleventy #11ty @Eleventy 🎈 v3.0.0

πŸŽ‰ Why I Care So Much About the Fediverse by Ayo Ayco (@ayo) | ayos.blog/why-fediverse/

#fediverse #mastodon #webdev #tech

Why I Care So Much About the Fediverse

Out of all the recent events, why do I care this much about this?
Ayo's Blog
#fediverse #mastodon #tech #webdev @Ayo

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

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

.van {
.van {
.car {
color: blue;
}
}
}

#meme #webdev #css

a moving van with a smaller van inside of it (seen through the open back door) and inside the smaller van is a small blue car.
#meme #webdev #css

How browsers REALLY load Web pages

When browsers load a Web page and its subresources, A LOT happens under the hood. They need to take into account render/parsing blocking resources, use a preload scanner, listen to resource hints (like preload/preconnect), loading modifiers (async/defer/module), fetchpriority, responsive images, and much more. […]

πŸ“Ί fosdem.org/2025/schedule/event…

#video #web #browser #webpage #http3 #webdev #http #https #async #http2 #fossdem25 #foss #floss #fossdem


FOSDEM 2025 - How browsers REALLY load Web pages

fosdem.org
#FLOSS #foss #web #browser #video #webdev #https #HTTP #fossdem #webpage #http3 #async #http2 #fossdem25

Started working on the recurring tasks feature for @hortusfox !

See more details here:
github.com/danielbrendel/hortu…

#selfhosted #opensource #foss #webdev #php #programming


Recurring tasks Β· Issue #9 Β· danielbrendel/hortusfox-web

Allow option to set a task as recurring.
GitHub
#opensource #foss #programming #webdev #PHP #selfhosted @HortusFox

"We need a BIG launch for our website πŸš€ but don't have a NASA or SpaceX budget."

πŸ€”

#memes #webdev #mentos

Instead of a rocket on a launch pad, it's a huge Mentos rocket with a huge base of Coca-Cola it's resting on.
#memes #webdev #mentos

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

πŸ‘€

#WordPress #StarterTheme #WordPressStarterTheme #WebDev #AirLight

Native blocks with Air-light 10.0.0 It’s soon easier than ever to build websites with the Air-light WordPress starter theme. The upcoming Air-light version 10.0.0 will introduce native WordPress blocks (React.js) without any external dependencies. This represents the most modern and efficient way to create blocks for WordPress websites. The block library will be fully open source, portable, extendable, and best of all β€” native. Stay tuned!
#Wordpress #webdev #wordpressstartertheme #startertheme #airlight

I've been thinking for a while about adding comments to my blog by pulling them from other sources (like Mastodon replies) but I figured I was going to have to write some complicated logic to fetch them, save them to a cache, and invalidate them periodically.

I just noticed that's the *entire* thing eleventy-fetch already does! I am very excited to try this out sometime soon.

11ty.dev/docs/plugins/fetch/

#11ty #WebDev #IndieWeb


Fetch

A docs page for Eleventy, a simpler static site generator.
Eleventy
#webdev #indieweb #11ty

Pride versioning.

Yes. Developers experience pride and shame. I would argue even more if you work in #JavaScript.

Via pridever.org

#webdev #programming

A diagram of how pride versioning works. 2.7.123. Two is the proud version, seven is the default version, same version is the .123.
#programming #webdev #javascript

⇧