Mental models

I’ve found that the older I get, the less I care about looking stupid. This is remarkably freeing. I no longer have any hesitancy about raising my hand in a meeting to ask “What’s that acronym you just mentioned?” This sometimes has the added benefit of clarifying something for others in the room who might have been to shy to ask.

I remember a few years back being really confused about npm. Fortunately, someone who was working at npm at the time came to Brighton for FFConf, so I asked them to explain it to me.

As I understood it, npm was intended to be used for managing packages of code for Node. Wasn’t it actually called “Node Package Manager” at one point, or did I imagine that?

Anyway, the mental model I had of npm was: npm is to Node as PEAR is to PHP. A central repository of open source code projects that you could easily add to your codebase …for your server-side code.

But then I saw people talking about using npm to manage client-side JavaScript. That really confused me. That’s why I was asking for clarification.

It turns out that my confusion was somewhat warranted. The npm project had indeed started life as a repo for server-side code but had since expanded to encompass client-side code too.

I understand how it happened, but it confirmed a worrying trend I had noticed. Developers were writing front-end code as though it were back-end code.

On the one hand, that makes total sense when you consider that the code is literally in the same programming language: JavaScript.

On the other hand, it makes no sense at all! If your code’s run-time is on the server, then the size of the codebase doesn’t matter that much. Whether it’s hundreds or thousands of lines of code, the execution happens more or less independentally of the network. But that’s not how front-end development works. Every byte matters. The more code you write that needs to be executed on the user’s device, the worse the experience is for that user. You need to limit how much you’re using the network. That means leaning on what the browser gives you by default (that’s your run-time environment) and keeping your code as lean as possible.

Dave echoes my concerns in his end-of-the-year piece called The Kind of Development I Like:

I now think about npm and wonder if it’s somewhat responsible for some of the pain points of modern web development today. Fact is, npm is a server-side technology that we’ve co-opted on the client and I think we’re feeling those repercussions in the browser.

Writing back-end and writing front-end code require very different approaches, in my opinion. But those differences have been erased in “modern” JavaScript.

The Unix Philosophy encourages us to write small micro libraries that do one thing and do it well. The Node.js Ecosystem did this in spades. This works great on the server where importing a small file has a very small cost. On the client, however, this has enormous costs.

In a funny way, this situation reminds me of something I saw happening over twenty years ago. Print designers were starting to do web design. They had a wealth of experience and knowledge around colour theory, typography, hierarchy and contrast. That was all very valuable to bring to the world of the web. But the web also has fundamental differences to print design. In print, you can use as many typefaces as you want, whereas on the web, to this day, you need to be judicious in the range of fonts you use. But in print, you might have to limit your colour palette for cost reasons (depending on the printing process), whereas on the web, colours are basically free. And then there’s the biggest difference of all: working within known dimensions of a fixed page in print compared to working within the unknowable dimensions of flexible viewports on the web.

Fast forward to today and we’ve got a lot of Computer Science graduates moving into front-end development. They’re bringing with them a treasure trove of experience in writing robust scalable code. But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity.

That’s a very, very challenging world to get your head around. The safer option is to stick to the mental model you’re familiar with, whether you’re a print designer or a Computer Science graduate. But that does a disservice to end users who are relying on you to deliver a good experience on the World Wide Web.

Responses

John OK

What @adactio said: “I’ve found that the older I get, the less I care about looking stupid. This is remarkably freeing.” A thousand time yes! I love this too. adactio.com/journal/16138

# Posted by John OK on Thursday, November 21st, 2019 at 2:19pm

CSS-Tricks

> If your back-end code is getting so big that it’s starting to run noticeably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment adactio.com/journal/16138

# Posted by CSS-Tricks on Tuesday, November 26th, 2019 at 6:50pm

Adam Silver

‘Writing back-end and writing front-end code require very different approaches, in my opinion. But those differences have been erased in “modern” JavaScript.’ Nodding profusely as per usual. adactio.com/journal/16138

# Posted by Adam Silver on Wednesday, November 27th, 2019 at 7:17am

Evan Travers

