Archive: January, 2019

90

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th     
12am    
4am
8am                        
12pm                      
4pm                          
8pm                  

Thursday, January 31st, 2019

New Adventures 2019

My trip to Nottingham for the New Adventures conference went very well indeed.

First of all, I had an all-day workshop to run. I was nervous. Because I no longer prepare slides for workshops—and instead rely on exercises and discussions—I always feel like I’m winging it. I’m not winging it, but without the security blanket of a slide deck, I don’t have anything to fall back on.

As it turned out, I needn’t have worried. The workshop went great. Well, I thought it went great but you’d really have to ask the attendees to know for sure. One of the workshop participants, Westley Knight, wrote about his experience:

The workshop itself was fluid enough to cater to the topics that the attendees were interested in; from over-arching philosophy to technical detail around service workers and new APIs. It has helped me to understand that learning in this kind of environment doesn’t have to be rigorously structured, and can be shaped as the day progresses.

(By the way, if you’d like me to run this workshop at your company, get in touch.)

With the workshop done, it was time for me to freak out fully about my conference talk. I was set to open the show. No pressure.

Actually, I felt pretty damn good about what I had been preparing for the past few months (it takes me aaages to put a talk together), but I always get nervous about presenting new material—until I’ve actually given the talk in front of a real audience, I don’t actually know if it’s any good or not.

Clare was speaking right after me, but she was having some technical issues. It’s funny; as soon as she had a problem, I immediately switched modes from conference speaker to conference organiser. Instead of being nervous, I flipped into being calm and reassuring, getting Clare’s presentation—and fonts—onto my laptop, and making sure her talk would go as smoothly as possible (it did!).

My talk went down well. The audience was great. Everyone paid attention, laughed along with the jokes, and really listened to what I was trying to say. For a speaker, you can’t ask for better than that. And people said very nice things about the talk afterwards. Sam Goddard wrote about how it resonated with him.

Wearing my eye-watering loud paisley shirt on stage at New Adventures.

You can peruse the slides from my presentation but they make very little sense out of context. But video of the talk is forthcoming.

The advantage to being on first was that I got my talk over with at the start of the day. Then I could relax and enjoy all the other talks. And enjoy them I did! I think all of the speakers were feeling the same pressure I was, and everybody brought their A-game. There were some recurring themes throughout the day: responsibility; hope; diversity; inclusion.

So New Adventures was already an excellent event by the time we got to Ethan, who was giving the closing talk. His talk elevated the day into something truly sublime.

Look, I could gush over how good Ethan’s talk was, or try to summarise it, but there’s really no point. I’ll just say that I felt the same sense of being present at something genuinely important that I felt when I was in the room for his original responsive web design talk at An Event Apart back in 2010. When the video is released, you really must watch it. In the meantime, you can read through the articles and books that Ethan cited in his presentation.

New Adventures 2019 was worth attending just for that one talk. I was very grateful I had the opportunity to attend, and I still can’t quite believe that I also had the opportunity to speak.

Openness and Longevity

A really terrific piece from Garrett on the nature of the web:

Markup written almost 30 years ago runs exactly the same today as it did then without a single modification. At the same time, the platform has expanded to accommodate countless enhancements. And you don’t need a degree in computer science to understand or use the vast majority of it. Moreover, a well-constructed web page today would still be accessible on any browser ever made. Much of the newer functionality wouldn’t be supported, but the content would be accessible.

I share his concerns about the maintainability overhead introduced by new tools and frameworks:

I’d argue that for every hour these new technologies have saved me, they’ve cost me another in troubleshooting or upgrading the tool due to a web of invisible dependencies.

On Simplicity | Max Böck - Frontend Web Developer

We assume that complex problems always require complex solutions. We try to solve complexity by inventing tools and technologies to address a problem; but in the process we create another layer of complexity that, in turn, causes its own set of issues.

The Principle of Least Power looms large over this:

Some of the most important things in the world are intentionally designed “stupid”. In any system, the potential for error directly increases with its complexity - that’s why most elections still work by putting pieces of paper in a box.

I have a feeling I’m going to spend the next month starting every conversation with “So have you seen that great CSS Tricks article by @CassieCodes?”

https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/

