Tags: nin

412

sparkline

Thursday, July 30th, 2020

Lateral Thinking With Withered Technology · Matthias Ott – User Experience Designer

What web development can learn from the Nintendo Game and Watch.

The Web now consists of an ever-growing number of different frameworks, methodologies, screen sizes, devices, browsers, and connection speeds. “Lateral thinking with withered technology” – progressively enhanced – might actually be an ideal philosophy for building accessible, performant, resilient, and original experiences for a wide audience of users on the Web.

Wednesday, July 29th, 2020

Design ops on the Clearleft podcast

The latest episode of the Clearleft podcast is out. If you’re a subscriber, it will magically appear in your podcast software of choice using the power of RSS. If you’re not a subscriber, it isn’t too late to change that.

This week’s episode is all about design ops. I began contructing the episode by gathering raw material from talks at Leading Design. There’s good stuff from Kim Fellman, Jacqui Frey, Courtney Kaplan, and Meredith Black.

But as I was putting the snippets together, I felt like the episode was missing something. It needed a bit of oomph. So I harangued Andy for some of his time. I wasn’t just fishing for spicy hot takes—something that Andy is known for. Andy is also the right person to explain design ops. If you search for that term, one of the first results you’ll get is a post he wrote on the Clearleft blog a few years back called Design Ops — A New Discipline.

I remember helping Andy edit that post and I distinctly recall my feedback. The initial post didn’t have a definition of the term, and I felt that a definition was necessary (and Andy added one to the post).

My cluenessness about the meaning of terms like “design ops” or “service design” isn’t some schtick I’m putting on for the benefit of the podcast. I’m genuinely trying to understand these terms better. I don’t like the feeling of hearing a term being used a lot without a clear understanding of what that term means. All too often my understanding feels more like “I think I know it means, but I’m not sure I could describe it.” I’m not comfortable with that.

Making podcast episodes on these topics—which are outside my comfort zone—has been really helpful. I now feel like I have a much better understanding of service design, design ops and other topical terms. I hope that the podcast will be just as helpful for listeners who feel as bamboozled as I do.

Ben Holliday recently said:

The secret of design being useful in many places is not talking about design too much and just getting on with it. I sometimes think we create significant language barriers with job titles, design theory and making people learn a new language for the privilege of working with us.

I think there’s some truth to that. Andy disagrees. Strongly.

In our chat, Andy and I had what politicians would describe as “a robust discussion.” I certainly got some great material for the podcast (though some of the more contentious bits remain on the cutting room floor).

Calling on Andy for this episode was definitely the right call. I definitely got the added oomph I was looking for. In fact, this ended up being one of my favourite episodes.

There’s a lot of snappy editing, all in service of crafting a compelling narrative. First, there’s the origin story of design ops. Then there’s an explanation of what it entails. From around the 13 minute mark, there’s a pivot—via design systems—into asking whether introducing a new term is exclusionary. That’s when the sparks start to fly. Finally, I pull it back to talking about how Clearleft can help in providing design ops as a service.

The whole episode comes out at 21 minutes, which feels just right to me.

I’m really pleased with how this episode turned out, and I hope you’ll like it too. Have a listen and decide for yourself.

Thursday, July 23rd, 2020

CSS Vocabulary

This is a nifty visual interactive explainer for the language of CSS—could be very handy for Codebar students.

Friday, July 17th, 2020

Why you should have a blog (and write in it) | Leticia Portella

Having your independent blog is an excellent way to share what you think in a decentralized way, independent of any major company that may add a paywall to it (Medium, I am looking at you).

Friday, July 10th, 2020

What is CSS Specificity? Sarah Chima - Front-End Developer

An excellent and clear explanation of specificity in CSS.

Friday, June 12th, 2020

HTML Tutorial for Beginners 101 (Including HTML5 Tags) - WebsiteSetup

A really great one-page guide to HTML from Bruce. I like his performance-focused intro:

If your site is based on good HTML, it will load fast. Browsers incrementally render HTML—that is, they will display a partially downloaded web page to the user while the browser awaits the remaining files from the server.

