{"posts":[{"id":23,"title":"#23","description":"Chirp-induced migraines, online IDEs, and introducing yourself without saying your title.","date":"2021-08-16T00:00:00.000Z","html":"

GitHub’s Engineering Team has moved to Codespaces

If you haven't yet, try hitting . while viewing a repo in GitHub.

That will launch a Codespaces instance, GitHub's online IDE that runs VS Code in your browser (with all of your user settings synced). It's quite impressive.

GitHub's engineering team has now doubled down internally on Codespaces as their default development environment, a testament to their commitment to it. A couple months ago I suggested that online IDEs might be the future of development, but this is a lot sooner than I'd imagined.

Introducing yourself without saying your title

I appreciated this short post on introducing yourself using your role rather than your title. Of the good reasons the author cites, I liked this one most:

\n
It flattens the conversation. To me, it's important to make sure everyone else has a voice, regardless of what level they are at or how many years of experience they have in their resume. Sometimes the best ideas come from people who are able to think fresh — and the last thing I want is for people to hold their thoughts because they don't feel "senior enough" or "as senior as the other folks in the room".
\n

Stack Overflow Developer Survey 2021

Stack Overflow recently released their annual developer survey results for 2021. Plenty of interesting insights in here, but to highlight a few:

What do you do when you get stuck
\n
~90% of devs start troubleshooting with a Google search.
\n
Web frameworks
\n
Svelte beat out React as "most loved" web framework.
\n
Integrated development environment
\n
VS Code is by far the IDE of choice.
\n
Salary by developer type
\n
\n
Across the board, engineering managers, SREs, DevOps specialists, and data engineers tend to receive the highest salaries.
\n
\n

Twitter's new font and Last of Us 2: an accessibility lesson to be learned

Great analysis by Anna Mészáros on Twitter's recent design changes. The new Chirp typeface is reportedly giving some people migraines. 😬 What I found more interesting though was that Twitter may have amped up the contrast ratios for text too high to the point where it can actually be harder to read for some people (e.g. those with photosensitivity).

Apps Getting Worse

Tim Bray on software that seems to degrade with each update. Bray places the blame squarely on product managers—which I find a bit unfair—but the overall problem is very real and disheartening.

Aligning a Button Label Vertically

Despite the title, this post is more about vertically aligning text in general with CSS (not just in buttons). Still, it's a useful technique that certainly beats applying uneven padding.

\n","url":"/reading-list/23","permalink":"https://mturco.com/reading-list/23"},{"id":22,"title":"#22","description":"Avoiding imposter syndrome, learning quickly with a growth mindset, and Safari holding back the web.","date":"2021-08-04T00:00:00.000Z","html":"

The Future Of The Web

Hazem Osama with some bold thoughts about the future of the web and how it has begun to—and will continue to—replace native apps.

Could, should, might, shouldn't – A taxonomy of futurists

Continuing the future theme, I liked this comparison of futurists laid out by Nick Foster, Head of Design at X (which you probably know by its former name, Google X).

"You will only hear the word you're reading"

Someone explain this to me. 😮

@laurieontech on "people who appear super smart"

I liked and related to this tweet by Laurie Barth (Netflix).

When you're just starting as an engineer (or really in any profession), meeting people like this can cause a bit of imposter syndrome. It's important to realize that no one can be an expert in everything.

Your eventual goal should be to become "T-shaped".

Safari isn't protecting the web, it's killing it

An exhaustive rebuttal on a contentious topic by Tim Perry.

The list of features supported by all major browsers but Safari (and when they were implemented by those other browsers) is pretty damning. As is the list of features now implemented but many years after Chrome/Firefox. Date and time inputs have been supported by Chrome for 9 years and just shipped in Safari 14.1. 😵

I thought the sentiment that "Safari is the new IE" was a bit premature but now I think I agree.

\n
According to Can I Use's metrics, Safari is lacking about 10% behind Firefox and 15% behind Chrome in feature support. That's including every basic feature like HTML images, forms and links - so it's a major underestimation of the modern feature set.
\n

How To Learn Stuff Quickly

A great post by Josh Comeau on learning how to learn as a developer. He also hits on plenty of good subtopics, like adopting a growth mindset:

\n
Many years ago, I went bowling with some friends. I didn't do well. [...] There are two different ways to interpret this scenario:
\n
\n
I'm just not good at bowling, and I never will be. Bowling just isn't my thing.
\n
I'm not good at bowling. If I want to, though, I can become an excellent bowler.
\n
\n
There is a self-fulfilling prophecy aspect to this: whichever interpretation you choose will be correct. If you think that your level of bowling skill is fixed, it will be. If you believe that you can improve, you will!
\n

\n","url":"/reading-list/22","permalink":"https://mturco.com/reading-list/22"},{"id":21,"title":"#21","description":"A new terminal written in Rust, guidelines for code comments, Reddit's disrespectful design, and the unreasonable effectiveness of just showing up everyday.","date":"2021-07-21T00:00:00.000Z","html":"

Warp—The blazingly fast, Rust-based terminal

I've had my eyes on (but not yet hands on) Warp which is a new terminal (please hold your 🙄) written in Rust (🤭). The heavily promised speed is table stakes. It must be fast or else it might as well be Hyper (thankfully, unlike Hyper, Warp is not Electron-based).

What really has my interest though are things like: the "blocks" concept which nicely groups a command with its output (and allows it to be shared via URL 🤔), the multi-line and multi-cursor support, command palette, and autocomplete (which looks a lot like Fig but integrated into the terminal).

Warp is still in early access but keep your eyes on it—it looks promising.

Best practices for writing code comments

Solid guidelines for code comments. My favorite:

\n
Rule 3: If you can't write a clear comment, there may be a problem with the code
\n

The explanation for this rule references Kernighan's Law (which was new to me):

\n
Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.
\n

I absolutely love it.

The unreasonable effectiveness of just showing up everyday

The success story of Typesense, an open source search engine whose creators took a non-flashy, patient approach to its development:

\n
We did not quit our day jobs to start working on Typesense full-time immediately. We did not seek venture capital or attempt to "corner" the market by chasing hyper growth. We did not have personal brands or wide networks to tap into. We did not even earn the first dollar till the 5th year.
\n

The author shares some advice for replicating their success:

\n
Pick an idea in a large market that will always be in demand and work on a product that caters to a subset of use cases exceedingly well.
\n

On HTML Attributes vs DOM Properties

A concise explainer on a topic that often causes confusion. Making matters worse is that syntax like JSX furthers this confusion by allowing setting HTML attributes and DOM properties interchangeably via "props"... whose syntax looks like attributes. 🤦‍♂️

Setups

A collection of personal workspace photos. Useful if you're looking for inspiration to redo your workspace or "setup".

Reddit's disrespectful design

Reddit has recently been employing some gross dark UX patterns including deliberately confusing users, forcing them onto native apps, and disguising ads as user content.

\n","url":"/reading-list/21","permalink":"https://mturco.com/reading-list/21"},{"id":20,"title":"#20","description":"Reviewing code as a junior engineer, communicating without emoji, and the unexpected benefits of mentoring others.","date":"2021-07-16T00:00:00.000Z","html":"

How to Review Code as a Junior Developer

A great piece on code review by Emma Catlin of Pinterest's engineering team. Emma gives sound advice for not only junior engineers but any engineer diving into a new codebase or joining a new team.

\n
Asking questions in code review is some of the best advice I received as a junior developer. Once I dug into what I didn't know and asked questions on my coworkers' pull requests, I learned so much about our systems.
\n

What happened when I stopped using Emojis

I never used to use emoji. Then reactions in Slack (and now pretty much everywhere) made them second nature. Now I think emoji probably save me minutes of time each day — e.g. a quick 👍 instead of typing out a notification-producing "sounds good". So this article's title reeled me in pretty easily.

In actuality, the article itself is not so much packed with interesting findings from having abstained from using emoji. What it does offer, though, is interesting emoji history and emoji perception differences.

Software Estimation Is Hard. Do It Anyway.

Hard to argue with this point made by Jacob Kaplan-Moss (co-creator of Django).

\n
Estimating a software project seems to always run up against Hofstadter's Law: "It always takes longer than you expect" [...]
\n
Unfortunately, it’s common to look at this pattern, see that estimating software project timelines is hard and just … give up. [...]
\n
However, sooner or later, someone's going to ask "when will Feature X ship?" There are situations where having an answer – an accurate one – is non-negotiable.
\n

The unexpected benefits of mentoring others

This post on mentorship from the perspective of the mentor really resonated with me. In my own experience mentorship can have far more mutual benefit than is often acknowledged.

\n
In any profession, your skillset can be broken down into two categories: hard and soft skills. [...] By mentoring others, you are teaching hard skills using your soft skills, and both of you get a chance to improve.
\n

Pairing fonts – 3 ways to find great typeface combinations

When you're starting a new side project, settling on font choices can be overwhelming. Thankfully, this is one of the better guides I've come across that provides practical advice and gives you examples of things to look for in a font family (and when pairing font families).

\n
Combining typefaces is a bit like combining clothes. There are no absolute rules to it, a lot of it relates to fashion and trends, and of course to your taste or the mood your project should convey.
\n

\n","url":"/reading-list/20","permalink":"https://mturco.com/reading-list/20"},{"id":19,"title":"#19","description":"Getting unstuck, exceptions to You Aren't Gonna Need It, and \"security theater.\"","date":"2021-07-08T00:00:00.000Z","html":"

npm audit: Broken by Design

Dan Abramov expresses frustration about the current state of npm audit, security vulnerabilities, and—to borrow his 👌 term—"security theater".

From a frontend standpoint, the root of that frustration is that most of the flagged theoretical vulnerabilities tend to be in packages that run at build time (in the terminal) and not at runtime (in the browser). This makes the vulnerable party you and not your users. On top of that, leveraging most of these vulnerabilities requires access to your source code or your machine.

TLDR: most of these are not real threats. And they very well could be drowning out real threats.

Component Story Format 3.0

The Storybook team has just announced a new version of their Component Story Format (CSF). New niceties include a variety of changes to decrease story boilerplate. New story objects allow for easier composition, and automatic render functions and story titles provide sane defaults.

But the real game changer is what Storybook is calling "play functions," which allow simulating user interaction within a story. This is huge for demonstrating complex states of components, especially when those states cannot be reproduced via props.

YAGNI exceptions

A list of exceptions to the YAGNI rule-of-thumb. In other words, things you likely are going to need at some point (or wish you had). Two I appreciated:

\n
Logging. Especially for after-the-fact debugging, and in non-deterministic or hard to reproduce situations, where it is often too late to add it after you become aware of a problem.
\n

\n
Timestamps. [...] instead of a boolean flag, e.g. completed, a nullable timestamp of when the state was entered, completed_at, can be much more useful.
\n

Getting Unstuck

Jonas Lundberg writes about what to do when you're stuck—unable to figure out why your code is behaving differently than you expect.

I liked this point about ego getting in the way:

\n
Ego is the enemy
\n
The longer I've programmed the more likely I am to get badly stuck once I do get stuck. Why is that? My fragile inflated ego. Programming for a long time equals the "I know what I'm doing" mindset. [...] "I know what I'm doing" makes it hard to recognize what you don't know (yet) and hard to admit.
\n

Reasons to Listen to Whom You Don’t Agree With

Jens Oliver Meiert reminds us why listening to people we don't agree with often leads to a positive outcome.

Just as there's frequently more to learn from failures than successes, there can be more to learn from people we disagree with than those we agree with. And, as Meiert points out, blocking out those we disagree with is like slowly curating our own personal echo chamber. Yikes.

\n","url":"/reading-list/19","permalink":"https://mturco.com/reading-list/19"},{"id":18,"title":"#18","description":"JavaScript's new Temporal API, optical sizing in variable fonts, and non-coding skills of senior engineers.","date":"2021-06-29T00:00:00.000Z","html":"

Astro + React + Vue Counter Demo

Netlify's Cassidy Williams made a demo to illustrate the flexibility of Astro, the framework-agnostic static site generator I covered a few weeks ago. Take a look at this index.astro page which casually imports React and Vue components alongside each other, passes them some shared data, and renders them. 👀

Please re-read that paragraph if it didn't get you excited.

Temporal: getting started with JavaScript’s new date time API

If you haven't yet dug into the Temporal API — a saving grace for JavaScript's awful Date API — now is a good time. It reached stage 3 status a few months ago (making it all but guaranteed to make it into EcmaScript) and 2ality (an excellent resource in general) has just published a nice introductory guide.

Just one of the things that makes Temporal a life-saver:

\n
Temporal distinguishes two kinds of time. Given a global instant of time:
\n
\n
Wall-clock time (also called local time or clock time) varies globally, depending on the time zone of a clock.
\n
Exact time (also called UTC time) is the same everywhere.
\n
\n
Epoch time is one way of representing exact time: It’s a number counting time units (such as nanoseconds) before or since Unix epoch (midnight UTC on January 1, 1970).
\n

The Temporal Cookbook also contains a lot of practical usage examples.

Optical size, the hidden superpower of variable fonts

A brief explainer on optical sizing, a lesser known feature of variable fonts that allows typefaces to alter character glyphs based on font size. Much like the .ico file format bundles multiple versions of an image into a single file, optical sizing allows variable fonts to bundle multiple versions of glyphs into a single font.

An incomplete list of skills senior engineers need, beyond coding

This Medium post had been sitting in my reading list for a few weeks but I finally got around to reading it. Here are a few that particularly resonated with me:

\n
\n
How to run a meeting, and no, being the person who talks the most in the meeting is not the same thing as running it
\n
\n

\n
\n
How to help someone get promoted
\n
\n

\n
\n
How to find interesting work on your own, instead of waiting for someone to bring it to you
\n
\n

Benchmarking JavaScript Memory Usage

The team at WebPageTest did a deep dive on memory usage in modern web apps. There are some unsurprising findings (like JS bundle size strongly correlating with memory usage) and some findings I didn't expect (like number of DOM nodes having a fairly weak correlation to memory usage).

JS Is Weird

An absurd but fun quiz to test your knowledge of JavaScript's quirks. I got 15 out of 25 correct. 😬

\n","url":"/reading-list/18","permalink":"https://mturco.com/reading-list/18"},{"id":17,"title":"#17","description":"How half of the Internet went out, useful leadership skills for a senior role, a Jest testing tip, and using trigonometry with CSS & JS.","date":"2021-06-17T00:00:00.000Z","html":"

I took the week off, so this reading list was written by a friend and coworker. Thanks Yujin! ❤️

How a single cloud computing customer caused half the Internet to go dark

Rebecca Heilweil explains the Fastly outage that caused major news outlets, payment platforms and many other sites to go down. She goes over the serious consequences of the consolidation in computing service companies like Fastly, and how the complexity and countless moving parts of these systems can make a trivial mistake potentially blow things up.

Why you should never use .toBe in Jest

A teammate and I have been discussing whether we should be using the toBe or toEqual method when asserting a primitive value. This article provides an interesting perspective on why we should be using toEqual for primitive values because there is no difference in performance and as well for uniformity and code readability.

7 leadership skills for junior developers: how to prepare for a senior role

I thought this was a good reminder on the things you can do to level up your game. Josip Miskovic also provides action steps you can take as well.

Trigonometry in CSS and JavaScript

Who said frontend doesn't involve math? Michelle Barker shows how you can apply trigonometry to create cool CSS effects. There are more examples in the second part if you're interested in learning more.

\n","url":"/reading-list/17","permalink":"https://mturco.com/reading-list/17"},{"id":16,"title":"#16","description":"Yet another static site builder, Comic Sans is fed up, anti-goals, and UX tips.","date":"2021-06-10T00:00:00.000Z","html":"

Introducing Astro: Ship Less JavaScript

From the creators of Snowpack comes (yet another) static site builder. I just wanted to put this on your radar because it's shaping up to be a nice option for static sites. It has a lot of the (nowadays) table stakes features like built in support for Markdown, scoped CSS, and TypeScript but a key differentiator here is the fact that it's framework agnostic.

A guide to the Modern Minimal UI style

Diana Malewicz calls attention to a trending UI style she's calling Modern Minimal. I'm a fan!

I'm Comic Sans, Asshole

Comic Sans doesn't care what you think of it.

\n
People love me. Why? Because I’m fun. I’m the life of the party. I bring levity to any situation. Need to soften the blow of a harsh message about restroom etiquette? SLAM. There I am. Need to spice up the directions to your graduation party? WHAM. There again.
\n

UI & UX Micro-Tips: The Ultimate Collection

As an engineer, I don't do much design. But for some reason, practical design tips like these are very satisfying. Even if you don't plan to put them into practice, tips like these help illustrate why some design just feels right.

The power of anti-goals

\n
How can you be more productive?
\n
That’s tough to answer. But, if you invert that into: What are things that make me NOT productive and how do I avoid it? Suddenly, it becomes easier to answer.
\n

\n","url":"/reading-list/16","permalink":"https://mturco.com/reading-list/16"},{"id":15,"title":"#15","description":"Running Node in the browser, a developer identity crisis, intellisense in your terminal, and things your manager might not know.","date":"2021-06-03T00:00:00.000Z","html":"

Introducing WebContainers: Run Node.js natively in your browser

StackBlitz, if you've not used it before, is an online IDE based on VS Code. It's a lot like CodeSandbox if you've used that. The reason they've got everyone talking about them at the moment is because of WebContainers, a new feature that runs Node.js apps in the browser. This would already be cool except that StackBlitz isn't doing any server-side virtualization here. It's actually running Node in your browser using WebAssembly. On top of that, you're able to leverage browser dev tools to debug both client and server code. Oh and they've got a PWA that works offline.

This is a big deal. Seriously, try one of the demo links in the announcement post. This looks to me like the next generation of online code editors and, who knows, maybe even code editors in general.

What I'm thinking about: Identity

Nicholas Zakas reflects on a time he, a frontend engineer, was asked to help with a backend issue and how it changed his mindset about his identity.

\n
That is who I was. That is what I did. Frontend stuff. Not backend stuff, never. Just frontend stuff.
\n

Fig

\n
Fig adds VSCode-style autocomplete to your existing terminal.
\n

This is a really cool tool that I recently got early access to. It cleverly draws UI over your terminal window to provide: explanatory tooltips, autocomplete suggestions, directory listings, etc. Because it's just drawing on top of your terminal, it works with pretty much any terminal app. I've been shocked by how well it works. Highly recommend checking it out!

Things your manager might not know

Julia Evans on things we might assume our managers know and therefore don't explicitly tell them. I really liked Julia's conclusion:

\n
Being good at telling your manager the right information at the right time and asking for what you need is a superpower. It makes you way more valuable to have on a team (because your manager knows they can trust you to give them the information they need), and it’s more likely that you’ll get what you want (because you’re making it easy for them to do that!).
\n
This skill takes a lot of time to learn but it’s pretty easy to practice. You can take a few minutes to reflect before your 1:1 with your manager and think about what might be important to bring up with them.
\n

The 5-Minute Stretching Routine You Should Do Daily

Normally this is not the type of content I share. With that said, these stretches have helped me a lot in the last 15 months as I've spent a lot of time using a computer, sitting (or, thankfully, standing) for hours on end. If you're reading this, I'm willing to bet you can relate to that. So give this a shot!

\n","url":"/reading-list/15","permalink":"https://mturco.com/reading-list/15"},{"id":14,"title":"#14","description":"The future of Jamstack, fancy tools, and UI tips.","date":"2021-05-28T00:00:00.000Z","html":"

The Evolution of Jamstack

Mathias Biilmann, CEO of Netlify and originator of JAMstack (which stands for JavaScript, APIs, and Markup), writes about the rise and future of Jamstack. He credits many of the technologies I've highlighted in recent reading lists as drivers of the progress being made.

\n
What I see gaining real momentum are the “hybrid” frameworks like Next.js, Nuxt.js, and SvelteKit that allow developers to seamlessly mix pages pre-rendered at build time with other routes that are rendered via serverless functions.
\n

Biilmann also discusses a new technique Netlify is working on for lazily building rarely visited pages:

\n
At Netlify, we see a lot of promise in the idea of allowing developers to render critical pages at build time, while deferring other pages (like older blog posts, for example) to be built only when and if they are requested. We’re calling the approach Distributed Persistent Rendering or DPR. It’s an architecture for incremental builds that can be compatible across almost every framework and Jamstack site generator, from 11ty to Nuxt to Next.js.
\n

The return of fancy tools

I liked this commentary by Tom MacWright on a current trend in software tools:

\n
Technology is seeing a little return to complexity. Dreamweaver gave way to hand-coding websites, which is now leading into Webflow, which is a lot like Dreamweaver.
\n

He also makes the good point that software that tries to do more often ends up influencing the output:

\n
Webflow has buttons to add effects. It’s easy to add effects. Effects will be added, because there’s a button to add them. Everything for the next few years will slowly fade in as you scroll. I don’t know why. Stripe did it.
\n

Ask HN: What lessons did you learn from your best or worst colleagues?

As with any Hacker News comment thread, I recommend mostly sticking to the top-level comments. A few of my favorite lessons shared:

\n
Failures of people are as often due to the environment they're in as they are the people. That can be useful to not judge colleagues too harshly, and also to remind yourself you are good and capable when you find yourself in a job/role where you're unable to function. (source)
\n

\n
I learned from my best colleagues: success is about trust. Nothing pays better dividends than being humble, being right a lot, and doing good work. This builds allies and allies build careers. (source)
\n

\n
From the best: "Every if statement is death" was an adage of one. He encouraged me to think deeper about whether conditionals were really needed, and at what place they were needed. That mindset helped me write clearer and more easily testable code. (source)
\n

50 Tips to Improve User Interface

A compilation of 50 tweets by Victor Ponamariov containing UI tips. I love these kind of bite-sized, practical design tips which can help even those without design education/experience pull off a competent UI.

TypeScript Generics for People Who Gave Up on Understanding Generics

This article (and the site in general) by a Vercel engineer is a great TypeScript resource. It makes no assumptions about what other concepts you may or may not already know.

\n","url":"/reading-list/14","permalink":"https://mturco.com/reading-list/14"},{"id":13,"title":"#13","description":"Tired animals, IE's deprecation, and being poor in tech.","date":"2021-05-20T00:00:00.000Z","html":"

The Animal is tired

A bit different from the type of content I usually share but I liked the message this bit of creative writing drives home.

16 Lessons Learned From Five Years As An Enterprise Technologist, Part 1 — and also Part 2!

A great 2-part blog post with plenty of good advice on working with others to build software. The headings for each tip even stand on their own, like Humor Can Break Barriers and Processes Are Good, But Don't Forget To Think.

Lastly, a quote of a quote that I loved:

\n
"If everyone is thinking alike, then someone isn’t thinking"
\n
– George S. Patton
\n

Learn CSS! on web.dev

Google's web.dev site has long been an awesome resource. New to the site is a comprehensive section on learning CSS broken down by concept. Each concept has an accompanying podcast episode and loads of interactive code examples. This is probably the best singular resource for learning CSS I've seen. I love how the content is structured. The page on pseudo-classes would by itself be worth a share.

The future of Internet Explorer on Windows 10 is in Microsoft Edge

Microsoft is firing more warning shots with regards to IE's deprecation by announcing that IE11 will officially be "retired and go out of support" on June 15, 2022.

A comment from a random Hacker News user:

\n
This is what I love about Microsoft. While Google is eager to go ahead and cancel Google Cloud Print and say "find an alternative before next month", Microsoft would be the company to announce it'll be cancelled in 2023, extended support lasts until 2029, and you can buy Extended Warranty 365+ for Business that lasts until 2067.
\n

Poor in Tech

This outsider-looking-in list of observations from a self-described "poor person in tech" resulted in some controversy online but I found it interesting and at times funny. Some are relatable, some are not, but it's an interesting perspective.

\n
I knew I was the only poor person at my tech startup because I thought my coworker was kidding when he said he was spending the three-day weekend in Greece. When I finished laughing, four people recommended hotels.
\n

Xiaohan Zou's Portfolio

This engineer's portfolio website is a surprisingly polished recreation of macOS, complete with markdown notes in Bear, a working terminal with files to ls and cat, and an iframe'd Safari through which you can browse her blog. Oh, and the source code is viewable in a working version of VS Code. Why, what have you been doing with your free time?

\n","url":"/reading-list/13","permalink":"https://mturco.com/reading-list/13"},{"id":12,"title":"#12","description":"Container queries are real(er), disabled buttons suck, and Active Desktop comes back to life as Topframe.","date":"2021-05-12T00:00:00.000Z","html":"

Next Gen CSS: `@container`

Chrome recently shipped an experimental implementation of @container queries in Chrome behind a flag. If you're not familiar with container queries — the MDN page cuts to the chase pretty quickly, but in short — they represent a fundamental change to the way we make sites responsive. Rather than applying styles to elements when the viewport is at a certain size, they allow us to apply styles when the elements themselves (or "containers") are at a certain size.

Now that it's 2021 and everything is a component, you can probably imagine why this would be a groundbreaking change. (And yes, we've been able to do this for years now using ResizeObserver but @container queries allow us to do it purely with CSS.)

Disabled buttons suck but they don't have to

Two great articles for the price of one. I admit, I was not aware of all of the reasons disabled buttons suck. The proposed alternatives (to disabling buttons) in the second article feel like common sense and result in a better UX regardless of whether or not you have disabilities.

Every design is a system

\n
[Inexperienced designers] don't think of every design project as a design system. They don't appreciate the interconnectedness of their design decisions. They solve design problems in isolation, not as a whole.
\n

TypeScript Function Syntaxes

Ever been confused writing types for a function in TypeScript? Kent C. Dodds covers every conceivable scenario in this reference-style post.

Topframe

This is weird. And cool/powerful. But mostly weird. Also shoutout to those of you who, like me, had this exact thing decades ago via Active Desktop.

\n","url":"/reading-list/12","permalink":"https://mturco.com/reading-list/12"},{"id":11,"title":"#11","description":"GitHub's use of Web Components, customization vs. configuration in design systems, and accessible fonts.","date":"2021-05-05T00:00:00.000Z","html":"

How we use Web Components at GitHub

With component frameworks being the de facto standard for modern frontend development, it's interesting (and even a bit refreshing) to hear how GitHub has doubled down on Web Components as their chosen method of componentization. While I still find the imperative nature of Web Component code far less ergonomic and readable than declarative code (e.g. JSX), it's hard to argue with their motive:

\n
We were happy to experiment with Web Components alongside our existing front-end infrastructure since it doesn’t incur any upfront cost or “buy-in” to a specific framework.
\n

GitHub seems to be making a long play having been burned by "nearly 85,000 lines of [jQuery] code". That's not to say that JSX will age like jQuery, but that having framework-agnostic components offers a lot of flexibility for the future.

Customization vs. Configuration in Evolving Design Systems

An excellent article on levels of abstraction in design systems by the engineering team at Spotify. The article compares low level component abstraction (customization) to high level abstraction (configuration). It's so good I wish I'd written it myself.

\n
When evolving a design system, there is a range of strategies you can take. A more abstract configuration approach can increase consistency and maintainability, but at the risk of the system being a bottleneck for outgoing features. The less abstract customization approach enables quicker feature development; however, overall consistency of the product can suffer as a result.
\n

Testing fonts for accessibility

Colin Shanley sheds light on a rarely discussed aspect of accessibility: font legibility. You may have heard that Comic Sans is actually easier to read for people with dyslexia. This article explains why.

career-ladders.dev

Sarah Drasner open sourced a set of career ladders that are easy to understand, describe meaningful progression and contribution, and are brief(!). I especially liked this bullet point under the description for tech lead:

\n
A tech lead gently enforces standards- culture and attitudes included. If the team has misalignment, a tech lead spends time alongside the Engineering Manager to guide them towards productivity.
\n

The Intangible Skills You Can't Interview For

I expected this to be an article about interview questions but was pleasantly surprised to find an article about under-appreciated non-technical skills in software development.

\n","url":"/reading-list/11","permalink":"https://mturco.com/reading-list/11"},{"id":10,"title":"#10","description":"Copy & paste shaming, Microsoft crowd sources a font, and 👏👏 for dark mode.","date":"2021-04-28T00:00:00.000Z","html":"

How often do people actually copy and paste from Stack Overflow? Now we know.

Stack Overflow recently collected some data (as part of an April Fool's Day joke no less) that revealed one in four visitors to Stack Overflow copies code from it. I, for one, am appalled. You wouldn't download a car, would you?

Next.js 10.2

Another Webpack 5 success story, this time from Next.js (who also announced they've snagged the creator of Webpack). Plenty of other interesting improvements as well including this clever addition:

\n
Next.js now supports Automatic Webfont Optimization when using web fonts. By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch font declarations.
\n

Beyond Calibri: Finding Microsoft’s next default font

In font news, Microsoft recently announced it's deprecating Calibri as the company's default font (which had previously replaced Times New Roman in 2007). In classic Microsoft fashion, they have commissioned the design of five(?!) new fonts and are asking for feedback on Twitter. You know, from the general public. What could go wrong?

swimlanes.io

Having previously looked into Markdown-driven flowchart tools and been disappointed, I was pleasantly surprised by swimlanes.io which seems to get a lot right: reasonable syntax, impressively good editor with instant preview, optional sign up, and the ability to directly link to an autogenerated image of the chart.

Toggle dark/light mode by clapping your hands

Charlie Gerard (engineer at Netlify) makes the where-would-I-even-begin seem actually fairly well-that-didn't-seem-too-bad in this breakdown of her Dark mode clap extension.

\n","url":"/reading-list/10","permalink":"https://mturco.com/reading-list/10"},{"id":9,"title":"#9","description":"Managementese, a guide to code quality, and the true meaning of technical debt.","date":"2021-04-23T00:00:00.000Z","html":"

Managementese

A deep dive back to 2003 and it's kind of alarming how well this piece holds up. I love this rather aggressive but nonetheless true quote:

\n
As a manager, your job is that of a bullshit umbrella. You need to decide what crap your team needs to deal with and what crap can be ignored.
\n

Wat

While we're diving deep, Gary Bernhardt's classic "Wat" talk from 2012 recently hit Hacker News again for some reason. If you haven't ever listened to it and you think you'd enjoy 4 minutes of <nonsensical code setup> followed by <wat punchline>, give it a watch.

The Software Engineer's Complete Guide to Code Quality

Good summary of the many factors that go into writing high quality code. A quote of a quote I enjoyed:

\n
As Damien Conway describes it, "documentation is a love letter that you write to your future self."
\n

The True Meaning of Technical Debt 💸

Discussion around technical debt often revolves around sloppy or hasty implementation. This article digs into another cause which results more from a communication failure than an engineering failure.

Representing SHA-256 Hashes As Avatars

If you've ever wondered how, for example, GitHub generates unique default user avatars, this is a nice walkthrough implementing a React component that generates unique geometric avatars using hashes and SVG.

\n","url":"/reading-list/9","permalink":"https://mturco.com/reading-list/9"},{"id":8,"title":"#8","description":"Tailwind adds support for React & Vue, exploring alternatives to NPM scripts, and people skills.","date":"2021-04-14T00:00:00.000Z","html":"

Building React + Vue support for Tailwind UI

This is a fantastic read for any frontend engineer. It simultaneously hits on many relevant and important topics (building custom component libraries, the idea of "headless" components, appropriate abstraction) while also being centered around around an increasingly popular web development tool in Tailwind.

Why I Prefer Makefiles Over package.json Scripts

John Ruble makes a keen observation: when all you have is a ~~hammer~~ package.json file, everything looks like a ~~nail~~ NPM script.

\n
As you pile more complexity into your NPM scripts, it never feels like you're the one placing the straw that breaks the camel's back. But please, take a step back, look at your poor camel, and consider using another tool.
\n

Document Your Project’s package.json File

In any JS/TS project, the package.json file contains an enormous amount of information. But because it's JSON, there's no documentation. This post explores what in package.json to document and where to document it.

People Skills

Nicholas Zakas writes about relationship building skills being the key to reaching later stage promotions in this month's Human Who Codes newsletter:

\n
"At a certain point in your career, you'll stop being judged so much on your technical work, and you'll start being judged on how you work with people." These wise words from my manager at Yahoo over ten years ago were the key piece of advice that changed my career. Prior to that, I had assumed that the way to get ahead as a software engineer was to, you know, be awesome at writing software. I had never put much weight on my relationships and how they might affect my career. The technical skills get your foot in the door and get you your first promotion, but it's the people skills that allow you to progress after that point.
\n
\n
Continue reading
People skills are sometimes called "soft skills," though that really is a bit of a misnomer. There's nothing soft about working on relationships or looking for ways to resolve conflict and disagreements. In fact, I often tell my clients that the easy part of software engineering is the code, it's the people that are the hard part. Code isn't up all night because the baby was sick; code isn't in a bad mood because they got into a fight with their spouse; code isn't remembering something you said that upset them three months ago. People are always a wild card in any business, but in software engineering, where so many of us tend towards introversion, it becomes even more important to spend time on building and maintaining relationships.
\n
I remember one specific instance where this stuck out to me: I had stayed late to work on something and a colleague instant messaged me to ask for help on something. This was a colleague that I had had numerous unpleasant interactions with in the past few months. Upon continuing the conversation, I discovered that what they were "working on" was actually a side project, and I got angry. I didn't want to spend my work time helping on a side project. But I calmed down and decided that this would be a good way to build some rapport. By the end of the conversation, I had learned more about my colleague than I had in the past six months. We connected on a human level and talked about relationships and troubles and all kinds of things that were non-work related. The result? I never had another negative interaction with them again. In fact, I became the person they would confide in when they had a negative interaction with someone else.
\n
This isn't to say that you need to be best friends with everyone you work with. That's not humanly possible and way too much to ask. However, paying attention to the relationships you have with your colleagues, working through disagreements constructively, communicating effectively, and helping to get everyone on the same page are all key skills that you will need to have a long and successful career in software engineering.
\n
Think about the amount of time you spend learning new technical skills. Now think about how much time you've spent learning how to interact with people better. If there's a disparity, you may want to consider switching things up. Part of why I share the random books that I read in this newsletter is because a lot of them help me to understand and interact with other people better, and I hope that my recommendations will also help you do the same.
\n

Embrace the Grind

Jacob Kaplan-Moss (co-creator of Django) on a non-secret to success: sometimes there's enormous opportunity in just being willing to do tedious work that no one else is.

Gitlet.js

Mary Rose Cook (an engineer at Airtable) explains how Git works using a 1000-line simplified implementation of Git written in JavaScript.

\n","url":"/reading-list/8","permalink":"https://mturco.com/reading-list/8"},{"id":7,"title":"#7","description":"Bad a11y, good a11y, and why font-size is useless.","date":"2021-04-01T00:00:00.000Z","html":"

Substack's UI and 1Password just cost me $2,023

Cautionary tale about display logic, hidden inputs, and autofill. Plenty of useful takeaways but two obvious ones: 1) the name you give inputs very much matters and 2) don't get cute with form design.

\n\n

Someone I follow on Twitter called attention to the awesome accessibility menu in the bottom right corner of every page on Fool.com. Play with some of these options—it's awesome how configurable they've made their site in the name of inclusive usability.

Practical lessons from a year of building web components

A fantastic talk from Google I/O 2016. It's specifically about writing Web Components and yet it's one of the best talks I think I've ever listened to about general topics like component API design, versioning, documentation, testing, and performance.

Font size is useless; let’s fix it

Super interesting blog post from the creator of Fira Code (you can probably list my Twitter follows by now) on why the CSS concept of font-size is extremely flawed. I'm still waiting for the "let's fix it" part of the post 😅 but it's still very interesting.

SVG Generators

Smashing Magazine is apparently on a tear lately. Last week was CSS generators and a component accessibility guide. This week is SVG generators. 🔥 Lots of cool stuff in here but my favorite is this SVG favicon tool.

\n","url":"/reading-list/7","permalink":"https://mturco.com/reading-list/7"},{"id":6,"title":"#6","description":"When to interrupt someone, how emoji are language innovation, and a guide to accessible components.","date":"2021-03-24T00:00:00.000Z","html":"

When Should I Interrupt Someone?

Great article on when to ask for help which offers 2 simple but good pieces of advice. Here's the first:

\n
If you’re stuck for over an hour, seek help.
\n
This beautifully simple rule works very well in most contexts. It stops people sitting on blockages for days, and stops them from jumping out of their seat early in a panic.
\n

Compat2021: Eliminating five top compatibility pain points on the web

A new initiative led by the Google Chrome team to shore up browser support for some of the major pain points felt by web developers in 2021.

Emoji are the biggest innovation in human communication since the invention of the letter 🅰️

This epic 57-tweet thread by Niki Tonsky (creator of Fira Code typeface) goes super in-depth on how emoji (and thus Unicode) works. (Pro-tip: use a thread reader.) Among other things, he explains how/why this works in JS:

[...'👨‍👨‍👧‍👧'] → ["👨", "‍", "👨", "‍", "👧", "‍", "👧"]

What speed shall I go to make my day longer?

A silly question made interesting by how seriously it was answered.

CSS Generators

Some useful tools for generating CSS for things that are difficult to grasp purely by messing with numbers (realistic shadows, custom animation easings, etc).

A Complete Guide To Accessible Front-End Components

Really nice collection of accessibility information grouped by type of component. This seems like it could be useful if your job entails creating design system components. 👀

\n","url":"/reading-list/6","permalink":"https://mturco.com/reading-list/6"},{"id":5,"title":"#5","description":"Avoiding procrastination, encapsulating React hook code, and engineering management mistakes.","date":"2021-03-18T00:00:00.000Z","html":"

How to be more productive without forcing yourself

This article is super pragmatic and widely applicable which is why I listed it first. I found it surprisingly relatable and useful.

useEncapsulation — Why Your React Components Should Only Use Custom Hooks

I clicked on this link expecting to 🙄 but I was pleasantly surprised. In fact, I think I'm fairly convinced by it. It has definitely changed how I think about organizing code within a component function.

Mistakes I’ve Made as an Engineering Manager

Most of us are probably not in the target audience for this article but I still found it interesting. It helps illustrate how difficult good management is and, in a sort of reverse way, gives some ideas for how to facilitate it as an IC.

Charts.css

Two disclaimers: this is not the first CSS-only chart library (by a long shot) and I'm not necessarily convinced the way it works is a good idea. 😅 But it is very clever and requires little code to build nice looking charts.

Sorted CSS Colors

If you've ever browsed the list of CSS color names (say while working on a side project), you probably found it to be an impossible way to pick a color. This page interactively organizes CSS color names by hue and shade making it actually conceivable to find and use a color you like. Plus it's just kind of cool looking. 🙂

\n","url":"/reading-list/5","permalink":"https://mturco.com/reading-list/5"},{"id":4,"title":"#4","description":"Taking breaks, mindset to avoid as a senior engineer, and React Server Components.","date":"2021-03-03T00:00:00.000Z","html":"

Taking Breaks

\n
As we are all struggling to maintain focus going into a second year of social distancing and working from home, it might be time to look at how you work and make some adjustments. Especially if you regularly feel burnt-out, overworked, or otherwise stressed about your job, taking a few breaks during the day can do wonders for your emotional state and your productivity.
\n

The 3 Mindsets to Avoid as a Senior Software Developer

\n
Therefore, much of what we’ve learned and where we are today isn’t a result of our self-meditation on a mountain. Instead, it’s an accumulated assimilation of the knowledge and experience others have shared with us, either directly or indirectly.
\n
We should always be grateful.
\n

React Server Components

Around the end of last year, the React team quietly shared a preview of an upcoming feature they're calling Server Components, which appears to be React-provided tooling for server side rendering at the component level.

\n","url":"/reading-list/4","permalink":"https://mturco.com/reading-list/4"},{"id":3,"title":"#3","description":"Futuristic web development, video call fatigue, and the talent myth.","date":"2021-02-23T00:00:00.000Z","html":"

Rich Harris on "Futuristic Web Development"

Rich Harris (creator of Rollup and Svelte) previews a new app framework called SvelteKit which uses the Svelte component framework under the hood (it's basically what Next.js is to React). The most notable feature of this upcoming framework is that it uses Snowpack (the anti-Webpack) in development mode to maintain instantaneous startup and HMR times regardless of app size. Give it a watch, it's very interesting and impressive. (Disclaimer: not super new—from October—but it was new to me.)

GitHub1s

Cool project that opens VS Code (in the browser) to any GitHub repository. Just change the domain from github.com to github1s.com. For example: github1s.com/namely/eslint-config-namely

"Why are video calls so tiring? You might have opposing cultural styles"

\n
Interrupting someone before they are done talking can be seen as impossibly rude, as can not stopping when you’ve finished a thought. This is wait culture. Other people will talk until someone else interrupts them to respond—this is not only ok, it’s expected! [...] This is interrupt culture. As you might guess, these two conversation styles can come to frustrating clashes, especially in video calls.
\n

"Talent is largely a myth"

\n
With the amount of conversations, conference talks and hype going on around talent, you would expect people will have an answer to the question “what is talent?”. You’d expect, and you’d be wrong: “it’s like porn, you know it when you see it” is the answer I usually get.
\n

\n","url":"/reading-list/3","permalink":"https://mturco.com/reading-list/3"},{"id":2,"title":"#2","description":"Second languages, design docs at Google, emoji cursors, and the Documentation System.","date":"2021-02-05T00:00:00.000Z","html":"

On "Second Languages"

An excerpt from the Human Who Codes newsletter on how learning new programming languages can give you a better/deeper understanding of ones you already know.

Design Docs at Google

An excellent read on what to focus on (and more importantly not focus on) when writing design docs. I was somewhat anti design doc until I read this a few years ago.

On coffee break moments in a remote world

Twitter thread with interesting ideas on how to create more natural social interactions in a remote work setting. I like the TLDR provided: 1) create structure and 2) provide permission.

Some light-hearted Friday fun

EmojiCursor.app
NES.css

The Documentation System

Some really good documentation on... documentation. 📖 on 📖 on 📖

\n
There is a secret that needs to be understood in order to write good software documentation: there isn’t one thing called documentation, there are four.
\n
They are: tutorials, how-to guides, technical reference and explanation. They represent four different purposes or functions, and require four different approaches to their creation. Understanding the implications of this will help improve most documentation - often immensely.
\n

\n","url":"/reading-list/2","permalink":"https://mturco.com/reading-list/2"},{"id":1,"title":"#1","description":"Diving into new codebases, drawing art for bots, and implementation intentions.","date":"2021-01-25T00:00:00.000Z","html":"

new codebase, who dis? (How to Join a Team and Learn a Codebase)

Great advice for diving into a new codebase. I liked this bit in particular:

\n
The rule of thumb I use is to understand something just enough to express what it does without necessarily knowing exactly how it does that. This process is called "chunking," and it relies on the fact that once you have a basic understanding of a unit of code, "you don't need to remember all the little underlying details" (Oakley).
\n

paint.wtf

The site's slogan says it all:

\n
Convince an AI that you're the best artist
\n

Build a Hugo static site in your browser using GitHub Codespaces

This guy built/deployed a static site without leaving the browser using a combination of GitHub Codespaces and Netlify.

Implementation Intentions

If you can get past the extremely click-baity nature of the intro (and title which was so bad that I used the slug to avoid repeating it here lol), there's actually an interesting article underneath on how motivation has very little effect on achieving goals.

\n
The researchers discovered that what pulls that desire out of you and turns it into real–world action isn't your level of motivation, but rather your plan for implementation.
\n

\n","url":"/reading-list/1","permalink":"https://mturco.com/reading-list/1"}]}

Pages

Recent Posts

#23 / Aug 16, 2021