Arpit Agrawal's Avatar

Arpit Agrawal

@arpit.codes

Web designer-developer

107
Followers
517
Following
92
Posts
13.11.2024
Joined
Posts Following

Latest posts by Arpit Agrawal @arpit.codes

Preview
sugarcube Design tokens, generated CSS, and optional components. Build front ends on strong, reusable foundations.

Sugarcube is now publicly available!

sugarcube.sh

24.02.2026 03:27 πŸ‘ 48 πŸ” 14 πŸ’¬ 4 πŸ“Œ 1
Preview
WebHaptics – Haptic feedback for the mobile web. Haptic feedback for the mobile web.

this is so cool
haptics.lochie.me

02.03.2026 19:40 πŸ‘ 223 πŸ” 47 πŸ’¬ 13 πŸ“Œ 14

load-bearing @xkcd.com

26.02.2026 20:42 πŸ‘ 256 πŸ” 44 πŸ’¬ 1 πŸ“Œ 2

Hey @adactio.com, I've been meaning to brush up on my DOM scripting skills and came across your book. But it's been a while since it was published. Do you think it still holds up or is there a different resource you point people to instead?

26.02.2026 07:08 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Underlining Links With CSS A practical guide to styling link underlines with modern CSS text-decoration properties. Perfect for bookmarking when you need a quick reference!

I always forget what properties are available now so I've written a quick post to put them all in one place

Underlining links with CSS

www.alwaystwisted.com/articles/und...

#FrontEnd #CSS #WebDev #WebDesign

09.02.2026 11:32 πŸ‘ 17 πŸ” 8 πŸ’¬ 0 πŸ“Œ 0

that vinext project is interesting because if, as they claim, it was done by one engineer w/ AI in one week, that engineer is either claiming that they successfully code-reviewed about 22k lines of code every day, which no they didn't, or they are proudly inviting you to run unreviewed code

24.02.2026 21:23 πŸ‘ 14 πŸ” 2 πŸ’¬ 3 πŸ“Œ 0
25 Feb 2026, 10:10 am - Notes | Arpit's Blog The online home of Arpit Agrawal, a web designer-developer from India.

I keep forgetting how the CSS values `initial`, `unset`, `revert` and `revert-layer` roll back a declaration to a different point in the cascade. It was about time I jotted it down for my future self before it slips my mind again for the 1000th time.

arpit.blog/notes/2026/0...

25.02.2026 04:58 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Really looking forward to @bram.us' talk on CSS Anchor Positioning and @zachleat.com's talk on reducing the JS footprint.

23.02.2026 05:35 πŸ‘ 2 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

I'll be attending @londonwebstandards.org's State of the Browser for the first time, remotely! πŸ’ƒπŸ»

23.02.2026 05:35 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

I do something similar in dev mode. I set 🚨 emoji as my favicon so I can spot my tab instantly.

```html
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚨</text></svg>" />
```

22.02.2026 03:44 πŸ‘ 3 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
una.im | border-shape: the future of the non-rectangular web Learn about new geometry capabilities with this game-changing experimental CSS feature.

I've been experimenting with an upcoming CSS feature called border-shape lately.

It's really cool what you can do with it: lots of practical applications + it opens a lot of doors for non-rectangular UIs!

Try it in Canary w/experimental web platform features on, & read more:

una.im/border-shape

19.02.2026 22:06 πŸ‘ 122 πŸ” 33 πŸ’¬ 10 πŸ“Œ 5
Preview
Don't Inherit the Box Model It's time to stop spreading this out-dated practice

> Some properties apply to the contents, and those are the properties that inherit. Other properties apply to the box, and do not inherit.

www.oddbird.net/2025/09/04/b...

19.02.2026 13:06 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

it’s important to keep caring about how things work and how they’re built

17.02.2026 21:14 πŸ‘ 279 πŸ” 62 πŸ’¬ 7 πŸ“Œ 7
Preview
Inner and Outer Scoped View Transitions ...

In the recording I first shuffle the items in each list using an Element-Scoped View Transitions on each list (running in parallel). Then I start an outer Scoped View Transition while the lists still are reshuffling.

Like I said: SO GOOD 🀩

Try it yourself: codepen.io/bramus/pen/b...

18.02.2026 11:14 πŸ‘ 13 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0
Video thumbnail

Element-Scoped View Transitions are gonna be **SO GOOD**

There’s still some details to settle, but the main thing is there: run VTs on a subtree of the DOM, allowing parallel VTs.

And with `view-transition-scope` you can limit the scope of `view-transition-name` values, allowing VTs to be nested.

18.02.2026 11:14 πŸ‘ 223 πŸ” 37 πŸ’¬ 5 πŸ“Œ 2
9 Feb 2026, 03:25 pm - Notes | Arpit's Blog The online home of Arpit Agrawal, a web designer-developer from India.