The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks

This article by Cassie is so, so good!

First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!

Best of all, I get to work with the super-smart developer who did all this.

The First Women Trained To Conquer Space - Supercluster

The cosmonaut counterparts of the Mercury women astronauts: Zhanna Yorkina, Irina Solovyova, Tatyana Kuznetsova, Valentina Ponomareva, and Valentina Tereshkova.

Ponomareva recalled there being no envy between the women in the squad. According to her, it was a healthy spirit of competition. Everyone did their best to be number one, but also supported each other’s efforts.

One of those cosmonauts went to space: none of the women training for the Mercury missions did. There would be a shockingly gap of twenty years between the launch of Valentina Tereshkova and the launch of Sally Ride.

194028 – Add limits to the amount of JavaScript that can be loaded by a website

Now this is a feature request I can get behind!

A user must provide permission to enable geolocation, or notifications, or camera access, so why not also require permission for megabytes of JavaScript that will block the main thread?

Without limits, there is no incentive for a JavaScript developer to keep their codebase small and dependencies minimal. It’s easy to add another framework, and that framework adds another framework, and the next thing you know you’re loading tens of megabytes of data just to display a couple hundred kilobytes of content.

I’m serious about this. It’s is an excellent proposal for WebKit, similar to the never-slow mode proposed by Alex for Chromium.

HTML, CSS and our vanishing industry entry points

This!

When we talk about HTML and CSS these discussions impact the entry point into this profession. Whether front or backend, many of us without a computer science background are here because of the ease of starting to write HTML and CSS. The magic of seeing our code do stuff on a real live webpage! We have already lost many of the entry points that we had. We don’t have the forums of parents teaching each other HTML and CSS, in order to make a family album. Those people now use Facebook, or perhaps run a blog on wordpress.com or SquareSpace with a standard template. We don’t have people customising their MySpace profile, or learning HTML via Neopets. We don’t have the people, usually women, entering the industry because they needed to learn HTML during that period when an organisation’s website was deemed part of the duties of the administrator.

I agree with every single word Rachel has written.

I care not a whit what tools or frameworks, or languages you use to build something on the web. But I really care deeply when particular tools, frameworks, or languages become mandatory for even getting a foot in the door.

This is for everyone.

I might be the “old guard” but if you think I’m incapable of learning React, or another framework, and am defending my way of working because of this, please get over yourself. However, 22 year old me would have looked at those things and run away. If we make it so that you have to understand programming to even start, then we take something open and enabling, and place it back in the hands of those who are already privileged. I have plenty of fight left in me to stand up against that.

Why isn’t the internet more fun and weird?

During the internet of 2006, consumer products let anyone edit CSS. It was a beautiful mess. As the internet grew up, consumer products stopped trusting their users, and the internet lost its soul.

The internet of 2019 is vital societal infrastructure. We depend on it to keep in touch with family, to pay for things, and so much more.

Just because it got serious doesn’t mean it can’t be fun and weird.

Wednesday, January 30th, 2019

Checked in at Jolly Brewer. Banjo time. — with Jessica map

Checked in at Jolly Brewer. Banjo time. — with Jessica

Programming Fonts - Test Drive

Monospaced fonts you can use in your text editor. Most of them are …not good. But then there are gems like Mark Simonson’s Anonymous Pro, David Jonathan Ross’s Input, and Erik Spiekerman’s Fira Mono. And there’s always good ol’ Droid Sans.

Starling murmuration in Brighton at 4:35pm:

https://mobile.twitter.com/lomokev/status/1090633452293111809

Followed by an ISS flyover at 6:04pm.

Bodoni*

An open source version of Bodoni:

Bodoni* is the first ever no-compromises Bodoni family, built for the digital age. Years in the making, this font family includes a whopping 56 font files, ensuring you will have the perfect Bodoni for every situation.

Brighton freelance devs: @Clearleft is looking for someone with availability now to work with us on a React project during February.

If that’s you, drop me a line with your details and day rate: jeremy@clearleft.com

Tuesday, January 29th, 2019

Owltastic • Web design by Meagan Fisher Couldwell

My goodness, Meagan’s new site design is absolutely gorgeous! The colour palette, the typography, the texture, the motion design …it all communicates character and personality. Beautiful work!

