Today’s Readings

Let’s start off with some fun, simple, but powerful layout bits:

500+ CSS Icons, Customizable & Retina-Ready, entirely built in CSS, Embed, NPM & API

About says it all!

How do you hide things in a browser? Know your options, and the pros & cons for each.

Intended to solve problems, <input type="number"> might create more than it solves

Then there’s this list from … Oy.

But to bring us back to “happy”, make your way through these HTML attributes that will make your users’ day way better!

For you copy/paste fiends out there (like me), this playground code-generator is going to make your day!

Nice little JS library to add pan & zoom functionality to any HTML element. Especially nice for mobile users!

I have been dreaming of Scroll to Text Fragment for a very long time. Although the documentation status says “shipping to stable channel in Chrome M80”, not working for me… Anyone?

Learn how to ship Smaller HTML Payloads with Service Workers. Note that while this article outlines how to do this for a static site, it could work just as easily for a dynamic site, by building a separate “content only” template.

Keeping with that topic, give your site a performance boost using IndexedDB to cache content.

has long been a proponent of preaching performance, but as we all know that is some times a hard pitch to both clients and upper management. But he offers a nice idea in his latest post on the topic.

Have you tested your favicons lately? Gonna guess no. This site does a thorough test of your current favicons, shows you errors for an incredibly large list of devices (including all various mobile device options and sizes), then let’s you upload an image to create all the various favicon images you need, and provides the HTML to put them all into action…

And finally, a complete history of the Millennium Falcon. Because… yeah, there is no reason for this…

Happy reading,
Atg

“Switching to night-mode” (sort of)

A long time ago in a post far, far away, a commenter made a random suggestion:

I’m reading this awesome article at 3 pm and for future readers who want night theme.
Add body
filter: invert(100%);
and change
background-color: #212121;

When I read this, it really stuck in my bonnet; it sounded like an incredibly simple and practical solution, and yet more than 3 years later, I have still done nothing about it…

So, while trying to build up this new head of steam, I decided to tackle this relatively simple project.

Then I was reminded why the tech world is so fun/frustrating: seldom are things as simple as one might expect…

First of all, with the required CSS seemingly in hand, I had to decide how I was going to activate “night mode”…

A toggle seemed obvious, but where to put it? This site’s layout changes quite a bit across various screen sizes, which means I would need to visit all, plan, think, design… I’m tired already… Plus, a toggle would also mean that a reader would have to be momentarily blinded while trying to find the toggle, before switching it.

So then I remembered hearing about the Ambient Light Sensor API, and thought that sounded really cool: the reader would automatically get the proper day/night mode!
Then I checked CanIUse.com for this API… So, I guess “Bravo Firefox 68 for Android and all those users!”

Then I found @media (prefers-color-scheme: dark) {...}, which has considerably better support, and gets triggered because the reader at some point implied they prefer a dark mode! I’m not sure how many people are actually doing this (aside from me, I mean), but I figured, well, at least those readers could get the cool “night mode”…

So I dug in and gave it a go.

Then I was reminded once again that I work in tech, when I realized that filter is like opacity, in that it cascades down and affects all child elements, including img and video elements… And while some readers might really dig the far-out spin on things, I’m not sure it was the right look for this blog… :-/
Have a look-see (click again to go back to normal-mode)

Any day of coding
Unnecessary image, only here for effect…

Which means, in order to offer this “simple” feature, I would basically have to create completely new CSS for this entire site… So, maybe later?

For anyone else that is interested in trying something like this on your site (maybe you have no images or videos, or have a lot more time/patience than I have right now?), here are a few good articles to help you get started…

And so, happy night-moding,
Atg

Bringing this Site out of Mothballs!

Well hello there. Long time no write.

I know that my last tech-related post, from nearly a year ago, promised that I would try to start writing more again, but life continued to have other plans for me. Nothing serious, just life.

But here I am, ready to rock you like a hurricane!

I’d like to think that previously I had been keeping up with most the latest new web tech and best-practices, but for the past 3 years I have more or less had my head firmly in the sand, spending all my free time and energy to keep the fleet of projects above water at work.

In this time of reading next-to-nothing, tech-wise, I now feel completely ignorant regarding what is new, what is current, and what is out-dated… I have not really used anything like ES6, Service Workers, Node, Git, Grunt (is this still a thing?), PWA frameworks (React, Angular, etc.), CSS Grid, and on and on and on…

So, for my first writing in roughly three years, I’d actually like to ask a question:
What web tech are you using, daily, weekly, or otherwise, that you are in love with, blown away by, or just want to brag about?

I look forward to any replies, and promise to actually get this beast going again this time…

All the best, and thanks in advance,
Atg

Saying Good-Bye to a Reluctant Superstar

Neil Peart, 1952 - 2020
Neil Peart, 1952 – 2020. Photo by Fin Costello/Redferns.

I awoke this morning to the incredibly sad news that , drummer & lyricist for Canadian progressive rock band Rush, had died at the far-too-young age of only 67.

As a drummer, Neil was my second God, right after another drummer who died far too young, Clive Burr.  And that statement would have sent shivers up and down Neil’s spine…

Neil Peart was famously allergic to his own stardom, internally conflicted by being so worshipped and loved by people he has never met.  One of his most poignant lyrics is the song Limelight, which includes the following line, speaking explicitly to his internal turmoil:

“Living in a fish eye lens, Caught in the camera eye, I have no heart to lie, I can’t pretend a stranger, Is a long-awaited friend…”

Certainly most renowned for his drumming, Neil’s lyrics were equally impressive.  Thanks to his voracious reading habits, with topics spanning from the well-know Tom Sawyer to Xanadu to Hobbits and Lord of the Rings to Ayn Rand to hash and well beyond.

I think no other quote could sum up Neil than this one, from the band’s website:

“What is a master but a master student? And if that’s true, then there’s a responsibility on you to keep getting better and to explore avenues of your profession.”

I will close with a few of my favorite Rush songs below.

Good-bye for now my unknown friend.  Thanks for the inspiration, travel safely…

Related:

Good-bye AdvantiPro, Hello AdvantiPro!

Wait, what?

As of , just a few days shy of one full year of employment at AdvantiPro GmbH, I am extremely proud to announce that I, along with two partners, have purchased the company! (And yes, a new website is already on the way…)

My role now changes from Director of Internet Technologies to Chief Technology Officer, bringing with it far greater challenges and opportunities.

While we plan to continue publishing our collection of print products and maintaining our suite of online products, we also have a collection of new, innovative ideas that will start to surface just as soon as we can them ready for public consumption.

See the official press release for additional details.

I will try to keep you posted, and try to update this site more regularly again, but life and work just keep getting in the way! :-)

Happy living and working,
Atg