Iain Bean's Avatar

Iain Bean

@inbn.dev.bsky.social

building component.gallery and other less useful things

90 Followers  |  112 Following  |  24 Posts  |  Joined: 05.12.2023  |  1.6788

Latest posts by inbn.dev on Bluesky

Preview
Economics & labor rights in AI skepticism | Henry From Online The personal site & portfolio of creative web developer Henry from Online

put some thoughts together on the LLM trend and its implications for labor rights. there's a lot to be said about the lofty claims of pro-LLM technologists, but this presumes their promises of efficiency, etc. are true.

henry.codes/writing/econ...

03.06.2025 19:45 โ€” ๐Ÿ‘ 49    ๐Ÿ” 13    ๐Ÿ’ฌ 5    ๐Ÿ“Œ 1

I have no idea why people continue to share their writing on a site which is so actively hostile to readers.

14.05.2025 17:17 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

I have thought about adding a button which opens every single component example in a new tab but browsers don't really like it when you try to open 100 tabs with JS!

I like your idea and it should be pretty easy to implement.

06.05.2025 19:30 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

I haven't seen any examples of this, no. I experimented a bit with using LLMs to audit the component examples a while back but I wasn't satisfied with the accuracy of the results. This looks like a good use case though โ€“ it would definitely be nice to show common props on component pages. Thanks!

06.05.2025 16:39 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 2    ๐Ÿ“Œ 0
Preview
The Component Gallery An up-to-date repository of interface components based on examples from the world of design systems, designed to be a reference for anyone building user interfaces.

component.gallery 2.0 is now live ๐ŸŽ‰

๐Ÿš€ Built with Astro
๐Ÿ–ผ๏ธ 2,400+ component images
๐Ÿ“Š Charts!
๐Ÿ”Ž Improved search
๐ŸŒ’ Better dark mode

โ€ฆand much more

05.05.2025 11:41 โ€” ๐Ÿ‘ 65    ๐Ÿ” 14    ๐Ÿ’ฌ 10    ๐Ÿ“Œ 1

promised myself I won't download oblivion remastered until I've finished the new component.gallery

coincidentally, this morning has been very productive

03.05.2025 09:54 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Video thumbnail

ok, so it turns out this is really hard to automate. I've found a pretty good workflow but it's still quite labour-intensive. I'm going alphabetically by component: just finishing the checkboxes now.

31.03.2025 18:42 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
Refresh. โ€”ย ethanmarcotte.com In 2023, I wrote a book. Several months later, my publisher closed its doors. And now? Weโ€™re back, and better than ever.

๐ŸฆŠ

I am downright delighted to announce that my latest book, YOU DESERVE A TECH UNION, has a brand new look. I really love it, and I hope you do too.

Hereโ€™s a look at whatโ€™s changed andโ€”maybe more importantlyโ€”whatโ€™s stayed the same:

ethanmarcotte.com/wrote/refres...

#YDATUbook #books #unions #1u

17.03.2025 15:07 โ€” ๐Ÿ‘ 204    ๐Ÿ” 67    ๐Ÿ’ฌ 19    ๐Ÿ“Œ 7

in totally unrelated news I've just added Palantir's open source Blueprint UI toolkit

11.03.2025 19:26 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Thinking of adding an 'Evil bastards' tag to component.gallery for cases where the design system is good but the company behind it is terrible.

11.03.2025 18:51 โ€” ๐Ÿ‘ 3    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

Every time someone proudly posts "so I asked chatgpt" they're saying something *incredibly* fucking embarrassing without realizing it.

It's like walking into a party absolutely covered in dogshit and not understanding why all these people are being so mean and rude

13.02.2025 07:39 โ€” ๐Ÿ‘ 650    ๐Ÿ” 131    ๐Ÿ’ฌ 13    ๐Ÿ“Œ 6
Preview
TheSims.css A โ€œDesign Systemโ€ inspired by the 2000 life simulation game, The Sims.

Apparently today is the 25th (!!) anniversary of the release of the first The Sims game, which has reminded me that a few years ago I built this โ€œDesign Systemโ€ based on its UI.

thesimscss.inbn.dev

04.02.2025 14:15 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
Plausible Analytics Plausible is a lightweight and open-source Google Analytics alternative. Your website data is 100% yours and the privacy of your visitors is respected.

I've been using plausible.io on component.gallery for over 4 years now. It might work out a little bit more expensive than the alternatives but they've been kind enough not to charge me extra whenever I've had the odd popular month which pushed me over my page views quota.

23.01.2025 14:23 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Thanks for pointing me in the right direction with this. The flash of the fallback font is a lot less frequent now with <link rel="expect"โ€ฆ> but I'm not sure if that's just because the transition to the new page is delayed โ€“ I'll do a bit more experimentation and let you know what I discover.

16.01.2025 18:44 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