Monday, January 28th, 2019

The 500-Year-Long Science Experiment - The Atlantic

Running an experiment for 500 years is hard enough. Then there’s the documentation…

The hard part is ensuring someone will continue doing this on schedule well into the future. The team left a USB stick with instructions, which Möller realizes is far from adequate, given how quickly digital technology becomes obsolete. They also left a hard copy, on paper. “But think about 500-year-old paper,” he says, how it would yellow and crumble. “Should we carve it in stone? Do we have to carve it in a metal plate?” But what if someone who cannot read the writing comes along and decides to take the metal plate as a cool, shiny relic, as tomb raiders once did when looting ancient tombs?

No strategy is likely to be completely foolproof 500 years later. So the team asks that researchers at each 25-year time point copy the instructions so that they remain linguistically and technologically up to date.

Sunday, January 27th, 2019

No More Google

A list of alternatives to Google’s products.

The Return of New Adventures

Westley came along to my workshop at New Adventures …and liked it! (phew!)

I have long been a proponent of progressive enhancement on the web, perhaps before I knew the true value of it to the people that use the things we build for the web, but Jeremy has always been able to expand my understanding of its importance in the wider scope of things, how it inherently builds resilience into your products, and how it makes it more widely available to people across the world, in vastly different scenarios. The workshop itself was fluid enough to cater to the topics that the attendees were interested in; from over-arching philosophy to technical detail around service workers and new APIs. It has helped me to understand that learning in this kind of environment doesn’t have to be rigorously structured, and can be shaped as the day progresses.

Read on to discover how I incorporated time travel into the day’s activities.

Designing for the web ought to mean making HTML and CSS - Signal v. Noise

The towering demands inherent in certain ways of working with JavaScript are rightfully scaring some designers off from implementing their ideas at all. That’s a travesty.

Hear, hear! And before you dismiss this viewpoint as some lawn-off-getting fist-waving from “the old guard”, bear this in mind:

Basecamp is famously – or infamously, depending on who you ask – not following the industry path down the complexity rabbit hole of heavy SPAs. We build using server-side rendering, Turbolinks, and Stimulus. All tools that are approachable and realistic for designers to adopt, since the major focus is just on HTML and CSS, with a few sprinkles of JavaScript for interactivity.

It’s very heartening to hear that not everyone is choosing to JavaScript All The Things.

The calamity of complexity that the current industry direction on JavaScript is unleashing upon designers is of human choice and design. It’s possible to make different choices and arrive at different designs.

Exclusive Design

Vasilis has published his magnificent thesis online. It’s quite lovely:

You can read this thesis in a logical order, which is the way that I wrote it. It starts with a few articles that explore the context of my research. It then continues with four chapters in which I describe the things I did. I end the thesis with four posts with findings, conclusions and recommendations.

  1. Everybody’s paradox
  2. The defaults suck
  3. Flipping things
  4. Fuckup’s mama
  5. More death to more bullshit
  6. Design like it’s 1999
  7. Invisible Animations
  8. Semantics schmemantics
  9. Stress cases
  10. Coders should learn how to design
  11. Add nonsense
  12. Conclusion

10 Year Challenge: How Popular Websites Have Changed

Side by side screenshots of websites, taken ten years apart. The whitespace situation has definitely improved. It would be interesting to compare what the overall page weights were/are though.

Make Your ARIA Labels Sing on Key — Knowbility

A good look at the (over)use of the aria-label attribute that confirms the first rule of ARIA.

Deface

A browser extension that encrypts and decrypts posts on Facebook—if two users have the extension installed, they can communicate without Facebook being able read their messages.

You Can’t Escape Yourself in VR - Escapist Magazine

In isolating your body but simultaneously trying to simulate your body’s natural state — natural head movements are echoed in the game world, but your actual head is still trapped inside what amounts to an ergonomically considerate box cutting you off from the world — VR puts you in a place where everything reminds you of your body’s limitations. Every time I see some disembodied ping pong paddle waving around in front of me mimicking my real hand movements, every time I see a mech pilot’s legs locked in place in a cockpit I can freely look around, the effect is the same. All I can think about is how, in this virtual world, the only thing that actually exists is me. My body is trapped, but my ego feels immortal, immoveable.

