people gainfully employed by war-criminal-aligned fascist-adjacent absolute-dickhead vercel who were VERY quiet in the days around guillaume sharing his little jaunt with netanyahu now back out of the woodwork sharing their company-issued quota of blog posts and changelogs. well done lads.

I built device mockups for my devleads.site landing page. A few people asked about them, so I coded a reusable web component for phone, tablet or laptop mockups. It supports img/vid fallbacks, anchor-tag linking, themes, hover animations,custom colors & responsiveness. Repo buff.ly/7BDPv99 #100Devs

View transitions are pretty neat, and I was fortunate enough to write a piece for @piccalil.li about putting them to work. They're such an exciting new part of the web platform, and I'm elated to see new and boundary-pushing effects making their way into production. #WebDev #ViewTransitions #CSS

Mamdani going so hard for trans right and winning is some juicy proof that every dem that abandoned us didn’t do it for politically advantageous reasons. They did it because they’re transphobes and they will lose for it

I made a small utility to safely set .innerHTML with values escaped by default and trusted content selectively excluded from being escaped

Man, I love this. Here's a custom element to automatically add side notes to your blog posts. It parses the text, includes feature detection for anchor positioning, and uses progressive enhancement. This is how things should be done! meyerweb.com/eric/thought...

Got a new article up about designing motion when the design doesn’t move. For anyone who’s ever been handed a flat layout and told “make it feel dynamic.” cydstumpel.nl/how-i-turn-s...

Pretty sure I built this functionality before, but now I wrote it as a web component and I’m extracting it for future use: codepen.io/nonsalant/pe...

useful when you want to force a browser window to be a smaller size (than what’s normally allowed by just resizing the window)

to avoid off-by-one errors, always make sure there is enough contrast between your cats

JS pro tip: Add { cause } to errors. Makes debugging and inspection way easier 🔍 developer.mozilla.org/en-US/docs/W...

You can make an element look like something it's not, but under the hood it's still NOT that thing you made it look like. Making <details> & <summary> look like tabs doesn't make them tabs. css-tricks.com/pure-css-tab... — tabs have specific semantic and behavior requirements. #a11y

Springs and Bounces in Native CSS • Josh W. Comeau | The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. ... | www.joshwcomeau.com/animation/li...

to avoid off-by-one errors, always make sure there is enough contrast between your cats

Since the “ceasefire,” Netanyahu has killed 100+ Palestinians, has continued to restrict aid into Gaza, banned all UN investigators, & still enforces an international media blackout. And billionaire owned Washington Post runs this pro genocide editorial. Why do you still have a Wash Post sub?

Still one of my favorite toggle buttons: codepen.io/alvaromontor... - Native behavior - Micro-interactions on hover and click - Keyboard friendly - Realistic(-ish). I especially like how the button "reflects" the neon wrapper's light when activated. All in a single #HTML element + #CSS. #webdev

css-tricks.com/almanac/prop... A CSS property to allow form controls to automatically grow as big as the text inside it is.

Took me a sec but I got it: bsky.app/profile/did:...

“Full-Bleed Layout with Modern CSS” by @css-only.dev frontendmasters.com/blog/full-bl...

Amen to this entire thread

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

Object.groupBy() #javascript

Remind me of the conditions placed on the families of the released Israeli captives?

💡 CSS Tip! A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width. css-tip.com/conditional-... cc @ishadeed.com @una.im

On the ninth day, blobby lads showed up to watch you log in to your accounts. codepen.io/OuterVale/pe...

Challenge: make a website without HTML. #html

Loading spinner in like 10 lines of #CSS

As an experiment, we (the Firefox team) wanted to try a new way to get feedback on which Interop proposals matter most. So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion. interop-rank.jakearchibald.com

Heyo! Just realized that overflow-block and overflow-inline is Baseline newly available as of Chrome 135 and Safari 26. Been in Firefox for quite some time. developer.mozilla.org/en-US/docs/W... #css

Never forget October 7th 2023, that fateful day when Israelis were brutally massacred by Israeli tanks and Israeli helicopters and Israeli drones and Israeli soldiers and Israeli bullets, and also by Hamas a bit. thecradle.co/articles-id/...

7 simple ideas you can use to improve animations

Jake's made a great synopsis of DHH. I first met DHH almost 25 years ago, spoke at his office, helped promote his products, hosted him at events. DHH thinks you can tell by *looking* whether someone is a "native". Because he thinks people who look like me can never belong to our countries. Fuck him.

Was disappointed to see the Whiteboard Guy giving the Vercel CEO fodder to reply to (Vercel guy bumps up his positive comments to push down the negative ones after his Netanyahu photo). He deleted it the next day (after at least one person got upset) but decided DHH is still OK to fraternize with.

Web component that produces a map for a location picker: - takes a selector for a button via the `confirm` attribute; - when clicked that button dispatches a `map-picker-confirm` custom ev. with the following details: {latitude, longitude, address} Works inside Light DOM or another WC's Shadow DOM.

New CSS article: Simulating Container Style Queries with CSS Animations. keithclark.co.uk/articles/sim...

Developers drop Vercel, call for boycott after CEO posts selfie with Netanyahu - https://www.middleeasteye.net/trending/developers-drop-vercel-call-boycott-after-ceo-posts-selfie-netanyahu

🔻vercel

Them: “tech needs to be apolitical. Focus on building” Also them: “it was great meeting you Mr War Criminal I hope we can do a lot of technology together that benefits your political goals and my political wallet”

🎶 mammas don’t let your babies grow up to be coders 🎶

I was happy to read this last year: ❝“frontend” is becoming the dominant form in casual or technical discussions, particularly within developer communities. A Google search supports this trend: “frontend” yields approximately 137 million results compared to 133 million for “front end.”❞

That’s an explicitly pro Israel labeler. The labeler I’m using (that put these labels on pef-moderation) is @shadowbanner.bsky.social — it’s not perfect but it’s less biased in favor of Israel.

🔻vercel

One of the most frustrating aspects of media queries is that we can’t use custom properties with them. This often results in hard-coded values in otherwise, highly configurable codebases. Manuel has a novel approach to get around this. piccalil.li/blog/a-worka...

One of the coolest things about it honestly: “This isn’t a thing anybody is going to npm install. It’s not versioned nor meant to be always used wholesale. Copying out useful bits is fine usage.” The @chriscoyier.net CSS r̶e̶s̶e̶t̶ starter: frontendmasters.com/blog/the-coy... #css

new scam going around where they hire you for a job but pay you less than the value your labor produced

Yelp! TechCats needs more cats and I _need_ to see pictures of all of you all's TechCats - techcats.netlify.app 😻

The URL Pattern API is now available across all major browser engines! It's now much easier to work with URLs. See developer.mozilla.org/en-US/docs/W... for more info.