Happy thanksgiving y’all! I hope you enjoyed a sweet day of rest with family and friends… if your reading list is low, get ready for a buffet of internet, courtesy of my Instapaper. (Just cleaned it off during the long weekend, declared bankruptcy and it’s ready for a new year.)

Books

I read a whole bunch of comic books like pop-corn this month… most notable was “Mind MGMT Omnibus Vol 1” by Matt Kindt. It was a great psychological spy drama that spirals out of control into some psychadelic metaverse wonderfulness.

The User Experience Team of One by Leah Buley

I liked this book a lot, even though the models of UX expressed in the first chapter are very waterfall-centric. They also bled into roles and tasks currently owned by product (at least in the organization I’m in at the moment.)

The techniques and context seem to be pre figma and slack… doesn’t invalidate the principles, but those new workplace tools have changed the way info flows and wireframes are defined and communication is effected.

I really liked the practical suggestions of “when to use this”, I’d reach for this resource if I felt stuck. It’s like a cookbook of “if you face this, try that”

Humble Calvinism by J.A. Medders

Many of us who love to love the “doctrines of grace” have not grown in showing grace. We have not become more gracious, kind, tender, and compassionate. And that can only mean one thing: we actually don’t know the doctrines of grace. Sure, we know the points and can rehearse the arguments and even recall verses to support the five petals of our TULIP.[ 2] But an arrogant and argumentative Calvinist is just a Pharisee with a fresh coat of paint

Oh man. This is both convicting and sooo true. The disconnect between heart and head Calvinism.

Another point that struck me is that heart Calvinism would compel an introvert like me to be stronger, be bolder, to feel the weight of the gift given more heavily.

The final chapter summarizes the book well:

A heart-grasp of Total Depravity means we are humbled by our sin, dependent on the power of the Spirit, and sympathetic toward every sinner and their struggles. Kindness flows from knowing our history.

A heart-knowledge of Unconditional Election leads us to the grandeur of God’s grace, humbling us by the reality that God chose to save us based on nothing we are or have done. So, are we going to love and serve people only if they deserve it or give us something back? Not anymore.

Definite Atonement, when connected to head and heart, shows us the specific love Christ has for his church—local and global. It shows us how Jesus humbled himself to serve his people, empowering us to do the same for the student ministry in our church, the set-up and tear-down team, or the widow who needs her lawn mowed.

When the doctrine of Irresistible Grace breaks through our clogged hearts, we are humbled by the Spirit’s relentless power to draw us to Christ, and we are honored to join our triune God in his mission to save sinners all around the world. Why would God invite you and me to do such a thing? Because he is merciful, gracious, and abounding in faithful love.

And once our heart is in rhythm with the pulse of the Perseverance of Saints, we are made both confident and humble, knowing that God keeps us from stumbling because without him, we wouldn’t make it for a day—and we humbly help others keep going in faith.

Humble Calvinism—real Calvinism—is about both orthodoxy and orthopraxy: about right doctrine and the right practice, posture, and passion. Will you pursue it? Do any changes need to be made in your thinking? Living? Speech? Do some relationships need to be reconciled? Does forgiveness need to be sought? Begin today.

Links Design Yes, Alan, There Is An ROI For UX Design

The value that comes from good design is incremental. Thousands of small decisions, thoughtfully made, with a focus on the users’ experience is what makes design valuable.

Preach.

Read more…

Strobist: SLC-0L-03: Joker Cinematographer On Light & Color

Everything on strobist is an outstanding resource for a photographer or any student of light and color, but this is a great post.

This really stood out to me:

Finally, try to learn to resist the urge to “fix” light by neutralizing the color. This is why auto white balance is probably the most soul-sucking setting on your camera. It kills interestingness.

Instead, learn to explore the space between the way your camera sees color and the way your eye sees it.

I’m going to have to return to black and white to re-learn that single-axis equation.

Read more…

System Usability Scale (SUS) | Usability.gov

The System Usability Scale (SUS) provides a “quick and dirty”, reliable tool for measuring the usability.

Going to have to save this questionnaire for later.

Read more…

Design Systems for Developers

