NotesAs an alternative to Chromatic, I’ve been using Storybook’s Test Runner to power screenshot tests for Microsoft Loop. We configure the test runner to run in CI and take a screenshot of every story. However, the initial implementation based on the official Storybook docs was very flaky due to inconsistent screenshots of the same story. Here are some tips to reduce flakiness in your Storybook screenshot tests.Unfurl
NotesFrom Chrome 131 you have more options to style the structure of <details> and <summary> elements. You can now use these elements when building disclosure or accordion widgets.Unfurl
NotesThe Speculation Rules API is designed to improve performance for future navigations. It targets document URLs rather than specific resource files, and so makes sense for multi-page applications (MPAs) rather than single-page applications (SPAs).FeedUnfurl
Noteslet’s spend some time looking at disclosures (<details> and <summary>), the Dialog API, the Popover API, and more. We’ll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Not sure? Don’t worry, we’ll go into all that.FeedEmbedUnfurl
NotesHTML Forms have powerful validation mechanisms, but they are heavily underused. In fact, not many people even know much about them. Is this because of some flaw in their design? Let’s explore. Unfurl
NotesI’ve used URL text fragments in a few posts now and often use it outside of this blog to point someone to a particular piece of text on a page. They’re a really useful feature that allows you to create a URL that links not just to a page or an anchor on that page, but specifically to a bit of text that you’d like to call out to your audience.
NotesThis example section demonstrates a tabs widget that implements the Tabs Pattern. In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. It is recommended that authors consider implementing automatic activation of tabs only in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM.FeedUnfurl
NotesHighlight:Unfurl (spread out from a furled state) will take a url and some options, fetch the url, extract the metadata we care about and format the result in a sane way. It supports all major metadata providers and expanding it to work for any others should be trivial.
Metadata scraper with support for oEmbed, Twitter Cards and Open Graph Protocol for Node.js :zap: - jacktuck/unfurlUnfurl
NotesHighlight:The metascraper library allows you to easily scrape metadata from an article on the web using Open Graph metadata, regular HTML metadata, and series of fallbacks.
Get unified metadata from websites using Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more. - microlinkhq/metascraperUnfurl
NotesLit supports server-side rendering through the Lit SSR package. Lit SSR renders Lit components and templates to static HTML markup in non-browser JavaScript environments like Node. It works without fully emulating the browser's DOM, and takes advantage of Lit's declarative template format to enable fast performance, achieve low time-to-first-byte, and support streaming.FeedUnfurl
NotesA tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically. Unfurl
NotesLet's create a page where a user can update their avatar with as little friction as possible: they just drop an image anywhere on the page and it's done. FeedEmbedUnfurl
Notes In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too small—making it completely unplayable. So we took it upon ourselves to make the game fluidly adjust to match any resolution. After a bit of re-programming and using ideas outlined in this article, we had a game that scaled across any modern browser, whether it ran in a desktop or a mobile device. Unfurl
NotesUnfortunately, sometimes web developers try to get a bit too clever in creating their interfaces. What if I want something to look like a link but act like a button?FeedUnfurl
NotesHTML is the lowest common denominator in a world where the number of devices are steadily growing. In such a world, our API should be hypermedia driven and we should consider choosing HTML as the media type for our APIs. If we choose this, we can enhance the API with CSS and JavaScript, making the API human-friendly as well. Further, we can use Adaptive Web Design to make the best possible experience for all types of browsers and devices. This kind of solution has some risks and technical issues related to it though. And it is not a silver bullet.Unfurl
Notes Do you want a 7 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? Yeah!
Do you also want the possibility to add, edit and remove items by dead simple templating? Hell yeah!Unfurl
Notes"PHP 5's SimpleXML module is one of the the biggest reasons to upgrade to 5. If you're parsing RSS feeds or the results of webservice requests it works beautifully and saves a ton of time. The only problem with it is that it'll only load valid XML. I banged my head against it for way to long before coming up with the following:"Unfurl
Notes"The iTunes LP experience is accomplished with HTML 4.01, CSS and JS. The interface feels very Flash-like, but there is no trace of it. The CSS animations are elaborate and smooth. ... As a music fan, and as a web developer, I couldn’t be more pleased with the new iTunes LP offering. If your audience is significantly Apple-oriented (e.g. a site about Mac rumors or a popular iPhone app) this proves that you can provide an incredible experience using only JavaScript and some proposed CSS3 properties."FeedEmbedUnfurl
Notes"This webpage is a demonstration of the built-in version control capabilities for HTML. The INS and DEL tags are used along with the cite and datetime attributes to indicate why and when something changed."Unfurl
Notes"Have you ever filled a textarea on a page, which had a limit to how many characters you could type into it? ... How to effectively communicate how many characters you can type into a box, and have it look good. ... Add the number counter as the background of the textarea!"Unfurl
Notes"Video For Everybody is very simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element which offers native playback in Firefox 3.5 and Safari 3 & 4 ... In other browsers that do not support <video>, it falls back to Adobe Flash ... If Flash is not installed, QuickTime is used (which allows playback on the iPhone) ... If QuickTime is not installed then Windows Media Player is used in Internet Explorer for Windows Vista and above. ... Finally, if all else fails, a warning is issued that provides links to download the video, and links to software relevant to getting the video to play within the browser itself. ... This is all done without JavaScript and requires only two video encodes, one OGG file for Firefox 3.5, and one MP4 file for everything else (Flash / Safari / iPhone)."Unfurl
Durable websites | Go Make Things
Lens - Check your meta tags, icons, and rss feeds
How to fix Storybook screenshot testing | Tiger Oakes
More options for styling <details> | Chrome for Developers
Speculation Rules API - Web APIs | MDN
</> htmx ~ You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths
Example of Tabs with Automatic Activation | APG | WAI | W3C
Server-side rendering (SSR) – Lit
Learn HTML
Tree views in CSS
Case Study: Auto-Resizing HTML5 Games - HTML5 Rocks
DevDocs
You can’t create a button | NCZOnline
List.js - Add search, sort and flexibility to plain HTML lists with cross-browser native JavaScript by @javve
Some Notes On iTunes LP · Jay Robinson
