New web component dropped: <browser-window>
Fake some Safari-esque browser chrome in a demo or web-based slide deck.
Blog post: https://www.zachleat.com/web/browser-window/
Demo: https://zachleat.github.io/browser-window/demo.html
Code: https://github.com/zachleat/browser-window/
@zachleat This looks really cool
I really appreciate how readable the code for it is. I've been using your web components (e.g. details-utils, resize-asaurus) to learn how to build them from scratch
@hasanhaja Thank you Hasan! I just re-read the code after your comment and noticed/fixed a few issues
I appreciate it more now! Thank you
@zachleat Inspired by your code and post, I gave writing and publishing my own web component a shot
Demo: https://hasancruk.github.io/cruk-carousel/demo.html
Code: https://github.com/hasancruk/cruk-carousel
In its current state, it's more of a toy project than something that's ready for production. I've learned so much putting that simple component together, and my understanding of the web component spec (mainly Shadow DOM) is getting more and more nuanced
@hasanhaja looks great! Carousel is a great use case!
@zachleat That's a pretty fancy iframe, Zach.
@schneyra WKWebView could never!
@zachleat oh that’s wonderful!
@carlton thank you Carlton!
@zachleat (update: DISASTER emoji typo FIXED)
@carlton I knew what you meant
@zachleat this is maybe my favoritest one yet.
@davatron5000 Testimonial from the President of Web Components!!
@zachleat I don't need this, but I want to use it regardless because it's such a cool lil' tool. Nice work!
@chriskirknielsen well, wait
@zachleat this is a damn good idea
@raymondcamden Thanks Raymond!
@zachleat when i got past the initial learnings on WC, i realized it was tempting to build comps that were DX at the expense of perf for users - so examples like this - i just freaking love. gonna start calling em Guilt Free Web Components ;)
@raymondcamden guilt free until you hit that next.js 200 KB performance budget (the bar is so low here )
@zachleat wait... I actually have a use case for this...
I'm working on building a "code pen like" editor using <textarea> + <pre>
https://twitter.com/RogersKonnor/status/1717661084692221982
This should pair perfectly for full page examples!!
(Still a WIP)
https://konnorrogers.github.io/light-pen/components/light-pen/
@zachleat Very cool, if I get the time I'll add the os="windows" property to it
@lucienimmink ha, and make it automatically switch based on user OS?
@zachleat The default of the os property should do that. But in that case forget about Linux and the 1000+ window managers
@lucienimmink (amazing!)
@zachleat I haven’t delved into Shadow DOM’d custom elements yet (aka, Real Custom Elements by Real Developers) is it possible for the consumer site of this to change, say, the colours of the OS X icon circles? Or when a shadow root is used, is that it and you're restricted to the API (css custom properties) the author has created?