A guide that teaches professional developers how to transform component libraries into design systems and set up the production infrastructure used by leading frontend teams.

Read more…

Playing with state | Sarah Higley

Accessibility is hard, but well-written and thoughtful posts like this make it a little more fun.

Here’s the crux of her suggestion.

Change the name, but not the state, of play/pause buttons. Use state for all other toggle buttons.

Why? First, because the mechanics of a play/pause (or start/stop) button are so well understood by now that immediate state change feedback is not critical.

Worth the whole read.

Read more…

The Truth About UX/UI Designers

If we think of experience design as five levels of resolution: eco-system design, organization-wide design, application/site-wide design, screen design, and conversation design. To successfully design in each resolution, the designer needs the requisite skills, knowledge, and experience to get the most out of that resolution’s specific tools, methods, and principles.

A UI designer focuses on what’s on each page or screen of a design. They draw on their expertise to know how to layout the information on the screen. They design effective forms and dialogs to guide users to efficiently and effectively interact with application or web site.

Very helpful. If nothing else, this should be a clarion call to designers to learn to code, and an invitation to developers to grow their empathy and design skills.

Read more…

GV’s Guide to UX Research for Startups

Since 2010, we’ve helped hundreds of GV startups (like Nest, Foundation Medicine, Flatiron Health, Slack, Gusto, Lime, and Uber) use UX research to answer critical business questions and to build more successful products. We’ve shared our lessons on Medium and in the GV Library. This table of contents will help you quickly find everything you need to learn more faster about your customers, your ideas, and your designs.

Amazing resource… in my new position, I’ve been gathering and devouring material for research and design strategy for small teams, and this is great.

Read more…

Code Bypassing GitHub’s OAuth flow

Why is this useful? Well, GitHub’s CSRF protection requires all authenticated POST requests to include a CSRF token. But HEAD requests don’t need a CSRF token, since they’re not supposed to have side-effects. So we can send a cross-site authenticated HEAD request that will give arbitrary OAuth permissions, without showing the user a confirmation page at all.

Read more…

User:71.12.176.77 - IndieWeb

I set up an IndieWeb profile… am I official yet?

Read more…

bliki: WaterfallProcess

In this thinking waterfall means “do one activity at a time for all the features” while iterative means “do all activities for one feature at a time”.

This is a very clear definition (to me)… and while it’s going to become an almost guarantee that I’ll “like” anything that Martin Fowler writes, this was very helpful for me, and I think it’ll help me advocate for an iterative approach more articulately.

Read more…

The 16-inch MacBook Pro – Marco.org

After my first day with the new 16-inch MacBook Pro, I’m very optimistic about it. 🎧 Hear more on today’s Accidental Tech Podcast! Two years ago, I wrote a…

Read more…

Commit Message Driven Development | Sven Hofmann

This is a really interesting take… I think it’d be hard for a new developer who is following the Zootopia model of development, but it’s something to aspire to.

By writing the draft of the commit message first, we decide what we’re working on. The scope of our task is clear now. With the commit message being written down, we’re already in the process and in the mindset to write the code to make it happen. We can modify the commit message later, if necessary.

Read more…

Mental models

It turns out that my confusion was somewhat warranted. The npm project had indeed started life as a repo for server-side code but had since expanded to encompass client-side code too.

I understand how it happened, but it confirmed a worrying trend I had noticed. Developers were writing front-end code as though it were back-end code.

On the one hand, that makes total sense when you consider that the code is literally in the same programming language: JavaScript.

On the other hand, it makes no sense at all! If your code’s run-time is on the server, then the size of the codebase doesn’t matter that much. Whether it’s hundreds or thousands of lines of code, the execution happens more or less independentally of the network. But that’s not how front-end development works. Every byte matters. The more code you write that needs to be executed on the user’s device, the worse the experience is for that user. You need to limit how much you’re using the network. That means leaning on what the browser gives you by default (that’s your run-time environment) and keeping your code as lean as possible.

Great article, and Jeremy very clearly puts a finger on the problem that I’ve seen but haven’t been able to name.

Read more…

Keep a Changelog

Don’t let your friends dump git logs into changelogs.