Saturday, January 26th, 2019

Building

Here are the slides for the opening keynote I delivered at the New Adventures conference in Nottingham on Thursday. They make no sense out of context like this. You kinda had to be there (or suggest to some other conference that I should deliver this talk again—hint, hint).

Thursday, January 24th, 2019

This guy!

This guy!

For anyone who heard my @naconf talk this morning who’s interested in the books and articles I referenced, I made a list of links: https://adactio.com/journal/14697

Listening to @BrendanDawes talk about his beloved ZX81—that was my first computer too!

Listening to @BrendanDawes talk about his beloved ZX81—that was my first computer too!

Thank you to the lovely attendees of @naconf for your time and your kind words.

If you’d like to build the web with me, come and join us at @Clearleft:

https://clearleft.com/team/jobs/front-end-developer

Wednesday, January 23rd, 2019

Tuesday, January 22nd, 2019

Going to Nottingham. brb

What would a world without pushbuttons look like? | Aeon Essays

A history of buttons …and the moral panic and outrage that accompanies them.

By looking at the subtexts behind complaints about buttons, whether historically or in the present moment, it becomes clear that manufacturers, designers and users alike must pay attention to why buttons persistently engender critiques. Such negativity tends to involve one of three primary themes: fears over deskilling; frustration about lack of user agency/control; or anger due to perceptions of unequal power relations.

What is tree shaking and how does it work?

The context here is JavaScript, not apples or olives.

This is yet another great explainer from Ire. Tree shaking is one of those things that I thought I understood, but always had the nagging doubt that I was missing something. This article really helped clear things up for me.

I’m a Web Designer - Andy Bell

Something that I am increasingly uncomfortable with is our industry’s obsession with job titles. I understand that the landscape has gotten a lot more complex than when I started out in 2009, but I do think the sheer volume and variation in titles isn’t overly helpful in communicating what people actually do.

I share Andy’s concern. I kinda wish that the title for this open job role at Clearleft could’ve just said “Person”.

The Great Divide | CSS-Tricks

An excellent thorough analysis by Chris of the growing divide between front-end developers and …er, other front-end developers?

The divide is between people who self-identify as a (or have the job title of) front-end developer, yet have divergent skill sets.

On one side, an army of developers whose interests, responsibilities, and skill sets are heavily revolved around JavaScript.

On the other, an army of developers whose interests, responsibilities, and skill sets are focused on other areas of the front end, like HTML, CSS, design, interaction, patterns, accessibility, etc.

Sunday, January 20th, 2019

Reading Kindred by Octavia Butler.

Checked in at Linbury Studio Theatre. with Jessica map

Checked in at Linbury Studio Theatre. with Jessica

Picture 1 Picture 2 Picture 3 Picture 4

Dim sum. 🥟

Saturday, January 19th, 2019

Learn Vanilla JS

Chris Ferdinandi is a machine!

A vanilla JS roadmap, along with learning resources and project ideas to help you get started.

Friday, January 18th, 2019

Creating distraction-free reading experiences — Adrian Zumbrunnen

It’s our job as designers to bring clarity back to the digital canvas by crafting reading experiences that put readers first.

Building a Progressively-Enhanced Site | Jim Nielsen’s Blog

This is an excellent case study!

The technical details are there if you want them, but far more important is consideration that went into every interaction. Every technical decision has a well thought out justification.

Why Data Is Never Raw - The New Atlantis

Raw data is both an oxymoron and a bad idea; to the contrary, data should be cooked with care.

Wednesday, January 16th, 2019

Checked in at Jolly Brewer. A blasht of tunes! map

Checked in at Jolly Brewer. A blasht of tunes!

Security Checklist

Exactly what it sounds like: a checklist of measures you can take to protect yourself.

Most of these require a certain level of tech-savviness, which is a real shame. On the other hand, some of them are entirely about awareness.

Oh Hello Ana - Colours of 2018

I love this idea of comparing human colour choices to those of a computer:

I decided to do two things: the top three most used colours of the photo decided by “a computer” and my hand picked choices. This method ended up revealing a couple of things about me.

