notated.org notes on learning, design, tools, & life

An Interactive Guide to CSS Transitions

Josh W. Comeau delivers what it says on the tin:

This tutorial is meant to be accessible to developers of all experience levels. It can be thought of as “CSS transitions 101”. That said, I’ve sprinkled in some interesting and obscure tidbits — no matter your experience level, I bet you’ll learn something!

I am a total sucker for this kind of thing.

Oreos and the Art of Crossword Puzzle Construction

Nice shallow-to-deep dive into crossword puzzles from Russell Goldberg in The Pudding:

“Cookie that some people eat with mustard.” Before 2020 got crazy, this little clue from a USA Today crossword puzzle captivated a nation.

Have fun.

When you’re ready for something more sobering, and haven’t had your fill of crossword puzzle analysis, Michelle McGhee has an awesome breakdown of how inclusive various crossword puzzles are, Who’s in the Crossword?:

The New York Times crossword has been criticized for being too old, too white, and too male. They publish more puzzles by men than by women, their clues can be a bit outdated (and even offensive), and a few editors at the top can use their power to maintain the status quo.

As a puzzle lover, I wanted to better understand who is being referenced in crossword puzzles — an unexplored piece of this puzzle. I teamed up with The Pudding to see if the people in crossword clues and answers represent the people who could be solving them. To measure this, we looked specifically at clues and answers that include the names of real people.

Love it.

Do, pair, share

One of my favorite activities to use in class is a short sequence of “do, pair, share.” Some teacher friends introduced me to the idea, and you can find some version of it anywhere teachers congregate, often going by the name “think, pair, share” or “write, pair, share.”1

I first started using this approach in my design classes in 2015. I was skeptical at first. I had tried a couple of strategies before, recommended to me by teachers who were used to working with kids—like cold calling, and keeping a visible timer on the projector—and these seemed condescending to adult learners. I had the same doubt about “do, pair, share,” and I felt uncomfortable the first several times I tried it. But—I could almost immediately see the benefits, and it motivated me to practice and improve my approach.

Now I use it all the time. It’s the first thing I reach for when I have a doubt about what students understand, or when I want to get everyone participating in a brainstorm. I also find it helpful in meetings, workshops, and retrospectives—it’s a flexible tool. Try it with anything that participants could spend a few minutes doing independently, and get the ideas flowing.

Summary

What
Participants perform a short task alone, then compare with a partner, and finally share with the whole group.
Why
To get everyone involved in a discussion; to discover the current level of understanding of the whole group.
Materials Needed
Writing and drawing tools, plus any materials needed for the task
Difficulty
Easy
Time Required
10–20 minutes

How to do it

Steps Suggested time
Give participants the short activity or question you’d like them to answer, with a time limit for how long they have to work alone. 1–2 minutes
As participants complete the activity, observe what they are writing or drawing to see how everyone is doing. 2–5 minutes
When time is up, ask participants to get together with a partner to discuss what they did and compare notes. 1 minute
Again, observe each pair as they discuss to check how they are doing. 2–5 minutes
Ask for volunteers or call on pairs to share what they came up with with the whole group. 5–10 minutes

Example use

At the beginning of a lesson on planning user interviews, I like to give students a prompt such as, “Imagine that you will be doing research to learn more about people’s movie and series watching habits. Take 2 minutes to write down at least 3 different things you’d be curious to find out.” After the activity, as partners share their questions, I can collect these on a shared board, to use as a starting point for the next part of the lesson.

Considerations for use

Considerations for use in person

Considerations for use in remote

Additional resources

  1. I prefer “do” to “write” or “think”. Thinking is an active process, but as a facilitator, it’s difficult to observe people thinking. Asking participants to write down ideas or explain something in their own words is a great use of this technique, but I find it equally useful to ask people to draw, diagram, pseudo-code, construct… You get the idea. So the generic “do” it is. 

Migraines Are a Serious Problem. Employers Can Help.

I worked most of the day today through the fog of a migraine, so this piece from Olivia Begasse de Dhaem for HBR seemed timely:

While many people think of migraine attacks as little more than bad headaches, migraine is in fact a chronic condition whose symptoms can be far more debilitating than an ordinary headache. Migraine attacks are often accompanied by intense pain, difficulty thinking, changes in vision, dizziness, nausea, and increased sensitivity to light, noise, and smells. Furthermore, research has shown that migraine is among the most disabling disorders in terms of its long-term impact on quality of life, and it is extremely prevalent: 47 million Americans and over a billion people worldwide suffer from migraine, with attacks peaking during the most productive professional years (25-55 years old).

This pair of statistics stood out to me:

While recent research is limited, studies from the last two decades found that productivity lost due to migraine costs U.S. employers at least $13 billion and European employers €27 billion every year — and these costs have likely only increased in the years since the studies were conducted.

Are U.S. workers suffering less migraines? Is this a reflection of differences in work-life balance between Europe and the U.S.?

Teachers are afraid of hybrid learning

Interesting take from Michael Pershan:

These forms of “hybrid” or “simultaneous” or “concurrent” teaching all suck, and they are all more or less frustrating, and they are certainly asking teachers to do a great deal more work. And as such, they are completely valid concerns for teachers to raise about returning to school, whether or not they have been vaccinated. 

Speaking personally on this is tricky for me. I currently teach at a relatively wealthy private school where class sizes are in the teens, not the twenties or (god help me) thirties. I have been going in in-person since the start of the year. (Biking from Washington Heights to Brooklyn earlier, now that I’m vaccinated I’ve been back on the subway.) The school schedule at my place is fairly complicated, but because of parents keeping their kids home I’ve been teaching simultaneously online and in-person. 

And it’s very hard but here’s what I’ll say — I only feel dumb about it when very few kids are at school. When most kids are in the classroom and a few are online, well, it’s not more effective for the kids who are online. But at least I feel like my presence at school is worthwhile. I can more easily help kids with things, I can keep an eye on everyone, and more important it feels like there’s a real social environment. Yeah, it’s really hard for the kids who are online and it’s even harder to pay attention to them. 

I think this distinction is maybe missed on people? Hybrid with a few kids in-person is really, really hard. Hybrid with a few kids online is manageable. 

I know of lots of teachers who are facing situations where three or four kids are coming into their physical classroom while they have many more students Zooming in online. That’s a recipe for frustration. That feels like you might as well have everyone stay at home, since you’re basically teaching online anyway — but you also have to watch these kids. (Especially elementary school teachers, since you’re really supposed to be in charge of these kids but you can’t! It can feel like impossible babysitting while also doing your job.)

I’m working with adults, and so far since our campus partially reopened to students in Barcelona, I have advocated for, and stuck to, teaching “hybrid” classes from home. I’m not vaccinated, and while I’m a teacher, since I don’t work with children I don’t expect any kind of similar priority that most teachers should have in the vaccine line. I stay home in part to reduce unnecessary risk of contributing to any spread on campus.

However, the more important reason to me, is that I don’t want to put any pressure on students working with me to go to campus if they don’t feel comfortable or secure in doing so. I also don’t want to create a situation where remote students become somehow secondary to on-campus students, because not all students have the option to go to campus. Some are in fact not currently located in Barcelona, including my wonderful TA.

Pershan’s thoughts make me wonder if in the near future I might consider as an experiment to try going to campus when more students (but not yet all) are able to, to see whether it is as manageable for me and my community as it seems to be in his context. I certainly do miss aspects of the social learning environment that is more readily available in a physical classroom setting, as well as all the passive information I’m accustomed to gathering about how students are making progress.

Let’s see what the next months bring.

Byrne’s Euclid

Nicholas Rougeux has put together a lovingly crafted interpretation of Euclid’s Elements by Oliver Byrne from 1847. Beautiful work.

See also A Brief Visual Exploration of A Dictionary of Typography based on John Southward’s A Dictionary of Typography and its Accessory Arts and Werner’s Nomenclature of Colours based on the work of German mineralogist Abraham Werner.

How have I missed these until now?

Progressive Enhancement reading list 2021

Peter-Paul Koch:

In March I am going to teach the Progressive Enhancement course of the Web minor at university for the third time. I decided to expand the reading list for this course, and here I present the version I’m going to use in 2021.

Many promising resources in this list, and I’m encouraged to see that he expands beyond the scope of web development into the world of enhancement from a broader user experience perspective.

Worth the price of admission alone: For years I’ve made reference to the “Hierarchy of User Needs”, and until now, did not know to credit Aarron Walter!

Computer Feedback That Helps Kids Learn About Math and About Themselves

Dan Meyer discuss various approaches to giving learners feedback on their answers. He suggests showing learners more about what their wrong answers might mean, to keep them thinking.

Atkinson Hyperlegible Font

Speaking of literacy, I love the design of this “hyperlegible” typeface from the Braille Institute.

What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability. We are making it free for anyone to use!

The attention to differentiating the uppercase “B” from the numeral “8” is really striking.

Designing for illiteracy

Last July, Lena Alfter gave a talk “Typografie für besseres Lesenlernen” at Creative Mornings Berlin about designing for illiteracy.

As part of her master’s thesis, Lena Alfter found that people with reading difficulties don’t need special fonts in their learning materials, but better typographic design.1

Sebastian Greger has helpfully provided notes in English about the talk:

With everybody under 16 in Germany legally obliged to attend school, it can be hard to grasp that 6 million people (12% of the adult population) are functional analphabets and over 16 million (almost 1/3 of adults) have at least some kind of deficit dealing with written text.

So, designing inclusively is not about “edge cases”, as it is often reduced to by ableist thinking. And the impact on social participation, not least on the functioning of a democracy, is massive.

Lena illustrated well how analphabets’ manifold coping strategies contribute to hiding this fact in daily life; some even manage to get a high school degree without ever acquiring full literacy.

  1. Translated from the original German: “Im Rahmen ihrer Masterarbeit hat Lena Alfter herausgefunden, dass die Unterrichtsmaterialien für Menschen mit Leseschwäche keine speziellen Schriften brauchen, sondern eine bessere typografische Gestaltung.” 

