I’ve told this story at conferences – but due to the general situation I thought I’d retell it here. A few years ago I was doing policy research in a housing benefits office in London. They are singularly unlovely places. The walls are brightened up with posters offering helpful services for p...
Tag: HTML
Properties that are not descendants of an element with the itemscope attribute can be associated with an item using the global attribute itemref. itemref provides a list of element IDs (not itemids) elsewhere in the document, with additional properties The itemref attribute can only be specified on elements that have an itemscope attribute specified.
ᔥ in #microformats 2020-12-14 ()
The current microformats include pattern offers two methods — using <object> or <a> — to include in a microformat element parts of a document that are outside of that microformats element's DOM tree. Both patterns have problems, and have not been widely adopted. Also, the include pattern has not been updated for microformats 2. This page is a proposal for a new include pattern using a custom element without any semantics.
ᔥ in #microformats 2020-12-14 ()
Jeremy Keith (CSS-Tricks)In 2020, I rediscovered the enjoyment of building a website with plain ol’ HTML, CSS, and JavaScript — no transpilin’, no compilin’, no build tools other
Amen!
Testing to see if I can post on my website, use Brid.gy publish, and not @ mention @schnarfed.
Aaron Parecki (Aaron Parecki)Using the HTML field is normally a good idea when you're asking the user to enter a URL. It doesn't make a huge difference on desktop browsers, but makes it a lot easier on mobile browsers. On iOS, when you've focused on a URL input field, the keyboard switches to a slightly diffe...
Browser support tables for modern web technologies
Aaron Parecki (Aaron Parecki)In August 2012, I wrote a quick script to stream front-page Hackernews stories to an IRC channel on Freenode (##hackernews in case you're interested) so that I could quickly glance at popular stories there instead of needing to load Hackernews. Since IRC is my feed reader, I've always tried to pipe as much there as possible.
Very smart and reminiscent of some of the stuff Drew McLellan and Jeremy Keith were doing almost a decade before. There is a lot more power in microformats that most web developers give them credit for. Aaron has a great example and use-case.
My favorite part here:
So in 2.5 years of parsing the HTML, I never had any problems. In 2 days of parsing the JSON API, I hit a glitch where all the stories were empty.
Since more people and programs see the HTML than use the API, the HTML ends up being more reliable.
Many of the sites we create in our cpanel are installed via a cpanel tool because they have complex file structures and often require database set ups. But there are quite a few web site themes that are all self contained HTML/CSS/Javsscript files that we can upload directly to our domain with the File Manager.
This activity walks you through the steps to put a self-contained web site within a directory of your site.
I created a sub-folder on my sub-domain and uploaded a simple templated HTML5/CSS website to create a simple calling card page at http://sp.chrisaldrich.net/me/. I couldn’t bring myself to replace the picture of the little kid with the gaping mouth because it was just too cute.
While I occasionally do some small uploading tweaks like this, it seems like ages since I created webpages like this outside of more elaborate content management systems. Hooray for raw HTML and CSS! It’s also a bit refreshing to do it all manually in an interface instead of via FTP or other means.
🔖 HTML5 UP! Responsive HTML5 and CSS3 Site Templates
Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.
<details> tags, Fragment URLs, and the HTML spec
A few weeks ago I read a post by Jamie Tanna on Using <details> tags for HTML-only UI toggles.
I thought it was a pretty slick use of HTML to create some really simple and broadly useful UI.
Then earlier today I noticed that Jeremy Keith has recently switched to using this on his personal site in the comments section to provide toggles for his various webmention types including shares, likes, bookmarks, etc. But this is where I’m noticing a quirky UI issue that isn’t as web friendly as it could be. Jeremy and others (including myself own my own site) will often provide ID tags so that one can give permalinks to the individual comments using fragments of the form:
https://adactio.com/journal/15050#comment70567 or
https://adactio.com/journal/15050#comment71896
But here’s where the UI problem lies. The first fragment URL only resolves to the page instead of the specific bookmark hiding behind a <details> tag whereas the second fragment URL resolves to the page and automatically scrolls down to a comment by DominoPivot. It does this in both Chrome and FireFox and I would presume operates similarly in other browsers.
I suspect that most users would expect/prefer that the fragment URL should automatically expand the <details> tag and scroll down the page to that ID or fragment as well.
Perhaps Jamie, Jeremy, Tantek, Kevin or others may have some trickery to make this happen? Otherwise, do we need to start digging into specs and browsers to get them to better support this sort of fragment related functionality? Perhaps it’s this section of the HTML spec, the URL of which has such a fragment and therefor scrolls down properly if you click on it? (Meta pun intended.)
👓 W3C and the WHATWG signed an agreement to collaborate on a single version of HTML and DOM | W3.org
Today W3C and the WHATWG signed an agreement to collaborate on the development of a single version of the HTML and DOM specifications. The Memorandum of Understanding jointly published as the WHATWG/W3C Joint Working Mode gives the specifics of this collaboration. This is the...
👓 Using <details> tags for HTML-only UI toggles | Jamie Tanna
If you usually reach for JavaScript when trying to create show/hide toggle on elements, this post is for you. This post is a reply to the tweet by Jake VanderPlas: Github tip: you can use <details></details> tags in @github markdown to add collabsible/expandable content: pic.twitter.com/Pco0KRx2De — Jake VanderPlas (@jakevdp) May 4, 2018
This is pretty cool. I could see myself overusing these too!
👓 Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes | Tantek
Tantek Çelik (tantek.com)Search the web for "CSS classes" and you'll find numerous well intentioned references which are imprecise at best, and misleading or incorrect at worst. There are no such things as "CSS classes". Here's why you should refer to HTML classes, CSS class selectors, or even CSS pseudo-classes, but not "C...
👓 HTML Includes That Work Today | Filament Group, Inc.,
As long as I have been working on the web, I’ve desired a simple HTML-driven means of including the contents of another file directly into the page. For example, I often want to append additional HTML to a page after it is delivered, or embed the contents of an SVG file so that we can animate and style its elements. Typically here at Filament, we have achieved this embedding by either using JavaScript to fetch a file and append its contents to a particular element, or by including the file on the server side, but in many cases, neither of those approaches is quite what we want. This week I was thinking about ways I might be able to achieve this using some of the new fetch-related markup patterns, like rel="preload", or HTML imports, but I kept coming back to the same conclusion that none of these give you easy access to the contents of the fetched file. Then I thought, perhaps a good old iframe could be a nice primitive for the pattern, assuming the browser would allow me to retrieve the iframe's contents in the parent document. As it turns out, it sure would!