I also love that this was the biggest obstacle to finding representative imagery:

I wanted this to be an exciting task but instead I only found repeated photos of my cat.

The World’s Writing Systems

What a lovely timeline of civilisation. This site makes for a nice companion piece to that database of dimensioned drawings—they’re both delightful to explore.

Use the :lang pseudo-class over the lang attribute selector for language-specific styles

This is a great explanation of the difference between the [lang] and :lang CSS selectors. I wouldn’t even have thought’ve the differences so this is really valuable to me.

Signal v Noise exits Medium – Signal v. Noise

Traditional blogs might have swung out of favor, as we all discovered the benefits of social media and aggregating platforms, but we think they’re about to swing back in style, as we all discover the real costs and problems brought by such centralization.

Tuesday, January 15th, 2019

Building links

In just over a week, I’ll be giving the opening talk at the New Adventures conference in Nottingham. I’ll be giving a workshop the day before too. There are still tickets available for both.

I have to admit, I’m kind of nervous about this talk. It’s been quite a while since the last New Adventures, but it’s always had quite the cachet. I think I went to most of them. It’s quite strange—and quite an honour—to shift gears from attendee to speaker.

The talk I’ll be giving is called Building. That might be a noun. That might be a verb. You decide:

Every new medium looks to what has come before for guidance. Web design has taken cues from centuries of typography and graphic design. Web development has borrowed metaphors and ideas from the world of architecture. Let’s take a tour of some of the most influential ideas from architecture that have crossed over into the web, from pattern languages to responsive design. Together we’ll uncover how to build resilient, performant, accessible and beautiful structures that work with the grain of the materials of the web.

This talk builds upon the talk I gave at last year’s An Event Apart called The Way Of The Web. It also reflects many of the ideas in Resilient Web Design. When I gave a run-through of the talk at Clearleft last week, Andy called it a “greatest hits.” For a while there, I was feeling guilty about retreading some ground I’ve covered in previous talks and writings. Then I realised it was pretty arrogant of me to think that anyone in the audience would be familiar with any of it.

Besides, I’ve got a whole new avenue of exploration in this talk. It’s about language and metaphor—how we talk about what we do on the web. I’ve just finished giving another run-through at the Clearleft studio and I’m feeling pretty good about it. That’s good, because I find that giving a talk in a small room to a handful of colleagues is way more stressful than giving a talk to hundreds of people at a conference.

Just as I put together links related to last year’s talk, I figured I’d provide some hyperlinks for anyone interested in the topics raised in this new talk…

Books

Articles

Audio

Mid afternoon 80s dance party in the @Clearleft studio. 💃🏻

Mid afternoon 80s dance party in the @Clearleft studio. 💃🏻

JournalBook

A small but perfectly formed progressive web app. It’s a private, offline-first personal journal with no log-in and no server-stored data. You can read about the tech stack behind it:

Your notes are only stored on your device — they’re never sent to a server. You don’t even need to sign-in to use it! It works offline, so you can reflect upon your day on the slow train journey home.

Monday, January 14th, 2019

djinn and juice : The Best Debugging Story I’ve Ever Heard

Cassie and I were swapping debugging stories. I shared the case of the 500 mile email with her. She shared this with me.

Writing for hiring

Cassie joined Clearleft as a junior front-end developer last year. It’s really wonderful having her around. It’s a win-win situation: she’s enthusiastic and eager to learn; I’m keen to help her skill up in any way I can. And it’s working out great for the company—she has already demonstrated that she can produce quality HTML and CSS.

I’m very happy about Cassie’s success, not just on a personal level, but also from a business perspective. Hiring people into junior roles—when you’ve got the time and ability to train them—is an excellent policy. Hiring Charlotte back in 2014 was Clearleft’s first foray into hiring for a junior front-end dev position and it was a huge success. Cassie is demonstrating that it wasn’t just a fluke.

Alas, we can’t only hire junior developers. We’ve got a lot of work in the pipeline right now and we’re going to need a full-time seasoned developer who can hit the ground running. That’s why Clearleft is recruiting for a senior front-end developer.

As lead developer, Danielle will make the hiring decision, but because she’s so busy on project work right now—hence the need to hire more people—I’m trying to help her out any way I can. I offered to write the job description.

