paulirish/lite-youtube-embed: A faster youtube embed.
A very handy web component from Paul—this works exactly like a regular YouTube embed, but is much more performant.
A very handy web component from Paul—this works exactly like a regular YouTube embed, but is much more performant.
Remy has an excellent improvement on that article I linked to yesterday on using srcdoc
with iframes. Rather than using srcdoc
instead of src
, you can use srcdoc
as well as src
. That way you can support older browsers too!
This is a clever use of the srcdoc
attribute on iframes.
Chris looks at all the different ways of working around the fact that HTML doesn’t do transclusion. Those ways include (hah!) Scott’s super clever technique and Trys’s little Sergey.
Scott writes up that super smart transclusion trick of his.
Woah! This is one smart hack!
Scott has figured out a way to get all the benefits of pointing to an external SVG file …that then gets embedded. This means you can get all the styling and scripting benefits that only apply to embedded SVGs (like using fill
).
The fallback is very graceful indeed: you still get the SVG (just not embedded).
Now imagine using this technique for chunks of HTML too …transclusion, baby!
This article by Cassie is so, so good!
First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!
Best of all, I get to work with the super-smart developer who did all this.
Feedbin has removed third-party iframes and JavaScript (oEmbed provides a nice alternative), as well as stripping out Google Analytics, and even web fonts that aren’t self-hosted. This is excellent!
Anil documents the steady decline of empowering features from web browsers: view source; in-situ authoring; transclusion, but finishes with the greatest loss of all: your own website at your own address.
There are no technical barriers for why we couldn’t share our photos to our own sites instead of to Instagram, or why we couldn’t post stupid memes to our own web address instead of on Facebook or Reddit. There are social barriers, of course — if we stubbornly used our own websites right now, none of our family or friends would see our stuff. Yet there’s been a dogged community of web nerds working on that problem for a decade or two, trying to see if they can get the ease or convenience of sharing on Facebook or Twitter or Instagram to work across a distributed network where everyone has their own websites.
(Although it’s a bit of shame that Anil posted this on Ev’s blog instead of his own.)
This is very good news indeed—Google are going to allow non-AMP pages to get the same prioritised treatment as AMP pages …if they comply with the kind of performance criteria that Tim outlined.
It’ll take time to get there, but I’m so, so glad to see that Google aren’t going to try to force everyone to use their own proprietary format.
We are taking what we learned from AMP, and are working on web standards that will allow instant loading for non-AMP web content. We hope this work will also unlock AMP-like embeddability that powers Google Search features like the Top Stories carousel.
I just hope that this alternate route to the carousel won’t get lumped under the banner of “AMP”—that term has been pretty much poisoned at this point.
Here’s the CSS and markup you need to make third-party iframes responsive. Handy!
A little piece of JavaScript to strip out the styling from Twitter widgets.
Oh, no! How horrid! Now Twitter won’t control the “user experience” of that widget!
Instead, the person who actually posted the tweets in the first place gets to decide how they should be displayed. Crazy idea, isn’t it?
Standalone embeddable widgets from Google that you can drop into any web page. The maps widget finally frees the maps API from the tyranny of coupling a domain with an API key.
The slides from Richard's superb Skillswap presentation.
A handy little tool to turn video embedding markup into valid XHTML.
Here's some clever CSS: one YouTube video inside another YouTube video. Press play on both.