Hi there,

Thanks again for signing up. It’s been a wild year, huh? For those of you also in Australia, I hope lockdown restrictions ease and borders open soon. Wherever you are, I hope you’re keeping safe.

Warm wishes,
Di

Design

Design links

How to make your blog images stand out & reflect your identity by Stéphanie Walter. This is a seriously impressive collection of resources, tactics, and advice for any visual element you’d like to add anywhere, not just blogs. Dive in!

Removing Nested Modals From Digital Products by Joseph Mueller. I whole-heartedly agree on striving for fewer modals. I have a whole section on modals as a design smell in my book, Practical UI Patterns for Design Systems. Most modals can be designed away; especially any modals that your site’s visitor did not open themselves. This article concentrates purely on nested modals and offers practical options for reducing at least that particular mistake.

Why We Crave Software With Style Over “Branding” by Molly Mielke. An intriguing article that gave me plenty of food for thought about being specific and opinionated, and the nature of identity:

The crypto industry is now an obvious example of how style, identity, and community can come together. But it also pulls heavily from proven stylistic hype patterns from the art and fashion industries — namely auctions and “drops” to generate momentum and create scarcity or early adopter appeal. Once you’re a part of the crypto community, everything from your choice of crypto wallet to which cryptopunk you might decide to purchase is tied to identity.

Steno

Personal dictionaries in Typey Type

Here’s a secret URL to add your own dictionaries to use in Typey Type! https://didoesdigital.com/typey-type/dictionaries/management

It’s experimental but you can add your dictionaries and see your entries appear in Lookup! This lets you look up your briefs on your phone when you’re away from your computer, and shows your dictionary entries when building custom lessons.

You can also opt into the bleeding-edge experiment to “Show your dictionary entries in lesson hints”. This means for standard Typey Type lessons, you’ll see your own dictionary strokes if you have an entry for a word, and Typey Type’s entry if you do not.

Typey Type will also try to use your entries for capitalisation and spacing. For the existing entry, “KPAOEPB/KWRA”: “Xena”, you can use “xena” in your custom lesson and if you have custom entries for capitalisation, such as “TPHRO*ER”: “{>}”, Typey Type will use them to create hints like TPHRO*ER/KPAOEPB/KWRA. It’ll also try to be smart about punctuation, numbers, and fingerspelling entries.

This has been a long time in the making, a highly sought after feature, and I’ve had to overhaul huge parts of Typey Type to make it possible, so I’m very excited to start sharing this with more people!

There’s more work to be done but if you have feedback, I’d love to hear it!

Typey Type

Books, Links, and News

Book review

Fullstack Data Visualization with D3 by Amelia Wattenberger

This is an excellent book. It’s comprehensive, informative, guiding, and practical. It covers topics that are hard to find answers for on the Internet, such as D3 in React, or even any basic guide for how to build a full, production-ready chart with D3. It includes definitions for concepts that aren’t really explained anywhere in the D3 docs, but are just kind of implied, such as explaining that “accessor functions convert a single data point into the metric value.”

In the book, Amelia Wattenberger teaches fundamental aspects of SVG, CSS, HTML, JavaScript, ES6, and browser behaviour as she goes, and often links to more reading. Honestly, it’d be a great read for anyone that just wants to level up their web skills. Learning D3 has definitely improved my ability to wield objects and array methods, and this book goes deep on loads of details. If you don’t know any SVG, this is a great way to learn.

I appreciate that she covers real-world production quality aspects, including responsive design, accessibility, missing data, browser compatibility, edge cases, repeatable processes, finer design details, loading and error states, performance, and more. She also covers complex topics, such as maps, voronoi tooltips, dashboards, and animated sankey diagrams.

The book also touches on common shorthand and alternative styles or approaches, which means you’ll be able to make sense of any variations you find online. For example: “we can use yAccessor() as shorthand for d => yAccessor(d)”. It’s great to see discussion of trade-offs like when to use CSS or JavaScript for styling elements, when to use D3 event listeners, or when to use attributes, inline styles, or class names. She shows you how to use .call() to let you continue chaining methods and keep your code succinct.

If there’s just one thing missing from this book on my wish list, it’s a chapter on using D3 with Typescript in React. The React chapter doesn’t include types and I won’t be learning Angular just to read the Angular chapter that does include types.

Admittedly, the book is wildly expensive compared to most tech books. I only have it (and the course) because a friend gifted me a contribution to a creator I support so I chose Amelia Wattenberger. While there are many rave reviews about the book I found little commentary on the pricing so I want to address that directly. It’s worth it. It’s much more efficient to learn from this book than scrounging the Internet for the information (as I did) and more valuable than most work-sponsored training.

Overall, I’d highly recommend this book to anyone building on the web. It will stretch your knowledge of fundamentals, teach you data essentials useful in a data-rich world, and gives you the power to visualise complex topics.

Development

React data visualisation libraries

Data visualisation is a complex space so using a charting library or a data visualisation toolkit can save you heaps of time. If you’re working with React, however, integrating some of the most popular choices can be challenging. Today I wanted to share my initial evaluation of some React-specific data viz libraries.

For a good starting point of what’s available, I recommend this video from the Outlier conference: Krist Wongsuphasawat—Outlier 2021—Navigating the Wide World of Data Visualization Libraries

For choosing a React data viz library, here are some of my considerations:

• React-specific. This rules out Ant, D3, Chart.js, Plotly, and many others.
• Design flexibility to use with your own brand and styling.
• Well maintained. This rules out Uber’s react-vis, several React D3 libraries, and React Google Charts.
• Affordable for commercial use. If there’s no need for loads of bells and whistles, you can skip Highcharts and focus on free options.
• Comprehensive. At a minimum, I’d suggest a visualisation library should let you build a line chart, bar chart, and donut chart.
• Fitting in with css-in-js frameworks as needed.

The top 3 libraries I’d suggest that meet most of these requirements are, in order:

1. Victory
2. Nivo
3. Visx

The D3 developer in me wants to love Visx, because it’s essentially D3 for React, but it’s young, buggy, and not well documented. It seems like there are some versioning/bundling issues, and it looks like generally slow times from approved MR to published packages. Given more time, the Airbnb team might resolve these issues and Visx might take the lead.

Nivo is a close second. It has nice animations built in, but it’s escape hatches and styling flexibility aren’t good as good as Victory’s. It also appears to have a few more bugs and a couple omissions in its documentation.

Victory is my preferred choice. It is mature, stable, and well documented. It’s biggest drawback is that it uses lodash, which can add a lot to your app’s bundle size if you’re not already using lodash. Aside from that, it has loads of examples, real-world advice in its docs, and is super flexible. To give you an idea of its flexibility, check out Victor’s custom charts documentation.

Shout out to Semiotic. It’s good but not as well maintained as the other options.

Hope this is useful!

Winning

Winning at language

• What happened when I stopped using Emojis by Clo S
• SteveMCarroll’s Pronouncing Names For English Speakers: A practical guide to how to pronounce non-English names for English speakers
• alex - catch insensitive, inconsiderate writing