Modern fashionable development techniques, such as React, require a lot of JavaScript to be sent to the user. When it’s all downloaded, the user’s device must parse and execute the JavaScript before it can even start to construct the page. On a slow network, or on a cheaper, low-powered device, this can result in an excruciatingly slow load and is a heavy drain on the battery.

Sunday, June 7th, 2020

There’s a voice inside your head that prevents you from sharing ideas—punch it in the face. - Airbag Industries

When I challenge the idea of topics—especially when I suggest writing about a design topic—the “I don’t know what to write about” excuse goes to level two: Someone has already written about [design topic]. And that might be true, but by Great Gutenberg’s Ghost, if that was a hard requirement for publishing, we’d have one newspaper, a few magazines, and maybe a thousand books. Hollywood would be a ghost town because we got to the end of all of the movie tropes by 1989. We’d have seventy-five songs with lyrics, but re-recorded in every music style and everyone would still hate Yanni. The point is you can’t let the people who have come before you be the excuse to stop you from writing or, frankly, creating.

Saturday, June 6th, 2020

Hybrid positioning with CSS variables and max() – Lea Verou

Yet another clever technique from Lea. But I’m also bookmarking this one because of something she points out about custom properties:

The browser doesn’t know if your property value is valid until the variable is resolved, and by then it has already processed the cascade and has thrown away any potential fallbacks.

That explains an issue I was seeing recently! I couldn’t understand why an older browser wasn’t getting the fallback I had declared earlier in the CSS. Turns out that custom properties mess with that expectation.

Monday, June 1st, 2020

The Curse of Knowledge · Matthias Ott – User Experience Designer

A great explanation of the curse of knowledge …with science!

(This, by the way, is the first of 100 blog posts that Matthias is writing in 100 days.)

Tuesday, May 26th, 2020

S01E04: Cassie Evans - Behind the Source

This is a lovely little interview with Cassie—it really is an honour and a privilege to work with her!

Today’s Javascript, from an outsider’s perspective | Lea Verou

This is a damning and all-too typical example of what it’s like for someone to trying to get to grips with the current state of the JavaScript ecosystem:

Note that John is a computer scientist that knows a fair bit about the Web: He had Node & npm installed, he knew what MIME types are, he could start a localhost when needed. What hope do actual novices have?

I think it’s even worse than that. Not only are potential new devs being put off ever getting started, I know plenty of devs with experience who have pushed out by the overwhelming and needless complexity of the modern web’s toolchain. It’s like a constant gaslighting where any expression of unease is summarily dismissed as being the whinings of “the old guard” who just won’t get with the programme.

John gives up. Concludes never to touch Node, npm, or ES6 modules with a barge pole.

The End.

(Just watch as Lea’s post gets written off as an edge case.)

Monday, May 4th, 2020

CSS Tips for New Devs | Amber’s Website

Never mind Kevin Kelly’s 68 bits of advice, here’s Amber’s 24 nuggets of CSS lessons for people new to web development.

Thursday, April 30th, 2020

User agents

I was on the podcast A Question Of Code recently. It was fun! The podcast is aimed at people who are making a career change into web development, so it’s right up my alley.

I sometimes get asked about what a new starter should learn. On the podcast, I mentioned a post I wrote a while back with links to some great resources and tutorials. As I said then:

For web development, start with HTML, then CSS, then JavaScript (and don’t move on to JavaScript too quickly—really get to grips with HTML and CSS first).

That’s assuming you want to be a good well-rounded web developer. But it might be that you need to get a job as quickly as possible. In that case, my advice would be very different. I would advise you to learn React.

Believe me, I take no pleasure in giving that advice. But given the reality of what recruiters are looking for, knowing React is going to increase your chances of getting a job (something that’s reflected in the curricula of coding schools). And it’s always possible to work backwards from React to the more fundamental web technologies of HTML, CSS, and JavaScript. I hope.

Regardless of your initial route, what’s the next step? How do you go from starting out in web development to being a top-notch web developer?

I don’t consider myself to be a top-notch web developer (far from it), but I am very fortunate in that I’ve had the opportunity to work alongside some tippety-top-notch developers at ClearleftTrys, Cassie, Danielle, Mark, Graham, Charlotte, Andy, and Natalie.

They—and other top-notch developers I’m fortunate to know—have something in common. They prioritise users. Sure, they’ll all have their favourite technologies and specialised areas, but they don’t lose sight of who they’re building for.