This could have been useful in the context of a search form. But `<input type="search">` already provides a native clear button for that single field.

arpit.blog/notes/2026/0...

09.02.2026 10:17 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Today I learned that setting `type="reset"` on a `<button>` element in HTML creates a reset button that, when activated, immediately clears all form data, resetting it to its initial state.

09.02.2026 10:17 πŸ‘ 2 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0

This is totally breaking my mind.

05.02.2026 13:11 πŸ‘ 3 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Congratulations on the 700 episodes @shoptalkshow.com @davatron5000.bsky.social @chriscoyier.net πŸŽ‰

I've been a regular listener (watcher?) since you all started releasing on Youtube. Thanks for all the insight and laughs. It honestly feels like talking web dev with friends.

- Fellow Shop-o-maniac

02.02.2026 15:50 πŸ‘ 2 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

The CSSWG just resolved to add this to the spec πŸ₯³

github.com/w3c/csswg-dr...

29.01.2026 23:18 πŸ‘ 158 πŸ” 23 πŸ’¬ 7 πŸ“Œ 2
Preview
Get the scrollbar width using only CSS A few lines of code to get the scrollbar width within a CSS variable

@css-only.dev shared a CSS only way to compute the scrollbar width. From that number you can infer whether a gutter is present. But this too is a workaround.

css-tip.com/width-scroll...

23.01.2026 14:03 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Quick note, in case this just slipped through.

On Safari, the `.button--icon` doesn’t reveal the span text on hover since Safari doesn’t support `calc-size()` yet.

A simple `width: max-content` fallback, followed by `width: calc-size(max-content, size)` in an `@supports` rule, fixes the issue.

23.01.2026 08:47 πŸ‘ 1 πŸ” 0 πŸ’¬ 2 πŸ“Œ 0
Preview
[css-extensions] Custom container queries Β· Issue #8121 Β· w3c/csswg-drafts This was requested in csstools/postcss-plugins#671 It would be in parallel with @custom-media. @custom-container <extension-name> <container-condition> @custom-container --foo card (inline-size > 3...

Love it.

I recently ran into a case where I wished I could use it with `@container` too. There is an open spec issue for `@custom-container`: github.com/w3c/csswg-dr...

23.01.2026 06:06 πŸ‘ 3 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Preview
OKpalette – Best in Class Color Extraction OKpalette is a perceptual color extraction tool that generates beautiful color palettes from images using advanced color space analysis.

Just spent some time playing with OKpalette, a color extraction tool by @meodai.bsky.social, and I’m in awe.

The 3D spinning text pulled me in immediately. I assumed it was done using JS, finding out it’s done using CSS genuinely blew my mind.

Wrote more about it here: arpit.blog/notes/2026/0...

23.01.2026 05:33 πŸ‘ 2 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
OKPalette Demo
OKPalette Demo YouTube video by David

I built a color extraction tool because most of them kept giving me beige.

This is OKPalette. It adapts to the image before picking colors.

Also: first time I ever tried recording myself.
This is the least terrible attempt πŸ˜…πŸ‘‡

okpalette.color.pizza

youtu.be/qkZlgJLGKI4

22.01.2026 16:34 πŸ‘ 62 πŸ” 6 πŸ’¬ 13 πŸ“Œ 5
Video thumbnail

Just added a new Cylinder vis to OKPalette. You can now toggle between the cube and the new cylinder view to explore your color palettes in 3D.

PS: I "forgot" to max out the manual number input. okpalette.color.pizza

22.01.2026 23:12 πŸ‘ 131 πŸ” 9 πŸ’¬ 9 πŸ“Œ 1
OKPalette: Context-Aware Color Extraction Walkthrough  / Demo
OKPalette: Context-Aware Color Extraction Walkthrough / Demo YouTube video by David

www.youtube.com/watch?v=qkZl...

OKPalette is live! okpalette.color.pizza

22.01.2026 18:08 πŸ‘ 18 πŸ” 3 πŸ’¬ 2 πŸ“Œ 3
Preview
The Incredible Overcomplexity of the Shadcn Radio Button Radio buttons are built into web browsers. Why are we using a UI library that wraps another UI library that rebuilds radio buttons from scratch? Why does rendering a radio button require multiple depe...

I'm officially a curmudgeon. Here's a rant about the Shadcn component library and how over-complicated its radio buttons are: paulmakeswebsites.com/writing/shad...

(Inspired by this week's work frustrations lol)

#WebDev #CSS #HTML #JavaScript

18.01.2026 18:39 πŸ‘ 93 πŸ” 19 πŸ’¬ 9 πŸ“Œ 0
Video thumbnail

CSS anchor positioning is newly baseline! This opens the door for lots of new creative CSS.

It's a huge feature, but here are the basics.

13.01.2026 16:09 πŸ‘ 210 πŸ” 39 πŸ’¬ 9 πŸ“Œ 11