Post

Hiiii Bluesky friendsss!! I made something for you all πŸ€— Presenting `bsky-widget` πŸ¦‹ - πŸ’…πŸΌ Cute profile cards for your websites / blogs - ✨ Supports all frameworks and vanilla setups - πŸ—οΈ Card generator so you can just copy-paste the code Do share your profile cards <3 bsky-widget.saurabhdaware.in

bsky-widget.saurabhdaware.inBluesky Widget: Profile Card Generator for Bluesky Profiles πŸ¦‹Bluesky Widget: Cute Bluesky Profile Cards for your websites!!

235 reposts732 likes

Super cool! I’ve been thinking about creating a widget for Noona’s booking flow for a while now. Currently our customers have iframes which are a nightmare. Would you recommend this approach (web components)?

It definitely saves a lot of time building separately for every framework while avoiding iframes. It does have some gotchas because of shadow dom so you might have to look for that. Overall depends on how complex your widget is but worth giving it a try imo

Yeah it’s rather complex, a whole booking flow for either service providers or restaurants. Would want to reuse as much from our app code anyways so I guess bundling a widget with React would be easier.

The great thing about web components is that you can drop them in anywhere. If you have a client with a CMS-based site they just have to load the script and use the tag in their content.

My use case is an embeddable audio player. We've had iframes for a couple of years and also started offering web components lately. Iframes are usually ok but some users want to embed many players at the same time and the iframe overhead is terrible.

The other big thing is web components can easily interact between them. Eg: an audio player than can open an overlay audio player at the bottom.

Small feedback: most web components do not use data- attributes. Because the attribute is local to the element, and new global attributes are rare, the risk of collisions is low. It's a bit nicer DX, IMO, to write `handle="saurabhd.bsky.social"`