Seeing as I couldn’t just write “A clone of Danielle, please”, I had to think about what makes for a great front-end developer who uses their experience wisely. But I didn’t want to create a list of requirements, and I certainly didn’t want to create a list of specific technologies.

My first instinct was to look at other job ads and take my cue from them. But, let’s face it, most job ads are badly written, and prone to turning into laundry lists. So I decided to just write like I normally would. You know, like a human.

Here’s what I wrote. I hope it’s okay. I don’t really have much to compare it to, other than what I don’t want it to be.

Have a read of it and see what you think. And if you’re an experienced front-end developer who’d like to work by the seaside, you should apply for the role.

Sunday, January 13th, 2019

Dimensions.Guide | Database of Dimensioned Drawings

There’s something quite lovely about this site, both in its purpose and execution.

Dimensions.Guide is a comprehensive reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces that make up our world. Created as a universal resource to better communicate the basic properties, systems, and logics of our built environment, Dimensions.Guide is a free platform for increasing public and professional knowledge of life and design.

Code print

You know what I like? Print stylesheets!

I mean, I’m not a huge fan of trying to get the damn things to work consistently—thanks, browsers—but I love the fact that they exist (athough I’ve come across a worrying number of web developers who weren’t aware of their existence). Print stylesheets are one more example of the assumption-puncturing nature of the web: don’t assume that everyone will be reading your content on a screen. News articles, blog posts, recipes, lyrics …there are many situations where a well-considered print stylesheet can make all the difference to the overall experience.

You know what I don’t like? QR codes!

It’s not because they’re ugly, or because they’ve been over-used by the advertising industry in completely inapropriate ways. No, I don’t like QR codes because they aren’t an open standard. Still, I must grudgingly admit that they’re a convenient way of providing a shortcut to a URL (albeit a completely opaque one—you never know if it’s actually going to take you to the URL it promises or to a Rick Astley video). And now that the parsing of QR codes is built into iOS without the need for any additional application, the barrier to usage is lower than ever.

So much as I might grit my teeth, QR codes and print stylesheets make for good bedfellows.

I picked up a handy tip from a Smashing Magazine article about print stylesheets a few years back. You can the combination of a @media print and generated content to provide a QR code for the URL of the page being printed out. Google’s Chart API provides a really handy shortcut for generating QR codes:

https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://example.com

Except that there’s no telling how long that will continue to work. Google being Google, they’ve deprecated the simple image chart API in favour of the over-engineered JavaScript alternative. So just as I recently had to migrate all my maps over to Leaflet when Google changed their Maps API from under the feet of developers, the clock is ticking on when I’ll have to find an alternative to the Image Charts API.

For now, I’ve got the QR code generation happening on The Session for individual discussions, events, recordings, sessions, and tunes. For the tunes, there’s also a separate URL for each setting of a tune, specifically for printing out. I’ve added a QR code there too.

Experimenting with print stylesheets and QR codes.

I’ve been thinking about another potential use for QR codes. I’m preparing a new talk for An Event Apart Seattle. The talk is going to be quite practical—for a change—and I’m going to be encouraging people to visit some URLs. It might be fun to include the biggest possible QR code on a slide.

I’d better generate the images before Google shuts down that API.

The Flexbox Holy Albatross | HeydonWorks

Er …I think Heydon might’ve cracked it. And by “it”, I mean container queries.

This is some seriously clever thinking involving CSS custom properties, calc, and flexbox. The end result is a component that can respond to its container …and nary a media query in sight!

Teaching a Correct CSS Mental Model

One facet of this whole CSS debate involves one side saying, “Just learn CSS” and the other side responding, “That’s what I’ve been trying to do!”

I think it’s high time we the teachers of CSS start discussing how exactly we can teach a correct mental model. How do we, in specific and practical ways, help developers get past this point of frustration. Because we have not figured out how to properly teach a mental model of CSS.

Friday, January 11th, 2019

It’s What You Make, Not How You Make It.

How did I miss this great post from 2016 by one of my favourite people‽ It’s even more more relevant today.

