Welcome to the Grid [#42]

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.

Capital Numbers

A List Apart has long been a fantastic source of knowledge and inspiration in terms of both website design and writing, but on top of these accolades every now an then it manage to completely floor me. Sometimes it’s because an explanation finally hits home after years of misunderstanding, but other times it’s simply by providing a piece of information which is simultaneously brand new and yet perfectly obvious. The type of fact which leaves you a little wide-eyed, questioning your very purpose of existence. A mind-blower, if you will.

That’s what happened today whilst reading the (brilliant) article/excerpt on Web Typography: Numerals. The article is well worth a read just for the thoughts on how the web finally makes footnotes genuinely useful (and, in doing so, guilt trips me about how these same ideas have been sat unacted upon in my head for years). However, it was a simple comment near the start that struck me like lightning:

We have at our disposal ‘uppercase’ numbers 0123456789 called lining or titling numerals, and ‘lowercase’ numerals 0123456789 called old-style or text numerals.

Wait… what?! Numbers can have cases? I read the sentence once, thought “that’s strange”, then read it again and noticed the different cases. These different glyphs are subtle but still instantly recognisable, yet I have never realised they existed before. Such a simple little thing which makes complete sense. Much like the recent viral expose of Papyrus or the infamous Fight Club burn marks, I get the feeling that text numerals are now going to be one of those things I just can’t not notice. Which is equal parts infuriating and awesome.

Stickers, Eclipses and Lighthouses [#35]

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.

Marrs Green [#28]

I love the idea of G.F. Smith’s “World’s Favourite Colour”: ask people to submit examples of their favourite colour and then vote. The results are interesting for a variety of reasons, but for me the big one is just how much I love “Marrs Green”, the winning colour. I’ve always veered between saying my favourite colour was a shade of blue or green, with turquoise winning for many years in my youth but slowly losing ground. This particular shade, though, is stunning. Truly stunning.

Even my first exposure to the colour on Fstoppers stopped me whilst scrolling down the page. It’s rich, offers great contrast and is just incredibly visually appealing. I’d be fascinated to know whether my reaction is just coincidence or if there is something optically stimulating about Marrs Green that is somehow innately attractive. Whatever it is, I definitely have a new favourite colour; if I lived in London I would certainly be heading down to their pop-up shop to see it in person! Plus, the whole aesthetic and branding exercise is top-notch. Beautiful.

Empathy Just Makes Sense [#11]

Their immediate need was a revamped website, but once they understood that this need paled in comparison to all of the other places they could have an impact on their customers’ lives, they began talking excitedly about how to make this vision a reality down the road.

Let Emotion Be Your Guide is a wonderful article from Hana Schank and Jana Sedivy (published on A List Apart) which has taken me far too long to actually sit down and read. It’s worth your time pretty much regardless of your own career path, but personally it reminded me of some of the little reasons I enjoy the path I’ve chosen.

Whilst websites are a core point of contact for many businesses and deserve a rigorous, reasoned implementation the reality is that they are likely only one of many such points of contact for your customer, and each is just as important as the next.

What’s more, the best practices and strategies employed in developing a good digital foothold aren’t just applicable to the web. Increasingly, the way we think about UXD online is no different to the way we should think about every aspect of our lives. Putting empathy front and centre of your decision making is not just good practice: it’s the only method that makes sense in the long term. New features, applications, websites, brochures or whatever else are only useful if they solve a real problem, and you won’t know what the real problems are unless you talk to, and empathise with, other people.

CSV Albums: A Database

For the most part, using the Universal Scrobbler is as simple as searching for the artist/album you want and hitting Scrobble. There are a couple of albums I have, however, which don’t seem to be searchable on the relevant databases. Luckily there is a CSV entry option which makes scrobbling whole albums super easy. I figured I might as well leave the converted CSV files online, just in case they come in handy for anyone else (plus, it acts as a backup/easy access for me as well). I’ll add to/update this post whenever I find some new ones.

UPDATE: (06/04/17) I’ve converted all of the CSV lists to use quote-mark column delimiters. By doing so, I can have track titles that contain commas without worrying about odd results – hooray!

The Atrocity Exhibition – Lazy Habits

“Lazy Habits”,”Kicking The Clouds”,”The Atrocity Exhibition”
“Lazy Habits”,”Feed the Brass”,”The Atrocity Exhibition”
“Lazy Habits”,”Left 2 (Ruins)”,”The Atrocity Exhibition”
“Lazy Habits”,”Crossing”,”The Atrocity Exhibition”
“Lazy Habits”,”The Breach”,”The Atrocity Exhibition”
“Lazy Habits”,”Answer With Quiestions”,”The Atrocity Exhibition”
“Lazy Habits”,”Hindsight Bias”,”The Atrocity Exhibition”
“Lazy Habits”,”Cold Shoulder Freestyle”,”The Atrocity Exhibition”
“Lazy Habits”,”The Terminal Beach”,”The Atrocity Exhibition”
“Lazy Habits”,”Give It Up”,”The Atrocity Exhibition”
“Lazy Habits”,”Sanity For Sanctuary”,”The Atrocity Exhibition”
“Lazy Habits”,”Never Did”,”The Atrocity Exhibition”
“Lazy Habits”,”Waiting Around – Bonus Track”,”The Atrocity Exhibition”

Lazy Habits – Lazy Habits

“Lazy Habits”,”Processional”,”Lazy Habits”
“Lazy Habits”,”Ashes”,”Lazy Habits”
“Lazy Habits”,”Surface Dirt”,”Lazy Habits”
“Lazy Habits”,”Even Out”,”Lazy Habits”
“Lazy Habits”,””Perfect Sentence””,”Lazy Habits”
“Lazy Habits”,”Ghosts (Fallen)”,”Lazy Habits”
“Lazy Habits”,”Memory Banks (feat. Baby Sol)”,”Lazy Habits”
“Lazy Habits”,”Starting Fires”,”Lazy Habits”
“Lazy Habits”,”Fades”,”Lazy Habits”
“Lazy Habits”,”The Road”,”Lazy Habits”
“Lazy Habits”,”An Interlude”,”Lazy Habits”
“Lazy Habits”,”Bulletin”,”Lazy Habits”
“Lazy Habits”,”The Drowned World”,”Lazy Habits”
“Lazy Habits”,”Please People”,”Lazy Habits”
“Lazy Habits”,”Recessional”,”Lazy Habits”
“Lazy Habits”,”Ghosts (Screen and Fallen)”,”Lazy Habits”

Sun – Cat Power

“Cat Power”,”Cherokee”,”Sun”
“Cat Power”,”Sun”,”Sun”
“Cat Power”,”Ruin”,”Sun”
“Cat Power”,”3,6,9″,”Sun”
“Cat Power”,”Always on My Own”,”Sun”
“Cat Power”,”Real Life”,”Sun”
“Cat Power”,”Human Being”,”Sun”
“Cat Power”,”Manhattan”,”Sun”
“Cat Power”,”Silent Machine”,”Sun”
“Cat Power”,”Nothin’ But Time”,”Sun”
“Cat Power”,”Peace and Love”,”Sun”

Cold Fact – Rodriguez

“Rodriguez”,”Sugar Man”,”Cold Fact”
“Rodriguez”,”Only Good for Conversation”,”Cold Fact”
“Rodriguez”,”Crucify Your Mind”,”Cold Fact”
“Rodriguez”,”This Is Not a Song, It’s an Outburst: Or, the Establishment Blues”,”Cold Fact”
“Rodriguez”,”Hate Street Dialogue”,”Cold Fact”
“Rodriguez”,”Forget It”,”Cold Fact”
“Rodriguez”,”Inner City Blues”,”Cold Fact”
“Rodriguez”,”I Wonder”,”Cold Fact”
“Rodriguez”,”Like Janis”,”Cold Fact”
“Rodriguez”,”Gommorah (A Nursery Rhyme)”,”Cold Fact”
“Rodriguez”,”Rich Folks Hoax”,”Cold Fact”
“Rodriguez”,”Jane S. Piddy”,”Cold Fact”

Palookaville – Fatboy Slim

“Fatboy Slim”,”Don’t Let the Man Get You Down”,”Palookaville”
“Fatboy Slim”,”Slash Dot Dash”,”Palookaville”
“Fatboy Slim”,”Wonderful Night”,”Palookaville”
“Fatboy Slim”,”Long Way from Home”,”Palookaville”
“Fatboy Slim”,”Put It Back Together”,”Palookaville”
“Fatboy Slim”,”Mi Bebé Masoquista”,”Palookaville”
“Fatboy Slim”,”Push & Shove”,”Palookaville”
“Fatboy Slim”,”North West Three”,”Palookaville”
“Fatboy Slim”,”The Journey”,”Palookaville”
“Fatboy Slim”,”Jin Go Lo Ba”,”Palookaville”
“Fatboy Slim”,”Song for Chesh”,”Palookaville”
“Fatboy Slim”,”The Joker”,”Palookaville”

Interneting is (Apparently) Hard [#6]

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.