When you think about it, there’s quite a power imbalance between users and developers on the web. Users can—ideally—choose which web browser to use, and maybe make some preference changes if they know where to look, but that’s about it. Developers dictate everything else—the technology that a website will use, the sheer amount of code shipped over the network to the user, whether the site will be built in a fragile or a resilient way. Users are dependent on developers, but developers don’t always act in the best interests of users. It’s a classic example of the principal-agent problem:

The principal–agent problem, in political science and economics (also known as agency dilemma or the agency problem) occurs when one person or entity (the “agent”), is able to make decisions and/or take actions on behalf of, or that impact, another person or entity: the “principal”. This dilemma exists in circumstances where agents are motivated to act in their own best interests, which are contrary to those of their principals, and is an example of moral hazard.

A top-notch developer never forgets that they are an agent, and that the user is the principal.

But is it realistic to expect web developers to be so focused on user needs? After all, there’s a whole separate field of user experience design that specialises in this focus. It hardly seems practical to suggest that a top-notch developer needs to first become a good UX designer. There’s already plenty to focus on when it comes to just the technology side of front-end development.

So maybe this is too simplistic a way of defining the principle-agent relationship between users and developers:

user :: developer

There’s something that sits in between, mediating that relationship. It’s a piece of software that in the world of web standards is even referred to as a “user agent”: the web browser.

user :: web browser :: developer

So if making the leap to understanding users seems too much of a stretch, there’s an intermediate step. Get to know how web browsers work. As a web developer, if you know what web browsers “like” and “dislike”, you’re well on the way to making great user experiences. If you understand the pain points for browser when they’re parsing and rendering your code, you’ve got a pretty good proxy for understanding the pain points that your users are experiencing.

Tuesday, April 28th, 2020

What is a resilient website? (with Jeremy Keith) | A Question of Code

I really enjoyed having a chat with Ed and Tom on their podcast. It’s aimed at people making a career shift into web development, but that didn’t stop me banging on about my usual hobby horses: progressive enhancement, resilient web design, and all that jazz.

Available for your huffduffing pleasure.

Design Can Change the World - But It’s Up to Us to Make it So by Daniel Burka

There is a huge world out there where design isn’t embraced, where designers are clawing for resources, and where design isn’t prioritized. Most of the organizations that are changing your world don’t know much about design, aren’t looking for designers, and won’t even understand what designers are talking about when they show up at the front door.

Monday, April 20th, 2020

How I’m teaching the kids coding for the web

I love how Remy explains front-end development to his kids:

The bones are the HTML. Each bone has a name, we call them tags (or elements).

…the skin and the paint on the skin, this is CSS.

Finally, the brain and behaviour, the way the website can be interacted with is using the third layer: JavaScript.

Monday, March 30th, 2020

Prioritising Requirements | Trys Mudford

Over the past few years, I’ve given quite a few workshops and talks on evaluating technology. This methodical approach to evaluation and prioritisation from Trys is right up my alley!

In any development project, there is a point at which one must decide on the tech stack. For some, that may feel like a foregone conclusion, dictated by team appetite and experience.

Even if the decision seems obvious, it’s always worth sense-checking your thought process. Along with experience and gut-feelings, we also have blind-spots and biases.

I feel like there’s a connection here to having good design principles—the kind that explicitly value one facet over another.

Sunday, March 15th, 2020

Twitter thread as blog post: Thoughts on how we write CSS | Lara Schenck

CSS only truly exists in a browser. As soon as we start writing CSS outside of the browser, we rely on guesses and memorization and an intimate understanding of the rules. A text editor will never be able to provide as much information as a browser can.

Thursday, March 12th, 2020

Pure CSS Landscape - An Evening in Southwold

This is not an image format. This is made of empty elements styled with CSS. (See for yourself by changing the colour value of the sun.)

Wednesday, March 11th, 2020

Why is CSS frustrating? ・ Robin Rendle

CSS is frustrating because you have to actually think of a website like a website and not an app. That mental model is what everyone finds so viscerally upsetting. And so engineers do what feels best to them; they try to make websites work like apps, like desktop software designed in the early naughts. Something that can be controlled.