To me it doesn’t matter whether you write your HTML and CSS by hand or use JavaScript to generate it for you. What matters is the output, how it is structured, and how it is served to the client. When we allow our tools to take precedent over the quality of our output the entire web suffers. Sites are likely to be less accessible, less performant, and suffer from poor semantics.

Four Cool URLs - Alex Pounds’ Blog

A fellow URL fetishest!

I love me a well-designed URL scheme—here’s four interesting approaches.

URLs are consumed by machines, but they should be designed for humans. If your URL thinking stops at “uniquely identifies a page” and “good for SEO”, you’re missing out.

Stepping away from Sass

I think Cathy might’ve buried the lede:

The knock on effect of this was removing media queries. As I moved towards some of the more modern features of CSS the need to target specific screen sizes with unique code was removed.

But on the topic of Sass, layout is now taken care of with CSS grid, variables are taken care of with CSS custom properties, and mixins for typography are taken care of with calc().

Personally, I’ve always found the most useful feature of Sass to simply be that you can have lots of separate Sass files that get combined into one CSS file—very handy for component libraries.

Want to work with excellent developers like @dhuntrods and @cassiecodes? Join the @Clearleft team!

https://clearleft.com/team/jobs/front-end-developer

(Downside: you also have to put up with me.)

Wednesday, January 9th, 2019

The Ethics of Performance - TimKadlec.com

When you stop to consider all the implications of poor performance, it’s hard not to come to the conclusion that poor performance is an ethical issue.

CSS doesn’t suck - Andy Bell

It’s getting exhausting spending so much of my time defending one of the three pillars of the web: CSS. It should sit equal with HTML and JavaScript to produce accessible, progressively enhanced websites and web apps that help everyone achieve what they need to achieve.

Freelancers of Brighton and environs—designers, developers, everyone—join us at @Clearleft this Friday evening for an evening of food, drink, and chat.

https://www.eventbrite.com/e/clearleft-freelancer-evening-tickets-53304366796

Monday, January 7th, 2019

CSS-only multiple choice quizzing - Matthew Somerville

In which Matthew disects a multiple choice quiz that uses CSS to do some clever logic, using the :checked pseudo-class and counter-increment.

Oh, and this is how he realised it wasn’t using JavaScript:

I have JavaScript disabled on my phone because a) it cuts out most of the ads, b) it cuts out lots of bandwidth and I have a limited data plan, and c) my battery lasts longer because it’s not processing tons of code to show me some text (cough, Medium).

A Simple Note – Miscelanea

A short text file, imbued with meaning and memory.

Angular, Autoprefixer, IE11, and CSS Grid Walk into a Bar… - daverupert.com

Dave on the opaqueness of toolchains:

As toolchains grow and become more complex, unless you are expertly familiar with them, it’s very unclear what transformations are happening in our code. Tracking the differences between the input and output and the processes that code underwent can be overwhelming. When there’s a problem, it’s increasingly difficult to hop into the assembly line and diagnose the issue.

There’s a connection here to one of the biggest issues with what’s currently being labelled “AI”:

In the same way AI needs some design to show its work in how it came to its final answer, I feel that our automated build tools could use some help as well.

I really like this suggestion for making the invisble visible:

I sometimes wonder if Webpack or Gulp or [Insert Your Build Tool Here] could benefit from a Scratch-like interface for buildchains.

HTML+ Discussion Document: Images

Back in 1993, David Raggett wrote up all the proposed extensions to HTML that were being discussed on the www-talk mailing list. It was called HTML+, which would’ve been a great way of describing HTML5.

Twenty five years later, I wish that the proposed IMAGE element had come to pass. Unlike the IMG element, it would’ve had a closing tag, allowing for fallback content between the tags:

The IMAGE element behaves in the same way as IMG but allows you to include descriptive text, which can be shown on text-only displays.

Yeah, I know we have the alt attribute, but that’s always felt like an inelegant bolt-on to me.

Resolution

The start of a new year is the traditional time for making resolutions. I’ve done it in the past. Now I’m not sure it’s such a good idea.

Think about it. It’s January. The middle of winter. It’s cold outside. The days are short. The only seasonal foods available are root vegetables and brassicas. Considering this lack of sunlight and fruit, it seems inadvisable to try to also deny yourself the intake of sugar, alcohol, meat, carbohydrates or gluten. You’re playing with a stacked deck. And then when inevitably, in the depths of winter, you cave in and pour yourself a glass of wine or indulge in a piece of cake, you now have the added weight of guilt on your shoulders to carry through the neverending winter nights.

