Zach’s ugly mug (his face) Zach Leatherman

<browser-window> Web Component

October 26, 2023 #19 Popular

A lightweight themed zero-dependency web component wrapper to emulate a Safari-esque browser window for demos and presentations.

Originally used in the slide deck for This Web Site is a Tech Talk.

Notably (as this component is best for demos) it does use client rendering via Shadow DOM to add the markup for browser chrome around the content. Before JavaScript or without JavaScript, the fallback content is rendered as expected.

Demos

Here’s a live demo of it in action.

This one has a shadow.

Source code:

<browser-window>
	<p>Here’s a <em>live demo</em> of it in action.</p>
</browser-window>

<browser-window shadow>
	<p>This one has a shadow.</p>
</browser-window>

This one has a URL bar (with favicon) and an iframe:

Or maybe another demo of a screenshot of the demo page:

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fzachleat.github.io%2Fbrowser-window%2Fdemo.html/opengraph//

Tags: Project Web Components #19 Popular #81 4,196 Views

< Newer
The Squirminal Web Component
Older >
Seven Million npm Downloads for Eleventy

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 84 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

31 Reposts

Martin SchneiderCarlton Gibson ????????Dave RupertChristopher Kirk-NielsenRaymond CamdenZach LeathermanZach LeathermanZach LeathermanZach LeathermanIndieWeb Avatar for https://www.alvinashcraft.comIndieWeb Avatar for https://frontendmasters.comBrian DavidZach LeathermanMassimo Artizzu ????????????remjackyalcinéThe Spicy WebNaiyerAlexis DeveriaAndersMartin SchneiderJonathan SchofieldJason GarberCarlton Gibson ????????brussolo.igor ????️‍????Tixie Salander ????Baldur BjarnasonBob MonsourLinh PhamRaymond CamdenAntonio Sarcevic

49 Likes

Robin HooverCaleb JenkinsEgor KloospassleCloudCannonMarioJonasMassimo Artizzu ????????????Florian Geierstangerkaiserkiwi :kiwibird:Jeremy NeanderAmadeus MaximilianWesley SoaresJoe GaffeyTyler StickaPatrick O'BrienMike AparicioEvanAdrianna TanKaiAlex Guyot :plus:Sia KaramalegosMarcellestrongestThe Spicy Webpgrucza@toot.cafeAlexis DeveriaMolly HCory Dransfeldt :prami:Third spruce tree on the leftMatt SteinAndersKeith J GrantJWDee-Yell (Dave)Ashur CabreraMartin SchneiderCarlton Gibson ????????brussolo.igor ????️‍????Alex CrockerBob MonsourBaldur BjarnasonHeather BuchelLinh PhamOne GabrielEugene Alvin VillarRyan BaumannDave ???? :cursor_pointer:jackyalciné
7 Comments
  1. Zach Leatherman

    @chriskirknielsen well, wait ????

  2. Carlton Gibson ????????

    @zachleat (update: DISASTER emoji typo ????‍♀️ FIXED)

  3. Zach Leatherman

    @raymondcamden Thanks Raymond!

  4. Zach Leatherman

    @carlton I knew what you meant ????

  5. Konnor Rogers

    @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/1717661084692221982This should pair perfectly for full page examples!!(Still a WIP)htt… Truncated

  6. Zach Leatherman

    @konnorrogers awesome!

  7. passle

    @zachleat Neat :)

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)