📝 This Week in Web Design and Development

View this newsletter on the web.

📝 A Note on Note-Taking

(Robin) When a codebase is still new and unfamiliar (and scary!) one of the best ways to learn about it is by taking copious notes. At Gusto, we take extensive notes of what features we’d like to ship next, what problems we might come across, and how we should tackle refactoring a component.

Note taking for our team is important because up until pretty recently the difficulties of our front-end codebase was very much siloed. Only one or two people knew how and why our form components worked the way they did, or how our styles loaded in the peculiar way that they do.

But I’ve noticed now that the Design Systems team is a fully-fledged team that all these public notes are starting to make an impact. Now everyone on the team has a pretty good understanding of what we should focus on next because we can see the challenges that everyone bumps into on a daily basis.

Our team makes alls these notes in Notion which I’ve fallen completely in love with:

Chris also made some notes a while back about how he’s been using Notion which is super interesting. Sarah detailed how she uses Notion in a post called “Prioritizing“:

I like to use the weekly planner in Notion. I’ll take all the things I think I can get done in a week and break them down day-by-day, based on when it makes the most sense to do each task. When I finish a task, it’s dragged to the top. Anything that’s unchecked at the bottom by the end of the day moves over to the next. I also have general to-do lists, and task-based lists, but the weekly planner is my holy grail. Again, you don’t have to do it exactly like I do, find what works for you.

So Notion is definitely a great tool to organize both what you’re doing and what you’re thinking about. Going back to front-end specifically for a moment though — all this reminds me of a post by Chen Hui Jing on how she tackles new refactoring projects:

Before diving into the code proper, I did a basic click-around, to get an idea of the look and feel of the site, and what it did. To me, this was a pretty important step, because you can only encounter a site for the first time, once in your life. And I took notes. Notes on things that took me a while to figure out, places where I had to ask “hmmm, now what does this even mean?”, functionality that required extra cognitive effort to comprehend.

This is a wonderful idea! I can’t count the number of times I’ve started a new project and joined a team only to have fallen into the codebase head first and immediately become lost and upset in a sea of weird and confusing nonsense.

The reason I love this post by Chen is that we can use that confusion to our advantage! By jotting down all those HUH? and WAH!?? moments we can help ourselves out in the future. Because if we’re confused by this one tiny thing in the codebase then it’s probably causing issues elsewhere for other folks, too.

If we use that initial confusing state of mind to our advantage then we can help other people and get a good sense of all the issues and troubles without letting it get to us.

Yay for note-taking!

🔗 Links from around the web

Google has launched an interesting feature called Paint Holding and it’s available to test in the latest version of Chrome Canary. Addy Osmani has the scoop:

For a while now, Chrome has eagerly cleared the screen when transitioning to a new page to give users the reassurance that the page is loading. This “flash of white” is this brief moment during which the browser shows a white paint while loading a page. This can be distracting in-between navigations, especially when the page is reasonably fast in reaching a more interesting state.

It sounds pretty neat! I wonder if there could be a bit of an accessibility issue with this though — for similar-looking pages it might not be entirely obvious right away that the user has navigated to a different page.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s