What is Good Teaching?

Kristina Rizga, in a profile of Renee Moore, English teacher at Mississippi Delta Community College:

By the end of the year-long project, Moore concluded that being a good teacher doesn’t come from following a rigid list of the most popular evidence-based tools and strategies; it comes from a teacher’s commitment to knowing and respecting students and their families.

A lot of this resonates with me, especially this:

Moore remembers that when the No Child Left Behind Act was enacted in 2002, the teachers at her school received letters from superintendents asking them to stop assigning presentations and research papers to English seniors—and to use that time instead to prepare students for tests. Once, an outside consultant arrived, armed with a large binder that included a curriculum and step-by-step instructions on how to teach it. “The materials were neither culturally appropriate nor intellectually challenging enough for our students,” Moore told me. “I used the book to prop up the aging air-conditioner unit in my room. When our test scores went up, the consultants took credit for it.”

π ≈

Christian Lawson-Perfect explains himself:

Why?

  • I can never remember π past 3.14159…, and typing “digits of pi” into Google doesn’t always lead you straight to a usable listing, so I wanted a place I could go to to easily get at least the first few hundred digits.
  • Ever since I discovered it, I’ve wanted to write an implementation of an unbounded spigot algorithm for π.
  • I enjoy buying novelty domain names.
  • It was a fun thing to do for π day.

I’m a total sucker for this kind of thing.

The Deep Sea

Lovely work by Neal Agarwal, using a long scroll to the bottom of the sea to inform and delight.

Neal has some more fun projects at the aptly-named Neal.fun.

Spelling Bee

These word puzzles from The New York Times have been running for a while, but I’ve really been getting into them lately. I enjoy the simplicity of the concept, and it’s just as fun to play on my phone as on my laptop.

A Third Grader’s Guide to the Impeachment Hearings

History textbooks should be written this way.

Evolution of the Scrollbar

Sébastien Matos has recreated scrollbars from the Xerox Star in 1981 through Windows 10 in 2015.

The World-Wide Work.

An astonishing talk by Ethan Marcotte. At first I wasn’t really sure where he was going with his examples and stories, but his call to organize and his reflection that there are signs of hope already really got me in the end. I have hope because I know there are more talented, motivated, compassionate people out there like Ethan who believe in the ideals that the web is supposed to help us all collectively work toward. There are more of us than of the cynical and broken folks who are currently in power and benefit the most from the corruption of the web.

Thank you Ethan.

Charlie Owen on React

Charlie Owen at her best:

If React was used as one of many technologies, purely for non-critical user journeys, augmenting server-side rendered markup, then I don’t think most of the issues we have seen of late would arise.

There’s a lot of provocative stuff in here, but these points especially got me:

  • These new devs were heavily trained by a combo of corporate-sponsored online materials, blog posts, video courses, and by the formation of bootcamps.
  • The Web That Was, a place of chaos and malleability, was suddenly seen as an impediment to this process of training sacrificial developers, as it required acknowledgement of variety and empathy with the infinity of technology and human combinations.
  • The Web That Was was seen as needing a lot more artisanal work.
  • Big Corporates twirled their non-existent mustaches and realized that it’s easier to train people to use to work on a factory production line, learning a set of APIs, than it is to train them to see the Web as a precious resource that is inherently chaotic in nature.
  • BTW, I’m not blaming developers in all this - under Capitalism you always need to follow the money, and web development suddenly became a well-paying career. It was always going to happen.

I’ve been working adjacent to web development bootcamps for the past several years and have watched as the classes next door have moved from Ruby on Rails (server-side rendered) to primarily React-focused. I remember the first time I had a conversation with one of the web development instructors on the way into work and discovered that he had never even heard the words “progressive enhancement” used together.

Charlie’s definitely right that although it is possible to use tools like React in server-rendered ways, that’s certainly not what’s being taught to students in the bootcamp settings that I’ve seen. And it doesn’t seem to be where so much of this loud vocal energy in a certain part of the community online is either.

I’m trying to remain patient while the pendulum finds its way back, but this time really does seem to be taking longer than I’m used to this cycle running for. And honestly, the last time I felt this way about a technology overstaying its welcome, was 2008–2017 when I was convinced that Facebook couldn’t possibly continue to be so popular and widespread for so long.

A Short Guide to Building Your Team’s Critical Thinking Skills

Matt Plummer writing for Harvard Business Review:

Here is how to assess the critical thinking skills of each of your team members, how to help those who are struggling, and how to know when a team member has mastered one phase and is ready for the next.

I like how his breakdown echoes the scaffolding in Bloom’s Taxonomy: “ the ability to execute, synthesize, recommend, and generate.”

I imagine these development stages would also be a good framework to reflect independently on your own skills.

Reactive User Interfaces Syllabus

Rune Madsen has done a great job of making his design courses available for others to peruse and take inspiration from, which feels like living up to the original purpose of the web. The whole thing is available on github.