Thanks! I've sent you a DM. It might not even be possible to completely remove the FOUT just using CSS view transitions yet. I assume the Astro ClientRouter is doing a lot more under the hood to make things behave like a SPA but I also could have missed something very obvious!

14.01.2025 21:07 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

thanks for the advice! the pure CSS alternative is broadly working โ€“ unfortunately it results in a flash of unstyled text which you don't get when using the astro ClientRouter. Do you know a solution for that?

14.01.2025 18:48 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Video thumbnail

I do love it though

13.01.2025 20:28 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

adding view transitions to an astro site with two lines of code feels like magic*

*until you realise it's broken all your client-side JavaScript

13.01.2025 20:19 โ€” ๐Ÿ‘ 4    ๐Ÿ” 0    ๐Ÿ’ฌ 2    ๐Ÿ“Œ 0
Preview
GitHub - MWDelaney/sponge-case: Correcting an oversight in HTML: a web component to add Sponge Case to your website. Correcting an oversight in HTML: a web component to add Sponge Case to your website. - MWDelaney/sponge-case

<sponge-case>I started making this as a web component</sponge-case>

github.com/mwdelaney/sp...

07.01.2025 16:32 โ€” ๐Ÿ‘ 7    ๐Ÿ” 6    ๐Ÿ’ฌ 2    ๐Ÿ“Œ 0
Preview
Idea: include preview image of each component ยท Issue #43 ยท inbn/component-gallery Hi~ I really like your website and the UI design is very cute:) I think include a preview thumbnail image of each component in component list will be more straightforward๏ผŸ

As part of the upgrade I'm trying to automate the really tedious tasks like screenshot generation, including a solution for the most requested feature: a preview image for every single component example.

github.com/inbn/compone...

04.01.2025 17:03 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

An update on component.gallery v2 (aka the Astro rebuild): it's _almost_ at feature parity with the current version. I'm aiming for a beta version by end of January.

04.01.2025 17:03 โ€” ๐Ÿ‘ 3    ๐Ÿ” 0    ๐Ÿ’ฌ 2    ๐Ÿ“Œ 0

Total occurrences of the word 'Christmas' in the song 'Christmas (Baby Please Come Home)' by Darlene Love: 28

18.12.2024 16:08 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Toast is one of those names (a bit like accordion) I'm ok with because it gives some hint to the component's form/motion (if you understand what it's referencing!) but I do see that it provides you with zero clue to its content or purpose. I'd be interested to know if you came up with a better name!

03.12.2024 13:50 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

Thanks for sharing, Ariel!

03.12.2024 13:34 โ€” ๐Ÿ‘ 3    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Preview
AIโ€™s Transformative Impact On Web Design: Supercharging Productivity Across The Industry โ€” Smashing Magazine Discover how AI is reshaping web design, boosting productivity in design, coding, UX, and copywriting while amplifying human creativity in a new article by Paul Boag.

did an AI write this? I'm struggling to fathom how a respectable publication could post something as uncritical of AI as this in 2024.
www.smashingmagazine.com/2024/11/ai-t...

21.11.2024 11:35 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

I've added (and will be adding more as they're written) all of Heydon's posts about HTML elements as resources to component pages. e.g. component.gallery/components/s...

12.11.2024 22:46 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
2024 International Show 'n' Tell, Thu, Nov 7, 2024, 7:00 PM | Meetup The November migration of the world's top web developers to the sunny city of Brighton & Hove can only mean one thing - [ffconf 2024](https://2024.ffconf.org/) is coming. S

Come along to this to see lots of interesting talks, including me trying, but probably failing, to explain the astro content layer in 5 minutes.
www.meetup.com/async-web-te...

07.11.2024 09:29 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
Times to strike. โ€”ย ethanmarcotte.com The largest union of tech workers just went on strike.

๐ŸฆŠ

A few quick thoughts on the New York Times Tech Guild strike, why it matters, and what it means for the rest of us:

ethanmarcotte.com/wrote/times-...

#unions #TechUnions #1u #blogging

04.11.2024 15:15 โ€” ๐Ÿ‘ 12    ๐Ÿ” 16    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 2
Screenshot of the Bluesky settings page, under "Accessibility Settings". There is a toggle labeled "Require alt text before posting".

Screenshot of the Bluesky settings page, under "Accessibility Settings". There is a toggle labeled "Require alt text before posting".

๐Ÿ˜ฎ Bluesky pro-tip: in the accessibility settings, you can enforce that the images you post must have alt text.

This is important for folks who use screen readers. Instead of seeing the image, the supplied text will be read to them instead.

01.11.2024 14:14 โ€” ๐Ÿ‘ 399    ๐Ÿ” 101    ๐Ÿ’ฌ 21    ๐Ÿ“Œ 12

Hi Victor, sorry about that. Bootstrap has so many issues the GitHub API stopped responding! I've implemented a temporary fix of limiting it to the first 1000 issues.
isitaccessible.dev/package/boot...

23.09.2024 17:18 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

@inbn.dev is following 20 prominent accounts