Someone at work is having us adopt a version of this, and I for one support it.

Read more…

Understand Website Accessibility with the Firefox Accessibility Inspector - YouTube

Read more…

WICG/inert

The inert attribute/property allows web authors to mark parts of the DOM tree as inert:

When a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as “find in page”), and may prevent the user from selecting text in that node.

Furthermore, a node which is inert should also be hidden from assistive technology.

Read more…

WICG/focus-visible

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Read more…

Having an open dialog | scottohara.me

I’ve written about building accessible modal dialogs a few times over the past five-ish years. Most recently I dissected the current state of modal dialog…

This is an incredibly helpful article… I’ll need this next time I’m working on a dialog, modal, or floating window. It sadly looks like <dialog> isn’t ready for prime time yet.

Read more…

Focus Focused #85: The Depth of Our Madness - Relay FM

Some great thoughts this week!

You can always put more tasks on your list, but you can’t put more hours in your day.

The right question isn’t can I do this thing… it’s am I going to do this thing.

Just because it’s in the task manager doesn’t mean you have to do it. It’s a collection of possibilities not obligations.

Great resource for people starting to wrest control of their day from chaos… Great explanation of the difference between a task and an event.

Read more…

Integrate your data, APIs, and cloud services in minutes - Pipedream

The integration platform built for developers Develop any workflow, based on any trigger. Workflows are code, which you can run for free.

I could see this being really handy for me someday… I don’t know whether zapier or this would be a better time investment.

Read more…

Augmented Text Editing on Mobile: The New iOS 13 Gestures

In anticipation of Apple disabling force touch (a feature I have found very useful and am sad to see go) I have pre-emptively turned off force touch on my device so I can get used to the idea.

This guide has helped ease the pain… just this is super useful:

Selecting a word, sentence, or paragraph has become a lot easier. Here’s one way to go about it:

  • Double-tap to select a word.
  • Triple-tap to select a sentence.
  • Quadruple-tap to a select paragraph.

And here’s another way that works as well:

  • Double-tap to select a word.
  • Double-tap two times to select a sentence.
  • Double-tap three times to select a paragraph.

Read more…

Interesting 13x9 Micro Factory - Factorio Forums

The absurd creativity of constraints. A complete factorio factory that produces all sciences and fits in a 13x9 block.

Read more…

Meal Planning, Path to the $250 Grocery Bill. - Monday Morning Pancakes

Since our $250 Grocery Bill post was so big, we decided out of popular demand to elaborate on how exactly we get our need so low. Here is Valerie once again…

Read more…

CaringBridge: A Community Grown with Love - The History of the Web

Then something kind of amazing happened. At the encouragement of Brighid’s parents, Mehring kept at it. Working bit by bit whenever she had a chance, she pieced together a new version of the site, one where anybody could create their own support network page. At a time of great need, it provided a way for loved ones to stay involved, stay updated, and most importantly, stay connected. If you were going through the most trying of times, what Mehring often refers to as a health journey, the site was a way to invite others in, walk side by side with them in a virtual world of compassion. To honor the memory of the little girl who started it all, Mehring named the site CaringBridge.

This was in 1997. Myspace was still 6 years away. Facebook’s rise wouldn’t come for another decade. Even Google wouldn’t be around for another year. But here was Mehring, giving the web a purpose no one had even thought of yet. She realized early on that fundamental connection was an essential project of the World Wide Web. It has the power to break down geographical boundaries and reach anyone, anywhere. Backed by a benevolent design, that’s an incredibly powerful thing.

Read more…

Off-Grid Cyberdeck! The Raspberry Pi Recovery Kit — BACK7.CO

This is magnificent. I mean… just look at it.

I want one for no good reason. Is there a german word for to “own something just because?”

Read more…

Life is Short

(Content warning: Strong language)

Ok, so life actually is short. Does it make any difference to know that?

It has for me. It means arguments of the form “Life is too short for x” have great force. It’s not just a figure of speech to say that life is too short for something. It’s not just a synonym for annoying. If you find yourself thinking that life is too short for something, you should try to eliminate it if you can.