Of course not all resolutions involve the abnegation of material pleasures. Many a new year’s promise involves a renewed commitment to work, exercise, or culture-vulching. But again, is this really the best time of year to do that? Given the weather, are you really in the best frame of mind to tackle such a tall order?

No, I don’t think I’ll be making any new year’s resolutions. If anything, this is the time of year when I won’t feel bad about having a pint of ale or a comforting stew. It’s also the time of year when I’m going to cut myself more slack if I’m not exercising diligently or working hard. Let’s face it, just making it through these months intact should be achievement enough.

If I were to make a resolution, it would only be that, come summertime, I’ll take stock and maybe make a commitment to cut down on some guilty pleasure or increase some noble activity then. A midsummer’s resolution, if you will.

Until then, I’ll be cosying up and indulging in any bodily comforts I crave. My resolve to do that is strong.

A declarative router for service workers - JakeArchibald.com

An interesting proposal from Jake on a different way of defining how service worker fetch events could be handled under various conditions. For now, I have no particular opinion on it. I’m going to let this stew in my mind for a while.

Sunday, January 6th, 2019

Arc 1.x/The first year of the future (PDF)

The first hit of Arc is free—a PDF with the a selection of the best sci-fi short stories from the publications first year, featuring China Miéville, Bruce Sterling, and many more.

Butternut squash risotto with parmesan crisp.

Butternut squash risotto with parmesan crisp.

Experimenting with print stylesheets and QR codes.

Experimenting with print stylesheets and QR codes.

Saturday, January 5th, 2019

Checked in at Kouzina map

Checked in at Kouzina

Thursday, January 3rd, 2019

History of the Web, Volume I by Jay Hoffmann [PDF/iPad/Kindle]

The first two years of the excellent History Of The Web newsletter is now available as a digital book. It’s volume one of …we’ll see how many.

Buried inside you’ll find fascinating narrative threads from the web’s history, starting all the way from the beginning and straight on through to the very first browsers, the emergence of web design, to the evolving landscape of our online world.

Petting a puppy at the bus stop. 🐕 🚌

Petting a puppy at the bus stop. 🐕 🚌

“Evaluating Technology” by Jeremy Keith – An Event Apart video on Vimeo

This is a recording of my Evaluating Technology talk from An Event Apart in Denver just over a year ago. This was the last time I ever gave this talk, and I think you can tell that the delivery is well-practiced; I’m very happy with how this turned out.

In this 60-minute presentation recorded live at An Event Apart Denver 2017, Jeremy Keith helps you learn to evaluate tools and technologies in a way that best benefits the people who use the websites you design and develop.

Elemental haiku

An ode for every element in the periodic table, in the form of a haiku.

Wednesday, January 2nd, 2019

Picture 1 Picture 2
map

Checked in at Jolly Brewer. Playing tunes

Back from Seattle with a nice haul of second-hand books from opheliasbooks.com and mercerstreetusedbooks.com

Back from Seattle with a nice haul of second-hand books from opheliasbooks.com and mercerstreetusedbooks.com

365 RFCs — Write.as

April 7th, 2019 is going to be the 50 year anniversary of the first ever Request for Comments, known as an RFC.

Darius Kazemi is going to spend the year writing commentary on the first 365 Request For Comments from the Internt Engineering Task Force:

In honor of this anniversary, I figured I would read one RFC each day of 2019, starting with RFC 1 and ending with RFC 365. I’ll offer brief commentary on each RFC.

Tuesday, January 1st, 2019

Welcome to the Silicon Seaside - PCMag UK

A profile of Brighton, featuring Clearleft’s own Chris How.

The Elements of UI Engineering - Overreacted

These are good challenges to think about. Almost all of them are user-focused, and there’s a refreshing focus away from reaching for a library:

It’s tempting to read about these problems with a particular view library or a data fetching library in mind as a solution. But I encourage you to pretend that these libraries don’t exist, and read again from that perspective. How would you approach solving these issues?