Welcome to the Grid [#43]

There are a lot of new web technologies emerging at the moment which really feel like we’re entering a new era. Over the last decade, the likes of HTML5, ES6+, flex box etc. have brought the web, and the technologies on which it is built, very much into the modern day. Accessibility, responsiveness and flexibility have become standards, instead of the nice-to-have pipe dreams they were when I first built a website. Still, a lot of the new features and developments have been addressing limitations of what the web was back in the early noughties.

Right now, then, is a little different. There are still plenty of problems with how the web operates, limitations to its functionality and misuses of its resources, but with a little time and effort a website can become everything it was ever designed to be, and much more. The next round of technological implementation, then, is redesigning the way the web works. Do you need an active internet connection to be ‘online? Not any more. Want a website to do more than simply house and interlink static text? That’s getting pretty common.

Despite these huge leaps forward in terms of functionality, one element of those old, dark days has remained missing. Right when I started to learn HTML the standard approach was to mimic page setting from magazines by using <table> elements. That practice died a deserved death, but ever since the web has been slightly restricted in how it can display information in a dynamic, yet rigidly structured, manner. There have been improvements, such as display:table, flex box and semantically clearer HTML (section, article, aside etc.), but ultimately none have met the ease of application of a table layout.

Hopefully that’s about to change, thanks to CSS Grid. It’s a technology I’ve heard bits and bobs about for some time, but I’ll admit it hasn’t excited me like service workers or PWAs have. Thanks to (yet another) great article from A List Apart, I’m now firmly on board the Grid train and willing it to go faster, and faster, and faster. Honestly, I love the whole concept, but for me one of the most exciting aspects is the quick prototyping available through template-areas. For a full breakdown, read the article, but the “aha!” moment for me was seeing how this:

.cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        grid-template-areas:
               “a a b”
               “. d d”
               “c e e”;
}

Is automatically translated into this:

Layout of 5 grid blocks and 1 empty cell, showing how CSS Grid can span columns and rows, auto-fill containers and be easily spaced.
The beauty of CSS Grid.

That’s not just replicating all the functionality of the table-based layouts of yesteryear, it’s taking the best part of it, the flexible rigidity, and removing all the irritating parts, leaving just the essence. It’s wonderfully simple yet extremely powerful and has clearly been thought through to an obscene degree. The fact that even blank cells are inherently catered for, rather than having to just set a blank <div> or similar, is just fantastic. Vendor/browser support will be the next big hurdle, but by the sounds of things that’s coming along extremely well. Give it a year and CSS Grid looks like it could well be the new standard approach.

Stickers, Eclipses and Lighthouses [#36]

Today is a day for another round-up of interesting pieces from across the web. Nothing too special, but hopefully a little intriguing.

First up is Google Lighthouse, one of the many branches of the Alphabet behemoth and a pretty interesting little project. I haven’t actually managed to get it up and running, but I’ll definitely be trying it out on theAdhocracy some time soon (and probably weeping at the result). I don’t need to test it, though, to see it will be a very useful tool in battling the increasingly problematic issue of internet lag.

Second is the article which led me to Lighthouse in the first place: AMPersan, by Ethan Marcotte. Not much to add to this one, just another voice adding weight to my uneasiness with the idea of AMP and similar projects. Well worth a read if you’re interested in the open web.

In third place is a collection of ‘achievement’ stickers doing the rounds of the blogosphere right now. Originally designed by Jeremy Nguyen, published on The New Yorker and personally discovered via TheLogoSmith, the stickers are a humorous look at the pitfalls of being self employed. They’re specifically designed for freelance designers, but I feel a lot of them are applicable across disciplines. If you work from home, you’ll probably find yourself smiling and nodding.

Fourth on the list is a simple article from Martian Craft outlining “The Importance of Routine“. The post is aimed at remote works and is far from news to me, but it is a well written example of how to apply this kind of thinking. I’m saving it here more to try and force myself into setting something like this up for my own free time.

Finally, I was blown away by the “Lifetime Eclipse Predictor” visualisation created for The Washington Post (discovered via Source). In the wake of the recent total eclipse in the US, along with reading various posts on the rarity of such events, I’ve been left with a real urge to try and make sure at my path eventually coincides with a path of totality. It is a ridiculously awesome coincidence that our moon’s diameter and planet’s solar distance align so accurately. I mean, even if there are other life-hosting planets out there, we’re certainly one of an incredibly small number that can witness this phenomenon. That makes it practically a responsibility to see a total eclipse, at least once.

Interneting is (Apparently) Hard [#7]

Visual representation of the HTML DOM model

Visual respresentation of the DOM

Reddit has once again directed me towards a very interesting online resource: Interneting is Hard!

The website is beautifully illustrated and boasts a very elegant design structure. There are a couple of cross-platform inconsistencies but the quality of the content and layout is excellent. A quick overview of some of the sections has highlighted the knowledge on display is equally well thought through. Overall, a very impressive find that I look forward to diving deeper into in the future and a great introduction to web design.

Time Sinks and Indie Thoughts

I’ve just noticed that it’s been over a week since my last post. In and of itself, that isn’t an issue. There are no schedules here; I have no binding commitments to theAdhocracy. Entire months or years could pass between posts and I wouldn’t bat an eyelid (though, I hope, I would feel a little sad). Instead, the lack of a post is noteworthy because I’ve actually been writing content consistently for the last four days, as well as a couple of days last week. That content isn’t still stuck in draft form, it’s all fully edited and ready to ship (so to speak). In my mind it’s actually finished, archived and filed away as a completed job well done. So the reality that no one else can see these posts genuinely struck me as a little odd. This scenario is not one I had really considered when I started my monthly media roundups, but I guess, in hindsight, it can’t really be avoided. One large post a month may have to substitute for more regular content – right now I don’t have a solution, except to make sure my posted content is more varied.

One clear way to increase the throughput to the visible side of theAdhocracy would be to utilise micropublishing, effectively pulling in any facebook posts, RSS likes, instagram/Flickr photos etc. and cataloguing them all here. But, oh no! Once again I’ve stumbled into the indie web without any preparation. I wrote about my headaches with the learning curve associated with the indie web before. What I didn’t realise then was that the very person I’d “called out” in that post had already created what I was asking for: a more simplified, step-by-step guide to getting started on the indie web. So that’s awesome (and, once again, thank you Jeremy Keith!). Now to just find some time to play around with the suggestions. Oh and get my back end in shape first. Plus, maybe tidy up how my current categories work. I mean I’m not stalling at all…