Despite a swear word to describe “foolishness,” this Paul Graham essay feels almost like an argument combined from Proverbs and Ecclesiastes. Some wisdom:

One heuristic for distinguishing stuff that matters is to ask yourself whether you’ll care about it in the future. Fake stuff that matters usually has a sharp peak of seeming to matter. That’s how it tricks you. The area under the curve is small, but its shape jabs into your consciousness like a pin.

I am convicted and disturbed by this caution against productivity addiction:

It’s easy to let the days rush by. The “flow” that imaginative people love so much has a darker cousin that prevents you from pausing to savor life amid the daily slurry of errands and alarms.

Read more…

Discontinuous thought

The gap between mobile and desktop is:

[shift] ENTER

When one is typing on a laptop, the assumption is that you’ll keep going with your thought until you push ‘send’ or ‘publish’.

This… is growing on me.

Read more…

How Y Combinator Started

The first dinner in California, we had to warn all the founders not to touch the walls, because the paint was still wet.

Read more…

2 Likes

# Liked by Chris Jones on Tuesday, November 19th, 2019 at 11:51pm

# Liked by Chris M. on Thursday, November 21st, 2019 at 4:08pm

Related posts

Schooltijd

Going back to school in Amsterdam.

Unobtrusive feedback

An interface pattern for Ajax interactions that’s borrowed from video games.

Indy web

Maps—they don’t love you like I love you.

Principle

JavaScript should only do what only JavaScript can do.

Declaration

HTML. JavaScript. Why not both?

Related links

Don’t build that app! – Luke Jackson - YouTube

This is a fascinating look at how you can get the benefits of React and npm without using React and npm.

Here’s an accompanying article on the same topic.

Tagged with

I finally made sense of front end build tools. You can, too.

I still find the landscape of build tools completely overwhelming, but I found this distinction to be a useful way of categorising the different kinds of build tools:

Build tools do two things:

  1. Install things
  2. Do things

So bower, npm and yarn install things, whereas grunt, gulp, and webpack do things.

I think.

Tagged with

I’m harvesting credit card numbers and passwords from your site. Here’s how.

This is a “what if?” scenario, but it’s all too plausible.

For site owners, the (partial) solution is to have a strong Content Security Policy.

For users, the solution is to disable JavaScript.

(In the wake of Spectre and Meltdown, this is now a perfectly legitimate action for security-conscious web users to take; I hope your site can support that.)

Tagged with

An exercise in progressive enhancement - DEV Community 👩‍💻👨‍💻

Hui-Jing talks through her process of building a to-do app on Glitch using a progressive enhancement mindset:

I found that HTML out-of-the-box takes care of a lot of things when it comes to collecting user inputs from the front-end, which resulted in much less code required. This is not to say client-side Javascript is bad, because the experience was smoother (and faster) when I used it for updating content.

Tagged with

Progressive Progressive Web Apps - Tales of a Developer Advocate by Paul Kinlan

Paul goes into detail describing how he built a progressive web app that’s actually progressive (in the sense of “enhancement”). Most of the stuff about sharing code between server and client goes over my head, but I understood enough to get these points:

  • the “app shell” model is not the only—or even the best—way of building a progressive web app, and
  • always, always, always render from the server first.

Tagged with

Previously on this day

9 years ago I wrote Cache-limiting in Service Workers

This should work in theory. It doesn’t work in practice.

13 years ago I wrote Pattern primer

A little script to automatically generate a document of markup patterns.

14 years ago I wrote Spacelift

My project at Science Hack Day San Francisco

18 years ago I wrote To Cape Canaveral… and beyond!

I went behind the curtain at the Kennedy Space Center.

18 years ago I wrote Refreshed

Wrapping up Refresh Orlando 2006.

20 years ago I wrote Mac madness

I was thinking of heading up to the Mac Expo in London tomorrow. It’s pretty much an annual event for me (anyone remember this post from three years ago?).

23 years ago I wrote Photoshop: It's All the Rage

This article at Wired is all about Photoshop. Specifically, it’s all about the popularity of "Photoshopping" images for fun, satire or spite.