HTML Includes That Work Today | Filament Group, Inc., Boston, MA
Scott writes up that super smart transclusion trick of his.
Tags: markup
374
Inline an SVG file in HTML, declaratively & asynchronously!
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!
Sergey | the little SSG
Trys has made YASSG—Yet Another Static Site Generator. It’s called Sergey (like SSG, see?) and it does just one thing: it allows you to include chunks of markup. It’s Apache Server Side Includes all over again!
Kick the tyres and see what you think.
AddyOsmani.com - Native image lazy-loading for the web!
The loading attribute for images and iframes is coming to Chrome. The best part:
You can also use
loadingas a progressive enhancement. Browsers that support the attribute can get the new lazy-loading behavior withloading=lazyand those that don’t will still have images load.
A progressive disclosure component - Andy Bell
This is a really nice write-up of creating an accessible progressive disclosure widget (a show/hide toggle).
Where it gets really interesting is when Andy shows how it could all be encapsulated into a web component with a progressive enhancement mindset
Idiosyncrancies of the HTML parser - The HTML Parser Book
This might just be the most nerdily specific book I’ve read and enjoyed. Even if you’re not planning to build a web browser any time soon, it’s kind of fascinating to see how HTML is parsed—and how much of an achievement the HTML spec is, for specifying consistent error-handling, if nothing else.
The last few chapters are still in progress, but you can read the whole thing online or buy an ePub version.
HTML periodical table (built with CSS grid)
This is a nifty visualisation by Hui Jing. It’s really handy to have elements categorised like this:
- Root elements
- Scripting
- Interactive elements
- Document metadata
- Edits
- Tabular data
- Grouping content
- Embedded content
- Forms
- Sections
- Text-level semantics
BEM: 4 Hang-Ups & How It Will Help Your CSS Organization
A few common gotchas when using BEM, and how to deal with them.
Homework I Gave Web Designers - Cloud Four
This is such a great excercise for teaching the separation of structure and presentation—I could imagine using something like this at Codebar.
How to become a “Designer who Codes” – Medium
This is such excellent advice for anyone starting out in front-end development:
- Get comfortable with the naked internet (sorry, not THAT naked internet)
- Build yourself some nice little one-column websites
- Learn about layout
- Make it work on phones
- Make it dynamic
(I would just love it if Meagan were posting this on her own incredibly beautiful website rather than on Ev’s blog.)
github/details-menu-element
Now this is how you design a web component! A great example of progressive enhancement by Mu-An Chiou that’s used all over Github: a details element that gets turbo-charged into a details-menu.
There’s also a slidedeck explaining the whole thing.
Revisiting the abbr element
Ire takes a deep dive into implementing an accessible tool tip.
Make Your ARIA Labels Sing on Key — Knowbility
A good look at the (over)use of the aria-label attribute that confirms the first rule of ARIA.
Building a Progressively-Enhanced Site | Jim Nielsen’s Blog
This is an excellent case study!
The technical details are there if you want them, but far more important is consideration that went into every interaction. Every technical decision has a well thought out justification.
HTML+ Discussion Document: Images
Back in 1993, David Raggett wrote up all the proposed extensions to HTML that were being discussed on the www-talk mailing list. It was called HTML+, which would’ve been a great way of describing HTML5.
Twenty five years later, I wish that the proposed IMAGE element had come to pass. Unlike the IMG element, it would’ve had a closing tag, allowing for fallback content between the tags:
The IMAGE element behaves in the same way as IMG but allows you to include descriptive text, which can be shown on text-only displays.
Yeah, I know we have the alt attribute, but that’s always felt like an inelegant bolt-on to me.
The power of progressive enhancement
Andy’s slides:
We dive into why progressive enhancement is important and how we can leverage the power of Vanilla JavaScript, Web Components and modern CSS to deliver a hack-free, lightweight and progressive experience for our users.
as days pass by — Why isn’t it their job
The secret is: if you use semantic HTML, then they do the work, not you. Their browser does the work, not you. If your pages use semantic HTML, you’re not going to get bug reports saying that your web app doesn’t work in a screenreader, or your buttons don’t work without mouse clicks, or your site doesn’t show anything on a Yoyodyne SuperPhone 3 running FailBrowser, because it will and they will and it will. And using semantic HTML elements is no more effort; it’s just as easy to use
mainas it is to usediv id="main". Easier, even.
Using aria-live
A terrific explanation of the aria-live attribute from Ire. If you’re doing anything with Ajax, this is vital knowledge.
Reluctant Gatekeeping: The Problem With Full Stack | HeydonWorks
The value you want form a CSS expert is their CSS, not their JavaScript, so it’s absurd to make JavaScript a requirement.
Absolutely spot on! And it cuts both ways:
Put CSS in JS and anyone who wishes to write CSS now has to know JavaScript. Not just JavaScript, but —most likely—the specific ‘flavor’ of JavaScript called React. That’s gatekeeping, first of all, but the worst part is the JavaScript aficionado didn’t want CSS on their plate in the first place.
Introducing the Button element - HankChizlJaw
It’ll never catch on.