Replied to Adding a Self Contained Site with File Manager by Alan Levine (Extend Activity Bank)
Screenshot of sample basic calling card web page featuring a background with a 6 year old with his mouth agape.

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

Bookmarked HTML5 UP by ajlkn (HTML5 UP)
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

Read W3C and the WHATWG signed an agreement to collaborate on a single version of HTML and DOM by Coralie Mercier (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

Read Using <details> tags for HTML-only UI toggles by Jamie Tanna (jvt.me)
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

Read Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes by Tantek ÇelikTantek Ç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.,

Read HTML Includes That Work Today by Scott Jehl (Filament Group)
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!

👓 HTML, CSS and our vanishing industry entry points | Rachel Andrew

Read HTML, CSS and our vanishing industry entry points by Rachel AndrewRachel Andrew (The site of Rachel Andrew, writer, speaker and web developer)
Some thoughts on entry points to web development today, and my fears about the loss of something that has enabled so many people without a traditional computer science background to be here.

Improving user experience with links, notifications, and Webmentions

Back in December, I was thinking about html links and the functionality of sending notifications using webmentions. Within the IndieWeb, this is known as mentioning or potentially person-tagging someone (inline). By adding a link to a person’s website onto any mentions of their name in my posts, my website will automatically send them a notification that they were mentioned. They can then determine what they want to do or not do with that information.

While I want people that I mention in some of my posts to be aware that they’ve been mentioned by me, I don’t necessarily need to add to the visual cruft and clutter of the pages by intentionally calling out that link with the traditional color change and underline that <a> links in HTML often have. After all, I’m linking to them to send a notification to them, not necessarily to highlight them to everyone else. In some sense, I’m doing this because I’ve never quite liked that Twitter uses @names highlighted within posts. All the additional cruft in Twitter like the “@” and “#” prefixes, while adding useful functionality, have always dramatically decreased the readability and enjoyment of their interface for me. So why not just get rid of them?! I’m glad to have this power and ability to do so on my own website and hope others appreciate it.

In the past I’ve tried “blind notifying” (or bcc’ing via Webmention) people by adding invisible or hidden links in the page, but this has been confusing to some. This is why one of the general principles of the IndieWeb is to

Use & publish visible data for humans first, machines second.

Thus, I’ve added a tiny bit of CSS to those notification links so that they appear just like the rest of the text on the site. The notifications via Webmention will still work, and those who are mentioned will be able to see their names appear within the post.

For those interested, I’ve left in some hover UI so if you hover your mouse over these “hidden” links, they will still indicate there’s a link there and it will work as expected.

As an example of the functionality here within this particular post, I’ve hidden the link on the words “mentioning” and “person-tagging” in the first paragraph. Loqi, the IndieWeb chat bot, should pick up the mention of those wiki pages via WebSub and syndicate my post into the IndieWeb meta chat room, and those interested in the ideas can still hover over the word and click on it for more details. In practice, I’ll typically be doing this for less relevant links as well as for tagging other people solely to send them notifications.

I’m curious if there are any edge cases or ideas I’m missing in this sort of user interface? Sadly it won’t work in most feed readers, but perhaps there’s a standardizable way of indicating this? If you have ideas about improved presentation for this sort of functionality, I’d be thrilled to hear them in the comments below.

Twitter:

👓 Basic Things You Need to Know to Become a WordPress Developer | Caldera Forms

Read Basic Things You Need to Know to Become a WordPress Developer by Josh Pollock (WordPress Form Builder | Caldera Forms)
There are a lot of reasons to love WordPress, but one of the reasons I keep WordPressing is the supportive community. While I have no formal training as a web developer, I don’t like describing myself as “self-taught.” I didn’t figure this out on my own, I was taught by a supportive communit...

👓 Introducing Trashy.css | CSS Tricks

Read Introducing Trashy.css by Nathan Smith (CSS-Tricks)
It began, as many things do, with a silly conversation. In this case, I was talking with our Front End Technology Competency Director (aka "boss man")

I can’t wait to try this out on some sites. I love that it’s got a browser bookmarklet that will let one test out other sites too.

👓 Facebook, Twitter and Google Plus shun HTML, causing the infographic plague. | Kevin Marks

Read Facebook, Twitter and Google Plus shun HTML, causing the infographic plague. by Kevin Marks (epeus.blogspot.com)
By choosing images over links, and by restricting markup, Facebook, Twitter and Google+ are hostile to HTML. This is leading to the plague of infographics crowding out text, and of video used to convey minimal information. The rise of so-called infographics has been out of control this year, though the term was unknown a couple of years ago. I attribute this to the favourable presentation that image links get within Facebook, followed by Twitter and Google plus, and of course though other referral sites like Reddit. By showing a preview of the image, the item is given extra weight over a textual link; indeed even for a url link, Facebook and G+ will show an image preview by default.

👓 The Infographic Plague is actually a plague of lazy journalists and bloggers | The Next Web

Read The Infographic Plague is Just Laziness by Martin Bryant (The Next Web)
I breathed a sigh of relief when I read Megan McCardle's Ending the Infographic Plague on The Atlantic a few days ago. Someone had said it at last! As useful as a really well-produced infographic can be, there's some real dross out there and it's time we talked about the problem.

👓 Thoughts on The Rule of Links | Amit Gawande

Read Thoughts on The Rule of Links by Amit GawandeAmit Gawande (amitgawande.com)
Every post I write oftentimes has a link to an external post, either as a reference or as a recommendation. And every single time, I go through this struggle of deciding which word should carry the link. It was so naive of me to think Dave Winer won’t have written about it. Of course, Dave had. He...

👓 The Missing Building Blocks of the Web | Anil Dash – Medium

Read The Missing Building Blocks of the Web by Anil Dash (Medium)
At a time when millions are losing trust in the the web’s biggest sites, it’s worth revisiting the idea that the web was supposed to be made out of countless little sites. Here’s a look at the neglected technologies that were supposed to make it possible.

Though the world wide web has been around for more than a quarter century, people have been theorizing about hypertext and linked documents and a global network of apps for at least 75 years, and perhaps longer. And while some of those ideas are now obsolete, or were hopelessly academic as concepts, or seem incredibly obvious in a world where we’re all on the web every day, the time is perfect to revisit a few of the overlooked gems from past eras. Perhaps modern versions of these concepts could be what helps us rebuild the web into something that has the potential, excitement, and openness that got so many of us excited about it in the first place.

Anil is great at describing a fundamental problem on the web here. I feel a bit like he’s written a variation of this article a few times now.1–3

I wish that when he pivoted from ThinkUp he’d moved towards building an open platform for helping to fix the problem. He’s the sort of thinker and creator we could use working directly on this problem.

I do think he’d have a bit more gravitas if he were writing this on his own website though instead of on Medium.

References

1.
Dash A. The lost infrastructure of social media. Medium. https://medium.com/@anildash/the-lost-infrastructure-of-social-media-d2b95662ccd3. Published August 10, 2016. Accessed March 23, 2018.
2.
Dash A. Rebuilding the Web We Lost. Anil Dash. http://anildash.com/2012/12/rebuilding-the-web-we-lost.html. Published December 18, 2012. Accessed March 23, 2018.
3.
Dash A. The Web We Lost. Anil Dash. http://anildash.com/2012/12/the-web-we-lost.html. Published December 13, 2012. Accessed March 23, 2018.