Melanie Richards Blogging about the web platform, design, and web development. https://melanie-richards.com/ Melanie Richards mr@melanie-richards.com Learning Log, Feb & Mar 2026 2026-04-02T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2603/ <p>I returned to work from my parental leave in mid-February, hence the lack of a Feb Learning Log. AI seems to be rewriting the game on the weekly, which has been an interesting environment to come back to.</p> <p>I was predictably nervous about adjusting back to working life as a first-time parent, but actually we’ve adjusted pretty quickly as a family (<code>*knock on wood*</code>). Our girl is so chill and happy and gives us so much joy; I love to hear her little babbles in the morning.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-baby-toes-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-baby-toes-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-baby-toes-s.webp" alt="A white-presenting baby's bare little feet cozied up in a knitted blanket with a black, red, green, and white design" /> </picture><figcaption>The unbearable cuteness of tiny toes</figcaption></figure> <h2 id="%E2%9C%8D-blog-posts">✍ Blog posts</h2> <p>Manuel interviewed me for <a href="https://manuelmoreale.com/interview/melanie-richards">People &amp; Blogs</a>! I will always be happy to push the idea of blogging.</p> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <p>Finished a couple projects:</p> <ul> <li>I sewed two toy storage cubes for my daughter. They fit into IKEA Eket blocks. One has apple-patterned fabric, and the other eggs!</li> <li>I knitted a simple hat, of course finishing this beanie on the first weekend in spring.</li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <ul> <li>Celebrate our three-year anniversary</li> <li>Watched the Super Bowl, Olympics, and a Kraken game (from home)</li> <li>Showed baby S her first snow! In March! ❄</li> <li>Just a week later she experienced her first sakura in full bloom 🌸</li> <li>Made matcha mochi (technically <a href="https://www.mochimommy.com/easy-homemade-mochi/">chi chi dango</a>)</li> </ul> <h2 id="%F0%9F%8C%B1-digital-gardening">🌱 Digital gardening</h2> <h3 id="this-site">This site</h3> <p>Removed Webmentions from site, including:</p> <ul> <li>Actual fetching and caching of webmentions</li> <li>Display and styling</li> <li>Plugin for filtering deploys based on Webhook body</li> </ul> <h3 id="other-sites">Other sites</h3> <ul> <li><a href="https://bucketlist.melanie-richards.com/">Bucketlist</a>: updated bucketlist items for the first time in awhile</li> <li><a href="https://analog.melanie-richards.com/journals/daily-journal">Analog</a>: updated my main journal to reflect that I’ve migrated from a Sterling Ink B6 journal to a Hobonichi Techo (A6).</li> </ul> <h2 id="%F0%9F%9B%9C-on-the-internet">🛜 On the internet</h2> <ul> <li><a href="https://youtu.be/amV1EHguZKI?si=LHvLznDDof5okX7p">Snorkeling With Giant Tadpoles in a Tiny Spring</a></li> <li>Lynn Fisher does it again: <a href="https://concerts.lynnandtonic.com/">concerts archive</a> (via Ethan Marcotte)</li> <li><a href="https://kaomojicool.club/">Kamoji Cool Club</a> (via Eric Bailey)</li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://www.producttalk.org/stakeholder-management/">Stakeholder Management for Product Teams: Show Your Work, Don't Sell Your Conclusions</a></li> <li><a href="https://creatoreconomy.so/p/12-rules-to-vibe-code-without-frustration">12 Rules to Vibe Code Without Frustration</a></li> </ul> <h3 id="accessibility">Accessibility</h3> <ul> <li><a href="https://adrianroselli.com/2026/01/brief-note-on-application-keyboard-shortcuts.html">Brief Note on Application Keyboard Shortcuts</a></li> <li><a href="https://adrianroselli.com/2026/01/barriers-from-links-with-aria.html">Barriers From Links With ARIA</a></li> <li><a href="https://adrianroselli.com/2026/02/you-know-what-just-dont-split-words-into-letters.html">You Know What? Just Don’t Split Words Into Letters</a></li> <li><a href="https://webaim.org/blog/a-new-path/">A New Path for Digital Accessibility?</a></li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.wired.com/story/ai-supremacy-data-center-expansion-arctic-circle/">The Data Centers Have Arrived at the Edge of the Arctic Circle</a></li> <li><a href="https://www.wired.com/story/grammarly-is-facing-a-class-action-lawsuit-over-its-ai-expert-review-feature/">Grammarly Is Facing a Class Action Lawsuit Over Its AI ‘Expert Review’ Feature</a></li> <li><a href="http://rachelandrew.co.uk/archives/2026/03/24/do-you-need-ai-for-that/">Do You Need AI for That?</a></li> <li><a href="https://creatoreconomy.so/p/12-rules-to-vibe-code-without-frustration">12 Rules to Vibe Code Without Frustration</a></li> <li><a href="https://www.wired.com/story/senators-demand-to-know-how-much-energy-data-centers-use/">Senators Demand to Know How Much Energy Data Centers Use</a></li> <li><a href="http://larahogan.github.io/blog/ai-aha-team-meetings/">AI 'Aha' Team Meetings</a></li> </ul> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://www.nytimes.com/interactive/2025/01/12/well/health-tips-experts.html">35 Simple Health Tips Experts Swear By</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://mainichi.jp/english/articles/20260226/p2a/00m/0bu/025000c">Japan Stationery Firm's Pale Color Highlighters a Global Hit Despite 3 Discontinuations</a></li> <li><a href="https://www.wellappointeddesk.com/2026/03/shopping-my-own-stuff-10-strategies-im-trying-to-use-more-of-my-stationery-collection/">Shopping My Own Stuff: 10 Strategies I’m Trying to Use More of My Stationery Collection</a></li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="https://anhvn.com/sketchbook/hourly-comic-day-2026/">Hourly Comic Day 2026</a>: I always forget to participate but I like seeing everyone else’s comics</li> <li><a href="https://www.thisiscolossal.com/2026/03/wool-creature-lab-arina-bovenich-felted-wool-nudibranchs/">Dive into Wool Creature Lab’s World of Vibrant Felted Nudibranchs</a></li> <li><a href="https://grainlinestudio.com/blogs/blog/making-space-week-6-cutting-table-organization">Week 6: Reclaiming Your Cutting Table</a>: guilty!</li> <li><a href="https://www.thisiscolossal.com/2026/03/rembrandt-rijksmuseum-vision-zachariah-temple-painting-rediscovered/">A Recently Rediscovered Rembrandt Emerges After More Than Six Decades</a></li> <li><a href="http://drewscape.blogspot.com/2026/03/how-i-used-thumbnail-to-do-bigger-sketch.html">How I Used a Thumbnail to Do a Bigger Sketch</a></li> <li><a href="https://ml.arttoolkit.com/td/cl/eyJ2Ijoie1wiYVwiOjM0NDY1NyxcImxcIjoxODIzODUxNzYxNTQ3MzYzMzMsXCJyXCI6MTgyMzg1Mjk1MDcwNTk0NDgzfSIsInMiOiIzZDUzNTIzMDIzOWE4MGE0In0">The Value of Value Studies</a></li> <li><a href="https://www.ericafustero.com/2026-03-proceso-dibujo-analogico">Mi Proceso De Dibujo Analógico</a></li> </ul> Learning Log, Jan 2026 2026-02-05T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2601/ <figure class="u-limit-width"><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-immigration-stickers-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-immigration-stickers-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-immigration-stickers-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-immigration-stickers-s.webp" alt="A collection of three stickers about immigration. There is a small skateboarding dog saying 'Borders arent even real, dog. Grow up!' There are two sparkly frogs holding a banner between two flowers, which reads 'Immigrants make our country better'. And there is a riff on the ICEE machine label with a polar bear labeled 'Abolish ICE, keep families together'." /> </picture><figcaption>My latest anti-fascist flair is from <a href="https://shop.thepeachfuzz.co/">The Peach Fuzz</a>. The dog is a portrait of me at parties</figcaption></figure> <p>Here in the U.S., ICE has been carrying on its proud tradition of committing human rights violations, as it continues to terrorize the country it purports to “secure”. So, I’ve been thinking a lot lately about despair and hopelessness vs hopeful, defiant collective action.</p> <p>Honestly, that looks like plenty of multi-tasking (crying about the soul of humanity while burping the baby). Where I always come back to after the latest crying jag is:</p> <ul> <li>You or I alone cannot control what these sentient fart clouds are doing in Minnesota and beyond</li> <li>What we can do is wake up every day and recommit to our values. We can each do <em>something</em> to build a more beautiful world. We can trust that there are many, many other people who share our values. We can seek those people out and build stronger communities with them.</li> </ul> <p><strong>We cannot let these wannabe fascists dictate how we live our lives and how we feel about our neighbors.</strong> We can and will build communities truly dedicated to “life, liberty, and the pursuit of happiness”—whether they like it or not.</p> <p>If this resonates with you, you likely know of the same key resources I do, but just in case:</p> <ul> <li><strong><a href="https://5calls.org/">5 Calls</a>:</strong> contact your U.S. reps about issues important to you</li> <li><strong><a href="https://www.standwithminnesota.com/">Stand With Minnesota</a>:</strong> support the communities being ravaged by ICE’s chaos</li> <li><strong><a href="https://nwirp.org/">Northwest Immigrant Rights Project</a>:</strong> for my local friends, NWIRP is already prepping for the worst</li> </ul> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <ul> <li>Wrote about my <a href="https://making.melanie-richards.com/2026-making-goals/">2026 Making Goals</a></li> <li><a href="https://making.melanie-richards.com/birb-fest-2026/">Birb Fest 2026</a></li> <li><a href="https://making.melanie-richards.com/granny-core-baby-quilt/">Granny Core Baby Quilt</a></li> <li>I started using Affinity to edit my photos (gave up my Photoshop subscription awhile back) and I’m liking it so far. Thanks Canva acquisition for making it free, you’re welcome for my DAU / WAU engagement!</li> </ul> <h2 id="%F0%9F%8E%93-learning">🎓 Learning</h2> <p>Quite a few things via <a href="https://bookshop.org/a/15644/9781250827951">“Wild Dark Shore”</a> by Charlotte McConaghy (would recommend by the way, for gentler cli-fi):</p> <ul> <li>Flora and fauna of the Antarctic</li> <li><a href="https://www.bbc.com/future/article/20170327-the-milk-that-lasts-forever">Long-life milk</a></li> <li><a href="https://en.wikipedia.org/wiki/Hydrophone">Hydrophones</a></li> <li>“Chippy” as slang for a carpenter</li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <ul> <li>Took our daughter to see <a href="https://zoo.org/wildlanterns/">the lights at the zoo</a>. She passed out after ~20 minutes, but the grownups still had a good time.</li> <li>Trying to lean into the absolute bummer of winter weather we had for much of January</li> <li>Finding new funny noises for my baby to laugh at</li> <li>Going to PT for Mommy Wrist / Mommy Thumb</li> </ul> <h2 id="%F0%9F%8C%B1-digital-gardening">🌱 Digital gardening</h2> <ul> <li>Updated the dates on my <a href="https://seasons.melanie-richards.com/">Seasons minisite</a></li> <li>Added a few snacks we bought at H-Mart to my <a href="https://snacks.melanie-richards.com/">snacks minisite</a></li> </ul> <h3 id="this-site">This site</h3> <ul> <li>Added a resource to an old blog post for a Girl Scout 🥰</li> <li>Added <a href="https://www.backlogreadathon.com/">Backlog Readathon</a> to my <a href="https://melanie-richards.com/projects/">list of projects</a>. Join us next December!</li> <li>Currently =&gt; Now <ul> <li>Renamed <code>/currently/</code> to <code>/now/</code></li> <li>Moved the “Now” list to that page (in addition to current media)</li> <li>Made some layout changes to current media</li> <li>Mirrored all the “Now” stuff on the home page</li> <li>Added the page to <a href="https://nownownow.com/p/8MQT">nownownow.com</a></li> </ul> </li> </ul> <ul> <li>Updated the <a href="https://melanie-richards.com/product/">Product page</a> with my current role description</li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <p>Several articles are via <a href="https://buttondown.com/ericwbailey">Eric Bailey’s excellent newsletter</a></p> <h3 id="design-%26-development">Design &amp; development</h3> <ul> <li><a href="https://daverupert.com/2026/01/algorithmic-hover-states-with-contrast-color/">Algorithmic Hover States With Contrast-Color</a></li> <li><a href="https://daverupert.com/2026/01/contrast-color-with-custom-design-tokens/">Using Your Design System Colors With Contrast-Color</a></li> <li><a href="https://frontendfoc.us/link/178868/ef7e9370b1">The 8 Trends That Will Define Web Development in 2026</a></li> <li><a href="https://paulmakeswebsites.com/writing/shadcn-radio-button/">The Incredible Overcomplexity of the Shadcn Radio Button</a></li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.wired.com/story/why-there-arent-enough-electricians-and-plumbers-to-build-ai-data-centers/">The Real AI Talent War Is for Plumbers and Electricians</a>: I’ve been saying we should recommend our baby go into a trade, and now I feel vindicated.</li> <li><a href="https://www.wired.com/story/robloxs-ai-powered-age-verification-is-a-complete-mess/">Roblox’s AI-Powered Age Verification Is a Complete Mess</a></li> <li><a href="https://fortune.com/2026/01/07/ai-layoffs-convenient-corporate-fiction-true-false-oxford-economics-productivity/">AI Layoffs Are Looking More and More Like Corporate Fiction That’s Masking a Darker Reality, Oxford Economics Suggests</a></li> <li><a href="https://www.wired.com/story/wikipedia-group-made-guide-to-detect-ai-writing-now-a-plug-in-uses-it-to-humanize-chatbots/">A Wikipedia Group Made a Guide to Detect AI Writing. Now a Plug-in Uses It to ‘Humanize’ Chatbots</a></li> <li><a href="https://www.wired.com/story/deepfake-nudify-technology-is-getting-darker-and-more-dangerous/">Deepfake ‘Nudify’ Technology Is Getting Darker—and More Dangerous</a></li> <li><a href="https://www.wired.com/story/data-center-criticism-factories-supply-us/">People Are Protesting Data Centers—but Embracing the Factories That Supply Them</a></li> <li><a href="https://www.wired.com/story/data-centers-are-driving-a-us-gas-boom/">Data Centers Are Driving a US Gas Boom</a></li> </ul> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://everythingchanges.us/blog/come-back/">Come Back</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://dimenovelraven.com/blog/stationery-world-reflection-2025">Stationery World Reflection 2025</a></li> <li><a href="https://www.gentlemanstationer.com/blog/2026/1/17/how-to-prepare-to-get-fountain-pen-nibs-tuned-andor-ground">How to Prepare to Get Fountain Pen Nibs Tuned and/or Ground</a></li> <li><a href="https://wordsinthemargins.substack.com/p/no-13-word-of-the-year">No. 13: Word of the Year</a></li> <li><a href="https://writingatlarge.com/2026/01/21/how-i-use-my-notebooks-work-in-progress-notebook-debts-and-lessons/">How I Use My Notebooks: Work in Progress Notebook – Debts and Lessons</a></li> <li><a href="https://www.psychologytoday.com/us/blog/positively-media/202403/writing-by-hand-can-boost-brain-connectivity">Writing by Hand Can Boost Brain Connectivity</a></li> </ul> <h3 id="art-%26-crafts">Art &amp; crafts</h3> <ul> <li><a href="https://www.notaprimarycolor.com/2026/01/18/cleaned-the-studio-had-to-document/">Cleaned the studio, had to document.</a>: studio goals for sure!</li> <li><a href="https://www.creativeboom.com/tips/10-low-effort-ways-to-get-your-creative-brain-working-again/">10 Low-Effort Ways to Get Your Creative Brain Working Again</a></li> <li><a href="https://www.itsnicethat.com/features/forward-thinking-shut-your-laptop-creative-industry-120126">Shut Your Laptop! Ways to Find Inspiration Offline</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.ms.now/opinion/minneapolis-ice-watch-protesters-violence-research">I’m a Minneapolis Sociologist Who Studies Violence. Here’s How ICE Observers Are Helping.</a></li> <li><a href="https://www.politico.com/news/2026/01/14/democrats-ice-funding-appropriations-00726552">Democrats Confront an ICE Dilemma: To Rein It In, They Have to Fund It</a></li> <li><a href="https://www.sciencealert.com/fish-mouth-filter-removes-99-of-microplastics-from-laundry-waste">'Fish Mouth' Filter Removes 99% of Microplastics From Laundry Waste</a></li> <li><a href="https://www.msn.com/en-us/money/careersandeducation/white-collar-workers-shouldn-t-dismiss-a-blue-collar-career-change/ar-AA1UeBlC">White-Collar Workers Shouldn’t Dismiss a Blue-Collar Career Change</a></li> </ul> 2025 Highlights 2025-12-31T00:00:00.000Z https://melanie-richards.com/blog/2025-highlights/ <p><em>Note: this is just the highlight reel. Every year has its share of challenges, too.</em></p> <p>I’ll always remember 2025 as the year I became a mother. I could maybe stop this post right there. I’m surprised by how much I enjoyed being pregnant, and I am still in awe of mine and Rahul’s beautiful little creature every day.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-baby-hands-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-baby-hands-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-baby-hands-s.webp" alt="A 3-month baby cozied up on me on a grey couch. She is wearing a pink floral onesie and her chubby little hands cover her face" /> </picture><figcaption>Privacy via chubby little hands</figcaption></figure> <h2 id="work">Work</h2> <p>It feels odd to type up this section while on parental leave: what is this “work” you speak of??? In any case:</p> <ul> <li>2025 was my first year as a people manager; I’m the Group Product Manager leading the core product at Webflow, alongside my design and engineering partners.</li> <li>I also made my first couple hires!</li> <li>We made the entire GSAP library free and shipped the foundations of our new Interactions feature, replatformed on GSAP.</li> <li>My team members and their collaborators shipped tons of great updates enabling people to design and build inspiring websites on Webflow: from code components to new styling capabilities to Shared Library improvements and enhancement of the overall design UX.</li> </ul> <p>Looking forward to pushing our vision for designing on Webflow further in 2026!</p> <h2 id="personal-projects">Personal projects</h2> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-backlog-readathon.png" alt="The Backlog Readathon logo, a blue snowflake made from rotated bookmark icons" /></p> <ul> <li>Hosted <a href="https://melanie-richards.com/blog/2025-highlights/">Backlog Readathon</a> for a second year. Join us next year in the “dead week” between Dec 26–31!</li> <li><a href="https://making.melanie-richards.com/everythingish-2025/">Lots of sewing and knitting projects</a>, with a bit of sketchbooking thrown in</li> <li>Did some digital gardening on my current projects, but no brand-new web projects this year. I keep thinking of projects that require ongoing content maintainance, and I told myself <a href="https://dianaberlin.com/posts/no-more-forever-projects">“no more forever projects”</a>.</li> </ul> <h2 id="side-quests">Side quests</h2> <ul> <li>Started and kept a weekly accountability check-in with a former coworker, now friend</li> <li>Went to Scottsdale, AZ and San Diego, CA for work trips</li> <li>Saw Bright Eyes play the Paramount</li> <li>Visited La Jolla and ogled at all the seals</li> <li>Visited my in-laws again in New Delhi</li> <li>We all flew for a mini-vacation in Goa</li> <li>Tried making mochi</li> <li>Went on a babymoon to Montreal</li> <li>Happened to be there in time to check out MCAF (Montreal Comic Arts Festival)</li> <li>Enjoyed picnics in parks with friends</li> <li>Showed my family our local tidepools</li> <li>Finally saw Death Cab for Cutie play live</li> <li>Attended my second Fiber Flock Fest with a friend</li> <li>Acquired a Switch 2 and promptly kicked my husband’s butt in Mario Kart World</li> <li>Attended a wedding at Thornewood Castle, one of the filming locations for The Haunting of Bly Manor</li> <li>Bid my friend group’s favorite spooky franchise (The Conjuring) adieu</li> <li>Got our basement plumbing torn up and fixed 💸💸💸</li> <li>Hosted each set of grandparents for baby cuddles</li> <li>Established a November family tradition of visiting the spawning salmon</li> </ul> <h2 id="media">Media</h2> <p>✶ = particular favorite</p> <h3 id="favorite-books">Favorite books</h3> <p>I read <a href="https://melanie-richards.com/now/reading/">57 books in 2025</a>, so roughly the same scale of reading as 2024. Here’s a few good books:</p> <ul> <li><a href="https://bookshop.org/a/15644/9781501160844">Anxious People</a> by Fredrik Backman (read this one on the postpartum unit, haha)</li> <li><a href="https://bookshop.org/a/15644/9780593799895">Be Ready When the Luck Happens</a> by Ina Garten</li> <li><a href="https://bookshop.org/a/15644/9781643755199">A Grandmother Begins the Story</a> by Michelle Porter</li> <li><a href="https://bookshop.org/a/15644/9781338617436">Heartstopper, Vol. I</a> by Alice Oseman</li> <li><a href="https://bookshop.org/a/15644/9780062512949">It’s Easier Than You Think</a> by Sylvia Boorstein</li> <li><a href="https://bookshop.org/a/15644/9780593685778">Martyr!</a> by Kaveh Akbar ✶</li> <li><a href="https://bookshop.org/a/15644/9780063277052">The Mighty Red</a> by Louise Erdrich</li> <li><a href="https://bookshop.org/a/15644/9780593537251">Real Americans</a> by Rachel Khong</li> <li><a href="https://bookshop.org/a/15644/9781250171115">Snapdragon</a> by Kat Leyh</li> <li><a href="https://bookshop.org/a/15644/9780593715130">Tiny Experiments</a> by Anne-Laure La Cunff ✶</li> </ul> <h3 id="favorite-movies">Favorite movies</h3> <p>I watched <a href="https://letterboxd.com/somelaniesaid/diary/">58 films in 2025</a>. I’mn noticing it was a pretty decent year for quality horror movies. Some new watches I enjoyed or appreciated:</p> <ul> <li><a href="https://letterboxd.com/film/21-jump-street/">21 Jump Street</a>: shocked that I enjoyed this so much</li> <li><a href="https://letterboxd.com/film/challengers/">Challengers</a></li> <li><a href="https://letterboxd.com/film/do-the-right-thing/">Do the Right Thing</a> ✶</li> <li><a href="https://letterboxd.com/film/good-will-hunting/">Good Will Hunting</a></li> <li><a href="https://letterboxd.com/film/heretic-2024/">Heretic</a></li> <li><a href="https://letterboxd.com/film/the-holdovers/">The Holdovers</a></li> <li><a href="https://letterboxd.com/film/a-real-pain/">A Real Pain</a></li> <li><a href="https://letterboxd.com/film/sinners-2025/">Sinners</a> ✶</li> <li><a href="https://letterboxd.com/film/the-substance/">The Substance</a></li> <li><a href="https://letterboxd.com/film/thelma-2024/">Thelma</a> ✶</li> <li><a href="https://letterboxd.com/film/wake-up-dead-man/">Wake Up Dead Man</a></li> <li><a href="https://letterboxd.com/film/weapons-2025/">Weapons</a> ✶</li> <li><a href="https://letterboxd.com/film/we-live-in-time/">We Live in Time</a></li> <li><a href="https://letterboxd.com/film/the-wild-robot/">The Wild Robot</a></li> </ul> <h2 id="2026-theme">2026 theme</h2> <p>My word for 2026 is “wonder”. I want to show my daughter—and remind myself—that the world is a vibrant, magical place.</p> <p><em>Pollyanna-but-earnest vibes incoming…</em></p> <p>So much feels uncertain and scary right now, but beauty and connection persist. Each of us always has the power to alleviate suffering and create joy in our communities—no matter what the cynical and cruel politicians would like us to believe. Let’s continue to show up for one another and savor the year ahead. 💫</p> Learning Log, Dec 2025 2025-12-30T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2512/ <p>December flew by in the blink of an eye. Baby S “celebrated” her first Christmas. We devoured latkes with friends and played Scattergories with family over FaceTime. I <a href="https://www.backlogreadathon.com/">hosted a readathon</a> for the second year running. I turned a number of years old that makes me bemoan the passage of time…followed by gratitude that I am still here to pass that time and fill it with memories.</p> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-granny-core-quilted-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-granny-core-quilted-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-granny-core-quilted-s.webp" alt="A baby-sized quilt top lying on cotton batting and then a hardwood floor. The foreground includes 2 pixelated plants in a saturated dark orange, and the background is a very light teal blue. The bottom of the quilt shows a checkerboard pattern in the two colors. The quilting traces the outline of the plants, with a gridded quilting pattern for the checkerboard" /> </picture><figcaption>My quilt sandwich ready for a trimmin’</figcaption></figure> <p>I’m pretty far along on my first real quilt, the <a href="https://daisychainpatterns.com/products/granny-core-quilt-pdf-pattern">Granny Core Quilt</a> in the Baby size. I was hoping to finish it before the end of the year, but decided instead not to rush the binding. I just finished the actual quilting of the fabric sandwich the other day.</p> <p>I also cast on some pretty Spincycle yarn for <a href="https://www.ravelry.com/patterns/library/my-bakers-hat">My Baker’s Hat</a>, but started feeling wrist pain while working on the brim. I learned Mommy Wrist is A Thing and it’s suuuuper annoying during peak knitting season.</p> <h2 id="%F0%9F%9B%9C-on-the-internet">🛜 On the internet</h2> <p>Had some big feelings panning around the <a href="https://www.aidsmemorial.org/interactive-aids-quilt">AIDS Memorial Quilt</a> 💜</p> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <ul> <li><a href="https://adrianroselli.com/2025/12/you-cant-make-something-accessible-to-everyone.html">You Can’t Make Something Accessible to Everyone</a></li> <li><a href="https://cassidoo.co/post/vibe-coding-yawn/">Vibe Coding Is Boring</a></li> <li><a href="https://nolanlawson.com/2025/12/14/the-time-element-should-actually-do-something/">The Element Should Actually Do Something</a></li> <li><a href="https://www.producttalk.org/how-to-choose-which-tasks-to-automate-with-ai/">How to Choose Which Tasks to Automate With AI</a></li> <li><a href="https://dimenovelraven.com/blog/blotting-paper-from-the-past">Blotting Paper From the Past</a></li> </ul> Learning Log, Nov 2025 2025-12-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2511/ <p>We have a two month old now! 😱 She’s started giving us the most beautiful social smiles and it’s the best thing ever.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-baby-hand-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-baby-hand-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-baby-hand-s.webp" alt="A tiny baby hand resting on a white burp cloth" /> </picture><figcaption>The little fingies!!!</figcaption></figure> <p>Baby S’s other grandparents (my in-laws) came all the way from India to spend time with her and incidentally experience their first Thanksgiving. S is the child who made them grandparents, so it was extra sweet and special to witness the three of them bonding together.</p> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <ul> <li>I’m working on a <a href="https://daisychainpatterns.com/products/granny-core-quilt-pdf-pattern">Granny Core Quilt</a> for my daughter’s room. I’ve got the checkerboard and the first plant pieced so far. I’m already scheming about (and bought fabric for) the next project to hang on her walls.</li> <li>Did some scribbles in my teal Art Creations sketchbook. I’m <em>really</em> not vibing with this particular sketchbook for whatever reason, though I really enjoy using my smaller square Art Creations sketchbook. I keep waffling on whether to put this one down or fill the remaining pages.</li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <p>We took my in-laws to Carkeek Park to see the salmon swim upstream to spawn. We were able to spot the chum and coho salmon at their peak, instead of the end of November like last year. That late in the season, there’s more carnage than living fish. 😅</p> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-carkeek-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-carkeek-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-carkeek-s.webp" alt="A dark creek scene with autumn trees and a bunch of ferns lining the water" /> </picture><figcaption>On the banks of Piper Creek</figcaption></figure> <p>For years now I’ve been aiming to live more seasonally, and I think this will become a November family tradition. There’s something so special about getting to bear witness to our local ecosystem.</p> <h2 id="%F0%9F%8C%B1-digital-gardening">🌱 Digital gardening</h2> <ul> <li>Prepped the <a href="https://www.backlogreadathon.com/">Backlog Readathon site</a> and social media profiles for the December 2025 readathon</li> <li>Added a backlog of candies and such from Japan Candy Store to my <a href="https://snacks.melanie-richards.com/">Snacks site</a></li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <h3 id="web">Web</h3> <p><a href="https://ishadeed.com/article/field-sizing/">Use Cases for Field Sizing</a></p> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.wired.com/story/data-center-ai-boom-us-economy-jobs/">The AI Data Center Boom Is Warping the US Economy</a></li> <li><a href="https://www.wired.com/story/the-data-center-resistance-has-arrived/">The Data Center Resistance Has Arrived</a></li> <li><a href="https://cassidoo.co/post/non-determinism-ownership/">Non-Determinism and Ownership</a></li> <li><a href="https://www.wired.com/story/inside-the-dealmaking-to-make-agentic-shopping-a-reality/">You Won’t Be Able to Offload Your Holiday Shopping to AI Agents Anytime Soon</a></li> <li><a href="https://www.smithsonianmag.com/smart-news/some-researchers-are-hiding-secret-messages-in-their-papers-but-theyre-not-meant-for-humans-180986996/">Some Researchers Are Hiding Secret Messages in Their Papers, but They’re Not Meant for Humans</a> (via Eric Bailey)</li> </ul> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://aworkinglibrary.com/writing/psychology-of-craft">Psychology of Craft</a></li> <li><a href="https://www.themarginalian.org/2025/10/31/hawthorne-life/">How Not to Waste Your Life</a></li> <li><a href="https://www.scotthyoung.com/blog/2025/10/06/102-lessons-from-102-books/">102 Lessons From the 102 Books I Read This Year</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://nymag.com/strategist/article/pick-persons-guide-to-pens-for-left-handed-writers.html">A Picky Person’s Guide to Pens: Lefty Edition</a></li> <li><a href="https://www.plannerfun.com/2025/11/the-power-of-sticky-notes-in-your.html">The Power of Sticky Notes in Your Planner: Fun, Flexible, and Surprisingly Essential</a></li> </ul> <h3 id="art-%26-crafting">Art &amp; crafting</h3> <ul> <li><a href="https://www.dannysessays.com/p/what-it-takes-to-make">What It Takes to Make</a></li> <li><a href="https://www.mygiantstrawberry.com/blog/my-24th-sketchbook">In and Out of a Sketchbook: Stories, Inspiration and Creativity</a></li> <li><a href="https://www.carryology.com/insights/how-a-tsunami-revived-a-global-craft-movement-the-story-of-japans-sashiko-gals/">How a Tsunami Revived a Global Craft Movement: The Story of Japan’s Sashiko Gals</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <p><a href="https://www.cnn.com/2025/11/12/science/bees-visual-stimulus-study-scli-intl">Scientists Now Know That Bees Can Process Time, a First in Insects</a> (via Eric Bailey)</p> Learning Log, Oct 2025 2025-11-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2510/ <p><a href="https://melanie-richards.com/blog/learning-log-2509/">Our first child</a> turned a month old during October! We are solidly living in the baby time vortex. What hour is it? What day is it? Who knows!</p> <p>Apart from the endless eat / 💩 / sleep cycle, I’ve been:</p> <ul> <li>Spending time with my parents, who came to visit their grandchild</li> <li>Going on family neighborhood walks to gaze at fall foliage</li> <li>Watching all the spooky movies. I was really into <em>Weapons</em> (2025), and found <em>The Substance</em> (2024) to be simultaneously disgusting, heartbreaking, visually arresting, and at times humorous???</li> <li>Hyperfixating on Obsidian vault as just one part of postpartum nesting. Clean and organize <a href="https://hyperboleandahalf.blogspot.com/2010/06/this-is-why-ill-never-be-adult.html">all the things</a>! 💥</li> </ul> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-dahlias-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-dahlias-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-dahlias-s.webp" alt="A dahlia plant with three heavy blossoms in a gorgeous pinky-peach shade" /> </picture><figcaption>The dahlias our green-thumb friend gave us finally bloomed in late September, early October</figcaption></figure> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <h3 id="product">Product</h3> <p><a href="https://elsevanderberg.substack.com/p/making-sense-of-your-data-with-an">Making Sense of Your Data With an Evidence Map</a></p> <h3 id="web">Web</h3> <ul> <li><a href="https://mrkaran.dev/posts/ai-home-cooked-software/">AI and Home-Cooked Software</a></li> <li><a href="https://bradfrost.com/blog/post/the-history-of-themeable-user-interfaces/">The History of Themeable User Interfaces</a></li> <li><a href="https://daverupert.com/2025/10/quiet-ui/">Lots to Shout About in Quiet UI</a></li> <li><a href="https://www.wired.com/story/amazon-explains-how-its-aws-outage-took-down-the-web/">Amazon Explains How Its AWS Outage Took Down the Web</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://open.substack.com/pub/austinkleon/p/what-i-do-when-i-finish-a-notebook">What I do when I finish a notebook</a></li> <li><a href="https://bulletjournal.com/blogs/bulletjournalist/i-deleted-my-second-brain">I Deleted My Second Brain</a></li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="https://www.thisiscolossal.com/2025/10/romain-veillon-secret-gardens/">Untamed Flora Subsumes Abandoned Greenhouses in Romain Veillon’s ‘Secret Gardens’</a></li> <li><a href="https://www.thisiscolossal.com/2025/10/pure-street-photography-awards-2025/">Blink and You’d Miss the Moments Topping This Year’s Pure Street Photography Awards</a></li> <li><a href="https://www.thisiscolossal.com/2025/10/renee-condo-bead-sculptures/">Vibrant Beaded Compositions by Renée Condo Convey the Mi’gmaq Spirit of Empathy</a></li> <li><a href="https://www.thisiscolossal.com/2025/10/tiny-art-show-gallery-miniature-art-exhibitions/">Tiny Art Show Repurposes a Disused Stairwell Into a 1:6-Scale Gallery</a></li> </ul> <h3 id="fiber-arts">Fiber arts</h3> <p><a href="https://ctrk.klclick.com/l/01K6NSVSYJ2Q8FSJTPWFD2RGT8_6">Montreal Jewish Museum Reopens Century-Old Sewing Shop as a Pop-Up Exhibit</a></p> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.joanwestenberg.com/p/you-are-insignificant-that-s-a-good-thing">You Are Insignificant. That's a Good Thing.</a></li> <li><a href="https://www.nytimes.com/2025/07/26/books/man-died-book-list-thousands.html">He Read (at Least) 3,599 Books in His Lifetime. Now Anyone Can See His List.</a></li> <li><a href="https://www.motherjones.com/politics/2025/10/indigenous-nations-plan-tariff-free-trade-corridor-across-us-canada-border/">Indigenous Nations Plan Tariff-Free Trade Corridor Across US-Canada Border</a></li> <li><a href="https://www.bbc.com/future/article/20250923-the-3000-year-old-story-hidden-in-your-keyboard">The 3,000-Year-Old Story Hidden in the @ Sign</a></li> </ul> Learning Log, Sep 2025 2025-10-13T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2509/ <p>My husband Rahul and I are pleased to announce our best <a class="footnotes__ref" href="https://melanie-richards.com/blog/learning-log-2509/#beta-note" id="beta-ref" aria-describedby="footnotes-label" role="doc-noteref">beta</a> (or shall I say beti?) launch yet! Our first child was born a few weeks early, in mid-September, and we are totally smitten with her 🥰</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-baby-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-baby-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-baby-s.webp" alt="A little baby snuggled up in a hooded towel with her hands curled up next to her face. Light streams into view between the bars of the crib." /> </picture> <p>That is pretty much everything for this Learning Log! Keeping a tiny human safe and healthy and fed and reasonably happy is a whole-brain affair. 💕</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="beta-note" class="footnotes__list-item" role="doc-endnote">A rare triple entendre: beta in the software release sense; baby S is part of Gen Beta; and “beta” means “child” in Hindi (often used in an endearing way) <a class="footnotes__back-link" href="https://melanie-richards.com/blog/learning-log-2509/#beta-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, Aug 2025 2025-09-10T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2508/ <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-flower-socks-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-flower-socks-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-flower-socks-s.webp" alt="A pair of socks in variegated yarn of cream, pinks, and lime greens. Around the cuffs is a dark green flower motif." /> </picture> <ul> <li>Finished knitting my second pair of socks ever, <a href="https://making.melanie-richards.com/flower-power-socks/">ones with flowers around the cuff</a></li> <li>Finally learned how to use my yarn ball winder and swift, which was actually pretty easy, fast, and fun</li> <li>Selected a color palette, ordered and washed fabric for the <a href="https://daisychainpatterns.com/products/granny-core-quilt-pdf-pattern">Granny Core Quilt</a> in the baby size</li> <li>Attended my first live session of <a href="https://www.patreon.com/c/sophiemcpike/posts">Sophie McPike’s Scribble Brigade</a> and it was lovely 💖 Parallel play makes everything more fun</li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <p>Attended my second <a href="https://flockfiberfestival.com/">Fiber Flock Fest</a> with a friend! The vibes are so good: everyone’s just happy to be enjoying their hobbies together, and I love seeing folks proudly parading around in their me-made knitwear.</p> <div class="l-grid l-grid--media l-grid--halves"> <picture class=""> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-flock-tote-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-flock-tote-s.webp" alt="A cream canvas tote bag with a black webbing handle. The Fiber Flock Festival logo is displayed in a large circle on the side." /> </picture> <picture class=""> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-flock-sheeps-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-flock-sheeps-s.webp" alt="Two small valais blacknose sheep in a pen filled with hay. A sign says their names are Estella and Endora. They have black faces and cream wooly fleece." /> </picture> </div> <ul> <li>Acquired a Switch 2 and promptly kicked my husband’s butt in Mario Kart World</li> <li>Attended a wedding at Thornewood Castle, one of the filming locations for <em>The Haunting of Bly Manor</em></li> <li>Went down a rabbit hole of Obsidian nerdery</li> </ul> <h2 id="%F0%9F%8C%B1-digital-gardening">🌱 Digital gardening</h2> <p>Added “Martyr!” by Kaveh Akbar to <a href="https://littapes.melanie-richards.com/lit-tape/martyr/">Lit Tapes</a> and <a href="https://highlights.melanie-richards.com/book/martyr/">Highlights</a> (in the latter case, contains spoilers)</p> <h2 id="%F0%9F%9B%9C-on-the-internet">🛜 On the internet</h2> <ul> <li><a href="https://www.alltext.nyc/">All Text in NYC</a>: search text in street signs, via Eric Bailey</li> <li><a href="https://geoffgraham.me/guestbook/">Love a good ol’ fashioned guestbook</a></li> <li><a href="https://pudding.cool/2025/08/onions/">Dicing an onion</a></li> <li><a href="https://www.thelast6000.org/">The Last 6000</a>: a civic campaign to locate Seattle's remaining majestic trees</li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://medium.com/@gibsonbiddle/2-from-dhm-to-product-strategy-a3781b2aadca">From DHM to Product Strategy</a></li> <li><a href="https://linear.app/blog/why-is-quality-so-rare">Why Is Quality So Rare?</a></li> <li><a href="https://www.svpg.com/product-leadership-archetypes/">Product Leadership Archetypes</a></li> </ul> <h3 id="accessibility">Accessibility</h3> <ul> <li><a href="https://www.deque.com/blog/a-closer-look-at-axe-mcp-server/">A Closer Look at Axe MCP Server</a></li> <li><a href="https://smashingmagazine.com/2025/07/designing-better-ux-left-handed-people/">Designing Better UX for Left-Handed People</a>: I don’t know why it surprises me to stumble across design articles that account for my lived reality 🤷‍♀</li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://www.the-independent.com/tech/bots-internet-traffic-ai-chatgpt-b2733450.html">Bots Now Make Up the Majority of All Internet Traffic</a> (via Eric Bailey)</li> <li><a href="https://daverupert.com/2025/07/sci-fi-rectangles-with-corner-shape/">Easy Sci-Fi Rectangles With Corner-Shape</a></li> <li><a href="https://frontendfoc.us/link/172117/ef7e9370b1">One Simple Trick to Make Your Screenshots 80% Smaller</a></li> <li><a href="https://frontendfoc.us/link/172697/ef7e9370b1">Publishers Cry Foul Over W3C Crusade to Rid Web of Third-Party Cookies</a></li> <li><a href="https://fredrocha.net/2025/05/21/small-web-is-beautiful/">Small (Web) Is Beautiful</a></li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.wired.com/story/poisoned-document-could-leak-secret-data-chatgpt/">A Single Poisoned Document Could Leak ‘Secret’ Data via ChatGPT</a></li> <li><a href="https://www.wired.com/story/stanford-research-ai-replace-jobs-young-workers/">AI Is Eliminating Jobs for Younger Workers</a></li> <li><a href="https://www.wired.com/story/anthropic-settles-copyright-lawsuit-authors/">Anthropic Settles High-Profile AI Copyright Lawsuit Brought by Book Authors</a></li> <li><a href="https://www.wired.com/story/gpt-5-coding-review-software-engineering/">Developers Say GPT-5 Is a Mixed Bag</a></li> <li><a href="https://www.artificialintelligence-news.com/news/generative-ai-trends-2025-llms-data-scaling-enterprise-adoption/">Generative AI Trends 2025: LLMs, Data Scaling &amp; Enterprise Adoption</a></li> <li><a href="https://www.weforum.org/stories/2025/08/ai-jobs-replacement-data-careers/">Why AI Is Replacing Some Jobs Faster Than Others</a></li> <li><a href="https://www.wired.com/story/researchers-leave-meta-superintelligence-labs-openai/">Researchers Are Already Leaving Meta’s New Superintelligence Lab</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://analogoffice.net/2025/08/25/reader-question-personal-productivity-analysis.html">Reader Question 10: Personal Productivity Analysis Paralysis</a></li> <li><a href="https://wonderpens.ca/blogs/uncategorized/travel-journalling">Travel Journalling</a></li> <li><a href="https://www.archerandolive.com/blogs/news/tips-and-tricks-to-cover-up-mistakes-in-your-bullet-journal">Tips and Tricks to Cover Up Mistakes in Your Bullet Journal</a></li> <li>[Creative Listing: The New Best Way to Play AND Journal?!](<a href="https://www.archerandolive.com/blogs/news/creative-listing-the-new-best-way-to-play-and-journal">https://www.archerandolive.com/blogs/news/creative-listing-the-new-best-way-to-play-and-journal</a></li> </ul> <h3 id="art-%26-crafts">Art &amp; crafts</h3> <ul> <li><a href="http://drewscape.blogspot.com/2025/08/pictures-alone-dont-aways-communicate.html">Combining Pictures With Text to Communicate the Story</a></li> <li><a href="https://www.thisiscolossal.com/2025/08/lucy-sparrow-bourdon-street-chippy/">In ‘Bourdon Street Chippy,’ Lucy Sparrow Celebrates a British Culinary Institution in Felt</a></li> <li><a href="https://thesaraproject.com/2025/08/04/summer-sewing-traditions/">Summer Sewing Traditions</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.seattletimes.com/seattle-news/hot-rat-summer-a-mysterious-cal-anderson-mosaic-rallies-seattles-trans-community/">‘Hot Rat Summer:’ a Mysterious Cal Anderson Mosaic Rallies Seattle’s Trans Community</a></li> <li><a href="https://www.tomshardware.com/pc-components/storage/yes-you-can-store-data-on-a-bird-enthusiast-converts-png-to-bird-shaped-waveform-teaches-young-starling-to-recall-file-at-up-to-2mb-s">Yes, You Can Store Data on a Bird — Enthusiast Converts PNG to Bird-Shaped Waveform, Teaches Young Starling to Recall File at Up to 2mb/S</a> (via Eric Bailey)</li> </ul> Speeding up my Learning Log process 2025-08-18T00:00:00.000Z https://melanie-richards.com/blog/speeding-up-learning-logs/ <p>Dave’s blog post <a href="https://daverupert.com/2025/05/obsidian-link-aggregator/">“How to make a Link Aggregator in Obsidian”</a> inspired me to finally make my Learning Log process a little smarter, starting with the May 2025 log.</p> <h2 id="what-i-had-been-doing">What I had been doing</h2> <ol> <li>Automatically syncing my Reader by Readwise highlights into Obsidian</li> <li>Going through the new articles manually and adding them to my blog post Markdown (also written in Obsidian)</li> </ol> <p>Obsidian enables you to customize to the nth degree, so I figured there was a better way to do this but hadn’t made it a priority. Dave’s post showed me I could do this pretty quickly!</p> <h2 id="enter-dataview-plugin">Enter Dataview plugin</h2> <p>I’d already installed the <a href="https://blacksmithgu.github.io/obsidian-dataview/">Dataview plugin</a> for Obsidian for one reason or another and ended up writing a DQL query very similar to Dave’s:</p> <pre><code>LIST map(rows, (r) =&gt; elink(regexreplace(r.file.frontmatter.url, &quot;\\?utm_.*&quot;, &quot;&quot;), r.title)) FROM &quot;Resources/Readwise/Articles&quot; WHERE file.frontmatter.highlightedDate &gt;= &quot;2025-08-01&quot; AND file.frontmatter.highlightedDate &lt; &quot;2025-09-01&quot; AND file.frontmatter.url FLATTEN file.tags AS tag GROUP BY tag SORT file.frontmatter.highlightedDate DESC </code></pre> <p>What this query does is:</p> <ul> <li>Pull all the articles I highlighted in a given month from the directory where I’ve synced my Readwise articles. It filters out any articles that don’t have a URL in the frontmatter, i.e. email newsletters.</li> <li>Group the linked article titles by the tag I applied in Reader.</li> </ul> <p>I copy and paste this query into my blog post draft, update the tag groupings to be headers, and hand-curate the list a little further. I could use Dataview JS to structure this in a fancier way and skip some of this manual bit, but I find it’s worth slowing down at this curation stage.</p> <p>You’ll notice I do have dates hardcoded in here as well. As we all know, the hardest problems in computer science are:</p> <ul> <li>People problems</li> <li>Naming things</li> <li>Wrangling dates</li> </ul> <p>I kept getting weird errors and issues with data handling, so decided to just throw up my hands and enter the dates manually. I only have to update them once a month, and so <a href="https://xkcd.com/1205/">this XKCD comic</a> seemed apt.</p> <p>In any case, this was a nice little quality of life update for my blogging process, and I’m now playing with all things Dataview in my Obsidian notes!</p> Learning Log, Jul 2025 2025-08-07T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2507/ <picture class="u-dark-media"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/interactions-with-gsap-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/interactions-with-gsap-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/interactions-with-gsap-s.jpg" alt="A multi-step animation visually represented on a horizontal timeline within the Webflow design editor" /> </picture> <p>The big work win for July was that my team at Webflow shipped <a href="https://webflow.com/blog/webflow-interactions-with-gsap">Interactions with GSAP</a>! 💚 This launch lays the foundation for the next generation of Webflow Interactions, which will unlock visual-first animation for everyone. There’s so much yet to come with how we’ll bring the GSAP library’s superpowers into the visual builder, but I’m proud of what the team accomplished and excited for what’s ahead.</p> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <div class="l-grid l-grid--media l-grid--halves"> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-hamster-mug-rugs-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-hamster-mug-rugs-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-hamster-mug-rugs-s.webp" alt="Two 6x9” quilted mug rugs, with stitch lines in a diamond pattern. The cream fabric features hamsters shaped like onigiri and holding items that are usually paired with the rice balls, such as shiso leaves, seaweed, and octopus" /> </picture> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-flower-sock-progress-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-flower-sock-progress-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-flower-sock-progress-s.webp" alt="A sock still on a pair or circular knitting needles, being knitted from the cuff down. There’s a flower motif around the cuff in a deep teal color, and the body of the sock is in a variegated yarn of pinks, creams, yellows, and springy greens." /> </picture> </div> <p>I’m trying a new post format on my crafting blog, i.e. a monthly roundup of what I’m working on. <a href="https://making.melanie-richards.com/made-in-july-2025/">Made in July 2025</a> covers a couple mug rugs, progress on a second sock, and fairly minimal sketchbooking time.</p> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <ul> <li>Family came into town to throw my husband and I a baby shower: we’re welcoming our first child in October! 🎃 Pregnancy has been such a singular life experience and I’m nervous-excited for what’s to come.</li> <li>It happened to be very-low tide while they were here in Seattle, so we took everyone to a beach to go tidepooling! 🐚 We saw a weird-looking algae called Turkish Towel, a starfish, red rock crabs, marine worms, tons of gulls and dragonflies, and some shellfish. For many in our group, it was their first time being spit at by a buried clam or geoduck.</li> <li>At the tail end of July we went to Climate Pledge Arena (always Key Arena in my heart) to see Death Cab for Cutie on their Plans 20th Anniversary tour. Despite Death Cab hailing from Bellingham / Seattle, I have <em>never</em> gotten the chance to see them live—so it was pretty special to catch them on such a meaningful tour.</li> </ul> <div class="l-grid l-grid--media l-grid--halves"> <picture class=""> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-bee-lavender-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-bee-lavender-s.webp" alt="A fat bumblebee hovering over lush purple lavender in the golden hour light" /> </picture> <picture class=""> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-starfish-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-starfish-s.webp" alt="A bumpy orange starfish shining in shallow tidepool water, curled around some seaweed in a tidepool" /> </picture> </div> <h2 id="%F0%9F%8C%B1-digital-gardening">🌱 Digital gardening</h2> <h3 id="lit-tapes"><a href="https://littapes.melanie-richards.com/">Lit Tapes</a></h3> <p>Added some new book playlists:</p> <ul> <li><a href="https://littapes.melanie-richards.com/lit-tape/hell-bent/">“Hell Bent” by Leigh Bardugo</a></li> <li><a href="https://littapes.melanie-richards.com/lit-tape/chlorine/">“Chlorine” by Jade Song</a></li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <p>A lesson I’ve been re-learning—and shared with a friend—is that it doesn’t serve me well to put any goals or “challenges” around my (book) reading, even fun ones that are exciting to me at first. Reading is a hobby I enjoy for entertainment, learning, and casual self-improvement; I am also definitely a mood reader. I don’t need pressure around cadence, volume, or specific materials.</p> <h3 id="product">Product</h3> <ul> <li><a href="https://www.squarespace.com/blog/competitive-analysis-research">How to Do Competitor Research</a></li> <li><a href="https://jackiebo.medium.com/do-try-consider-how-we-give-product-feedback-at-asana-db9bc754cc4a">Do, Try, Consider — How we give product feedback at Asana</a></li> <li><a href="https://paulbuchheit.blogspot.com/2010/02/if-your-product-is-great-it-doesnt-need.html">If Your Product Is Great, It Doesn't Need to Be Good.</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://www.wired.com/story/dns-records-hidden-malicious-code/">Hackers Are Finding New Ways to Hide Malware in DNS Records</a>: cool new anxiety just dropped</li> <li><a href="https://brucelawson.co.uk/2025/cma-designates-google-and-apple-proposes-measures/">CMA Designates Google and Apple, Proposes Measures</a></li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.wired.com/story/grok-antisemitic-posts-x-xai/">Grok Is Spewing Antisemitic Garbage on X</a>: here is my shocked Pikachu face</li> <li><a href="https://www.wired.com/story/new-research-energy-electricity-artificial-intelligence-ai/">AI Is Eating Data Center Power Demand—and It’s Only Getting Worse</a></li> <li><a href="https://www.wired.com/story/ai-carbon-emissions-energy-unknown-mystery-research/">How Much Energy Does AI Use? The People Who Know Aren’t Saying</a></li> <li><a href="https://www.wired.com/story/cursor-releases-new-ai-tool-for-debugging-code/">Cursor’s New Bugbot Is Designed to Save Vibe Coders From Themselves</a></li> <li><a href="https://finance.yahoo.com/news/ai-mania-is-worse-than-1999s-tech-bubble-apollos-top-economist-warns-161530505.html">AI Mania Is Worse Than 1999's Tech Bubble, Apollo's Top Economist Warns</a></li> <li><a href="https://www.wired.com/story/flexolmo-ai-model-lets-data-owners-take-control/">A New Kind of AI Model Lets Data Owners Take Control</a></li> <li><a href="https://chriscoyier.net/2025/07/23/impact-of-ai-on-tech-content-creators/">Impact of AI on Tech Content Creators</a></li> </ul> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://undark.org/2025/06/24/mental-illness-ketogenic-diet/">A Possible Connection Between Mental Illness and Diet</a></li> <li><a href="https://thebalancednutritionist.com/balanced-snacks/">Balanced Snacks to Fuel Your Health Goals</a></li> <li><a href="https://jamesclear.com/ivy-lee">The Ivy Lee Method: The Daily Routine Experts Recommend for Peak Productivity</a></li> <li><a href="https://jamesclear.com/buffett-focus">Warren Buffett’s “2 List” Strategy: How to Maximize Your Focus and Master Your Priorities</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://tina-koyama.blogspot.com/2025/07/but-i-might-need-it-how-to-downsize.html">“But I Might Need It”: How to Downsize Your Kit</a></li> <li><a href="https://www.wellappointeddesk.com/2025/07/the-mad-scientist-method-of-mixing-your-own-fountain-pen-ink-colors/">The Mad Scientist Method of Mixing Your Own Fountain Pen Ink Colors</a></li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="https://club.drawtogether.studio/p/netflix-and-draw-baby">Netflix and Draw, Baby</a></li> <li><a href="https://www.creativeboom.com/tips/the-power-of-doing-nothing-and-why-it-helps-your-creative-work/">The Power of Doing Nothing</a></li> <li><a href="https://www.itsnicethat.com/features/michael-bierut-the-art-of-dailiness-advice-education-creative-industry-160725">The Art of Dailiness, by Michael Bierut</a></li> <li><a href="https://spoon-tamago.com/erica-ward-tokyo/">In a New Pop-Up Exhibition, Erica Ward Presents Tokyo as a Living, Breathing Organism</a></li> </ul> Learning Log, Jun 2025 2025-07-07T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2506/ <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <p>I completed two sewing projects in June:</p> <ul> <li>My first knit dress, a mild “hack” of the <a href="https://blog.closetcorepatterns.com/free-t-shirt-pattern-meet-the-core-t-shirt-our-first-free-garment-pattern/">Closet Core T-Shirt pattern</a></li> <li>A canvas project bag for my knitting, made with a fabric of <a href="https://stonemountainfabric.com/product/ko-yga-79040-2a/">hamsters shaped like onigiri</a> (!!!)</li> </ul> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/onigiri-hamsters-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/onigiri-hamsters-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/onigiri-hamsters-s.webp" alt="A cream fabric with a pattern of illustrated hamsters in triangular shapes, like onigiri. They're holding up things like a shiso leaf or a strip of nori." /> </picture><figcaption>Photo of the fabric courtesy of Stonemountain & Daughter</figcaption></figure> <h2 id="%F0%9F%A7%AA-tiny-experiments">🧪 Tiny experiments</h2> <p>This month I read and appreciated <a href="https://bookshop.org/a/15644/9780593715130">“Tiny Experiments” by Anne-Laure Le Cunff</a>. The author proposes that instead of setting lofty goals for yourself, adopt a scientist’s mindset and run “tiny experiments” designed to try out areas that interest you or may benefit your life. Chapters that I especially landed for me:</p> <ul> <li><strong>“The Power of Intentional Imperfection”:</strong> sustainable excellence &gt; short-term perfection. A life lesson I’m repeatedly learning.</li> <li><strong>“How to Dance with Disruption”:</strong> I’ve noticed that in the past few years, all personal-growth-type books that resonate with me touch on Buddhist mindfulness tenets. This chapter was a good reminder that attempting to control outcomes leads to suffering (hello anxiety). Instead, accept your feelings without judgement and consider what the situation asks of you to meet it constructively.</li> <li><strong>“Life Beyond Legacy”:</strong> this chapter was about living “generatively” instead of focusing on the scale of some future legacy. The point was to follow your curiosity to make a positive impact on those around you, here and now. As someone who loves their squiggly-line personal journey and meandering interests, this resonated quite strongly with me.</li> </ul> <p>The first experiment I’m starting out with is to hold “Power Hours” a la Gretchen Rubin every Monday evening. The point is to burn down personal admin tasks that aren’t particularly time-sensitive but tend to pile up. So far so good: once you get started it’s easy to keep going and take that weight off your shoulders!</p> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <p>Late spring park days! Had a Picnic in the Park addition of our book club, and a birthday-with-crafts hang. 🌳</p> <h2 id="%F0%9F%9B%9C-on-the-internet">🛜 On the internet</h2> <ul> <li>Was curious about the top spoken languages in my city (Seattle, WA) and found <a href="https://www.seattle.gov/documents/Departments/OIRA/2023%20Seattle%20Top%20Languages%20Report.pdf">this report with guidance for specific public services</a>.</li> <li><a href="https://youtu.be/5hG9V2JoWKI?si=FJnLVBDO7wBjUloL">Video: How Ghibli Makes Everything Feel Magical</a></li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <p>Everything is AI now… 🙃</p> <h3 id="product">Product</h3> <ul> <li><a href="https://www.mindtheproduct.com/what-ai-cant-and-shouldnt-do-for-product-managers/">What AI Can’t—and Shouldn’t—do for Product Managers</a></li> <li><a href="https://personalmath.substack.com/p/yes-you-will-lose-your-job-to-ai">Yes, You Will Lose Your Job to AI</a></li> </ul> <h3 id="accessibility">Accessibility</h3> <ul> <li><a href="https://www.oidaisdes.org/aria-notify-first-look.en/">Make Screen Readers Talk With the ARIA Notify API</a></li> <li><a href="https://webaim.org/blog/up-and-coming-aria/">Up and Coming ARIA</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://daverupert.com/2025/05/obsidian-link-aggregator/">How to Make a Link Aggregator in Obsidian</a></li> <li><a href="https://frontendfoc.us/link/168622/ef7e9370b1">Polishing Your Typography With Line Height Units</a></li> <li><a href="https://blog.jim-nielsen.com/2024/sanding-ui/">Sanding UI</a></li> <li><a href="https://frontendfoc.us/link/169489/ef7e9370b1">What's New in Web</a></li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.figma.com/blog/double-click-what-does-mcp-mean-for-agentic-ai/">Double Click: What Does MCP Mean for Agentic AI?</a></li> <li><a href="https://www.entrepreneur.com/business-news/new-york-requiring-companies-to-reveal-if-ai-caused-layoffs/493267">Is AI the Reason for Your Layoff? New York Becomes the First State to Require Companies to Disclose if So. It's the First Official Statewide Move Towards Understanding AI's Effect on the Labor Market.</a></li> <li><a href="https://every.to/thesis/knowledge-work-is-dying-here-s-what-comes-next/">Knowledge Work Is Dying—Here’s What Comes Next</a></li> <li><a href="https://frontendfoc.us/link/169494/ef7e9370b1">MCP Is the Coming of Web 2.0 2.0</a></li> <li><a href="https://www.wired.com/story/meta-scores-victory-ai-copyright-case/">Meta Wins Blockbuster AI Copyright Case—but There’s a Catch</a></li> </ul> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://www.joanwestenberg.com/p/i-deleted-my-second-brain">I Deleted My Second Brain</a></li> <li><a href="https://goodanger.substack.com/p/on-whether-having-a-baby-ruins-your">On Whether Having a Baby Ruins Your Life or Not</a></li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="https://bydylanm.com/projects/what-i-learned-about-my-style-during-a-month-of-no-art-making/">What I Learned About My Style, the Art I Admire, and the Space Between Them</a></li> <li><a href="https://www.itsnicethat.com/articles/the-view-from-tokyo-irasutoya-illustration-130525">Irasutoya: The Best-Known Illustrator in Japan, That You’ve Probably Never Heard Of</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://geriinstitches.com/pona-jacket-pattern-review-how-i-stitched-sashiko-on-every-inch-of-it/">Pona Jacket Pattern Review &amp; How I Stitched Sashiko on Every Inch of It</a></li> </ul> Opportunity-Solution Alignment 2025-06-25T00:00:00.000Z https://melanie-richards.com/blog/opportunity-solution-alignment/ <p>When I first got into product management, the software development process resembled a Niagara-sized waterfall approach. This may be a familiar story to you: the Product Manager (PM) talks to customers, puts together a thorough product spec, gets that in front of cross-functional peers and stakeholders for review, and so on.</p> <p>Throwing a fully-featured, bajillion-page spec over the wall doesn’t feel good as a PM, nor as many of said spec’s recipients. I’m so glad that the industry has in many ways embraced a <a href="https://www.producttalk.org/2021/05/product-trio/">product triad</a> methodology, where Product, Design, and Engineering leads are thought partners in tight collaboration from day one. For product teams who similarly crave a more collaborative working style, I recommend using an Opportunity-Solution Alignment (OSA) exercise to transition from early customer discovery to solution exploration.</p> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-osa.png" alt="Opportunity-Solution Alignment (OSA) Exercise with a graphic of a matrix that includes squares for stickies" /></p> <h2 id="what-is-an-osa%3F">What is an OSA?</h2> <p>An Opportunity-Solution Alignment exercise is what it says on the tin: an opportunity to come together as a cross-functional team to:</p> <ul> <li>Align on a deep, shared understanding of the customer opportunities the team intends to solve for in an upcoming investment—and why those are important to solve for now</li> <li>Leverage everyone’s unique perspective to dream up compelling potential solutions to these opportunities</li> </ul> <p><a href="https://www.linkedin.com/in/matthew-rinehart/">Matt Rinehart</a> first introduced this particular format to the pillar team we both contributed to at Netlify. Fun fact: these exercises were called “Inceptions” at his previous org, but too many folks in had seen the movie <a href="https://letterboxd.com/film/inception/"><em>Inception</em></a> to let that name slide. 😉 Whatever you may call these, or whatever format they take, the most important concept is that you <strong>collaborate as a cross-functional team as early as possible in discovery phases.</strong></p> <h2 id="why-use-an-osa%3F">Why use an OSA?</h2> <p>Teamwork makes the dream work! An OSA leverages the entire team’s creativity and unique perspectives to unearth compelling solutions to important customer problems. An engineer might yes-and a designer’s idea with a simple and easily-achieved solution proposal. A product marketing manager could flag a fresh insight from the market.</p> <p>An OSA also creates a stronger sense of camaraderie and shared ownership. Team members that have a stake in the early direction feel a sense of pride that can translate into customer empathy, attention to quality, a willingness to experiment, and effective collaboration. The early alignment you do as a team enables you to accelerate the pace of decisions throughout the product development lifecycle.</p> <h2 id="when-to-use-an-osa">When to use an OSA</h2> <p>Let’s suppose you work at a SaaS company which builds software enabling folks to create and sell their own <a class="footnotes__ref" href="https://melanie-richards.com/blog/opportunity-solution-alignment/#plushies-note" id="plushies-ref" aria-describedby="footnotes-label" role="doc-noteref">plushies</a>. Your discrete shippable customer value is delivered as “Releases” organized into a multi-release thematic “Initiative”, which lasts 6-12 months. In between larger Releases, you also ship quality of life improvements and bug fixes.</p> <ul> <li>✅ <strong>Releases</strong> are the best scope of work to explore with OSAs. They’re substantive enough that you’ll have different pathways to explore, without getting totally lost in the weeds.</li> <li>⚠ <strong>Initiatives</strong> can be explored with an OSA, but you’ll need to structure them more carefully to keep the field of opportunity manageable. You may want to run an OSA at the beginning of an initiative, and later on for a specific release.</li> <li>⚠ <strong>Quality of life (QoL) updates</strong> are often small enough that they don’t warrant an OSA. However, I have run one for a more substantial QoL where there were multiple valid but mutually-exclusive ways to address the customer problem. In this case, just make the OSA shorter in length and with a smaller guest list.</li> <li>❌ <strong>Bugs</strong> can be fixed quickly without this ceremony.</li> </ul> <p>Now, let’s get into tactics:</p> <ul> <li><a href="https://melanie-richards.com/blog/opportunity-solution-alignment/#getting-set-up">Getting set up</a></li> <li><a href="https://melanie-richards.com/blog/opportunity-solution-alignment/#how-to-run-an-osa">How to run an OSA</a></li> <li><a href="https://melanie-richards.com/blog/opportunity-solution-alignment/#outcomes-and-next-steps">Outcomes and next steps</a></li> </ul> <h2 id="getting-set-up">Getting set up</h2> <p>First, take some time to set the context for your team:</p> <ul> <li>Meet 1:1 with any key folks you need to get on board, such as an Engineering Manager, who sets the tone for their direct reports. Share what you’d like to do with the team, and how it benefits these stakeholders.</li> <li>Create pre-reads for participants. This includes prepping <a href="https://www.figma.com/community/file/1519841138356895747">the OSA materials</a>, as well as a Loom walkthrough or similar introduction to the concept.</li> </ul> <h3 id="securing-buy-in">Securing buy-in</h3> <p>If you work in an organization where some functions aren’t accustomed to this type of early discovery and ideation, you’ll generally get one of two responses:</p> <ul> <li>“This is awesome, let’s do it!” 🙌</li> <li>“I don’t know, does this mean {function} is responsible for coming up with the solutions? Isn’t that the PM’s job?” These are fair questions!</li> </ul> <p>My experience has been that skeptical peers tend to love the approach once they try their first OSA: it becomes tangibly obvious that they have a seat at the table, and that their perspective matters. Beforehand, I find it’s helpful to frame the exercise as a pilot—something to try out. You could assure your peer that the PM is ultimately responsible for the outcomes of the OSA, but that you value everyone’s point of view and believe the team can generate some creative solutions together.</p> <h3 id="assembling-your-team">Assembling your team</h3> <ul> <li>At a minimum, an OSA should include the core product trio: product manager, designer, engineering manager, and any tech leads for the project. Ideally, invite other key contributors, such as other engineers who will work on this project.</li> <li>You can then get creative with the invite list! At one or another OSA, I’ve invited product marketing managers, solution/sales engineers, technical support pros, docs writers, data scientists, researchers, stakeholders, and so on. Anyone who you know to have unique perspective or insight on the opportunity space could be included.</li> <li>Be careful to keep the list manageable though! Probably <strong>~10</strong> people is a reasonable maximum.</li> </ul> <h3 id="making-the-time">Making the time</h3> <p>At 2–3 hours, an OSA can be a notable time commitment. There are a few tactics you can employ to make this a lighter lift:</p> <ul> <li>Trial an OSA for your more impactful and nebulous Releases. Generally, a Release kickoff likely happens infrequently enough that this time commitment isn’t so disruptive anyway.</li> <li>Break the OSA up into smaller sessions (in my template I suggest <a href="https://www.figma.com/community/file/1519841138356895747">two sessions</a>).</li> <li>Reduce the time spent on a particular step. The estimates in the template are on the longer side.</li> <li>Take advantage of async time to share opportunity context or request input.</li> <li>When scheduling an OSA, optimize for a smaller handful of required participants’ calendars. You could consider using time slots for existing ceremonies (such as a team meeting).</li> </ul> <p>Ultimately though, a couple hours of alignment early in a project can save you exponential amounts of time spinning your wheels and creating team alignment throughout the software development lifecycle. That’s a worthwhile investment in your shared success.</p> <h2 id="how-to-run-an-osa">How to run an OSA</h2> <p>First off, I’ve created a <a href="https://www.figma.com/community/file/1519841138356895747">Figma Community Template for OSAs</a>, which you are welcome to use for these brainstorming exercises!</p> <h3 id="session-1">Session 1</h3> <h4 id="step-1%3A-opportunity-alignment">Step 1: Opportunity Alignment</h4> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-opp-alignment.png" alt="Sections in a Figjam file for customer problems and opportunities, as well as first principles" /></p> <p>Before the OSA begins, the driver—often the PM—should gather context on the customer opportunity space. The materials you create are specific to the problem space, but should include:</p> <ul> <li>The customer problem or opportunity set</li> <li>Who the target customer segment is, what we know about them</li> <li>Why this is important to solve now</li> <li>Non-goals, including customer opportunities that aren’t critical to solve for now</li> </ul> <p>You could consider notes on the frequency, severity, or relative priority of the various opportunities. Include a summary of supporting user research or data insights.</p> <p>Share these materials as a pre-read. Walk through them together live and prompt for questions, additional insights, and discussion. From this step, everyone should have a good sense of what you’re aiming to achieve.</p> <h4 id="step-2%3A-solution-ideation">Step 2: Solution Ideation</h4> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-solution-ideation.png" alt="Section in a Figjam file for generating solution ideas" /></p> <p>Set a timer for 15 minutes and ask participants to generate some <strong>customer-facing</strong> solutions to the aligned-upon customer opportunity set. Encourage folks not to worry about implementation details yet—though these stickies will almost certainly creep into the brainstormed solutions!</p> <h4 id="step-3%3A-solution-grouping">Step 3: Solution Grouping</h4> <p>Once brainstorming time is up, ask participants to quietly group the ideas into “like” groups. Folks can come off mic to ask each other clarifying questions. In the past I’ve done this part live with the group, but have found we can do it faster if we all chip in rather than going sticky by sticky.</p> <p>That’s it for session 1! You can encourage participants to add more stickies in between sessions if another idea pops up in the meantime.</p> <h3 id="session-2">Session 2</h3> <h4 id="step-4%3A-solution-alignment-%E2%80%94-value">Step 4: Solution Alignment — Value</h4> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-solution-alignment.png" alt="A matrix in a Figjam file for alignment of solutions by high-low value and low-high effort. The quadrants are labeled &quot;Do it now&quot;, &quot;Do it next&quot;, &quot;Do it later&quot;, &quot;Don't do it (for now)&quot;" /></p> <p>As a team, place your sticky groups vertically on a matrix, from high to low value. This should be an objective discussion: how well do you hypothesize the idea would solve the customer opportunity in a delightful way? Highest impact on the opportunity = highest value. Feasibility or level of effort is not a factor now—we’ll get to that next.</p> <ul> <li>Remind participants there are no bad ideas. We’re assessing fitness of the solution to the aligned opportunities—not critiquing individuals.</li> <li>Some ideas may be intriguing but wouldn’t have direct impact on the opportunity set. Place these in the parking lot, along with implementation details, product fundamentals, etc.</li> <li>There should be no stickies at equal height, or on the horizontal axis. Be honest about their relative priority! You may find that you move some stickies up or down as you go through this exercise.</li> </ul> <h4 id="step-5%3A-solution-alignment-%E2%80%94-effort">Step 5: Solution Alignment — Effort</h4> <p>As a team, move your sticky groups horizontally on the matrix, from low to high effort.</p> <ul> <li>Remind the team these are <strong>very rough</strong> estimates—we are not asking for ETAs, and we’ll expect actual effort to change based on additional discovery work.</li> <li>Effort is again relative. In <a href="https://www.figma.com/community/file/1519841138356895747">the template</a>, I’ve labeled the lowest effort as “a person-day or less”, and highest effort as “a person year or more”. This is just to give some bounds to the conversation—adjust to whatever language resonates with your team.</li> <li>At this point, folks may notice something they care about is not ending up in the “do it now” quadrant. Don’t panic! A vote is coming up next.</li> </ul> <h4 id="step-6%3A-voting-exercise">Step 6: Voting Exercise</h4> <p>Once all your stickies are in place on the matrix, lead the team in a ~10 minute voting exercise. Everyone gets 3 👍 and 3 👎. The point of this exercise is to express enthusiasm for something that might be further down the priority list—or disagreement that a solution should be explored further.</p> <ul> <li>Participants can use allocate these votes however they like, such as three thumbs up on an idea they feel very strongly about.</li> <li>There is no need to use a thumbs up in the “Do it now” quadrant—these are already solutions the team is likely to explore further. Instead, use these to advocate for ideas in another quadrant that you think should be explored now. The main questions this vote probes for: <ul> <li>Any solutions not falling under “do it now” that we want to explore?</li> <li>Any solutions under “do it now” that could be deferred?</li> </ul> </li> </ul> <p>Once voting is complete, take a few minutes to discuss the outcomes as a team—then wrap up the OSA with next steps!</p> <h2 id="outcomes-and-next-steps">Outcomes and next steps</h2> <p>Teams that go through an OSA should now be aligned on the customer opportunity space, and have a good sense of solutions they’d like to explore further. From here:</p> <ul> <li>The PM should share a summary of the high-priority solutions the team aligned on, potentially in a product requirements document (PRD). This exercise may not end in full consensus—you may need to make judgement calls.</li> <li>The cross-functional team can now explore the solution ideas further with design mocks, prototypes, usability testing, customer interviews, etc.</li> <li>If something new and compelling pops up during further discovery—or customers <em>aren’t</em> responding well to the solutions—pay attention to these insights! Pivot your approach as needed and discuss this evolution continuously as a cross-functional team.</li> </ul> <h2 id="parting-thoughts">Parting thoughts</h2> <p>Opportunity-Solution Alignment exercises are a worthwhile investment in a cross-functional team’s success. Use OSAs to create clarity on important customer opportunities, and to generate creative solutions to these opportunities. Please <a href="https://www.figma.com/community/file/1519841138356895747">try it out with your team</a> and let me know how it goes!</p> <p>And a shameless plug: if you want to empower web makers alongside collaborative peers with strong customer empathy chops, <a href="https://webflow.com/careers/roles">we’re hiring at Webflow</a>!</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="plushies-note" class="footnotes__list-item" role="doc-endnote">Why this example? “Osa” is a she-bear in Spanish => teddy bears => plushies. Welcome to my mind, it’s a strange place. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/opportunity-solution-alignment/#plushies-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, May 2025 2025-06-09T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2505/ <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <ul> <li>Finished my first colorwork sock, with a flower motif along the cuff. Next up, start the second sock!</li> <li>Started a t-shirt dress hack from the <a href="https://closetcorepatterns.com/products/core-t-shirt-free-pattern">Closet Core T-shirt</a>. In May I printed, cut, and adapted the pattern; then I ironed and cut the fabric.</li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <h3 id="first-time-visit-to-montreal">First-time visit to Montreal</h3> <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-drawn-and-quarterly-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-drawn-and-quarterly-s.webp" alt="A rainy view of the sidewalk in front of Drawn & Quarterly, a bookstore and publisher specializing in comic books. Two people are walking by with umbrellas, and there's a hanging pot of yellow flowers at the front of the store." /> </picture> <p>My husband and I both had a fantastic time exploring Montreal—even more fun than we had expected. A few key themes:</p> <ul> <li>It’s nice to travel just a few hours from West Coast US and feel like you’ve been transported to a European city.</li> <li>I enjoyed how Montreal seemed to invest in fun, cultural things “just because”. Teeter totters on the side of a street, which is also closed to car traffic? Why not!</li> <li>Food and bev was incredible (strong N/A drinks game!), and the service we received everywhere we went was relaxed and friendly. Truly, I was gratified by how welcoming everyone was and that a server did not laugh at me when I shared that “feuille” is my Achilles Heel re: French pronunciation. 😆</li> </ul> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-mont-royal-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-mont-royal-s.webp" alt="My husband standing on a side-drenched wooden staircase in the midst of vibrantly green deciduous trees." /> </picture><figcaption>Surprisingly rainy but zen walk down the Grand Staircase from Mt. Royal</figcaption></figure> <h3 id="highlights%3A-activities">Highlights: activities</h3> <ul> <li>Musée des beaux-arts de Montréal</li> <li>Pointe-à-Callière, the archaeology museum</li> <li>Walking around Vieux-Port…really just walking around anywhere</li> <li>Walking the trails at Mount Royal Park (we spotted a beaver!!)</li> </ul> <h3 id="highlights%3A-food-%26-drink">Highlights: food &amp; drink</h3> <ul> <li>Cadet</li> <li>Bar Bello for a drink and a snack</li> <li>Alep: over-ordered here 💯</li> <li>Café Myriade for coffee</li> <li>Nicole Buvette du Quartier for more-upscale poutine and chill vibes</li> <li>Mano Cornuto: cheerfully chaotic vibes here, like The Bear but with a smile</li> <li>Bouillon Bilk: fanciest place we went to; calm and not snooty</li> </ul> <h3 id="mcaf-(montreal-comic-arts-festival)">MCAF (Montreal Comic Arts Festival)</h3> <p>When in Montreal, one must seek out comics. I stopped by Drawn &amp; Quarterly and they asked me if I was in town for MCAF. No, but what a happy coincidence!</p> <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-mcaf-street-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-mcaf-street-s.webp" alt="A set of comic panels blown up to poster size, displayed on standing metal grates, sort of like gridded fences or barriers. Each panel is in black and white with an accent background color, and I have no idea what's going on because it's all in French." /> </picture> <p>We decided to check it out the next day. MCAF has such a chill, community vibe. It’s basically a bunch of tents set up for vendors and programming across a few city blocks in Plateau-Mont-Royal—like a farmer’s market but with graphic novels. They also had some open-air poster exhibits sprinkled down the street. I picked up some fun books and stickers from Sarah Anderson, Little Sprout, and Boum.</p> <h2 id="%F0%9F%8C%B1-digital-gardening">🌱 Digital gardening</h2> <h3 id="this-site">This site</h3> <p>Updated the <a href="https://melanie-richards.com/now/observing-nature/">Observing Nature</a> page with a bunch of observations from Merlin. Also categorized birds by “family”. I had to do this manually, as eBird doesn’t give you this data on export. The hope is to start grouping the observations by family on this site.</p> <h3 id="snacks-site"><a href="https://snacks.melanie-richards.com/">Snacks site</a></h3> <p>Added gummies from Sweden 🇸🇪</p> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://www.producttalk.org/2025/02/spicey-framework/">Making Continuous Discovery Work for You: The SPICEY Approach</a></li> </ul> <h3 id="people-management-%26-leadership">People management &amp; leadership</h3> <ul> <li><a href="https://newsletter.weskao.com/p/super-specific-feedback">Super Specific Feedback: How to Give Actionable Feedback on Work Output</a></li> <li><a href="https://newsletter.weskao.com/p/strategy-not-self-expression">Strategy, Not Self-Expression: How to Decide What to Say When Giving Feedback</a></li> </ul> <h3 id="accessibility">Accessibility</h3> <ul> <li><a href="https://www.deque.com/blog/states-drop-constitutional-challenge-to-section-504-in-texas-v-kennedy/">States Drop Constitutional Challenge to Section 504 in Texas v. Kennedy</a></li> <li><a href="https://www.deque.com/blog/accessibility-reads-thursday-may-29/">Accessibility Reads: Thursday, May 29</a></li> </ul> <h3 id="design-%26-development">Design &amp; development</h3> <h3 id="web">Web</h3> <ul> <li><a href="https://rachelandrew.co.uk/archives/2025/05/02/reading-flow-ships-in-chrome-137/">Reading flow ships in Chrome 137</a></li> <li><a href="https://daverupert.com/2021/10/pre-publish-blogging-rituals/">My Pre-Publish Blogging Rituals</a></li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.wired.com/story/doge-college-student-ai-rewrite-regulations-deregulation/">DOGE Put a College Student in Charge of Using AI to Rewrite Regulations</a></li> <li><a href="https://www.wired.com/story/jony-ive-open-ai-hardware-io/">OpenAI's Big Bet That Jony Ive Can Make AI Hardware Work</a></li> <li><a href="https://www.wired.com/story/elon-musk-x-datacenter-fire/">Fire Breaks Out at a Data Center Leased by Elon Musk’s X</a></li> </ul> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://everythingchanges.us/blog/on-fear/">On Fear</a></li> <li><a href="https://everythingchanges.us/blog/cant-and-wont/">Can’t and Won’t</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://itsjonq.com/posts/work-dailies">Work Dailies</a></li> <li><a href="https://www.archerandolive.com/blogs/news/3-ways-to-create-a-summer-bucket-list">3 Ways to Create a Summer Bucket List</a></li> <li><a href="https://www.gentlemanstationer.com/blog/2025/5/14/ink-review-taccia-utamaro-aomurasaki-is-the-deepest-of-purple-blacks">Ink Review: Taccia Utamaro Aomurasaki Is the Deepest of Purple-Blacks</a></li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="http://drewscape.blogspot.com/2025/05/is-digital-pen-replacement-for-real-pen.html">Does a Digital Pen Replace a Real Pen?</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.texasstandard.org/stories/finnegans-wake-reading-group-austin-tx-atx-texas-james-joyce-book-club/">This Austin book club has been reading the same book for 12 years. They’re not even close to done.</a> via Samkap</li> <li><a href="https://www.bbc.com/news/live/cd0l2j51gygt">Woman, 20, says 'I don't like cheese' after winning Double Gloucester rolling race</a>: lighthearted news coverage via Rachel Andrew</li> <li><a href="https://www.huffpost.com/entry/utah-school-lunch-debt-relief-free-student-meals_n_681258fbe4b03207b5ba49fa">I Randomly Decided to Pay Off a School’s Lunch Debt. Then Something Incredible Happened.</a> via Eric Bailey</li> </ul> Blogging Questions 2025-05-05T00:00:00.000Z https://melanie-richards.com/blog/blogging-questions/ <p>Long after the zeitgeist has passed, I’m upholding my link in the blogging questions chain. Thanks to <a href="https://daverupert.com/2025/03/tag-you-re-it/">Dave</a> and <a href="https://ericwbailey.design/published/tag-youre-it/">Eric</a> for tagging me in on <a href="https://melanie-richards.com/blog/upcoming-talk-in-tulsa/">one of my favorite topics</a>!</p> <h2 id="why-did-you-start-blogging-in-the-first-place%3F">Why did you start blogging in the first place?</h2> <p>I suppose it depends on how far back you go. The first blogging-type activity I can remember is getting on LiveJournal in middle school, at a time when the Internet felt (to me) like a quiet respite. This was back in the days that LJ was pretty exclusive, and I had to do some ~ creative internet sleuthing ~ to get an invite.</p> <p>Jump forward quite a few years to college graduation, my first capital-B Blogging was on the portfolio site I made at the end of my graphic design degree. I added a blog section to it, with no real plan of what I’d put there. I decided to do a writeup on <a href="https://fuzzco.com/">Fuzzco’s site</a>, with commentary on how they’d themed each project page to the client’s brand. One of the studio owners saw Google Analytics traffic coming from my site, and decided to check out why. And that, kids, is how I landed my first job out of college!</p> <h2 id="what-platform-are-you-using-to-manage-your-blog-and-why-did-you-choose-it%3F">What platform are you using to manage your blog and why did you choose it?</h2> <p>I use Eleventy and plain ol’ Markdown files now. I like how lightweight and flexible Eleventy is as a static site generator. I don’t need to over-complicate this site.</p> <h2 id="have-you-blogged-on-other-platforms-before%3F">Have you blogged on other platforms before?</h2> <p>For my main personal site, I started with Wordpress, then used Kirby CMS, Jekyll, and finally Eleventy. I have a sneaking suspicion I’m missing something there.</p> <p>For other mini-sites, I’ve used Eleventy + plain Markdown files, Eleventy + Contentful, and Webflow’s CMS. Disclaimer, I’m currently employed by Webflow, but I’ve found the CMS quite nice to use so far. Simple while having exactly what I need.</p> <h2 id="how-do-you-write-your-posts%3F-for-example%2C-in-a-local-editing-tool%2C-or-in-a-panel%2Fdashboard-that%E2%80%99s-part-of-your-blog%3F">How do you write your posts? For example, in a local editing tool, or in a panel/dashboard that’s part of your blog?</h2> <p>I used to start from a kanban board in Notion, but I’ve started migrating my notes and such to Obsidian. I now use the <a href="https://github.com/mgmeyers/obsidian-kanban">Kanban community plugin</a> for my blog posts, and for crafting projects.</p> <p>I typically write most of the post in Obsidian, paste it into VS Code, and then bring images in at that point.</p> <h2 id="when-do-you-feel-most-inspired-to-write%3F">When do you feel most inspired to write?</h2> <p>In the past couple years, I’ve been gripped by a thought on weeknights, I’ll dash down some notes in the Notion / Obsidian mobile app, and then ultimately abandon it. Doesn’t Feel Great, but sometimes I just need to tell <em>myself</em> whatever’s on my mind.</p> <p>I also have a monthly blog-post-writing group, where a few friends and I meet on a Saturday morning to discuss what we’ll work on that day. Nice bit of accountability.</p> <h2 id="do-you-publish-immediately-after-writing%2C-or-do-you-let-it-simmer-a-bit-as-a-draft%3F">Do you publish immediately after writing, or do you let it simmer a bit as a draft?</h2> <p>Yeet to production 🤘</p> <h2 id="what-are-you-generally-interested-in-writing-about%3F">What are you generally interested in writing about?</h2> <p>Web, accessibility, product management (now getting into a bit of people management as well), what I’m learning lately, crafts, journaling and stationery, any little hobbies and special interests.</p> <h2 id="who-are-you-writing-for%3F">Who are you writing for?</h2> <p>I find that when I write for my future self, I end up sharing something that resonates with, helps, or fascinates other people. Honestly, I don’t overthink this.</p> <h2 id="what%E2%80%99s-your-favorite-post-on-your-blog%3F">What’s your favorite post on your blog?</h2> <p>I’ll let the people choose! My most popular blog posts (or those that seem to continue to help folks) are:</p> <ul> <li><a href="https://alistapart.com/article/semantics-to-screen-readers/">Semantics to Screen Readers (A List Apart)</a></li> <li><a href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/">Styling for Windows high contrast with new standards for forced colors (Windows)</a></li> <li><a href="https://melanie-richards.com/blog/currentcolor-svg-hcm/">CurrentColor SVG in forced colors modes</a></li> <li><a href="https://melanie-richards.com/blog/css-grid-sticky/">Sticky CSS Grid Items</a></li> </ul> <p>I’ve also been leaning into my monthly <a href="https://melanie-richards.com/blog/tags/learning-log">Learning Logs</a> over the past couple years.</p> <h2 id="any-future-plans-for-your-blog%3F-maybe-a-redesign%2C-a-move-to-another-platform%2C-or-adding-a-new-feature%3F">Any future plans for your blog? Maybe a redesign, a move to another platform, or adding a new feature?</h2> <p>Not too much right now! I might <a href="https://ethanmarcotte.com/wrote/magick-images/">follow Ethan’s lead</a> and generate some more fun default blog post images.</p> <h2 id="tag-%E2%80%98em.">Tag ‘em.</h2> <p>A keystone soapbox for me is that anyone even remotely interested in blogging should do it! I often notice that folks tend to filter themselves: they worry about not being original, or compelling, or the “best” at expressing what they mean to say. In truth, no one will handle a topic quite like you, with your particular histories and interests and ways of looking at the world. Just do it! <code>*Nike*</code></p> <p>So, dear reader, if these blogging posts strike your fancy: I choose you, Pikachu! ⚡ Please add your voice to the open web and share what blogging means to you.</p> Learning Log, Apr 2025 2025-05-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2504/ <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/wf-gsap-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/wf-gsap-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/wf-gsap-s.webp" alt="A vector illustration with a tiled pattern of Webflow and GSAP logos, overlaid with a couple hand cursor icons" /> </picture> <p>The biggest share of my brainspace at work lately: <a href="https://webflow.com/blog/gsap-becomes-free">Webflow + GSAP have made the GSAP library 100% free</a>! Everyone in the web community can use all of GSAP—including previously-paid plugins—for free, whether on or off Webflow. We’ve also made the library suuuuper easy to install on Webflow sites, to use with custom code.</p> <p>It has been such a lovely experience working with Jack and Cassie from GSAP, and having them join our Interactions crew at Webflow. There’s so much more around the corner—can’t wait for us to be able to share with everyone!</p> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <ul> <li>Still knitting my first pair of colorwork socks. I’m almost to the toes on sock #1!</li> <li>Followed along with a couple backlist Scribble Brigades from <a href="https://www.patreon.com/c/sophiemcpike/posts">Sophie McPike’s Patreon</a></li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <ul> <li><a href="https://www.mochimommy.com/easy-homemade-mochi/">Made mochi</a> for the first time. The top of it looked a little weird because I didn’t realize for most of the bake that I needed to cover it with tin foil. Still tasted like mochi though!</li> <li>Participated in the Dewey’s 24 Hour Readathon again. I only read for 7 hours total this time, but I was to get through my library book backlog, so I’m calling that a win. 2025 is on track so far to be a pretty meh reading year (again).</li> </ul> <h2 id="%F0%9F%9B%9C-on-the-internet">🛜 On the internet</h2> <ul> <li><a href="https://bsky.app/profile/zeu.dev/post/3lcbzby7cls2e">More of this, please</a></li> <li>I did not have <a href="https://homestarrunner.com/toons/backtoawebsite">“Homestar Runner describes my worldview in a little ditty”</a> on my 2025 bingo card but I’m glad for this surprise! (<a href="https://samkapila.com/">via Sam</a>)</li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <h3 id="web">Web</h3> <ul> <li><a href="https://adactio.com/journal/21853">oklch</a></li> <li><a href="https://www.w3.org/news/2025/first-public-working-draft-css-gap-decorations-module-level-1/">First Public Working Draft CSS Gap Decorations Module Level 1</a></li> <li><a href="https://bell.bz/i-think-i-need-to-change-my-attitude-towards-webrings">I think I need to change my attitude towards webrings</a></li> </ul> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://everythingchanges.us/blog/keep-moving/">Keep Moving</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://writingatlarge.com/2025/04/13/how-i-use-my-notebooks-new-streamlined-weekly-review-format/">How I Use My Notebooks New Streamlined Weekly Review Format</a></li> <li><a href="https://itsjonq.com/posts/work-dailies">Work Dailies</a>: from a fellow stationery-enthusiast coworker</li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="https://www.thisiscolossal.com/2025/04/tomoko-kubo-hiragana-embroidery/">Tomoko Kubo’s Hiragana Embroideries Double as Japanese Language Learning Devices</a></li> <li><a href="http://drewscape.blogspot.com/2025/04/drawing-people-quickly-for-urban.html">Drawing People Quickly for Urban Sketching</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://joshcollinsworth.com/blog/the-blissful-zen-of-a-good-side-project">The Blissful Zen of a Good Side Project</a></li> <li><a href="https://www.wired.com/story/doge-college-student-ai-rewrite-regulations-deregulation/">DOGE Put a College Student in Charge of Using AI to Rewrite Regulations</a>. Lovely, not at all concerning. 🫠</li> </ul> Learning Log, Mar 2025 2025-04-08T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2503/ <p>March went by in the blink of an eye, between traveling for half the month and trying to keep moving forward in spite of the constant state of crisis Americans find ourselves in.</p> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <picture class="u-limit-width"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-colorwork-cuff-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-colorwork-cuff-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-colorwork-cuff-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-colorwork-cuff-s.webp" alt="The cuff of a sock (still on the needles) with a dark green flower or clover motif, on a background of variegated yarn in bright pink, orange, lime green, and off-white tones" /> </picture> <ul> <li>Made great progress on my first <strong><a href="https://www.ravelry.com/patterns/library/colorwork-cuff-club">Colorwork Cuff Club</a> sock</strong>; I’m knitting the flowers from the August pattern—though with my dark green color they look more like clovers perhaps. I’ve completed the cuff, heel, and gusset on one sock and have now started working on the foot. I’m pleased that the colorwork was able to fit over my heel when I tried it on for size!</li> <li>Drew a few sketchbook pages on location in Goa, India.</li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <p>My husband and I traveled to India for a couple weeks to visit my in-laws. While returning to the U.S. after international travel feels a bit more trepidatious these days, everything went fine and it was really nice to spend time with family in person. I had two new experiences on this trip:</p> <ul> <li>My first domestic flight within India.</li> <li>My first time in Goa, a beach town in India with a notable Portuguese influence. Despite the fact that that influence has its roots in colonialism, the area was quite beautiful—interesting, vibrant architecture; so many mangroves on the way in; and neat animals on the beach. We saw a TON of black kites scoping out the fishermans’ catch that day. I’d never seen more than a handful of raptors in one place at a time.</li> </ul> <div class="l-grid l-grid--media l-grid--halves"> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-black-kite-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-black-kite-s.webp" alt="A beautiful photo of a dark-brown raptor (a bird) cruising through a cloudless blue sky. The kite’s wings are fully outstretched, displaying its body and full wingspan" /> </picture><figcaption>This photo courtesy of Rahul, my husband</figcaption></figure> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-goa-sunset-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-goa-sunset-s.webp" alt="A soft pink-orange sunset reflecting onto fairly placid water. In the middle ground is a small boat, with another small one near the horizon. The foreground is dominated by a backlit palm tree." /> </picture><figcaption>The bay in Goa at sunset</figcaption></figure> </div> <p>Speaking of raptors, it’s amazing what you notice as your attention changes. Most of my family now lives in my college town, and on every visit I see and/or hear several hawks over the trees. I don’t remember ever noticing them during my four years of college.</p> <h2 id="%F0%9F%9B%9C-on-the-internet">🛜 On the internet</h2> <ul> <li><a href="https://www.thisiscolossal.com/2025/03/katherine-duclos/">Through LEGO Compositions, Katherine Duclos Grounds Chaos in Color</a></li> <li><a href="https://bsky.app/profile/weratedogs.com/post/3lk2clhjz622b">This post</a> is a master class in writing evocative alt text.</li> <li><a href="https://owlsintowels.org/">Owls in Towels</a>, via <a href="https://ericwbailey.design/">Eric</a></li> <li><a href="https://bsky.app/profile/adamtots.bsky.social/post/3ll2zjmedrk2w">This short comic on the human condition by Adam Ellis</a>. Alt text: a man-presenting character is shown over 3 panels spending happy times with friends: walking with ice cream cones, playing a game together, talking to two friends at a party. In the fourth panel, he lies awake at night asking himself, “am I fundamentally unloveable?”</li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://daverupert.com/2025/03/enshittification-has-a-flavor/">Enshittification as a Matter of Taste</a></li> <li><a href="https://www.elenaverna.com/p/five-plg-tactics-every-sales-led">Five PLG tactics every sales-led company should do</a></li> <li><a href="https://www.elenaverna.com/p/company-blogs-are-no-longer-worth">Company blogs are no longer worth the investment</a> – interesting…</li> </ul> <h3 id="accessibility">Accessibility</h3> <ul> <li><a href="https://adrianroselli.com/2025/03/be-wary-of-accessibility-guarantees-from-anyone.html">Be Wary of Accessibility Guarantees from Anyone</a></li> <li><a href="https://martijnhols.nl/blog/the-european-accessibility-act-for-websites-and-apps">The European Accessibility Act for Websites and Apps</a></li> </ul> <h3 id="design-%26-development">Design &amp; development</h3> <ul> <li><a href="https://kyrylo.org/html/2024/10/25/why-does-target-blank-have-an-underscore-in-front.html">Why does target=_blank have an underscore in front</a></li> <li><a href="https://desktopofsamuel.com/oklch-explained-for-designers">OKLCH, Explained for Designers</a></li> <li><a href="https://developer.chrome.com/blog/css-text-box-trim">CSS Text-Box-Trim</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://www.theverge.com/press-room/617654/internet-community-future-research">The Future of the Internet Is Likely Smaller Communities, With a Focus on Curated Experiences</a></li> <li><a href="https://bell.bz/i-like-having-a-links-page">I Like Having a Links Page</a></li> <li><a href="https://web-platform-dx.github.io/web-features-explorer/release-notes/march-2025/">March 2025 Web Platform Update</a></li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.elenaverna.com/p/ai-is-killing-some-companies-yet">AI is killing some companies, yet others are thriving - let's look at the data</a></li> <li><a href="https://www.theverge.com/news/636948/openai-chatgpt-image-generation-gpt-4o">ChatGPT’s New Image Generator Is Delayed for Free Users</a></li> <li><a href="https://heydonworks.com/article/poisoning-well/">Poisoning Well</a></li> </ul> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://news.uchicago.edu/story/writing-about-worries-eases-anxiety-and-improves-test-performance">Writing about worries eases anxiety and improves test performance</a></li> <li><a href="https://ckarchive.com/b/p9ueh9h2dx5gksm6ggw6kapn5o333hr">The Imperfectionist: Three Ideas for Turbulent Times</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li> <p><a href="https://rediscoveranalog.com/keeping-up-with-the-journaling-habit-when-traveling/">Keeping Up With the Journaling Habit When Traveling</a></p> </li> <li> <p><a href="https://thepenguinpost.substack.com/p/journals-blossoms-and-commonplace">Journals, blossoms, and commonplace notes about civics</a></p> </li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="https://www.moderndailyknitting.com/community/knitting-the-wheel-of-the-year/">Knitting the Wheel of the Year</a></li> <li><a href="https://sketchaway.substack.com/p/contrast-for-better-sketches">Contrast for Better Sketches</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://anhvn.com/posts/2025/weeknotes-30/">Anh’s Weeknotes 30</a></li> </ul> Learning Log, Feb 2025 2025-03-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2502/ <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <ul> <li><a href="https://making.melanie-richards.com/closet-core-tshirt/">Closet Core T-Shirt</a>: finally wrote a blog post for my first ever t-shirt, which I sewed in February!</li> <li>Finished knitting a Seattle Kraken beanie, which also needs a blog post.</li> <li>Started knitting my second pair of socks. This time I’m trying out colorwork on socks; I’ve learned the technique on clothing items that are more forgiving when it comes to fit and stretchiness (like the hat).</li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <div class="l-grid l-grid--media l-grid--halves"> <figure class=""><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-la-jolla-seals-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-la-jolla-seals-s.webp" alt="A shot of a beach far from above, where a whole bunch of fat brown seals are sunning themselves along the shoreline. There's a barrier from the waves on the far side of the beach." /> </picture><figcaption>Harbor seals at Children’s Pool Beach, La Jolla</figcaption></figure> <figure class=""><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-la-jolla-tide-pools-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-la-jolla-tide-pools-s.webp" alt="A close-up view of a network of circular-ish tide pools with the ocean in the background. There’s little bits in the tide pools, probably periwinkles." /> </picture><figcaption>La Jolla Tide Pools, pretty legit</figcaption></figure> </div> <ul> <li>Went to <strong>San Diego</strong> for a work trip! I’ve only been there once before and I didn’t have <em>great</em> memories from the previous visit. I had received some heavy personal news while at a workshop / conference for a work community that was new to me at the time. It was a very lonely feeling. I’m glad to have made better memories this time around, connecting with my co-workers and bopping around town with my husband the following weekend.</li> <li><strong>Visited La Jolla.</strong> One of my favorite parts of traveling is witnessing nature in different parts of the world, and this was no exception. I loved seeing all the harbor seal pups at the Children’s Pool Beach; the seals are so cute and funny when they flop themselves across the sand. Always a big fan of tide pools as well. I spotted Hartweg’s Chitons, Aggregating Anenomes, Black Tegulas, Periwinkles, Common Coralline, Giant Kelp, and some type of little hermit crabs.</li> </ul> <h2 id="%F0%9F%8C%B1-digital-gardening">🌱 Digital gardening</h2> <ul> <li><a href="https://snacks.melanie-richards.com/">Snacks site</a>: added a couple new snacks for the first time since May.</li> <li><a href="https://making.melanie-richards.com/closet-core-tshirt/">Making site</a>: started listing hashtags for sewing patterns and materials in the blog post sidebar. My social media presence has contracted quite a bit, especially now that I am no longer on Instagram, where most of the sewists are. I figured I might as well make my blog posts findable to my people, in some small way.</li> </ul> <h2 id="%F0%9F%9B%9C-on-the-internet">🛜 On the internet</h2> <p><a href="https://github.com/davatron5000/awesome-standalones">Awesome Standalones</a>: a collection of framework-agnostic Web Components.</p> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <p><a href="https://ethanmarcotte.com/wrote/leaving-18f/">Moving on From 18F.</a>: if you read one link from this post, make it this one. A thoughtful and frankly inspiring account from Ethan on facing adversity with grace and integrity.</p> <h3 id="product">Product</h3> <p><a href="https://www.elenaverna.com/p/how-to-build-brand-awareness-through">How to Build Brand Awareness Through Product Impressions, Not Marketing</a></p> <h3 id="accessibility">Accessibility</h3> <p><a href="https://webaim.org/blog/salary-survey-results/">Global Digital Accessibility Salary Survey Results</a></p> <h3 id="design-%26-development">Design &amp; development</h3> <p><a href="https://stephaniewalter.design/blog/color-theory-palette-resources-tools-for-designers/">Color Theory &amp; Palette – Resources and Tools</a></p> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://everythingchanges.us/blog/what-is-your-work-now/">What Is Your Work Now?</a></li> <li><a href="https://www.vox.com/future-perfect/392634/how-meditation-works-new-science-consciousness">How Meditation Deconstructs Your Mind</a></li> <li><a href="https://ckarchive.com/b/4zuvhehpp24m4t6ovveola6g9z777s5">The Imperfectionist: Reality Is Right Here</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.washingtonpost.com/lifestyle/2025/02/09/journal-diary-centenarian-north-dakota-100/">North Dakota Woman Has Written in Her Diary Every Day for 90 Years</a></li> <li><a href="https://oddorange.co.uk/blogs/news/drawing-sessions-recap-the-stunning-art-our-customers-created-in-2024">Drawing Sessions Recap: The Stunning Art Our Customers Created in 2024</a></li> <li><a href="https://lifehacker.com/tech/four-apps-you-can-replace-with-obsidian-plugins">This Note-Taking App Can Replace Four of the Most Popular Productivity Tools</a>: I started playing around with Obsidian in February. There’s a Slack channel at my work for Obsidian enthusiasts, where a coworker shared this link.</li> </ul> Learning Log, Jan 2025 2025-02-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2501/ <p>I can’t even begin to state how rough January was for my mental health due to Political Circumstances; you may be feeling the same. Let’s be excellent to each other these next 4 years. We can’t control how our politicians show up, but we can nudge the course of things in tiny, positive ways. Every bit of joy or good you create means something, no matter how small or insignificant it may feel to you.</p> <p><img src="https://melanie-richards.com/assets/images/content/9inhandpress-corita-kent.jpeg" alt="DOING &amp; MAKING are acts of HOPE. CORITA KENT" /></p> <p class="caption">Letterpress print by <a href="http://www.9inhandpress.com/">9inhandpress</a></p> <h2 id="%F0%9F%9A%80-shipping">🚀 Shipping</h2> <h3 id="variable-modes-%26-collections"><a href="https://webflow.com/updates/variable-modes">Variable Modes &amp; Collections</a></h3> <p>I’m ramping down my individual contributor work at Webflow (as of recently, I’m a manager of product managers). I was thrilled to launch variable modes and collections with the rest of the Styles team in January! With variable modes, designers can create sets of variable values that can be easily switched and applied throughout a site—unlocking responsive design across devices, efficient theming, and a more scalable design system.</p> <h3 id="backlog-readathon-stats"><a href="https://www.backlogreadathon.com/past/2024-dec">Backlog Readathon stats</a></h3> <p>I hosted my first readathon at the end of the year, and put together some stats for those who recorded their reading. I’m planning to do another one of these in August, at the end of the summer (for those of us north of the Equator). Fun fact, the per-page theming—winter vs summer palette—uses Webflow’s variable modes!</p> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <ul> <li>🧵 I sewed a Closet Core T-Shirt, my first knit garment!</li> <li>🧶 I started knitting a Seattle Kraken-themed beanie, with a colorwork design I cobbled together.</li> <li>🖍️ I joined <a href="https://www.patreon.com/c/sophiemcpike/">Sophie McPike’s Patreon</a> and drew a spread of sketchbook pages alongside one of her Scribble Brigade videos. I’m so inspired by Sophie’s colorful, carefree approach to art-making.</li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side quests</h2> <p>I’m trying to do two “side quests” a month in order to keep novelty in my life. In January:</p> <ul> <li>🌵 I went to Arizona for a work trip. Admittedly I didn’t get to see much beyond work stuff, but it was my first time in the state, so side quest it is!</li> <li>🎵 Went to a Bright Eyes show with my husband, and my inner emo teen was so pleased. My younger self would be so jealous of the shows I’ve attended over the past couple years. That feels pretty neat to me: a reassurance that there are good things and happiness in the future.</li> </ul> <figure class=""><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-bright-eyes-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-bright-eyes-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-bright-eyes-s.webp" alt="A packed concert hall bathed in red light, with the words 'You are now at a Bright Eyes concert' projected to the back of the stage, while the band plays. The ceiling overhead has a lot ornate, circular crown molding." /> </picture><figcaption>You are now at a Bright Eyes concert (and still masking, BTW)</figcaption></figure> <h2 id="%F0%9F%9B%9C-on-the-internet">🛜 On the internet</h2> <ul> <li><a href="https://www.youtube.com/shorts/ihmbqR6Hj7c">What is the default name in your language?</a> In which reading the comments section is actually useful and interesting.</li> <li><a href="https://www.ted.com/talks/jia_jiang_what_i_learned_from_100_days_of_rejection">What I Learned From 100 Days of Rejection</a></li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <h3 id="books">Books</h3> <p>I’ve had a very slow start to the year in terms of reading. I finished only 2 books in January, putting me 3 books behind my goal of 52 for the year. I’m reading consistently, but I am tending to pick up bigger books right now, which may account for slow reading…</p> <p><em>Some of the articles and blog posts below I read during December.</em></p> <h3 id="accessibility">Accessibility</h3> <ul> <li><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/C3pELgMqzCY/m/Lpb6DkueAQAJ?pli=1">Intent to Experiment: Reference Target for Cross-Root ARIA</a></li> <li><a href="https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/">Considerations for making a tree view component accessible</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://www.w3.org/news/2024/ethical-web-principles-is-a-w3c-statement/">Ethical Web Principles Is a W3C Statement</a></li> <li><a href="https://bradfrost.com/blog/link/react-v19-react/">React V19 – React</a></li> <li><a href="https://daverupert.com/2024/12/every-token-is-a-feature/">Every Token Is a Feature</a></li> <li><a href="https://web-platform-dx.github.io/web-features-explorer/release-notes/december-2024/">December 2024 Web Platform Update</a></li> <li><a href="https://chriscoyier.net/2025/01/04/slash-pages/">Slash Pages?</a></li> <li><a href="https://thehistoryoftheweb.com/the-free-web/?utm_source=ownyourweb&amp;utm_medium=email&amp;utm_campaign=issue-17">The Free Web</a></li> </ul> <h3 id="personal-growth">Personal growth</h3> <ul> <li><a href="https://textslashplain.com/2024/12/13/on-mortality/">On Mortality</a></li> <li><a href="https://nabeelqu.co/principles/">Principles</a>, not all of which I agree with, but food for thought</li> <li><a href="https://everythingchanges.us/blog/choosing/">Choosing</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://fromthepencup.wordpress.com/2024/11/24/today-i-get-to-got-to/">Today I Get to/Got To</a></li> <li><a href="https://bulletjournal.com/blogs/bulletjournalist/my-end-of-year-process">My End of Year Process</a></li> <li><a href="https://bulletjournal.com/blogs/bulletjournalist/how-to-do-a-bullet-journal-year-in-review">If Symptoms Persist Consult These Pages</a></li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="http://drewscape.blogspot.com/2024/12/coloring-comics-in-different-way.html">Coloring Comics in a Different Way</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.bps.org.uk/research-digest/voices-heard-people-schizophrenia-are-friendlier-india-and-africa-us">The Voices Heard by People With Schizophrenia Are Friendlier in India and Africa, Than in the US</a> (via Eric Bailey)</li> <li><a href="https://www.cnn.com/2025/01/20/asia/japanese-aquarium-lonely-sunfish-intl-scli/index.html">Japanese Aquarium Cheers Up Lonely Sunfish With Cardboard Cutouts of People</a> (via Eric Bailey)</li> <li><a href="https://daverupert.com/2024/12/my-little-games-workshop/">My Little Games Workshop</a></li> <li><a href="https://grainlinestudio.com/blogs/blog/track-laying-town-bag">My Track Laying Town Bag With Shoulder Strap</a>: TIL about track laying as a hobby</li> <li><a href="https://www.thisiscolossal.com/2025/01/national-archives-citizen-archivist-program/">Practice Your Cursive as a Citizen Archivist and Preserve Thousands of Historic Documents</a></li> </ul> 2024 Highlights 2024-12-31T00:00:00.000Z https://melanie-richards.com/blog/2024-highlights/ <h2 id="%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-career">👩‍💻 Career</h2> <p>2024 brought plenty of change, work-wise:</p> <ul> <li>In February I wrapped up my time on the product team at <strong>Netlify</strong>, and will forever treasure my experiences with so many lovely humans. Seriously.</li> <li>In March I started a role as Staff Product Manager on the Styles team at <strong>Webflow</strong>! This was one of those it’s-like-it-was-made-for-me roles, and I’ve had so much fun over the year collaborating with folks who are passionate about CSS, design, and above all, doing great things for our customers.</li> <li>We as a team shipped lots of updates for style variables and native support of CSS properties in the visual builder.</li> <li>I got to speak about design systems with my close colleague and friend Garrett Berg <a href="https://webflow.com/webflowconf/session/webflow-product-session-design-systems-in-webflow-brand-consistency-at-scale-sf">at Webflow Conf in SF</a>.</li> <li>I was part of a core team that <a href="https://webflow.com/blog/webflow-acquires-gsap">brought GSAP on board to power Webflow Interactions</a>.</li> <li>In November I moved into people management 😱 as a Group Product Manager at Webflow. Styles is still under my purview, along with some other areas of the website design and build workflow. We’re in the team-building phase right now, and super excited for our new Styles PM starting early next year…</li> </ul> <h2 id="%F0%9F%A7%B6-making">🧶 Making</h2> <h3 id="sewing">Sewing</h3> <p>This year I <em>really</em> hit my stride with sewing! I got over my intimidation with sewing clothes and have just sort of gone for it. <a href="https://www.youtube.com/@clairefromonline">Claire from Online</a> likes to say “it’s just paper” when it comes to journaling—“it’s just fabric” seemed to help me early on.</p> <p>What also has helped has been embracing sewing as a weekend-only hobby; sewing is a little too involved to set up and get into on a work night for me. I have really been cherishing “Sew Days” with my mom and my aunt, where we hop on FaceTime most Sundays and just sew together! It’s been a really nice way to connect from afar, and I always love parallel play.</p> <p>I’ve learned so many new skills in sewing this year, and the exhilaration I feel when I accomplish something new could power a small city.</p> <div class="l-grid l-grid--media l-grid--thirds"> <figure class=""><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-eucalypt-green-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-eucalypt-green-s.webp" alt="Me smiling in a dark forest green tank top made of a linen-like but somewhat drapier fabric. The surface of the fabric has a little bit of a nubby texture" /> </picture><figcaption>My second Eucalpyt Tank</figcaption></figure> <figure class=""><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-cmc-jaunty-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-cmc-jaunty-s.webp" alt="A jaunty close-up of a fabric supply case in black and white fabric, filled up with a notebook, Miffy stickers, Ecoline markers, and colored pencils" /> </picture><figcaption>Creative Maker Supply Case</figcaption></figure> <figure class=""><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-topstitch-top-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-topstitch-top-s.webp" alt="I am wearing a pale pink cotton PJ top that has a pattern of scattered geometric quilt blocks on them. The top matches the PJ bottoms I'm wearing, and the effect is almost like nurse's scrubs." /> </picture><figcaption>Matchy matchy cotton PJs</figcaption></figure> </div> <p>Projects I sewed:</p> <ul> <li><a href="https://making.melanie-richards.com/creative-maker-case/">Creative Maker Supply Case</a></li> <li><a href="https://making.melanie-richards.com/carolyn-pjs/">Carolyn PJ bottoms</a></li> <li><a href="https://making.melanie-richards.com/matchy-matchy-pjs/">Topstitch Essential Shirt</a></li> <li><a href="https://making.melanie-richards.com/quilted-kobo-pouch/">Quilted Kobo Pouch</a></li> <li><a href="https://making.melanie-richards.com/a-tale-of-two-tanks/">Two Eucalypt Tanks</a></li> <li>And I just started sewing a t-shirt!</li> </ul> <h3 id="knitting">Knitting</h3> <ul> <li>This year was mostly about socks! I knitted my <a href="https://making.melanie-richards.com/a-tale-of-two-tanks/">first pair of I’m So Basic socks</a>, which took 10 months to complete, whew.</li> <li>I attended <a href="https://flockfiberfestival.com/">Flock Fiber Fest</a> with my friend Shana, and have really enjoyed this crafty part of our friendship that’s developed in the past year.</li> <li>I wrapped up the year by learning how to <a href="https://making.melanie-richards.com/doodle-headband/">knit colorwork</a>.</li> </ul> <h3 id="drawing-%26-journaling">Drawing &amp; journaling</h3> <figure class="u-limit-width"><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-journal-cover-stickers-pink-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-journal-cover-stickers-pink-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-journal-cover-stickers-pink-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-journal-cover-stickers-pink-s.webp" alt="A black journal inside a clear plastic cover. Stuck to the journal itself are various stickers in black, white, red, and green. Their themes include Webflow, mushrooms, Miffy the bunny saying aloha, and other cute aesthetics." /> </picture><figcaption>Letting go of sticker preciousness is a journey</figcaption></figure> <ul> <li>I filled two Sterling Ink B6 gridded notebooks with memories: words, drawings, sticky photos, stickers, ephemera, and plenty of fountain pen ink. The journaling habit is actually sticking pretty well in the last couple years. I love the B6 size, as it’s the same size as a paperback: this is the story of my life!</li> <li>I learned <a href="https://melanie-richards.com/blog/learning-log-2402/">how to write blackletter calligraphy</a>—as a lefty.</li> <li>In sketchbooking, I’ve been drawing on location and also learning to embrace my proclivities for limited palettes and/or graphic shapes.</li> </ul> <h3 id="web">Web</h3> <ul> <li>Speaking of journaling, I made <a href="https://analog.melanie-richards.com/">Melanie in Analog</a> to document how I use my journals and stationery supplies.</li> <li><a href="https://littapes.melanie-richards.com/">Lit Tapes</a> documents songs referenced in books.</li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side Quests</h2> <ul> <li>Made pasta from scratch with my husband, Rahul, for our one-year anniversary</li> <li>Traveled to Palm Springs, Quebec, Oahu, SF a few times, and to visit family</li> <li>Poked around tidepools</li> <li>Saw an AURORA in my own dang neighborhood</li> <li>Finally watched the Syttende Mai parade in Seattle</li> <li>Spotted alligators and turtles and coyotes and hawks and spawning salmon and fish that looked like Gil from Finding Nemo</li> <li>Enjoyed food festivals with friends: Ballard Seafood Fest and Bite of Seattle</li> <li>Went on a couple hikes—more next year, please</li> <li>Saw an artist speak at Pottery Northwest</li> <li>Puttered around on a boat with coworkers</li> <li>Watched a Seattle Reign game ⚽</li> <li>Watched Jaws with my legs dangling in a friend’s hot tub</li> <li>Hosted a “Crafternoon” for my birthday, because you can do whatever you want in your mid-30s and no one can judge you, those are the rules</li> <li>Participated in readathons and <a href="https://www.backlogreadathon.com/">hosted one of my own</a>!</li> </ul> <h2 id="%F0%9F%8D%BF-watching">🍿 Watching</h2> <h3 id="movies">Movies</h3> <p>I watched <a href="https://melanie-richards.com/now/watching/">63 movies</a>, but didn’t rate many above 4 stars:</p> <ul> <li>Abigail (2024)</li> <li>Inside Out 2 (2024)</li> <li>Kiki's Delivery Service (1989), a forever favorite</li> <li>Memento (2000)</li> <li>Vampire humaniste cherche suicidaire consentant (2023)</li> </ul> <h3 id="tv">TV</h3> <p>This was a big year for rewatching TV. Lately, Rahul and I have been working our way through Friends, which he had never seen. In first watches, I particularly enjoyed “Shrinking”, and “True Detective: Night Country” has lived rent-free in my head all year.</p> <h2 id="%F0%9F%8E%B5-listening">🎵 Listening</h2> <ul> <li>My <a href="https://tidal.com/browse/playlist/09a8188f-8154-4608-9824-a44415d04a75">2024 playlist</a> includes quite a bit of Billie Eilish, Chappell Roan (like the rest of the planet), Local Natives, and Bombay Bicycle Club. The boygenius girlies also dominate my Tidal “top” songs.</li> <li>I saw <a href="https://melanie-richards.com/now/listening/">7 artists play live</a> this year. My favorite shows were Future Islands and Billie Eilish.</li> </ul> <h2 id="%F0%9F%93%9A-reading">📚 Reading</h2> <p>I finished 53 books, which makes this my least prolific reading year since 2015. That’s still a lot of reading but feels like a notable downshift. <a href="https://bookshop.org/lists/2024-favorite-books-melanie-richards">Books I rated at least 4.5 stars</a>:</p> <ul> <li><a href="https://bookshop.org/a/15644/9788409536399">“Evidence-Guided”</a> by Itamar Gilad</li> <li><a href="https://bookshop.org/a/15644/9781250865038">“Feel-Good Productivity”</a> by Ali Abdaal</li> <li><a href="https://bookshop.org/a/15644/9781250829818">“A House with Good Bones”</a> by T. Kingfisher</li> <li><a href="https://bookshop.org/a/15644/9781250819352">“Hidden Pictures”</a> by Jason Rekulak</li> <li><a href="https://bookshop.org/a/15644/9780316540506">“How Far the Light Reaches”</a> by Sabrina Imbler ⭐️</li> <li><a href="https://bookshop.org/a/15644/9780374611996">“Meditations for Mortals”</a> by Oliver Burkeman ⭐️</li> <li><a href="https://bookshop.org/a/15644/9781501154652">“Then She Was Gone”</a> by Lisa Jewell</li> <li><a href="https://bookshop.org/a/15644/9780593549223">“Vera Wong’s Unsolicited Advice for Murderers”</a> by Jesse Q. Sutanto</li> <li><a href="https://bookshop.org/a/15644/9780593439357">“The Very Secret Society of Irregular Witches”</a> by Sangu Mandanna</li> </ul> <h2 id="2025">2025</h2> <p>The part of me that sobbed on the U.S. Election Day wishes that 2024 would never end. I have some words that I am carrying with me:</p> <h3 id="theme%3A-%E2%80%9Ccuriosity%E2%80%9D">Theme: “curiosity”</h3> <p>I’ve given a lot of thought to my core values over the past year, and lately have felt convicted that “curiosity” is my cornerstone value. So much good comes from curiosity:</p> <ul> <li>Learning, making, personal achievement (hello, fellow Enneagram 3s)</li> <li>A reverence for life and the natural world</li> <li>Patience and kindness for others, informed by what <em>they</em> want and need</li> <li>Patience and kindness towards myself</li> <li>Bravery and experimentation</li> <li>Playfulness, joy, and fun!</li> </ul> <h3 id="%E2%80%9Cit%E2%80%99s-a-great-day-to-do-some-good-and-have-some-fun.%E2%80%9D">“It’s a great day to do some good and have some fun.”</h3> <p><a href="https://greysanatomy.fandom.com/wiki/It%27s_a_Beautiful_Night_to_Save_Lives">À la Dr. Derek Shepherd</a>—and <a href="https://textslashplain.com/2024/12/13/on-mortality/">inspired by</a> my former colleague and friend Eric Lawrence, hi Eric!—this is a mantra I’d like to start my day with, for a couple reasons:</p> <ol> <li>Anxiety is a lifelong journey for me, and I’d like to not forget that <em>life is a gift that is meant to be enjoyed</em>. I get to do work every that is aligned to my core personal mission, that is <em>fun</em>!</li> <li>The next 4 years are going to be tough for many of us. On the other hand, community care <em>should</em> be joyful! Let support networks be a party that everyone wants to join. 🎉</li> </ol> <p><strong>Happy New Year, let’s have some fun!</strong></p> New project: Melanie in Analog 2024-12-16T00:00:00.000Z https://melanie-richards.com/blog/analog-site/ <p><a href="https://melanie.codes/">Melanie Sumner</a> once mentioned wanting to trade lists of favorite stationery items, so what do I do? Make a whole little site, but of course!</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-analog-home-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-analog-home-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-analog-home-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-analog-home-s.webp" alt="The home page showing tiles for my journal and planner, as well as a list of favorite stationery supply categories. The categories are labeled with cute icons in a sticker aesthetic." /> </picture> <p><a href="https://analog.melanie-richards.com/">Melanie in Analog</a> documents how I use my notebooks for memory keeping (run-of-the-mill journaling) and planning work and life. I have examples on the site of each of the pages and spreads I use consistently to organize my brain. There’s also a list of favorite stationery supplies that I’ll update over time.</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-analog-favorites-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-analog-favorites-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-analog-favorites-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-analog-favorites-s.webp" alt="Favorite Things: like Oprah's favorite things, except it's just an internet rando and their stationery faves. There is a grid of favorite supplies, starting with a list of fountain pen inks with images, titles, and descriptions." /> </picture> <h2 id="another-use-case-for-css-aspect-ratio">Another use case for CSS <code>aspect-ratio</code></h2> <p>Melanie in Analog (built on Webflow, my current employer) is pretty simple functionally and aesthetically. A minor detail I like, though, is that I found another application for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio">aspect-ratio property</a>!</p> <p>Often folks use <code>aspect-ratio</code> to ensure images or cards are rendered with consistent dimensions. On this analog site, I demonstrate how I use my pages in B6 and A6 notebooks. I wanted the dimensions of the example pages to match the aspect ratio of the physical notebooks—while ensuring that if content grew quite long, the sample page would grow with the content instead of overflowing in a way that looked broken. This is a perfect use case for <code>aspect-ratio</code>.</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-analog-aspect-ratio-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-analog-aspect-ratio-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-analog-aspect-ratio-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-analog-aspect-ratio-s.webp" alt="A screenshot of my weekly spread, with two rectangles next to each other in a B6 aspect ratio on each page. There are tables and lists on the example pages representing how I manage tasks and events." /> </picture> <p>In this case the value is set to <code>125/176</code>, which is quite an odd set of numbers for this CSS property, probably. Those are the dimensions of a B6 notebook in <code>mm</code>.</p> <h2 id="plans-for-the-site">Plans for the site</h2> <p>Eventually I’ll add my nature journal to the site as well—maybe. I use a five-year journal to document the seasons, and sometimes I stop writing in it for awhile before beginning again.</p> <p>I may also add my sketchbook there, and include some more arty favorite supplies.</p> <p>For now, you can check out how I use my two main notebooks on <a href="https://analog.melanie-richards.com/">Melanie in Analog</a>!</p> Learning Log, Oct & Nov 2024 2024-12-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2411/ <h2 id="%F0%9F%92%99-webflow">💙 Webflow</h2> <p>This “monthly” Learning Log is a double feature because I have been just so dang busy at work! A few highlights from October and November:</p> <ul> <li>Webflow held our annual conference. Garrett Berg and I <a href="https://webflow.com/webflowconf/session/webflow-product-session-design-systems-in-webflow-brand-consistency-at-scale-sf?utm_source=webflow&amp;utm_medium=blog&amp;utm_campaign=webflowconf-agendalaunch">spoke about design systems in Webflow</a>, and we had just the most fun time getting to meet our customers throughout the event.</li> <li>We also announced at Webflow Conf that we are <a href="https://webflow.com/blog/webflow-conf-2024-keynote-recap">welcoming GSAP to the team</a>! It’s been such a pleasure getting to know Jack and Cassie. What they’ve done with the GSAP library is so powerful and well-aligned to our mission to empower all web makers.</li> <li>The team I work with released a couple “tiny but mighty” updates after the conference: <ul> <li><a href="https://webflow.com/updates/new-variable-types-number-percentage">New variable types: Number and Percentage</a></li> <li><a href="https://webflow.com/updates/text-decoration-styles">Text Decoration Styles</a></li> <li>Cool power features just around the corner for variables…</li> </ul> </li> <li>In November I transitioned into people management as a Group Product Manager! I’m nervous-excited for this career transition, and am currently building up this PM team. If you’re an absolute nerd for CSS and a seasoned product manager passionate about putting development superpowers in everyone’s hands, check out this role for <a href="https://boards.greenhouse.io/webflow/jobs/6368350">Staff PM, Styles</a>.</li> </ul> <h2 id="%F0%9F%8C%B1-digital-gardening"><strong>🌱 Digital gardening</strong></h2> <ul> <li><strong>This site:</strong> renamed the “is” section to <a href="https://melanie-richards.com/now/">“Currently”</a></li> <li>I’m almost finished with a site documenting how I use analog notebooks and stationery. Just need to load more “favorites” on the site and share that around!</li> </ul> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <ul> <li>Started making Outside Clothes: I sewed <a href="https://making.melanie-richards.com/a-tale-of-two-tanks/">two Eucalypt Tanks</a></li> <li>Finished knitting my first pair of socks!! 🎉</li> <li>Sketched a little on location <a href="https://www.instagram.com/p/DBzg_S7yNJt">in Oahu</a></li> </ul> <h2 id="%F0%9F%A7%99%F0%9F%8F%BB%E2%80%8D%E2%99%80%EF%B8%8F-side-quests">🧙🏻‍♀️ Side Quests</h2> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-green-turtle-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-green-turtle-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-green-turtle-s.webp" alt="A small green turtle poking its head out of the crystalline waters it's swimming in. There are lots of rocks under the surface of the water, despite its shallow depth, and a dark grey fish swims in the foreground." /> </picture> <ul> <li>Went to Oahu for an overdue vacation with Rahul. The food everywhere was <em>incredible</em>, and I especially loved going up to the North Shore to see tons of green turtles and tropical fish at <a href="https://hawaiisnorkelingguide.com/sharks-cove/">Sharks Cove</a>.</li> <li>On Thanksgiving weekend we went to Carkeek Park here in Seattle, WA to see the salmon spawning. It was late in their season so there were umm, more “unalived” salmon on the creekbed than still swimming upstream. It was very cute, though, to see a whole crowd of people cheering a salmon that was struggling up a little waterfall. Definitely a “memento mori” type of outing…</li> </ul> <h2 id="%F0%9F%9B%9C-on-the-internet">🛜 On the internet</h2> <ul> <li><a href="https://en.wikipedia.org/wiki/Diner_lingo">Diner lingo</a></li> <li>There is a reason why everyone you know recommended <a href="https://youtu.be/Df_K7pIsfvg?si=buuHNiieSnpi0Paq">Cabel Sasser’s talk at XOXO Fest</a></li> <li>People are hacking some <a href="https://bsky.app/profile/hctr.dev/post/3lb3ywnxac22n">cool stuff</a> on the Bluesky platform</li> <li><a href="https://everynoise.com/">Every Noise at Once</a>: a word-cloud map of musical genres</li> <li><a href="https://www.tylervigen.com/spurious-correlations">Spurious Correlations</a>: had great fun with this at a community craft social, especially since everyone present seemed to have different specialized knowledge</li> </ul> <h2 id="%F0%9F%94%96-reading">🔖 Reading</h2> <p><a href="https://melanie-richards.com/now/reading/">I read 9 books</a> between October and November. My favorites were <a href="https://bookshop.org/a/15644/9780374611996">“Meditations for Mortals”</a> (I appreciate everything I’ve read of Oliver Burkeman) and <a href="https://bookshop.org/a/15644/9781250819352">“Hidden Pictures”</a> by Jason Rekulak.</p> <p>I’m having a quite sluggish reading year so far: my annual reading hasn’t been this low since 2015?! I’m not really sure what’s going on, might be a combination of big life changes + not really vibing with a lot of the books I’m picking up + wanting to spend more time crafting than reading.</p> <p class="u-center">✷</p> <p>I typically also list articles I’ve highlighted here, but I think I’ll cry bankruptcy and revisit this for December’s Learning Log. Cya then! 👋🏼</p> Learning Log, Sep 2024 2024-10-02T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2409/ <h2 id="%F0%9F%9A%80-shipping">🚀 Shipping</h2> <p>My team at work released <a href="https://webflow.com/updates/variable-reordering-bulk-actions">variable reordering and bulk actions for variables</a>! It’s been so heartening to note how welcome this change was for Webflow users. I’m especially proud of the engineers for being game to implement some tricky but necessary keyboard navigation patterns.</p> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-topstitch-top-back-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-topstitch-top-back-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-topstitch-top-back-s.webp" alt="I made a PJ top in a pink cotton with abstract, colorful quilty shapes printed on it. This photo shows the back of my head so that you can see a matching pink scrunchie holding my ponytail." /> </picture> <ul> <li>🪡 Finished sewing up <a href="https://making.melanie-richards.com/matchy-matchy-pjs/">a matchy-matchy PJ set</a></li> <li>🪡 Started my foray into clothes you wear <em>outside the house</em> with a <a href="https://megannielsen.com/products/eucalypt-woven-tank-dress-sewing-pattern">Eucalypt Tank</a>. I’m between size ranges and chose to sew <a href="https://megannielsen.com/products/eucalypt-curve-top-dress-sewing-pattern">the Curve version</a> which meant learning how to sew DARTS! I want to take some photos and write a blog post about the process, but the tank top is very comfy, fits well, and I’m very proud of it.</li> <li>🧦 I went on a knitting rescue mission and saved my second sock! Long story short, I tried to undo a mistake in the heel flap, bad things happened, and my knitting was no longer on my needles. I was using size 0 needles, which meant getting the little loops back on was impossible—they kept pulling out. What I ended up doing was threading the needles through the SECOND row down, then pulling out the first row. That way I could reknit just a few botched rows instead of starting all over…</li> <li>🖍️ I drew two spreads in my Talens Art Creation sketchbook (<a href="https://www.instagram.com/p/DAMRiBBS5Iy/">here’s a strawberry one</a>). I keep waffling on how much I want to share from my sketchbooks on the internet. On the one hand, it’s nice to have a creative outlet just for yourself. On the other hand, I enjoy sharing openly with my communities. I honestly may just keep most of this to an Art Friends Discord I’m active in.</li> </ul> <h2 id="side-quests">Side Quests</h2> <div class="l-grid l-grid--media l-grid--thirds"> <figure class=""><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pink-sky-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pink-sky-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pink-sky-s.webp" alt="A very gentle pink sunset sky with a conifer poking up from the bottom of the frame" /> </picture><figcaption>Everything bathed in pink light</figcaption></figure> <figure class=""><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-brunch-eggs-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-brunch-eggs-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-brunch-eggs-s.webp" alt="A grain bowl with cauliflower, root veg, and a halved soft boiled egg on top. Lots of color in this meal!" /> </picture><figcaption>Beautiful little brunch bowl</figcaption></figure> <figure class=""><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-gingko-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-gingko-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-gingko-s.webp" alt="A green bough of gingko leaves with a bit of browning along their edges." /> </picture><figcaption>Neighborhood gingko</figcaption></figure> </div> <ul> <li>Saw Future Islands play at the Paramount and had a fantastic time</li> <li>Savored last-days-of-summer produce</li> <li>Hit a 90 day streak on meditation, my best yet! 🌟</li> <li>Made an egg sandwich inspired by “The Sentence” by Louise Erdrich, which has been living rent-free in my head for two years</li> </ul> <h2 id="on-the-internet">On the internet</h2> <ul> <li><a href="https://mushroomcoloratlas.com/">Mushroom Color Atlas</a></li> <li><a href="http://bookcoverarchive.com/">Book Cover Archive</a></li> <li><a href="http://charm.sh/">charm.sh</a> for cuter command line apps</li> </ul> <h2 id="reading">Reading</h2> <p>When compiling this list, I was surprised to note I hadn’t highlighted anything in <a href="https://readwise.io/read">the Reader app</a> for the back half of September. Things have been really busy leading up to Webflow Conf!</p> <h3 id="web">Web</h3> <ul> <li><a href="https://www.swiss-miss.com/2024/09/this-struck-a-nerve.html">Let’s Bring the Blog-Roll Back</a></li> <li><a href="https://aworkinglibrary.com/writing/coming-home">Coming Home</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; productivity</h3> <ul> <li><a href="https://www.svpg.com/coaching-feedback/">Coaching Feedback</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://www.gentlemanstationer.com/blog/2023/7/22/2023-travelogue-what-i-consider-when-visiting-pen-stores-pen-shows-and-shopping-at-smaller-retailers-in-general">2023 Travelogue: What I Consider When Visiting Pen Stores and Shopping at Smaller Retailers in General</a></li> <li><a href="https://www.wellappointeddesk.com/2024/09/30-ways-to-fill-an-empty-notebook-revised-enhanced/">30+ Ways to Fill an Empty Notebook</a></li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="https://www.ericafustero.com/project/a-drawing-a-day-2024-08">A drawing a day · Agosto 2024</a></li> <li><a href="https://katebingamanburt.substack.com/p/oh-hey-what-kind-of-pen-do-you-use?utm_source=substack&amp;utm_medium=email">Oh Hey! What Kind of Pen Do You Use?</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.psychologytoday.com/us/blog/shouldstorm/202012/weve-got-depression-all-wrong-its-trying-to-save-us">We’ve Got Depression All Wrong. It’s Trying to Save Us.</a></li> <li><a href="https://www.personalcanon.com/p/research-as-leisure-activity">Research as Leisure Activity</a></li> <li><a href="https://www.theguardian.com/science/article/2024/sep/05/common-food-dye-found-to-make-skin-and-muscle-temporarily-transparent">Common Food Dye Found to Make Skin and Muscle Temporarily Transparent</a></li> <li><a href="https://www.notion.so/What-s-in-Your-Control-5ffa3939926f436e8853f94924489e21?pvs=21">Study Reveals How Exercising Only on the Weekends Affects the Human Body</a></li> </ul> “Manage variables at scale with reordering and bulk actions” on Webflow 2024-09-04T00:00:00.000Z https://webflow.com/updates/variable-reordering-bulk-actions

Organize your variables how you see fit—reorder, group, or delete your variables with drag and drop or bulk actions.

Read the article on Webflow Learning Log, Aug 2024 2024-09-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2408/ <p>2024 continues to race by, and August was no exception. This month found me:</p> <ul> <li>Doing a bit of hiking and drawing en plein air</li> <li>Spending time with friends</li> <li>Catching the garment-sewing bug</li> <li>Clearing all my queues (to-read list on The StoryGraph, to-watch lists on streaming services)</li> </ul> <p><em>Right</em> at the end of August I had a minor injury that meant I was down for the count all of Labor Day weekend. It’s frustrating to be able to do nothing but binge watch TV for a few days, but I’m taking that as a signal from my body to <em>slow down and do nothing, please!</em></p> <div class="l-grid l-grid--media"> <figure class=""><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-talapus-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-talapus-s.webp" alt="An alpine lake with hills behind, covered in evergreen trees. In the foreground of the lake lie floating logs. In front of this scene, my hand is holding a small square sketchbook with a rendering of the lake." /> </picture><figcaption>Talapus Lake</figcaption></figure> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-ollalie-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-ollalie-s.webp" alt="My hand holding the sketchbook in front of another alpine lake. I’ve drawn the two lakes using water color and Neocolor II crayons" /> </picture><figcaption>Olallie Lake</figcaption></figure> </div> <p>In the blog-post-writing / parallel play group that I have going with friends, I was reminded quite suddenly that I used to have an eZine?! That people actually submitted their work to??? It was called Ego Bruise and had very “I’m in college” flair, so I’m equal parts mortally embarrassed and impressed that I had the bandwidth to organize this. Didn’t last very long, but you can find all the issues on <a class="footnotes__ref" href="https://melanie-richards.com/blog/learning-log-2408/#issuu-note" id="issuu-ref" aria-describedby="footnotes-label" role="doc-noteref">Issuu</a>: <a href="https://issuu.com/offshoot/docs/issue1">Issue 1</a>, <a href="https://www.notion.so/Learning-Log-Aug-2024-cea15e35f4f54646a406b81a4267fae4?pvs=21">Issue 2</a>, <a href="https://issuu.com/egobruise/docs/issue3">Issue 3</a>.</p> <h2 id="%F0%9F%9A%80-shipping">🚀 Shipping</h2> <p>At Webflow, we added support for <a href="https://webflow.com/updates/drop-shadows">drop shadow filters</a> natively into the Style panel. I’ve started <a href="https://melanie-richards.com/product/wf-tiny-but-mighty/">compiling “tiny but mighty” updates</a> from the Styles team; I’m the PM arm of that product triad.</p> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <p>I sewed my first garment, <a href="https://making.melanie-richards.com/carolyn-pjs/">a pair of Carolyn pajama bottoms</a>! Later in August I sewed up a matching top and scrunchie from other patterns, though I have yet to take some awkward photos for a blog post.</p> <h2 id="on-the-internet">On the internet</h2> <ul> <li><a href="http://public.work/">Public.work</a>, a search engine for visual art in the public domain</li> <li><a href="https://mstdn.ca/@paulisci/112923374543314532">A Brief History of Nobody Dresses Well Anymore</a>, a chuckle-worthy Mastodon thread</li> <li><a href="https://www.tumblr.com/videogamesskies">Video Games Skies</a></li> </ul> <h2 id="reading">Reading</h2> <p>July was a big book-reading month, so of course in August I only read 2 books. My favorite of the two was <a href="https://bookshop.org/a/15644/9780593418918">“The God of the Woods” by Liz Moore</a>, a quite literary thriller.</p> <h3 id="product">Product</h3> <ul> <li><a href="https://www.producttalk.org/2024/07/atypical-customer-stories/?utm_source=Product+Talk+Subscribers&amp;utm_medium=Monthly+Newsletter&amp;utm_campaign=Monthly+Newsletter+-+July+28%2C+2024">Ask Teresa: What Do You Do With Atypical Customer Stories?</a> A recent favorite product read.</li> <li><a href="https://andrewchen.substack.com/p/why-high-growth-high-churn-products">Why High Growth, High Churn Products Never Seem to Work</a></li> <li><a href="https://dovetail.com/outlier/customer-feedback-pile-needs-makeover/?utm_source=newsletter&amp;utm_medium=organic&amp;utm_campaign=outlier&amp;utm_campaign=Outlier+newsletter+August+%231+2024&amp;utm_content=Outlier+newsletter+August+%231+2024&amp;utm_medium=email_action&amp;utm_source=customer.io">Your Customer Feedback Pile Needs a Makeover: A System for Sorting So You’ll Always Work on the Right Things</a></li> <li><a href="https://theoffingmag.com/enumerate/this-likert-life/">This Likert Life</a></li> <li><a href="https://amivora.substack.com/p/the-4-components-of-product-quality">The 4 Components of Product Quality: Performance, Bugs, Completeness, and Consistency</a></li> </ul> <h3 id="accessibility">Accessibility</h3> <ul> <li><a href="https://www.smashingmagazine.com/2024/07/getting-bottom-minimum-wcag-conformant-interactive-element-size/">Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://privacysandbox.com/intl/en_us/news/privacy-sandbox-update/">A New Path for Privacy Sandbox on the Web</a></li> <li><a href="https://anhvn.com/posts/2024/things-im-working-on/">Things I’m Working On</a>. I very much enjoy following along with Anh’s digital gardening.</li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.wired.com/story/applebot-extended-apple-ai-scraping/">Major Sites Are Saying No to Apple’s AI Scraping</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; productivity</h3> <ul> <li><a href="https://mindfulambition.net/important-but-not-urgent/">How to Make Time for What’s Important but Not Urgent</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://analogoffice.net/2024/08/03/reader-question-how.html">Reader Question 9: How Long Do You Keep Your Notes?</a></li> <li><a href="https://bulletjournal.com/blogs/bulletjournalist/the-guilt-of-missing-days">The Guilt of Missing Days</a></li> <li><a href="https://bulletjournal.com/blogs/bulletjournalist/how-i-make-vision-boards-to-set-intentions-with-my-bullet-journal">How I Make Vision Boards to Set Intentions With My Bullet Journal</a></li> <li><a href="https://wonderpens.ca/blogs/uncategorized/travel-journalling-with-kids">Travel Journalling With Kids</a>. Me if we ever have kids.</li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.scientificamerican.com/article/dark-oxygen-discovered-coming-from-mineral-deposits-on-deep-seafloor/">‘Dark Oxygen’ Discovered Coming from Mineral Deposits on Deep Seafloor</a></li> <li><a href="https://www.kuow.org/stories/seattle-crows-are-so-smart-they-re-challenging-what-we-know-about-evolution">Seattle Crows Are So Smart, They’re Challenging What We Know About Evolution</a>, via <a href="https://buttondown.com/ericwbailey">Eric Bailey</a>. Crows have cemented themselves as the beloved mascot of our writing group.</li> <li><a href="https://www.notion.so/a367752e98974950b5c3a0e468051ef9?pvs=21">Airbnb Unveils a Life-Sized ‘90s-Inspired Polly Pocket Home and You Can Book Your Stay Now</a>. Ok but why do you have to sleep in a separate tent?!</li> <li><a href="https://medicine.wustl.edu/news/nasal-covid-19-vaccine-halts-transmission/">Nasal COVID-19 Vaccine Halts Transmission</a>. Good news, also via Eric.</li> </ul> Learning Log, July 2024 2024-08-06T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2407/ <p>Summer is in full swing over here in Seattle! In July I attended a couple food festivals with friends (the 50th annual Ballard Seafood Fest; Bite of Seattle), hiked my first trail of the year <code>:lol-sob:</code>, and sketched en plein air.</p> <div class="l-grid l-grid--media"> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-glen-sketch-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-glen-sketch-s.webp" alt="Me holding a small square sketchbook in a wooded glen, with a drawing of a crow holding its beak wide to cool down" /> </picture><figcaption>A glen in Seattle</figcaption></figure> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-little-si-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-little-si-s.webp" alt="Me holding a small square sketchbook with a watercolor painting of a mountain top, in front of said mountain top" /> </picture><figcaption>On top Little Si</figcaption></figure> </div> <p>A friend of mine also invited me along to an artist talk and exhibition opening with <a href="https://pottery-northwest.myshopify.com/pages/jai-sallay-carrington-exhibition">Jai Sallay-Carrington at Pottery Northwest</a> (sculptures at link are slightly NSFW). Their ceramic sculptures are so impressive, and I really enjoyed hearing them speak about their creative journey and process. Ceramics enthusiasts in the audience asked novel questions I wouldn’t have thought to ask, yet I found myself curious to hear the answer.</p> <h2 id="quarterly-quests">Quarterly Quests</h2> <p>Mid-July, I decided to try out—in <a href="https://www.youtube.com/@aliabdaal">Ali Abdaal</a> parlance—Quarterly Quests. How I’m using this:</p> <ul> <li>Looking at my major life areas, which I’ve defined as Health, Relationships, Work, and Play.</li> <li>Picking a couple things I want to focus on in a quarter.</li> <li>Reflecting daily/weekly on what I might want to do in that period to advance my Quarterly Quest.</li> <li>In addition to this, I’m also trying to get in an <a href="https://juliacameronlive.com/basic-tools/artists-dates/">“Artist Date”</a> or a “Side Quest” each month—basically injecting some ✨ novelty ✨ and ✨ whimsy ✨.</li> </ul> <p>There are two wolves inside me: the one that sets all these goals and rules and habit cadences for myself, and the other wolf that burns all my energy at work. So far I like that this system leans on thoughtful reflection instead of Rules and Disappointing Myself When I Don’t Keep Up My Streak.</p> <p>Here’s how my Quarterly Quests went in July:</p> <table> <thead> <tr> <th>Area</th> <th>Quest</th> <th>July updates</th> </tr> </thead> <tbody> <tr> <td><span class="c-meta">🏃🏼‍♀️ Health</span></td> <td>Enjoy seasonally on-theme movement</td> <td>Went for a first hike, tried out a class at the local pool with a friend, went on sweaty walks.</td> </tr> <tr> <td><span class="c-meta">💖 Relationships</span></td> <td>Redacted, I don’t have to tell the internet everything</td> <td>—</td> </tr> <tr> <td><span class="c-meta">👩‍💻 Work</span></td> <td>Take breaks during the work day (a necessity, not a luxury)</td> <td>Mixed success, I’m working on it! Coffee walks with my husband help.</td> </tr> <tr> <td><span class="c-meta">🧵 Play</span></td> <td>Learn how to sew clothes</td> <td>Started working on a pair of Carolyn pajama bottoms</td> </tr> <tr> <td><span class="c-meta">👩‍🎨 Play</span></td> <td>Sketch on location</td> <td>Did this twice!</td> </tr> </tbody> </table> <h2 id="reading">Reading</h2> <p><em>A theme you’ll notice is that Mandy Brown has been publishing some GREAT articles.</em></p> <h3 id="product">Product</h3> <ul> <li><a href="https://dovetail.com/outlier/deadly-sins-continuous-discovery/?utm_source=newsletter&amp;utm_medium=organic&amp;utm_campaign=outlier">The Four Deadly Sins of Continuous Discovery</a></li> <li><a href="https://andrewchen.substack.com/p/why-its-so-hard-to-be-data-driven">Why Data-Driven Product Decisions Are Hard</a></li> </ul> <h3 id="accessibility">Accessibility</h3> <ul> <li><a href="https://www.deque.com/blog/how-the-european-accessibility-act-eaa-will-impact-product-accessibility/">How the European Accessibility Act (EAA) Will Impact Product Accessibility</a></li> <li><a href="https://www.deque.com/blog/european-accessibility-act-eaa-top-20-key-questions-answered/">European Accessibility Act (EAA): Top 20 Key Questions Answered</a></li> </ul> <h3 id="design-%26-development">Design &amp; development</h3> <ul> <li><a href="https://ericwbailey.website/published/free-idea-design-token-ugly-mode/">Free Idea: Design Token Ugly Mode</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://adactio.com/journal/21278">Directory enquiries</a></li> <li><a href="https://www.wired.com/story/apple-hits-a-major-roadblock-as-eu-targets-app-store/">EU Says Apple's App Store Is in Breach of Rules</a></li> <li><a href="https://matthiasott.com/notes/highlighting-blogging-on-mastodon">Highlighting Blogging on Mastodon</a></li> <li><a href="https://www.wired.com/story/apra-privacy-bill-doomed/">Surprise! The Latest ‘Comprehensive’ US Privacy Bill Is Doomed</a></li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://www.wired.com/story/aws-perplexity-bot-scraping-investigation/">Amazon Is Investigating Perplexity Over Claims of Scraping Abuse</a></li> <li><a href="https://cur.at/gxuA9p3?m=email&amp;sid=b8euTXa">Google’s Emissions Climb Nearly 50% in Five Years Due to AI Energy Demand</a></li> <li><a href="https://www.theverge.com/2024/7/2/24190823/figma-ai-tool-apple-weather-app-copy">Figma pulls AI tool after criticism that it ripped off Apple’s design</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; productivity</h3> <ul> <li><a href="https://aworkinglibrary.com/writing/knowledge-workers">Knowledge Workers</a></li> <li><a href="https://everythingchanges.us/blog/make-kin-not-nets/">Make Kin Not Nets</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; stationery</h3> <ul> <li><a href="https://rachsmith.com/field-notes/">Field notes</a></li> <li><a href="https://analogoffice.net/2024/07/21/digital-is-ephemeral.html">Digital Is Ephemeral</a></li> <li><a href="https://wonderpens.ca/blogs/uncategorized/thoughts-on-travel-journalling">Thoughts on Travel Journalling</a></li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="http://drewscape.blogspot.com/2024/07/its-not-about-details.html">The Details Don't Make the Scene</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.smithsonianmag.com/smart-news/leftover-ramen-broth-is-causing-problems-on-south-koreas-mount-hall-180984633/">Leftover Ramen Broth Is Causing Problems on South Korea’s Mount Halla</a> (via <a href="https://buttondown.email/ericwbailey/archive/sc-244-out-of-my-head-and-onto-the-web/">Eric</a>)</li> <li><a href="https://daverupert.com/2024/06/sneak-peek-mundango/">Sneak Peek: Mundango</a></li> <li><a href="https://lea.verou.me/blog/2024/engage-dont-show/">Forget “Show, Don’t Tell”. Engage, Don’t Show!</a></li> <li><a href="https://aworkinglibrary.com/writing/grow-down">Grow down</a></li> <li><a href="https://www.audacy.com/wbbm780/news/national/americas-7-elevens-to-become-japanese-style">America's 7-Elevens to Become 'Japanese Style'</a>. PLEASE!</li> </ul> Snowflake dashboard notes 2024-07-22T00:00:00.000Z https://melanie-richards.com/blog/snowflake-notes/ <p>I have long lamented the fact that Snowflake doesn’t enable you to add open text to your dashboard in Snowsight (their web UI). Often I want to:</p> <ul> <li>Add a description to the dashboard</li> <li>Link to an accompanying analysis doc</li> <li>Structure the dashboard with headings</li> <li>Add notes clarifying how the data was queried, what caveats exist, externalities that might show up, etc.</li> </ul> <p>One of the data scientists at my company recently BLEW MY MIND 🤯 with a workaround for Snowflake dashboard notes. The answer? Stuff ’em in a query. Seems so obvious once you know the trick!</p> <h2 id="how-to-add-notes-to-a-dashboard-in-snowflake">How to add notes to a dashboard in Snowflake</h2> <p>You can achieve a “Notes” tile such as this one:</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snowflake-notes-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snowflake-notes-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-snowflake-notes-s.webp" alt="A tile from a Snowflake dashboard titled About this dashboard. It shows a notes table, where each row in the table is actually just a string of text. There is only one column." /> </picture> <p>With the following SQL snippet:</p> <pre><code>SELECT '- Some comment about how the data was queried' AS notes UNION SELECT '- This data does not account for x y and z' AS notes UNION SELECT '- Usage spikes at A, B, C marketing moments and dips during the winter holiday season' AS notes </code></pre> <p>This snippet includes a “query” for each string you want to add to a <code>notes</code> table. The <code>UNION</code> <a class="footnotes__ref" href="https://melanie-richards.com/blog/snowflake-notes/#union-all-note" id="union-all-ref" aria-describedby="footnotes-label" role="doc-noteref">operator</a> glues these queries together, such that each string is its own row in <code>notes</code>.</p> <p>Imagine all the nonsense you could get up to by manually selecting and <a href="https://docs.snowflake.com/en/sql-reference/sql/insert">inserting data</a> into a query…while I would still prefer the ability to add open text (including headings) to a dashboard, this is an intriguing workaround before that flexibility is built into the product.</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="union-all-note" class="footnotes__list-item" role="doc-endnote"><a href="https://docs.snowflake.com/en/sql-reference/operators-query#union-all">UNION ALL</a> behaves a bit differently regarding duplicate handling, but doesn’t matter in our example <a class="footnotes__back-link" href="https://melanie-richards.com/blog/snowflake-notes/#union-all-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, June 2024 2024-07-02T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2406/ <p>My husband and I visited my family in Gainesville, FL for Father’s Day and my niece’s fifth birthday. Still a Cool Fun Aunt, fingers crossed that status holds!🤞🏻</p> <p>This was a particularly nature-filled trip: my husband had never seen an alligator before—crocodiles, yes—so we made it our mission to spot one. We apparently just missed a big one that had wandered further into the UF campus from Lake Alice, but we did catch a couple in the lake itself!</p> <div class="l-grid l-grid--media"> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-alligator-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-alligator-s.webp" alt="A small alligator gliding along in fairly clear and sandy-bottomed shallow waters. It has bands of yellow across its scales." /> </picture><figcaption>Just a baby swamp puppy</figcaption></figure> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-turtles-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-turtles-s.webp" alt="Two freshwater turtles on a log, stretching towards the sun. In the background are deciduous trees, and in the foreground, crystal-clear aqua waters" /> </picture><figcaption>So. Many. Turtles!</figcaption></figure> </div> <p>The next day, we floated down the Ichetucknee Springs and spotted tons of turtles sunning themselves, cattle egrets, and a beautiful yellow-crowned night heron.</p> <p>I was chatting with someone about our trip when we came back, and they remarked that they weren’t expecting me to have such a stereotypically Floridian trip…and yet! 😂</p> <h2 id="%F0%9F%9A%A2-shipping">🚢 Shipping</h2> <p>Shipped a “small but important update” with the team: <a href="https://webflow.com/updates/important-custom-properties">!important flag in Webflow custom properties</a></p> <h2 id="%F0%9F%8C%B1-digital-gardening"><strong>🌱 Digital gardening</strong></h2> <h3 id="this-site">This site</h3> <ul> <li>Created a <a href="https://melanie-richards.com/changelog/">changelog</a>! It was fun poking around in the Wayback Machine to uncover older versions of the site design.</li> <li>Finally added a <a href="https://melanie-richards.com/is/reading/">Reading page</a>—powered by the Airtable API—and <a href="https://melanie-richards.com/blog/new-reading-page/">wrote a blog post</a> about the process.</li> </ul> <h2 id="learning">Learning</h2> <ul> <li>How to use the Airtable API</li> <li>How to bead fringe earrings</li> </ul> <h2 id="%E2%9C%82%EF%B8%8F-making">✂️ Making</h2> <ul> <li>Finished sewing my <a href="https://making.melanie-richards.com/creative-maker-case/">Creative Maker Supply Case</a> and feeling very accomplished 😌</li> <li>Started knitting my second sock (in a pair, and ever)</li> <li>Set up a <a href="https://arttoolkit.com/supplies/empty-pocket-palette/?color=black">new travel palette</a></li> <li>Wrapped up my journal for the first half of the year, and started a new one for July–December</li> </ul> <h2 id="on-the-internet">On the internet</h2> <ul> <li><a href="https://www.youtube.com/watch?v=EBydiOSzxQw">This short but sweet video</a> about finding the energy to sew</li> <li><a href="https://slashpages.net/">Slash Pages</a>: yay, more little ideas for me to get excited about!</li> </ul> <h2 id="reading">Reading</h2> <p>Only finished two books this month, but those accounted for about 1000 pages?!</p> <h3 id="product">Product</h3> <ul> <li><a href="https://www.figma.com/blog/the-linear-method-opinionated-software/">The Linear Method: Opinionated Software</a></li> <li><a href="https://review.firstround.com/how-to-take-bigger--bolder-product-bets-lessons-from-slacks-chief-product-officer/">How to Take Bigger, Bolder Product Bets — Lessons from Slack’s Chief Product Officer</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://ishadeed.com/article/css-cap-unit/">CSS Cap Unit</a></li> <li><a href="https://www.wired.com/story/everything-apple-announced-wwdc-2024/">Everything Apple Announced at WWDC 2024: AI Features, New Siri, Genmoji</a></li> <li><a href="https://webkit.org/blog/15443/news-from-wwdc24-webkit-in-safari-18-beta/">News From WWDC24: WebKit in Safari 18 Beta</a></li> <li><a href="https://css-tricks.com/css-container-queries/">CSS Container Queries</a></li> <li><a href="https://smashingmagazine.com/2024/06/what-are-css-container-style-queries-good-for/">What Are CSS Container Style Queries Good For?</a></li> <li><a href="https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/">We’ve Got Container Queries Now, but Are We Actually Using Them?</a></li> <li><a href="https://rachelandrew.co.uk/archives/2024/05/26/masonry-and-reading-order/">Masonry and reading order</a></li> </ul> <h3 id="ai">AI</h3> <ul> <li><a href="https://ericwbailey.website/published/consent-llm-scrapers-and-poisoning-the-well/">Consent, LLM Scrapers, and Poisoning the Well</a></li> <li><a href="https://aworkinglibrary.com/writing/laborsaving">“Laborsaving”</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; productivity</h3> <ul> <li><a href="https://adhdftw.com/daily-habits/">Daily Habits</a></li> <li><a href="https://zapier.com/blog/flowtime-technique/">How to use the Flowtime Technique to boost your productivity</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="http://drewscape.blogspot.com/2024/06/how-i-draw-from-imagination.html">How I Draw From Imagination</a></li> <li><a href="https://ben.page/forks">Donating Hundreds of Forks to the Dining Hall</a></li> <li><a href="https://thepenguinpost.substack.com/p/seattle-independent-bookstore-tour">Seattle Independent Bookstore Tour</a></li> </ul> New Reading page, powered by the Airtable API 2024-06-28T00:00:00.000Z https://melanie-richards.com/blog/new-reading-page/ <p>In all my years as an absolute book fiend with a personal website, I’ve never hosted my reading list here! That’s now changed with a <a href="https://melanie-richards.com/is/reading/">Reading</a> page, the start of a <a href="https://melanie-richards.com/is/">new /is/ section</a> of my site.</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-reading-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-reading-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-reading-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-reading-s.webp" alt="A grid of book covers with titles, authors, and ratings displayed under the header 2024" /> </picture> <p>This site is built with the Eleventy SSG, and I’m using the Airtable API to bring in book data. Let’s explore how it’s built!</p> <h2 id="but-first%2C-the-data">But first, the data</h2> <h3 id="choosing-a-data-source">Choosing a data source</h3> <p>At the beginning of the year I signed up for the <a href="https://www.patreon.com/CurrentlyReadingPodcast/posts">Currently Reading podcast’s Patreon</a>, which—amonst other benefits—gives patrons access to an annual reading Google Sheet. With my 2024 reading in a structured data format, I started by figuring out whether Sheets had an API.</p> <p><a href="https://developers.google.com/sheets/api/guides/concepts">They do</a>, but things were feeling a bit overly complex for a lil ol’ REST API, so I noped out of there pretty quickly. <a href="https://airtable.com/developers/web/api/introduction">Airtable’s API</a>, on the other hand, is quite awesome: not only is it easy to authenticate with, but they have also interactive API docs <em>for any of your Airtable bases.</em> I was able to explore bespoke documentation for exactly the fields in my database, and all of the example snippets <em>returned actual values in my data.</em> This made building with their API so much easier.</p> <h3 id="backfilling-data">Backfilling data</h3> <p>For my 2024 data, I downloaded a CSV from that Google Sheet and uploaded it to my new Airtable base. For the rest of the 2020s, I exported a CSV from The Storygraph. You can find that function on <strong>Manage Account &gt; Manage your data</strong>.</p> <p>I then manually added some <a class="footnotes__ref" href="https://melanie-richards.com/blog/new-reading-page/#metadata-note" id="metadata-ref" aria-describedby="footnotes-label" role="doc-noteref">metadata</a> to the pre-2024 books about author demographics and reading sources. I also uploaded book cover images to the base.</p> <p>In the final output, I link to the books (mostly) on <a href="http://bookshop.org/">Bookshop.org</a>, using a <code>Bookshop ID</code> field. I populated this field with the ISBN numbers that came in from The Storygraph, then ran the “Broken Link Checker” browser extension over the page to see which URLs I needed to fix (this was a big time saver, trust me).</p> <h2 id="criteria">Criteria</h2> <p>For my <a href="https://melanie-richards.com/is/reading/">Reading</a> page, I wanted to keep things simple:</p> <ul> <li>A list of books I’d read, in reverse chronological order, organized by year</li> <li>The book cover, a link, title, author, and rating for each book—along with special reasons for reading the book, if any</li> <li>Special treatments for my favorite books of the year, as well as books I decided not to finish</li> </ul> <p>The most “interesting” piece of criteria for me was that Airtable doesn’t let you hotlink images from their API. <a href="https://support.airtable.com/docs/airtable-attachment-url-behavior">Attachment URLs expire</a>, so you have to download them somewhere else. This was my first time downloading and storing binary data from an API.</p> <h2 id="how-it%E2%80%99s-built">How it’s built</h2> <p>This walkthrough is an example of how you could use the Airtable API with Eleventy. I’m not the most confident with Node or JS promises, so it’s likely there’s a <a class="footnotes__ref" href="https://melanie-richards.com/blog/new-reading-page/#garbage-note" id="garbage-ref" aria-describedby="footnotes-label" role="doc-noteref">cleaner, better way</a> to achieve this. Caveat emptor etc etc.</p> <h3 id="storing-secrets">Storing secrets</h3> <p>First, I added to my <code>.env</code> file these secrets:</p> <pre><code class="language-jsx">AIRTABLE_API_KEY=yourSecretKeyHere AIRTABLE_BASE=yourBaseIdHere </code></pre> <p>I also added these to my Netlify environment variables, so that they’re used at build time at the dev platform this site.</p> <h3 id="grabbing-the-data">Grabbing the data</h3> <p>Next, I created a data file in my project at <code>/src/_data/reading/2020s.js</code>, where <code>/src/</code> is the root source directory for Eleventy. This file does a few things:</p> <ol> <li>Fetches records (the books) from my Books base, using the “All” view. You don’t have to name the view, but doing so means that the view’s sorts and filters are applied (i.e. you don’t have to do those transformations in code). Airtable’s data is paginated, and they very nicely have a built-in recursive function <code>fetchNextPage()</code> to…fetch the next page, if one exists.</li> <li>Reads the book’s <code>Year Read</code> field and pushes it to an array, if it’s not already there. This enables me to structure my books by year.</li> <li>Then, creates a book object within that year by fetching several different fields from the record.</li> <li>Next, retrieves and downloads the book cover image, unless it’s already been stored in my code base. Because images are binary data, I needed to retrieve that data using the <code>pipe()</code> function, and use a <a class="footnotes__ref" href="https://melanie-richards.com/blog/new-reading-page/#link-fragment-note" id="link-fragment-ref" aria-describedby="footnotes-label" role="doc-noteref">stream</a> (<code>fs.createWriteStream()</code>) to write said data to a new file.</li> <li>All of this data is returned in the Node module, and can now be used in my template files!</li> </ol> <pre><code class="language-jsx">const Airtable = require('airtable'); const base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY }).base(process.env.AIRTABLE_BASE); const https = require('https'); const fs = require('fs'); const imageDir = 'src/assets/images/is/reading/'; module.exports = () =&gt; { return new Promise((resolve, reject) =&gt; { const booksByYear = []; // Specifying the Airtable view fetches records in the order they appear in that view base('Books').select({ view: 'All' }) .eachPage( function page(records, fetchNextPage) { // This function (`page`) will get called for each page of records. records.forEach((record) =&gt; { const yearRead = record.get('Year Read'); // Add the year to the book list if it's not already there if (!booksByYear.some(obj =&gt; obj.year === yearRead)) { booksByYear.push({ year: yearRead, books: [] }); } // Add the book to the relevant year booksByYear.find(obj =&gt; obj.year === yearRead).books.push({ title: record.get('Title'), author: record.get('Author'), bookshopId: record.get('Bookshop ID'), specialUrl: record.get('Special URL'), cover: record.get('Cover'), DNF: record.get('DNF'), fave: record.get('Fave'), rating: record.get('Rating'), starRating: record.get('Star Rating'), reason: record.get('Reason for Reading'), year: record.get('Year Read') }); // Get cover image attachment const cover = record.get('Cover')[0]; const coverFilename = cover.filename; const coverUrl = cover.url; const localCoverFile = imageDir + coverFilename; // Download cover image, if it doesn't already exist if (!fs.existsSync(localCoverFile)) { const imageFile = fs.createWriteStream(localCoverFile); https.get(coverUrl, function(response) { response.pipe(imageFile); // Close file stream imageFile.on('finish', () =&gt; { imageFile.close(); }); }); } }); // To fetch the next page of records, call `fetchNextPage`. // If there are more records, `page` will get called again. // If there are no more records, `done` will get called. fetchNextPage(); }, function done(err) { if (err) { reject(err) } else { resolve(booksByYear); } } ); }); }; </code></pre> <h3 id="rendering-the-data">Rendering the data</h3> <p>I use Nunjucks for my layout template files. This portion of the page template:</p> <ol> <li>Creates a new page section and counts the number of finished vs DNFed (did not finish) books, for each year in the <code>reading.2020s</code> array.</li> <li>Then loops through each book for that year.</li> </ol> <pre><code>{# Each reading year #} {% for readingYear in reading.2020s %} &lt;section class=&quot;l-contain l-section&quot;&gt; &lt;h2 class=&quot;u-center&quot;&gt;{{ readingYear.year }}&lt;/h2&gt; {# Count number of books finished and DNFed #} {% set finishedCounter = 0 %} {% set DNFCounter = 0 %} {% for book in readingYear.books %} {% if book.DNF == true %} {% set DNFCounter = DNFCounter + 1 %} {% else %} {% set finishedCounter = finishedCounter + 1 %} {% endif %} {% endfor %} &lt;p class=&quot;u-center | c-meta&quot;&gt;Finished: {{ finishedCounter }} {% if DNFCounter &gt; 0 %} | Did not finish: {{ DNFCounter }} {% endif %} &lt;/p&gt; {# Book list #} &lt;ul class=&quot;u-simple-list | c-is-items&quot;&gt; {% for book in readingYear.books %} {% include &quot;partials/book.njk&quot; %} {% endfor %} &lt;/ul&gt; &lt;/section&gt; {% endfor %} </code></pre> <p><code>partials/book.njk</code> goes a little something like this. I suppose the most interesting thing to call out is that the image dimensions are <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading#preventing_element_shift_during_image_lazy_loads">important for lazy loading</a>.</p> <pre><code>&lt;li class=&quot;c-is-item{% if book.DNF == true %} c-is-item--dnf{% endif%}{% if book.fave == true %} c-is-item--fave{% endif%}&quot;&gt; {% if book.fave == true %}&lt;span class=&quot;u-all-caps | c-meta | c-is-item__tag&quot;&gt;Fave&lt;/span&gt;{% endif %} {% if book.bookshopId %} {% set bookUrl = &quot;https://bookshop.org/a/15644/&quot; + book.bookshopId %} {% else %} {% set bookUrl = book.specialUrl %} {% endif %} &lt;a class=&quot;c-is-item__link&quot; href=&quot;{{ bookUrl }}&quot;&gt; &lt;img class=&quot;c-is-item__cover&quot; src=&quot;{{ site.isImages }}/reading/{{ book.cover[0].filename }}&quot; loading=&quot;lazy&quot; width=&quot;{{ book.cover[0].width }}&quot; height=&quot;{{ book.cover[0].height }}&quot; alt=&quot;&quot;&gt; &lt;span class=&quot;c-is-item__title&quot;&gt;{{ book.title }}&lt;/span&gt; &lt;/a&gt; &lt;span class=&quot;c-is-item__author&quot;&gt;{{ book.author }}&lt;/span&gt; {% if book.DNF == true %} &lt;span class=&quot;c-meta | c-is-item__dnf&quot;&gt;DNF&lt;/span&gt; {% else %} &lt;span class=&quot;c-is-item__rating&quot;&gt; &lt;span class=&quot;u-vis-hidden&quot;&gt;{{ book.rating }} stars&lt;/span&gt; &lt;span aria-hidden=&quot;true&quot;&gt;{{ book.starRating }}&lt;/span&gt; &lt;/span&gt; {% endif %} {% if book.reason == 'Book club' or book.reason == 'SPL Book Bingo' %} &lt;span class=&quot;u-all-caps | c-meta | c-is-item__reason&quot;&gt;{{ book.reason }}&lt;/span&gt; {% endif %} &lt;/li&gt; </code></pre> <p>And that’s it! I found this a super fun project to work on; best believe I’ve already got my <a href="https://merlin.allaboutbirds.org/">Merlin</a> bird observation data ported into Airtable. Three cheers for owning and playing with your own data!</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="metadata-note" class="footnotes__list-item" role="doc-endnote">I don’t use this metadata on my personal site, but I do have it in Airtable so that I can understand what impact book content, author demographics, and reading sources has on my reading experience. This is an idea pulled directly from Currently Reading’s spreadsheet! <a class="footnotes__back-link" href="https://melanie-richards.com/blog/new-reading-page/#metadata-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li> <li id="garbage-note" class="footnotes__list-item" role="doc-endnote">Insert possum “don’t touch my garbage” meme here. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/new-reading-page/#garbage-ref" aria-label="Back to reference 2" role="doc-backlink">↩</a></li> <li id="link-fragment-note" class="footnotes__list-item" role="doc-endnote">Learn more about streams in Node <a class="footnotes__back-link" href="https://melanie-richards.com/blog/new-reading-page/#link-fragment-ref" aria-label="Back to reference 3" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, May 2024 2024-06-05T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2405/ <p>How about that aurora?! We got to catch <a href="https://www.notion.so/Learning-Log-May-2024-3cf002a2328c4ca5909e4c29a7224f11?pvs=21">the aurora borealis over our neighborhood in Seattle</a>, and I’m still so surprised and grateful that I got to have that bucket-list-level experience.</p> <h2 id="webflow-retreat">Webflow retreat</h2> <p>Also in gratifying experiences, Webflow held an all-team retreat in Quebec City, ~2 months into my tenure. That timeframe struck a lovely balance between having enough context into the team, while also getting a good sense of folks’ personalities in the 3D world early on.</p> <figure class=""><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-quebec-city-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-quebec-city-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-quebec-city-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-quebec-city-s.webp" alt="A row of old stone buildings in a French architectural style sitting beyond a bright-green grassy hill. Aturret of the Fairmont Le Chateau Frontenac peeks up in the back." /> </picture><figcaption>View of the edge of Old Town in Quebec City</figcaption></figure> <p>There’s something really special about bonding as new co-workers and getting energized by each others’ enthusiasm for the work. And Quebec City in spring was beautiful: a mix of heavy stone architecture and delicate greenery. ✨</p> <h2 id="%F0%9F%9A%A2-shipping">🚢 Shipping</h2> <p>The team I work with at Webflow shipped a few tiny but mighty updates, like <a href="https://webflow.com/updates/additional-sizing-and-layout-controls">additional sizing and layout controls</a>, and some small UX/UI tweaks for renaming grouped variables.</p> <h2 id="%F0%9F%8C%B1-digital-gardening"><strong>🌱 Digital gardening</strong></h2> <h3 id="product-resources"><a href="https://product.melanie-richards.com/">Product Resources</a></h3> <ul> <li>Added more resources</li> <li>Filtered out the “News” category from public view</li> </ul> <h3 id="world-snacks"><a href="https://snacks.melanie-richards.com/">World Snacks</a></h3> <ul> <li>Published a few new snack entries, including the first Canadian treat</li> <li>Made a couple copy changes on the “About” page</li> <li>Configured the browser <a href="https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color">theme color suggestions</a> to match the big squish banner at the top of each page. I have a different color for dark mode vs other other color modes. One problem here is if the user chooses a theme from the theme switcher in the site footer that is different to their system color preferences, the browser theme color will look a bit disjointed. Still, I think it looks more intentional than browser default UI, in (likely most) cases where the color will match.</li> <li>Upgraded Eleventy to version 2.0</li> <li>Switched to using the Slugify package for cleaner page slugs, which is safer given some special characters in snack names that previously would fail my builds</li> </ul> <h3 id="highlights"><a href="https://highlights.melanie-richards.com/">Highlights</a></h3> <p>Added highlights for <a href="https://highlights.melanie-richards.com/book/the-night-watchman/">“The Night Watchman”</a> by Louise Erdrich</p> <h3 id="crafts-blog"><a href="https://making.melanie-richards.com/">Crafts blog</a></h3> <ul> <li>Broadened the purpose of this site from just fiber crafts to any such analog crafty projects. The old subdomain now redirects to <code>making.melanie-richards.com</code>.</li> <li>Removed the projects list sidebar, as it keeps falling out of date</li> </ul> <h2 id="on-the-internet">On the internet</h2> <p><a href="https://www.tumblr.com/gardenvarietywizard/743654876305850368/ive-found-that-if-its-still-really-hard-to-do">Break in your sketchbooks!</a></p> <h2 id="reading">Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://www.svpg.com/ai-product-management/">AI Product Management</a></li> <li><a href="https://lg.substack.com/p/the-looking-glass-the-paradoxes-of?utm_source=Product%2BTalk%2BSubscribers&amp;utm_medium=Monthly%2BNewsletter&amp;utm_campaign=Monthly%2BNewsletter%2B-%2BMarch%2B31%2C%2B2024">The Looking Glass: The Paradoxes of Data</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://scribe.rip/how-do-you-accidentally-run-for-president-of-iceland-0d71a4785a1e">How Do You Accidentally Run for President of Iceland?</a></li> <li><a href="https://breckyunits.com/sleepWriting.html">Seven Years of Blog Posts, Sorted by Sleep</a></li> <li><a href="https://www.ellyloel.com/blog/front-end-development-s-identity-crisis/">Front-End Development’s Identity Crisis</a></li> <li><a href="https://daverupert.com/2024/05/light-dark-experiment/">A Quick Light-Dark() Experiment</a></li> <li><a href="https://www.wired.com/story/openai-gpt-4o-chatgpt-artificial-intelligence-her-movie/">I Am Once Again Asking Our Tech Overlords to Watch the Whole Movie</a></li> </ul> <h3 id="work%2C-productivity%2C-%26-personal-development">Work, productivity, &amp; personal development</h3> <ul> <li><a href="https://aworkinglibrary.com/writing/out-of-time">Out of Time</a></li> <li><a href="https://everythingchanges.us/blog/bookending/">Bookending</a></li> <li><a href="https://everythingchanges.us/blog/farfetching/">Farfetching</a></li> </ul> <h3 id="journaling%2C-stationery%2C-%26-art">Journaling, stationery, &amp; art</h3> <ul> <li><a href="https://www.wellappointeddesk.com/2024/05/ink-100-part-5-the-final-reveal/">Ink 100: Part 5 The Final Reveal</a></li> <li><a href="https://oddorange.co.uk/blogs/news/get-back-into-sketchbooking-3-prompts-to-revive-your-practice">Get Back Into Sketchbooking: 3 Prompts to Revive Your Practice</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.theguardian.com/science/2024/apr/22/try-something-new-to-stop-the-days-whizzing-past-researchers-suggest">Try Something New to Stop the Days Whizzing Past, Researchers Suggest</a></li> </ul> Coping with impostor syndrome 2024-05-26T00:00:00.000Z https://melanie-richards.com/blog/impostor-syndrome/ <p>While discussing impostor syndrome with friends recently, I was shocked to realize that for me it had mostly…gone away??? So much of my career has been plagued by (often very painful) feelings that I’m no good, and sooner or later everyone else will figure that out too. This current state of freedom would’ve been inconceivable.</p> <p>That got me thinking about what helped inspire this change. I found this came down to three basic strategies:</p> <ol> <li>Recognizing the good in discomfort</li> <li>Getting in the reps</li> <li>Documenting evidence of personal growth</li> </ol> <p><em>Note: in my experience, marginalization-based impostor syndrome requires an additional set of strategies, and these may be more deeply personal or individual. This blog post is focused solely on the strategies I’ve developed for dealing with feelings of “insufficient” skill.</em></p> <h2 id="recognizing-the-good-in-discomfort">Recognizing the good in discomfort</h2> <p>Way back in 2013, I shared this quote from Ira Glass:</p> <blockquote> <p>Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you.</p> </blockquote> <p>I wish I had internalized this earlier, because it’s true: your frustration is telling you that you <em>have a good sense for quality</em>, and you know you’re not there yet. This is something to be celebrated! You have a target to move towards, and <strong>you can trust your judgement</strong> to guide you closer to where you want to be.</p> <h2 id="getting-in-the-reps">Getting in the reps</h2> <p>Patience with our evolving abilities is hard, though, so pairing the internal work with action can help. I found the best way to grow my skills is to get in the reps, and to be intentional and specific about the skills I’m trying to build. I do this in 3 steps.</p> <h3 id="step-1%3A-get-specific-on-what-i%E2%80%99m-%E2%80%9Cnot-good-at%E2%80%9D">Step 1: get specific on what I’m “not good at”</h3> <p>What <em>specifically</em> is bothering me about my work? Have I heard any thematic feedback about these projects? Could I ask for that feedback? What limiting beliefs do I have about my work? Which of these do I wish weren’t true?</p> <details> <summary>Examples for a product manager might include…</summary> <ul> <li>My written communications tend to be verbose (hi, it me)</li> <li>I don’t know how to run effective correlative analysis</li> <li>My market research isn’t as systematic or structured as I’d like it to be</li> <li>I don’t talk to customers frequently enough</li> </ul> </details> <h3 id="step-2%3A-pick-one-skill-to-develop-during-my-next-project">Step 2: pick <em>one</em> skill to develop during my next project</h3> <p>I might choose by what’s bothering me most, or what opportunities are currently available. Often I’ll dream up a personal project to learn something new, or find a low-stakes opportunity at work. Lower stakes can grant us additional psychological safety when building a skill.</p> <p><strong>Example:</strong> I’ll work on brevity in communications for the duration of my next roadmap initiative.</p> <h3 id="step-3%3A-do-the-work!">Step 3: do the work!</h3> <details> <summary>In the brevity example, I might…</summary> <ul> <li>Research and apply frameworks for clear, concise messaging</li> <li>Set a word limit</li> <li>Imagine the audience is reading my message on their phone (thanks for that 🔥 tip, <a href="https://www.joelcloralt.com/">Joel!</a>)</li> <li>Practice getting words down in a first pass, then editing for brevity and clarity</li> </ul> </details> <p>I’ve found it helpful (for some tasks) to focus on generating as many options as possible within a timebox. When I’m in pursuit of volume, I 1) don’t have the mental bandwidth to spiral and 2) am more likely to stumble upon a compelling option.</p> <p>If my brain does get yelly again, I can redirect it back to my intention for the project:</p> <blockquote> <p>Thank you, brain, for trying to protect me. But right now, what <em>this project needs</em> is a brief Slack message that will prompt stakeholders to review the product requirement doc by the date requested. Hmm, what if I try “signposting” techniques here?</p> </blockquote> <p>Objectively centering what the project needs, instead of my own “shortcomings”, has helped me take the heat out of these frustrations. I think this would be even more powerful if I were to write my intention down at the beginning of a project:</p> <blockquote> <p>For the Flimflam integration initiative, my intention is to practice crafting clear, concise internal communications.</p> </blockquote> <h3 id="repeat!">Repeat!</h3> <p>Repeat this process enough times and you might find that your “weakness” becomes a strength. My brother, a sequential artist, used to say he wasn’t good at background design. He practiced by drawing a LOT of backgrounds…and then a gaming company hired him to do exactly that, full-time.</p> <h2 id="documenting-evidence-of-personal-growth">Documenting evidence of personal growth</h2> <h3 id="take-note-of-daily-wins">Take note of daily wins</h3> <p>At the end of each work day, I write down 1-3 personal wins from the day, no matter how small. I later highlight 3 favorite wins in my weekly review. Attention creates our reality, and so I find this practice makes continual progress more obvious.</p> <h3 id="keep-a-%E2%80%9Cbrag-sheet%E2%80%9D">Keep a “brag sheet”</h3> <p>At the end of each two-week sprint, I tend to my brag sheet (Julia Evans has a <a href="https://jvns.ca/blog/brag-documents/">good write-up on brag documents</a>).</p> <details> <summary>What goes in my brag sheet</summary> <ul> <li>The opportunity we were solving for and why</li> <li>The goals and solution</li> <li>My role, including special contributions</li> <li>Specific learnings</li> <li>Outcomes, including success measures and feedback</li> </ul> </details> <p>This format is very easily to translate to annual performance reviews and <a href="https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique">“STAR”-style interview stories</a>. Importantly for impostor syndrome, it’s also a growing body of evidence that I’m becoming more effective at what I do.</p> <p>These brag sheets are very satisfying to look back on: it’s amazing what we actually accomplish over time!</p> <h3 id="keep-an-%E2%80%9Cencouragement%E2%80%9D-document">Keep an “encouragement” document</h3> <p>While internally-sourced evidence has been most effective in building confidence and self-trust, external validation doesn’t hurt. I keep an “encouragement” document where I file any positive feedback I’ve received regarding my work or my character. If I’m having a rainy day, it can be really nice to glance through that document. Just seeing how short the scrollbar thumb is getting is quite gratifying.</p> <p>The encouragement document also helps me find patterns and pinpoint my strengths. I recently realized: “oh, caring is actually my superpower” (great news for a person who Feels their feelings).</p> <p><em>The corollary here: it’s just as satisfying to liberally share genuine gratitude and appreciation for the people around me!</em></p> <h3 id="a-note-on-transferable-evidence">A note on transferable evidence</h3> <p>Several years ago, I made a career switch from web design-and-development to product management. Everything I learned in my designer trajectory shapes who I am as a product manager today.</p> <p>Please don’t discount transferable knowledge: all your past accomplishments “count”. Your time working in retail “counts” towards your ability to talk to customers. Your self-initiated web projects “count” towards your grasp of technical concepts. It. All. Counts.</p> <h2 id="my-impostor-syndrome-story">My impostor syndrome story</h2> <p>Over the years, my impostor syndrome has mostly dissipated thanks to recognizing the good in discomfort; getting in the reps; and documenting evidence of personal growth.</p> <p>I’m sure impostor syndrome could return in significant “stretch” periods, but I’m now feeling more confident to handle it when it does. I hope my story helps you find strategies to try, and I’d be curious to learn what else has worked for you!</p> Aurora Borealis 2024-05-11T00:00:00.000Z https://melanie-richards.com/blog/aurora-borealis/ <p>Seeing the Northern Lights has been on my bucket list for a long time. I thought I would have to travel North to Alaska or to Scandinavia, then get lucky to get a glimpse of the lights. Never would I have imagined I would get to see the aurora right over my house.</p> <p>And yet!! I was moved to tears last night, gazing up at the night sky over my street. Without further ado, here a few favorite snaps of my particular view of the aurora last night, in chronological order.</p> <div class="l-grid l-grid--media l-grid--halves"> <img src="https://melanie-richards.com/assets/images/content/melanierichards-aurora-1-m.webp" alt="A very strong aurora over a fairly brightly lit residential street. There is a curtain of bright green waves of light below a backdrop of warm violet tones." /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-aurora-2-m.webp" alt="A more ethereal view in tropical blues and greens in the sky over some conifers. The pattern in this one is more like a burst of light." /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-aurora-3-m.webp" alt="Strong beams shooting down through the aurora into a different set of evergreens. It almost looks as though an alient spacecraft will beam us up. This one is purple on top and green on bottom" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-aurora-4-m.webp" alt="Similar shot taken a few seconds later, but the purples are more magenta and moody" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-aurora-5-m.webp" alt="Muddy, faded aurora behind a clump of pinkish-red rhododendrons" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-aurora-7-m.webp" alt="A deep, cooler purple sky beyond the peak of my house. More of a gradient than any sort of shape. Stars stud the aurora, including the big dipper." /> </div> <p>Hard not to keep taking photos, but the aurora changes character constantly. In this case it feels as though the camera lens actually enhances the experience, as you can pick up more color than meets the naked eye.</p> <p>At the end of the night we even saw the colors gently pulsing overhead. What an incredible treat. If you missed it and were within range, there may be more tonight.</p> Learning Log, Apr 2024 2024-05-06T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2404/ <p>How is it May already? That feels unreal. April went by in a flash of flowers, figuring out which way is up at my new organization, and enjoying new-to-me restaurants around town.</p> <picture class=""> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-april-tulips-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-april-tulips-s.webp" alt="A group of tulips in pale yellow and burgundy stripes" /> </picture> <h2 id="%F0%9F%9A%A2-shipping">🚢 Shipping</h2> <p>I started my new role at Webflow in mid–late March, so April was a blend of continuing to onboard, forming a product area vision and strategy, and starting to be useful. The engineering team I’m working with here had been working on a <a href="https://webflow.com/updates/pinned-ruler-and-crosshair">pinned ruler and crosshair</a> for measuring layouts on the Designer Canvas, so we got to launch this together!</p> <h2 id="%F0%9F%A7%B6-making">🧶 Making</h2> <ul> <li>Still working on my first knit pair of socks</li> <li>A few <a href="https://www.instagram.com/p/C5ertqUv7o7/">plein air drawings</a> for Plein Airpril</li> <li>Just started: a mini site documenting my analog journals and favorite stationery materials</li> </ul> <p>I really didn’t do any blogging this month, besides my Learning Log. In recent months I’ve been starting blog posts, second-guessing them or deciding they don’t need to see the light of day, then archiving them. Feeling mildly unsettled by not being brave? focused? enough to just finish one of these thoughts in public.</p> <h2 id="reading">Reading</h2> <p>I only finished 2 books in April, which is particularly surprising given I participated in <a href="https://deweysreadathon.wordpress.com/about/">Dewey’s 24 Hour Readathon</a>. I “DNF”ed a couple books that weren’t grabbing me.</p> <h3 id="product">Product</h3> <ul> <li><a href="https://www.sequoiacap.com/article/pmf-framework/">The Arc Product-Market Fit Framework</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://brucelawson.co.uk/2024/drive-by-accessibility-tweaks/">Drive-by Accessibility Tweaks</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; productivity</h3> <ul> <li><a href="https://hbr.org/2023/10/how-to-stop-taking-work-so-personally">How to Stop Taking Work So Personally</a></li> <li><a href="https://www.theguardian.com/lifeandstyle/2024/mar/04/all-it-takes-is-a-quick-walk-how-a-few-minutes-exercise-can-unleash-creativity-even-if-you-hate-it?utm_source=Product+Talk+Subscribers&amp;utm_medium=Monthly+Newsletter&amp;utm_campaign=Monthly+Newsletter+-+April+28%2C+2024">‘All It Takes Is a Quick Walk’: How a Few Minutes’ Exercise Can Unleash Creativity – Even if You Hate It</a></li> </ul> <h3 id="self-improvement">Self-improvement</h3> <ul> <li><a href="https://cupofjo.com/2024/04/09/my-year-of-no/">Why I Swear by ‘My Year of No’</a></li> <li><a href="https://hbr.org/2020/08/take-ownership-of-your-future-self">Take Ownership of Your Future Self</a></li> <li><a href="https://www.theatlantic.com/ideas/archive/2024/04/carl-jung-pillars-life-happiness/678009/">Jung’s Five Pillars of a Good Life</a></li> </ul> <h3 id="art">Art</h3> <ul> <li><a href="https://drewscape.blogspot.com/2023/11/control-where-people-look-using-tonal.html">Control where people look using tonal values</a></li> <li><a href="https://austinkleon.com/2024/04/02/you-just-do-it-and-do-it-and-do-it/">You Just Do It and Do It and Do It</a></li> <li><a href="https://austinkleon.com/2024/04/23/no-such-thing-as-waste/">No Such Thing as Waste</a></li> <li><a href="https://www.lizsteel.com/water-urbansketching/">Managing Water Supply When Urban Sketching</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; Stationery</h3> <ul> <li><a href="https://fromthepencup.wordpress.com/2024/03/27/end-of-trip/">“End of Trip”</a></li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li><a href="https://www.nytimes.com/2023/05/08/well/mind/allergies-depression-anxiety.html">The Connection Between Seasonal Allergies and Mental Health</a>. HUH.</li> </ul> Learning Log, Mar 2024 2024-04-10T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2403/ <h2 id="new-role-at-webflow">New role at Webflow</h2> <p>The biggest personal event lately is my transition to a new role at Webflow! I’m a Lead Product Manager (IC position, believe it or not) focused on styles and interactions in the Designer product. The <a href="https://webflow.com/designer">Designer</a> is the main environment where users visually build websites.</p> <p>I can’t seem to write about this topic without a heap of sappiness and a light dusting of corporate cheese. 🧀 The tl;dr is I am grateful for so much: to the many incredible (seriously) people I worked with at Netlify, and the experiences I had there that helped me grow as a product manager. And for a new opportunity that aligns very well with my personal mission and leverages my unique background, with people who make me feel welcome. Humans are great, huh?</p> <h2 id="palm-springs">Palm Springs</h2> <p>In March, my husband and I took a (mildly) belated first anniversary trip down to Palm Springs, CA. Neither of us had been to PSP before, and we had a really nice time catching our breath lazing around by the pool for a long weekend.</p> <figure class=""><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-psp-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-psp-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-psp-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-psp-s.webp" alt="The San Jacinto mountains perched behind downtown Palm Springs in a fading sunset light. In the foreground is a planter of puffy, ball-shaped cacti." /> </picture><figcaption>The view from the hotel roof at sundown</figcaption></figure> <p>PSP also has a couple pretty awesome museums for a town of its size. The <a href="https://www.accmuseum.org/">Agua Caliente Cultural Museum</a> in its beautiful new plaza is well worth a visit. This cultural center presents the cultural history of the Agua Caliente Band of the Cahuilla people in their own words.</p> <p>Likewise, I was impressed by the range of works on display at the <a href="https://www.psmuseum.org/">Palm Springs Art Museum</a>. From works deeply rooted in the land; to modern art you might associate with PSP; to contemporary pieces across a wide variety of content and forms, there’s a lot to peruse.</p> <h2 id="%F0%9F%A7%B6-making">🧶 Making</h2> <ul> <li>Learned how to write <a href="https://melanie-richards.com/blog/re-one-big-one-little/">blackletter calligraphy</a> (Textura Quadrata style)</li> <li>Continued knitting my first pair of socks</li> <li>Cooked a fun St. Patty’s Day brunch with my husband for our friends</li> <li>Did some plein air sketching</li> </ul> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pleinair-2403-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pleinair-2403-s.webp" alt="The San Jacinto mountains perched behind downtown Palm Springs in a fading sunset light. In the foreground is a planter of puffy, ball-shaped cacti." /> </picture><figcaption>A sunny day at Carkeek Park. A Youth came up to me while I was drawing and told me “that’s a good sketch”, and I was subsequently equal parts sheepish and chuffed.</figcaption></figure> <h2 id="%F0%9F%8C%B1-digital-gardening"><strong>🌱 Digital Gardening</strong></h2> <p><a href="https://github.com/users/melanierichards/projects/5/views/3">Project board on Github</a></p> <ul> <li>For reasons unknown, I had posts in my projects’ RSS feeds in chronological order, instead of reverse chronological order. So that has now been fixed with a quick <code>| reverse</code> filter. Thanks Eleventy!</li> </ul> <h3 id="this-site">This site</h3> <ul> <li>Fixed the copyright year in my footer (oops).</li> <li>Made sure 2023 and 2024 show up in the “browse by year” navigation on <a href="https://www.notion.so/Learning-Log-Mar-2024-3acaab2979404324b21263f94ba58f21?pvs=21">the blog</a> (also oops).</li> <li>Changed up blog post card sizes a bit, at larger breakpoints. Previously, the first two blog posts would be rendered large (two-to-a-row), and subsequent posts would be rendered small (three-to-a-row). I decided to simplify the layout so that all posts on the first page are large, and all posts on subsequent pages are small.</li> <li>Made blog post margins and type size look better on ~tablet.</li> <li>Gave captions a little bit of horizontal padding.</li> </ul> <h3 id="lit-tapes"><a href="https://littapes.melanie-richards.com/">Lit Tapes</a></h3> <ul> <li>Added playlists for <a href="https://littapes.melanie-richards.com/lit-tape/signal-to-noise/">“Signal to Noise”</a> by Silvia Moreno-Garcia, and <a href="https://littapes.melanie-richards.com/lit-tape/the-perks-of-being-a-wallflower/">“The Perks of Being a Wallflower”</a> by Stephen Chbosky</li> <li>Improved the responsive layout for pagination, so that it stacks a bit more cleanly on smaller breakpoints.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://www.themicropedia.org/">The Micropedia</a>, a compendium of microaggressions (via <a href="https://samkapila.com/clips/">Sameera Kapila’s clips</a>)</li> <li><a href="https://hellnet.work/8831/">The 88x31 Archive</a>, and <a href="https://neonaut.neocities.org/cyber/88x31">some history</a> on these buttons</li> </ul> <hr /> <h2 id="reading">Reading</h2> <p>You can tell I actually had time between jobs to get through my Reader backlog…</p> <h3 id="product">Product</h3> <ul> <li><a href="https://swkhan.medium.com/b2b-product-managers-what-value-are-you-adding-a8b9c3fb46d1">B2B Product Managers: What value are YOU adding?</a></li> </ul> <h4 id="collaboration-%26-interpersonal">Collaboration &amp; Interpersonal</h4> <ul> <li><a href="https://newsletter.weskao.com/p/the-1-question-every-business-case">The #1 Question Every Business Case Should Answer</a></li> <li><a href="https://newsletter.weskao.com/p/sign-posting-how-to-reduce-cognitive">Sign Posting: How to Reduce Cognitive Load for Your Reader</a></li> <li><a href="https://newsletter.weskao.com/p/how-to-get-an-enthusiastic-yes">How to Get an Enthusiastic Yes</a></li> </ul> <h4 id="customer-discovery">Customer Discovery</h4> <ul> <li><a href="https://userresearch.blog.gov.uk/2014/09/16/sample-size-and-confidence/?utm_source=Product+Talk+Subscribers&amp;utm_medium=Monthly+Newsletter&amp;utm_campaign=Monthly+Newsletter+-+January+28%2C+2024">Sample Size and Confidence: How to Get Your Team to Trust Qualitative Research</a></li> <li><a href="https://userresearch.blog.gov.uk/2014/08/06/have-you-had-your-recommended-dose-of-research/">Have You Had Your Recommended Dose of Research?</a></li> </ul> <h4 id="data">Data</h4> <ul> <li><a href="https://dataanalysis.substack.com/p/how-to-measure-new-feature-adoption">How to Measure New Feature Adoption</a></li> <li><a href="https://amplitude.com/blog/ultimate-guide-product-feature-analysis">The Ultimate Guide to Product Features Analysis</a></li> </ul> <h4 id="growth">Growth</h4> <ul> <li><a href="https://elenaverna.substack.com/p/b2b-product-led-growth-non-negotiable">B2B Product-Led Growth Non-Negotiable: TEAM Network Effects</a></li> </ul> <h4 id="vision-%26-strategy">Vision &amp; Strategy</h4> <ul> <li><a href="https://swkhan.medium.com/how-to-create-a-product-vision-445e1fced272">How to Create a Product Vision</a></li> <li><a href="https://medium.com/swlh/theres-a-fine-line-between-strategy-and-fantasy-982431e83b94">How to Stop Your Strategy From Turning Into a Fantasy</a></li> <li><a href="https://rogermartin.medium.com/is-the-opposite-of-your-choice-stupid-on-its-face-5b247ffd7f94">Is the Opposite of Your Choice Stupid on Its Face?</a>: I don’t love the central term here (would replace it with “non-sensical”), but the key takeaway holds.</li> <li><a href="https://swkhan.medium.com/driving-clarity-and-alignment-via-business-and-product-objectives-6d2c9cca2046">Connecting Business and Product Objectives</a></li> </ul> <h3 id="design">Design</h3> <ul> <li><a href="https://bpando.org/2024/03/05/place-making-branding-blue-mountains-for-the-people/">Blue Mountains by For The People</a>: the typography and use of shape in this brand really caught my eye!</li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://anhvn.com/posts/2024/my-eleventy-site-setup/">My Eleventy site setup</a>: I also quite liked this person’s current blog post styling and syntax highlighting scheme</li> <li><a href="https://frontendfoc.us/link/151600/ef7e9370b1">100 Things You Can Do on Your Personal Website</a></li> <li><a href="https://ericwbailey.website/published/thoughts-on-embedding-alternative-text-metadata-into-images/">Thoughts on Embedding Alternative Text Metadata Into Images</a></li> <li><a href="https://www.wired.com/story/reddits-sale-user-data-ai-training-draws-ftc-investigation/">Reddit’s Sale of User Data for AI Training Draws FTC Investigation</a></li> <li><a href="https://spencerchang.substack.com/p/touching-computers">Touching Computers</a></li> <li><a href="https://darthmall.net/weblog/2024/indieweb-is-for-devs/">The IndieWeb Is for Developers</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; Productivity</h3> <ul> <li><a href="https://tim.blog/2016/03/29/deloading-phase/">Why You Need a &quot;Deloading&quot; Phase in Life</a></li> <li><a href="https://aaronfrancis.com/2024/do-literally-anything/">Do Literally Anything</a></li> <li><a href="https://elenaverna.substack.com/p/the-trap-of-tying-your-identity-to">The Trap of Tying Your Identity to Your Job Title.</a></li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li><a href="https://brooke.substack.com/p/i-remember-you">I remember you</a></li> <li><a href="https://effectiviology.com/shirky-principle/">The Shirky Principle: Institutions Try to Preserve the Problem to Which They Are the Solution</a></li> <li><a href="https://theatlantic.com/ideas/archive/2024/02/america-decline-hanging-out/677451/">Why Americans Suddenly Stopped Hanging Out</a></li> <li><a href="https://restofworld.org/2024/gig-work-account-rental/">Gig Workers on Delivery Apps Rent Accounts to Get Around Bans</a></li> <li><a href="https://adactio.com/journal/20996">What the World Needs</a></li> <li><a href="https://kotaku.com/windows-11-30-year-old-menu-nt-format-story-plummer-1851364593">A 30-Year-Old Menu in Windows Was Meant to Be Temporary, Actually</a>. Classic.</li> <li><a href="https://cur.at/1lSVN93?m=email&amp;sid=b8euTXa">AI ‘Apocalypse’ Could Take Away Almost 8m Jobs in UK, Says Report</a></li> </ul> Re: One big, one little 2024-03-28T00:00:00.000Z https://melanie-richards.com/blog/re-one-big-one-little/ <p>Earlier this month I had a week and a half in between jobs. What I would usually do when suddenly presented with a large chunk of free personal time is:</p> <ol> <li>Panic about all the side projects I don’t usually have time + energy for</li> <li>Try to do too many of these projects</li> <li>End up with some combination of 1) not taking sufficient time to rest, and 2) not achieving much at all, due to flitting around like a butterfly between ideas</li> </ol> <p>I <em>finally got smart this time</em> and listened to <a class="footnotes__ref" href="https://melanie-richards.com/blog/re-one-big-one-little/#cousin-note" id="cousin-ref" aria-describedby="footnotes-label" role="doc-noteref">Cousin Dave</a> and his <a href="https://daverupert.com/2024/01/one-big-one-little/">“One big, one little”</a> strategy:</p> <blockquote> <p>If I artificially limit myself to having one major and one minor active side project at a time, my agility goes up because I’m not doing ten projects at once, I’m doing one or two. When one <a href="https://daverupert.com/2022/04/productivity-sniped-by-para/">project finishes</a>, I move to the next best idea that fits the available slot. I will never be taking on too much and it’s easier to say “no” to new distractions if I have to substitute projects.</p> </blockquote> <p>I’d recommend giving his <a href="https://daverupert.com/2024/01/one-big-one-little/">full blog post</a> a read. In any case…</p> <h2 id="spoiler-alert%3A-it-worked-for-me">Spoiler alert: it worked for me</h2> <p>I followed this principal of “one big, one little” project during my break, and it <em>really</em> worked for me. I’ve been learning blackletter calligraphy, and had decided to do a self-initiated “capstone” project wherein I wrote the original 151 Pokemon in the Textura Quadrata style:</p> <video class="u-limit-width" controls=""> <source src="https://melanie-richards.com/assets/videos/content/melanierichards-pokemon-calligraphy.mp4" type="video/mp4" /> <p>Your browser doesn't support video</p> </video> <details> <summary>Video description</summary> <ul> <li><strong>Visuals:</strong> my hand flipping through a paperback-sized gridded journal. On each page are the names of 10 original Pokemon rendered in blackletter calligraphy. Half of the pages use red ink, half use blue ink, and the name Pikachu is written in sparkly yellow ink.</li> <li><strong>Audio:</strong> the only audio is the crinkly page-turning sound.</li> </ul> </details> <p>The only reason I had the satisfaction of finishing this within my break is because I was able to say “no” to the siren call of other projects. I could say to myself, “that idea looks fun, but I’m focused on calligraphy right now. I’ll turn to that after I finish penning the word ‘Mew’.”</p> <h2 id="taking-the-t-out-of-smart-goals">Taking the T out of SMART goals</h2> <p>Not only did this system help me during an unusual quiet period, it also provided me with a healthy mental shift around timelines and non-required goals. Any productivity guru will tell you SMART goals are where it’s at. Your goals must be time-bound in order to apply the pressure you need to complete the necessary work.</p> <p>Everyone’s brain works differently though, and for me, designating a quarterly and/or monthly personal project was a recipe for disappointment. If I needed just a <em>little</em> more time to finish my February project in March, that carry-over felt like failure. Conversely, limiting myself to a particular focus for a quarter also felt confining. And by the way, none of these personal projects are required for me to be a good employee, partner, or human being—they are literally meant to enrich my life. Not. Worth. The anxiety.</p> <p>With this “one big, one little” system, personal projects are on a sushi conveyer belt. I can focus on the current project at hand, work it as my energy/interest/schedule allows, and pick up the next one whenever I’m ready. It’s the tiniest framing shift that is felt seismically within my noggin.</p> <h2 id="adjustments-i%E2%80%99m-making">Adjustments I’m making</h2> <p><a href="https://daverupert.com/2024/01/one-big-one-little/">Dave described</a> allowing himself “one big, one little” in 3 life areas: work, personal, and family. I’ve found that I have similar distinct zones of time in my own weekly schedule.</p> <p>In the “personal” bucket, I’m also allowing myself an optional/additional “XL” project, i.e. a knitting or weaving project. For me, this type of project:</p> <ul> <li>Is so large that it needs to be broken up with “smaller” large projects</li> <li>Typically doesn’t take a lot of mental power, except at new-to-me steps</li> <li>Is usually portable, enabling me to have a project to work on while watching TV (I can’t sit still!!) or at crafting meetups</li> </ul> <p>For work, I’m figuring out what type of throughput is considered desirable at my <a href="https://webflow.com/">new employer</a>; I’m a product manager, so most things I’m doing at work are a team sport. I might interpret this bucket more like “personal career development”. Or I might try to hold separate, limited slots for discovery, execution, and personal development. Happily, the org I just joined seems to value doing fewer things simultaneously—for quality and velocity—over <a href="https://www.inc.com/jim-schleckser/why-you-shouldnt-peanut-butter-your-time.html">peanut buttering</a>.</p> <h2 id="can%E2%80%99t-wait-to-make-more-things!">Can’t wait to make more things!</h2> <p>So far, this philosophy has helped me chill out about personal projects <em>and</em> get more things done for my husband, our friends, and I. I’m looking forward to seeing where experimenting with <a href="https://daverupert.com/2024/01/one-big-one-little/">“one big, one little”</a> takes me. Big thank you to Dave for sharing!</p> <p><em>— Signed, person who just completed a “little”: the blog post you’re reading!</em></p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="cousin-note" class="footnotes__list-item" role="doc-endnote">Not my actual cousin <a class="footnotes__back-link" href="https://melanie-richards.com/blog/re-one-big-one-little/#cousin-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, Feb 2024 2024-03-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2402/ <h2 id="learning-blackletter-calligraphy">Learning blackletter calligraphy</h2> <p>In honor of Austin Kleon’s <a href="https://austinkleon.com/2024/01/31/29-day-practice-and-suck-less-challenge/">“29-day Practice and Suck Less challenge”</a>, I decided to try learning blackletter calligraphy once and for all—specifically <a class="footnotes__ref" href="https://melanie-richards.com/blog/learning-log-2402/#textura-quadrata-note" id="textura-quadrata-ref" aria-describedby="footnotes-label" role="doc-noteref">Textura Quadrata</a>, the earliest and simplest form of blackletter calligraphy, dating back to 11th century Europe.</p> <p>As a lefty, any form of calligraphy has not been very accessible to me; lefthanded people generally push their pen across a page, whereas the pull motion is key to calligraphy. I thought it might work out ok if I made my strokes backwards, i.e. right to left and bottom to top. I came across <a href="https://www.youtube.com/watch?v=DDz7HVdfrE8">this video</a> and was happy to note I appeared to be on to something!</p> <p>After looking at a few different resources, I decided to use Jake Rainis’s <a href="https://jakerainis.com/blog/learning-blackletter-alphabets/">learning blackletter guides</a> to pick up the Textura style.</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-blackletter-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-blackletter-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-blackletter-s.jpg" alt="A pile of printer papers where I'm tracing over or copying some gothic letters, across the entire lowercase alphabet" /> </picture> <p>I definitely didn’t practice all 29 days of February—had a week of work travel amongst other goings on—but I’m feeling pretty solid with miniscules (lowercase letters) now. I’m just starting to work on majuscules, or uppercase letters. I admit I feel much more intimidated by these!</p> <p>I’m having fun <a href="https://front-end.social/@melanie/112002207865951448">deploying blackletter calligraphy in my journal</a> for any little thing. And I love how quickly my Pilot Parallel pens use up fountain pen ink; between Diamine’s Inkvent calendars and Pilot Iroshizuku’s huge bottles, I need some help in that department.</p> <h2 id="urban-sketching">Urban Sketching</h2> <p>I joined <a href="https://seattle.urbansketchers.org/">Urban Sketchers Seattle</a> for a sketch outing in Greenwood. I’ve only been to an outing twice, but I always have such a wonderful time going out and drawing on location with other hobbyists. The trick is to push past the “I suck at drawing, this looks like 💩” phase, to get to the fun mindfulness phase.</p> <p>This time around I revolted against these grey February days with some obnoxious colors:</p> <div class="l-grid l-grid--media"> <figure class=""><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-usk-alice-ball-park-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-usk-alice-ball-park-s.jpg" alt="Bright orange and pink drawn scenes of a park, including an abandoned toy truck" /> </picture><figcaption>Scenes from Alice Ball Park, next to the Greenwood library</figcaption></figure> <figure class=""><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-usk-greenwood-lib-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-usk-greenwood-lib-s.jpg" alt="Bright orange and pink collage of drawings, including a rosemary cretzel, some new flowers poking up, signs for a restaurant called Flint Creek Cattle Co, a brick building, and names of birds contributing bird song" /> </picture><figcaption>From around Greenwood. I got rained on a little bit.</figcaption></figure> </div> <p>In any case, I hope to make it out to more outings this year.</p> <h2 id="more-robust-screen-time-rules">More robust screen time rules</h2> <p>In February I downloaded the <a href="https://appblock.app/">AppBlock app</a>, which offers more fine-grained configuration of mobile app blocking and screen time than does Apple’s built-in features.</p> <p>For example, I have Slack on my phone but don’t want to open the app after work hours or on weekends, so I have a block set up for that. I’ve also set up social media app and website blocking on Sundays, and honestly it’s been such a relief to just not have access to these for one day out of the week.</p> <h2 id="%F0%9F%8C%B1-digital-gardening"><strong>🌱 Digital Gardening</strong></h2> <p>Added two books to <a href="https://littapes.melanie-richards.com/">Lit Tapes</a>: one I’d read recently (<em>Daisy Jones &amp; The Six</em>, it was ok) and another I’d read a few years back (<em>Wow, No Thank You</em>).</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://youtu.be/U8RQsJ0Q3Mo?si=v1pJ0jcEYSg2Jsch">The Journaling System that changed my life</a>: a video with a hyperbolic title that actually delivered on its promise</li> <li><a href="https://www.instagram.com/reel/C1uUQnMLzpl/">This little story about love and feelings</a> via a co-worker. Poignant, just need to ignore the speaker gesturing with an open cup of coffee (I can confirm no coffee is spilled for the duration of the video!)</li> </ul> <h2 id="reading">Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://productcoalition.com/utility-eats-value-for-breakfast-about-diminishing-marginal-utility-b2dd362899cc">utility eats value for breakfast</a></li> <li><a href="https://ft.com/content/6fb1602d-a08b-4a8c-bac0-047b7d64aba5/">‘Enshittification’ is coming for absolutely everything</a></li> <li><a href="https://medium.com/@ElizAyer/enshittification-as-overproduction-in-software-part-1-seeing-overproduction-7f175bca7724">Enshittification as Overproduction in Software, Part 1: Seeing Overproduction</a></li> <li><a href="https://medium.com/@ElizAyer/enshittification-as-overproduction-in-software-part-2-overproduction-in-the-product-lifecycle-99584e8da458">Enshittification as Overproduction in Software, Part 2: Overproduction in the Product Lifecycle</a></li> <li><a href="https://productmanagerinfo.com/setting-the-right-input-vs-output-metrics/#">Setting the Right Input vs Output Metrics</a></li> <li><a href="https://thenorth.io/input-metrics-vs-output-metrics/">Input Metrics vs Output Metrics</a></li> <li><a href="https://amplitude.com/blog/product-metrics-guide">15 Important Product Metrics You Should Be Tracking</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://frontendfoc.us/link/151320/ef7e9370b1">Tailwind vs. Semantic CSS</a></li> <li><a href="https://webaim.org/blog/screen-reader-user-survey-10-results/">Screen Reader User Survey #10 Results</a></li> <li><a href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/">Where I’m at on the Whole CSS-Tricks Thing</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; Productivity</h3> <ul> <li><a href="https://aworkinglibrary.com/writing/unified-theory-of------">A Unified Theory of F***s</a> 💯</li> <li><a href="https://www.linkedin.com/pulse/why-we-should-take-time-read-work-hannah-preston">Why we should take time to read at work</a></li> <li><a href="https://slate.com/technology/2024/01/corporate-job-quit-now-crossing-guard.html">After Many Years Holding Down a Corporate Job to Get Health Insurance, I’ve Finally Found a Better Way to Make Ends Meet and Do My Art: I’m a Crossing Guard.</a></li> <li><a href="https://usefulfictions.substack.com/p/how-to-be-more-agentic">How to Be More Agentic</a></li> <li><a href="https://daverupert.com/2024/01/one-big-one-little/">One Big, One Little</a></li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li> <p><a href="http://thecraftsessions.com/blog/moving-through-crafty-overwhelm?format=amp">Moving Through Crafty Overwhelm</a></p> </li> <li> <p><a href="https://www.swiss-miss.com/2024/02/light-the-torches-of-others.html">Light the Torches of Others</a></p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="textura-quadrata-note" class="footnotes__list-item" role="doc-endnote">As far as I know, this style of blackletter calligraphy was also not the style appropriated by a particular hate-mongering political regime. Why can’t they just let humanity have nice things? <a class="footnotes__back-link" href="https://melanie-richards.com/blog/learning-log-2402/#textura-quadrata-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer></li> </ul> Learning Log, Jan 2024 2024-02-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2401/ <p>Blah winter vibes this January with a cold snap that brought the weather into the teens (Fahrenheit) for ~a week in Seattle, WA. I tried to lean into coziness by learning how to bake bread (4 years after everyone else, it seems), knitting, and reading by a lit scented candle.</p> <h2 id="shipping">Shipping</h2> <p>With my co-workers at Netlify:</p> <ul> <li><a href="https://www.netlify.com/blog/sites-list-sorting-filtering/">Shipped sorting and filtering for the Sites list</a></li> <li>Chatted with colleagues about the Netlify app for Slack—which we made generally available in December—in my first <a href="https://www.linkedin.com/posts/netlify_how-to-create-a-custom-netlify-slack-integration-activity-7156053115719315456-wZKm?utm_source=share&amp;utm_medium=member_desktop">live-streamed webinar</a>!</li> </ul> <h2 id="making">Making</h2> <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-nisu-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-nisu-s.webp" alt="Three golden-brown braided loaves lined up in a rowAlt" /> </picture> <ul> <li>🍞 Finally crossed a couple items off the culinary bucket list. I made some <a href="https://minimalistbaker.com/strawberry-matcha-chia-pudding/">matcha chia pudding with strawberry compote</a>, which was easy but tasty. And my husband joined me in making our first loaves of bread—likewise tasty but not easy; it took houuurs for our dough to prove. I chose <a href="https://food52.com/recipes/76896-finnish-cardamom-coffee-bread-nisu">this nisu recipe</a>, because why pick something simple for the first go-around? 🙃</li> <li>📼 Over the course of a weekend I made a little site that’s been stuck in my head, <a href="https://littapes.melanie-richards.com/">Lit Tapes</a>! It’s a compilation of my playlists compiled from songs referenced in books; small so far, but it will grow. <a href="https://melanie-richards.com/blog/lit-tapes/">More info on this project</a>.</li> <li>🌱 Digital gardening: added a couple new snacks to my <a href="https://snacks.melanie-richards.com/">World Snacks</a> site.</li> <li>✂️ I’m so close to finishing my first <a href="https://sewsweetness.com/products/creative-maker-supply-cases">Creative Maker Supply Case</a>. There’s just a few tasks left but they’re so fiddly and I don’t wanna!! I’ve put the project away (again) for a little while, and will pick it back up when I’m feeling brave.</li> <li>🧦 Started learning how to knit socks!</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://intentionalist.com/">Intentionalist</a>: a directory of local small businesses owned by folks from marginalized backgrounds</li> <li><a href="https://youtu.be/0rguAMMTIYY?si=D8q6PWnASbfbK16h">How I put down my phone and started making art I cared about</a></li> </ul> <h2 id="reading">Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://www.nngroup.com/articles/competitive-usability-evaluations/">Competitive Usability Evaluations: Learning From Your Competition</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://www.techspot.com/news/101396-european-union-set-revise-cookie-law-admits-cookie.html">European Union Set to Revise Cookie Law, Admits Cookie Banners Are Annoying</a></li> <li><a href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/">Where Have All the Websites Gone?</a></li> <li><a href="https://brucelawson.co.uk/2024/apple-and-malicious-compliance/">Apple, the DMA, and Malicious Compliance</a></li> <li><a href="https://daverupert.com/2024/01/focus-visible-love/">Big, Beautiful, Beefy Focus States With :Focus-Visible</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; Stationery</h3> <ul> <li><a href="https://hannahmoerman.substack.com/p/moer-notes-2023">Moer Notes // 2023.</a> (this newsletter in general!)</li> <li><a href="https://stuffthatsticks.co/pages/join-the-clurb">Stuff That Sticks</a> newsletter</li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li><a href="https://www.creativeboom.com/tips/reboot-your-creativity-how-to-reclaim-momentum-post-holiday/">Reboot Your Creativity: How to Reclaim Momentum if Your January Is Dragging</a></li> <li><a href="https://www.thisiscolossal.com/2024/01/secret-message-dress/">A Silk Dress From 1888 Contained a Hidden Pocket With Coded Messages. After a Decade, Someone Finally Solved the Mystery</a></li> </ul> New project: Lit Tapes 2024-01-16T00:00:00.000Z https://melanie-richards.com/blog/lit-tapes/ <p>Over the weekend I built a new little site that’s been on my mind: <a href="https://littapes.melanie-richards.com/">Lit Tapes</a>! I read a couple books in the past few months that heavily featured music throughout the plot, and thought it would be fun to create playlists for those books.</p> <p>I’ve told myself <a href="https://dianaberlin.com/posts/no-more-forever-projects">“no more forever projects”</a>, but I just can’t seem to help myself. In any case, I don’t foresee updating this site frequently—just whenever I happen to read a story that celebrates music.</p> <p>The index is a grid of cassette tape illustrations that match the color scheme of the book covers:</p> <a class="c-web-preview" href="https://littapes.melanie-richards.com/"> <picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-lit-tapes-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-lit-tapes-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-lit-tapes-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-lit-tapes-s.png" alt="A tagline saying 'Playlists compiled from songs referenced in books.' Underneath are cassettes labeled with the titles of books, including for now 'We Sold Our Souls' and 'All My Rage'" /> </picture></a> <p>I created an SVG illustration that gets embedded for each post. The <a href="https://github.com/melanierichards/lit-tapes/blob/main/src/_includes/partials/cassette.njk">SVG include</a> references post-specific colors stored in <a href="https://github.com/melanierichards/lit-tapes/tree/main/src/_data/tapes">a data file for each post</a>. There’s a <code>deco</code> property that defines whether the particular cassette should get stripes, a top band of color, or a bottom band of color. I decided to do that manually since the right aesthetic depends on the book cover.</p> <p>Also in the post data are light and dark color schemes for each book:</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-lit-tapes-themes-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-lit-tapes-themes-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-lit-tapes-themes-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-lit-tapes-themes-s.png" alt="Two views of the 'All My Rage' page. One is a yellowy cream backgorund with violet text and border colors. The other is a very dark purple background and light purple text." /> </picture> <p>These are also based off the book cover scheme.</p> <p>That’s about it! You can poke around in the code <a href="https://github.com/melanierichards/lit-tapes">on Github</a>. Any musically-oriented books I should read next? Please file an issue and let me know!</p> 2023 in Review 2023-12-19T00:00:00.000Z https://melanie-richards.com/blog/2023-review/ <p>Not going to lie, this was a challenging year. There were certainly some high points, but also quite a fair bit of stress and change and uncertainty running throughout. It’s the year my husband and I finally got COVID—but it’s also the year I get to call him my husband! Let’s go to the highlight reel.</p> <h2 id="experienced">Experienced</h2> <p><img src="https://melanie-richards.com/assets/images/content/jenn-tai-wedding.webp" alt="My husband and I grinning at each other in front of art deco metalwork. I’m wearing a classic western wedding dress in white, and he has on a burgundy suit." /></p> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-shaadi.webp" alt="Rahul and I with our parents in traditional Indian wedding garb, in front of a wall full of flowers. I am wearing a bright red lehenga dress. Rahul is wearing a cream-colored suit called a sherwani. Rahul and I both have garlands of pink and yellow flowers around our necks." /></p> <p>Rahul and I got married twice, on two continents! Once for extended family in the United States, and then again for the extended family in India. We were blown away by how many of our friends (and my family members) were able to fly across the world to celebrate with us again. Dance parties across the globe.</p> <p>6 months later, we went to Italy for our honeymoon and had a wonderful time evening out 20k steps a day with carbs and amaro.</p> <p>Smaller experiences that brought me joy this year:</p> <ul> <li>Monthly book club with a group of friends</li> <li>Visiting family</li> <li>Cabin weekends</li> <li>Live outdoor music (even though I’m pretty sure I got COVID from an outdoor music fest)</li> <li>My first pen show, the inaugural PNW Pen Show in PDX!</li> <li>Parallel play, particularly finding crafty groups in Seattle to share time with</li> <li>Having friends over for a double-spooky-movie feature around Halloween, and for drinks and candle lighting at Diwali</li> <li>Doing a lot of writing and drawing in my journal; I feel really happy with how cute it is, and I think it will be fun to look back on in the future.</li> </ul> <figure class=""><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2023-seasons-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2023-seasons-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2023-seasons-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2023-seasons-s.webp" alt="A cluster of white blossoms on a tree, with magenta stamen. A red hammock strung between strong trunks, against a green backdrop of leafy trees. A tree by the street with super-saturated red and orange leaves." /> </picture><figcaption>Pear blossoms on our tree in spring, hammock reading at a cabin in the summer, and vibrant color in the fall</figcaption></figure> <h2 id="shipped">Shipped</h2> <p>With my collaborators at Netlify, I shipped:</p> <ul> <li>Collaboration through the <a href="https://www.netlify.com/blog/qa-and-collaborate-directly-on-branch-deploy-urls/">Netlify Drawer on branch deploys</a>, as well as a refresh of said Drawer</li> <li>Collaborative Deploy Previews <a href="https://www.netlify.com/blog/collaborative-deploy-previews-bitbucket/">with Bitbucket repos</a></li> <li><a href="https://answers.netlify.com/t/bulk-import-environment-variables-from-env/86680">Bulk import</a> for environment variables</li> <li><a href="https://www.netlify.com/blog/automatic-deploy-subdomains-ga/">Automatic Deploy Subdomains</a></li> <li><a href="https://answers.netlify.com/t/customize-the-email-subject-line-for-form-submission-notifications/91534">Form notification subject line customizations</a></li> <li>A series of updates improving navigation and information architecture in the app</li> <li><a href="https://www.netlify.com/blog/netlify-app-slack-ga/">Netlify app for Slack</a></li> <li>Some bits and bobs behind the scenes on Netlify’s composition platform…stay tuned for more next year!</li> </ul> <h2 id="learned">Learned</h2> <ul> <li><a href="https://bookshop.org/p/books/continuous-discovery-habits-discover-products-that-create-customer-value-and-business-value-teresa-torres/17004458?ean=9781736633304">Continuous Discovery Habits</a> was my favorite product read this year!</li> <li>Quite a bit about data analysis, statistics, and SQL. I know enough to be dangerous and to have way too much fun.</li> <li>A few months’ on Duolingo worth of Italian. I switched back to Spanish when I got home from Italy, but abandoned the app a couple months later (again). It bothers me to have engagement-hacking change my behaviors. So I’m back on Wanikani, learning kanji again; their spaced repetition system is so much gentler. I also learned about the “comprehensible input” style of language learning, which I might try for Spanish (there is a well-known site called <a href="https://www.dreamingspanish.com/">Dreaming Spanish</a>).</li> </ul> <h2 id="made">Made</h2> <picture class="u-limit-width"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-tiger-sketchbook-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-tiger-sketchbook-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-tiger-sketchbook-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-tiger-sketchbook-s.webp" alt="Left sketchbook page: a quilt like grid of abstract shapes in blue and teal, include some shapes like waves. Right page: a teapot with a tiger’s yum face. The spout and handle have a tiger pattern. Underneath are shapes in orange, yellow, and charcoal." /> </picture> <ul> <li><a href="https://fiber.melanie-richards.com/q1-crafting/">In Q1</a>: a journal cover, bookmarks for my bridal party, and finalizing a scarf for my husband</li> <li>A couple small <a href="https://fiber.melanie-richards.com/pen-pouch/">pen pouches</a></li> <li>A <a href="https://product.melanie-richards.com/">product resources website</a></li> <li>A zippered <a href="https://fiber.melanie-richards.com/marker-pouch/">marker pouch</a></li> <li>A small tapestry weaving</li> <li>Lots of “digital gardening” on my existing sites</li> <li>Finished my Stillman &amp; Birn Epsilon A5-ish sketchbook</li> </ul> <h2 id="favorite-media">Favorite Media</h2> <h3 id="books">Books</h3> <p>Sooooo I read ~76~ 80 books this year, which officially makes this my biggest reading year ever. 📚 My previous “personal best” was 72 books. What probably heavily attributed to this year’s volume (heh) was 1) the Seattle Public Library Summer Book Bingo, 2) readathons, and 3) my friends’ monthly book club.</p> <p><a href="https://bookshop.org/lists/2023-favorite-books-melanie-richards">Favorite books of the year here</a>! <a href="https://bookshop.org/p/books/venco-cherie-dimaline/18727170?aid=15644&amp;ean=9780063054899&amp;listref=2023-favorite-books-melanie-richards">“VenCo”</a> by Cherie Dimaline was absolutely my favorite read of the year: a perfect witchy book.</p> <h3 id="music">Music</h3> <p>As you can quickly surmise from my <a href="https://tidal.com/browse/mix/009d8566a407abbbf1c4ded5c2aafc">2023 top songs on Tidal</a>, I pretty much just listened to the boygenius record over and over again.</p> <h3 id="movies">Movies</h3> <p><a href="https://letterboxd.com/somelaniesaid/year/2023/">38 movies watched</a>. I wasn’t blown away by anything this year, really. Got spoiled last year with “Everything Everywhere All at Once”. A few favorites in the 4–5 star range:</p> <ul> <li><a href="https://letterboxd.com/film/barbie/">Barbie</a></li> <li><a href="https://letterboxd.com/film/the-godfather/">The Godfather</a></li> <li><a href="https://letterboxd.com/film/m3gan/">M3gan</a> (wow, can’t believe that was this year)</li> <li><a href="https://letterboxd.com/film/see-how-they-run-2022/">See How They Run</a></li> <li><a href="https://letterboxd.com/film/talk-to-me-2022/">Talk to Me</a></li> </ul> <h2 id="%F0%9F%A5%82-cheers-to-2024">🥂 Cheers to 2024</h2> <p>What a beautiful, base-4-number of a year. I hope life treats us all well in the days to come.</p> A lefty’s journey into fountain pens 2023-12-18T00:00:00.000Z https://melanie-richards.com/blog/lefty-fp/ <p>In August 2022, I was casually browsing through <a href="https://www.jetpens.com/">Jetpens</a> (as one does), and thought I might like to give fountain pens one last try. I’m lefthanded, and the fountain pens I tried in the past felt scratchy and difficult to write with. But they seemed so neat!</p> <p>I found and ordered a Lamy Safari with a left-handed nib. Their lefty nibs are similar to a Western medium-sized nib, and have a special grind that is supposed to help south paws push their nib across the page (right-handed people use a “pull” action). I had no idea how well it would work for me, but figured why not give it one more shot?</p> <h2 id="it.-worked.">It. worked.</h2> <p>Funnily enough, the left-handed nib that I ordered that day wasn’t the important unlock for my fountain pen journey. It was actually the triangular grip on the Lamy Safari:</p> <figure class="u-limit-width"> <img src="https://melanie-richards.com/assets/images/content/jetpens-lamy-safari.jpg" alt="Black, white, and clear Lamy Safari pens laid next to each other, closely cropped so that you can distinguish two grooves in the front of the pen where your fingers go" /> <figcaption>Image of Safari grip sections courtesy of Jetpens</figcaption> </figure> <p>This triangular grip encourages your fingers (middle, pointer, thumb) to naturally create what Jetpens calls a “tripod position”.</p> <p>That grip was so important for me because naturally I am a “side writer”. Side writers push the pen across the page, with their hand passing directly over the lines they’re writing. This is the absolute worst writing position (AFAICT) if you hate smudging, or if you want to use a pen without that scratchy feeling.</p> <p>The tripod finger positioning enabled me to become an “under writer”, which entails holding the pen beneath the line that you’re currently writing. Writing with your hand under the line helps avoid smearing and scratching. <a href="https://www.gouletpens.com/blogs/fountain-pen-blog/fountain-pens-for-lefties">This blog post</a> has images illustrating these writing positions.</p> <p>I had actually tried learning to become an underwriter previously, but it made absolutely zero sense to my mind—until I got my literal hands on a Lamy Safari, and my fingers fell right into place.</p> <h2 id="my-journey-since-then">My journey since then</h2> <p>Because the Lamy Safari trained me to become an underwriter, I felt I could use <em>any</em> fountain pen (FP) or ink I wanted. And boy…have I purchased a few. One thing you’ll find in the FP community is that people often go a little wild at first and buy a lot of pens. I’m in camp “this is actually a good thing”, because you won’t know what you really like until you try a few different options.</p> <h3 id="my-favorite-pens">My favorite pens</h3> <figure class="u-limit-width"><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-dec-pens-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-dec-pens-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-dec-pens-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-dec-pens-s.webp" alt="My hand holding a black Pilot pen, a TWSBI pen with a red cap and red ink, a TWSBI pen with a white cap and dark green ink, and a sage green Kaweco pen." /> </picture><figcaption>The pens I’m currently using for memory keeping in December 2023</figcaption></figure> <p><strong>“Everyday drivers”:</strong> for the main “body copy” of my journals, I like to use Pilot fountain pens. These are among my most expensive pens. For my Hobonichi “memory keeping” journal I have a Pilot Custom NS (M nib) and a Pilot Custom 743 (F). For my pocket bullet journal, I use a Pilot Vanishing Point Decimo (F). I was so surprised that I actually really liked a “clicky” fountain pen. It’s a perfect companion for a small notebook on the go. <a href="https://www.pensachi.com/">Pen Sachi</a>, where I bought most of these, runs sales from time to time, so keep an eye out for those.</p> <p><strong>Companion pens:</strong> for the headings and special text in my journal, I use TWSBI Eco (F, M, <a class="footnotes__ref" href="https://melanie-richards.com/blog/lefty-fp/#link-fragment-note" id="link-fragment-ref" aria-describedby="footnotes-label" role="doc-noteref">stub</a> nibs) and Kaweco Sport (F) pens. I actually collect TWSBI Eco/Eco-T pens that have opaque colored caps. I loooove how much ink they can hold, and they don’t dry out when I leave them in a drawer for awhile. My jam is matching ink and pen colors. I rotate the colors I use in my journal monthly.</p> <p><strong>Cheap pens for travel:</strong> aesthetically Platinum Preppys are not my fave, but they write <em>so well</em> for such a cheap pen (~$7 USD). The caps click on nice and securely, so these are a great option to travel with.</p> <h3 id="pens-i%E2%80%99m-not-a-fan-of">Pens I’m not a fan of</h3> <p>There are many pens I haven’t bothered trying out, since I don’t like the aesthetics or they’re too expensive for me to be interested in. A couple of not-favorites include:</p> <ul> <li><strong>Sailor brand:</strong> I have a couple Sailor Pro Gear Slims, which are among my most expensive pens. They are SO CUTE, I love how they feel in the hand, but the writing experience with Sailor nibs is not my favorite. Sailor nibs are known for having a bit more “feedback”; they can feel somewhat like a pencil. I didn’t have an opportunity to try these before I bought them. I wish I had, because I want to like them more than I actually do.</li> <li><strong>Platinum Century 3776:</strong> I tried this at a pen show and wasn’t jazzed about how it wrote, which is strange considering I like their cheapies so much.</li> <li><strong>Pilot Kakuno:</strong> this is an inexpensive (~$12 USD) pen intended for kids, and it’s so cute but it’s scratchy as all hell. So funny that I like expensive Pilots and dislike the cheap ones, and the reverse is true for Platinum. Just goes to show you have to try things for yourself.</li> </ul> <h3 id="the-pen-i-truly-want">The pen I truly want</h3> <p>Give me a Pilot nib in a Sailor body!! Pilot makes the best nibs that I’ve tried, but they are not adventurous in terms of pen body colors/aesthetics. That’s at least true of the pens that make it across the pond here in the U.S.; the Japanese market tends to have exclusive models.</p> <h3 id="ink-brands-i-like">Ink brands I like</h3> <ul> <li><strong>Pilot Iroshizuku</strong> makes bright, saturated inks that write “wet” and are easy to clean out of pens. Special properties are limited to a bit of sheen.</li> <li><strong>Diamine</strong> makes well-behaved inks with a variety of properties. Their “Inkvent” calendar is a fun way to try a lot of types of inks without committing to a huge bottle (here be lots of shimmer inks).</li> <li><strong>Sailor</strong> has interesting, muted colors that exhibit beautiful shading.</li> <li>I only have two inks from <strong>Taccia</strong> but I use Taccia Ainezu constantly in my bullet journal. It’s a complex, grey ink with blue-ish undertones.</li> </ul> <h2 id="your-own-fountain-pen-journey">Your own fountain pen journey</h2> <p>If you’re interested in using fountain pens yourself, my biggest recommendation is to try a variety of options to see what works best for you. The Lamy Safari’s triangular grip was the unlock for <em>me</em>, but other people really don’t like that grip.</p> <p>Some quick tips as you explore:</p> <ul> <li>If you’re interested in trying an expensive pen before committing to it, see if you have any pen shows, stationery meetups, or stationery stores in your area. You might be able to test drive the model before buying.</li> <li>A higher price point does not necessarily mean you’ll like a pen’s writing experience more.</li> <li>To expand your ink options, use converters, or refill cartridges with your own inks. Some retailers, like <a href="https://www.gouletpens.com/">Goulet Pens</a>, sell ink samples for a couple dollars each. This can allow you to try out lots of different inks before committing to a full bottle. You will still end up with more ink than you can use in a lifetime, probably.</li> <li><em>Only fountain pen ink goes in a fountain pen!!!</em> Don’t put India ink in a fountain pen—it will clog.</li> <li>If you’re a lefty and underwriting doesn’t work for you, look for fast-drying inks and uncoated paper. I love Tomoe River Paper for the properties it brings out in inks, but ink dries slowly on TRP and sits on top of the paper rather than “sinking in”. Leuchtturm’s paper, in my experience, works better for faster-drying experiences.</li> </ul> <p>Above all, enjoy your own fountain pen journey!</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="link-fragment-note" class="footnotes__list-item" role="doc-endnote">A lot of people claim that stub nibs are difficult to use as a lefty. I was pleased to note that I’m able to use this type of nib the way I want to. I wonder if that has anything to do with my underwriting hand position. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/lefty-fp/#link-fragment-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> “Netlify now online: the Netlify App for Slack is generally available” on Netlify 2023-12-04T00:00:00.000Z https://www.netlify.com/blog/netlify-app-slack-ga/

The Netlify app for Slack is now generally available to all Core Pro and Core Enterprise teams on Netlify. Set up Slack subscriptions to monitor the health and security of your web apps, and foster better collaboration.

Read the article on Netlify Learning Log, Nov 2023 2023-12-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2311/ <p>Luckily for Seattleites, the SAM has <a href="https://www.seattleartmuseum.org/exhibitions/hokusai">a Hokusai exhibit</a> going on through end of January. Something that really surprised me is how small the famous wave block print is: it was slightly larger than a legal sized piece of paper.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-hokusai-wave-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-hokusai-wave-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-hokusai-wave-s.webp" alt="A wood block print of a great tsunami rising up in front of two long boats manned by comparatively small people. Mt Fuji rises far off in the distant background. The block print is in a simple wooden frame." /> </picture><figcaption>The Great Wave off Kanagawa by Hokusai, 1831</figcaption></figure> <p>I suppose I shouldn’t be so surprised by this—it’s a wood block print after all—but I <em>have</em> in other cases gawked at some pretty massive prints. It’s fascinating to me though how much other art was inspired by this one small piece, which itself is actually from a series of prints featuring <em>Mt. Fuji</em>, not the way itself.</p> <p>Anyway, I shared this in an art Discord and wondered aloud if anyone has ever seen a piece of work that was <em>larger</em> than they expected. Someone responded with a painting of Napoleon, which I find quite funny given his infamously short stature.</p> <p>In further surprises: there was also an Alexander Calder exhibit on, and I found I quite like his mobiles and sculptures.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-calder-sculpture-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-calder-sculpture-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-calder-sculpture-s.webp" alt="A large metal sculpture fills much of a room. Its base is a bright cherry red tripod shape. From the top sprouts a series of antennae with large yellow, black, and white paddles on the ends. There is something about the structure that references the circus." /> </picture><figcaption>At the other end of the scale, this Calder sculpture was huge</figcaption></figure> <p>His work didn’t really resonate with me when I first learned about Calder in college/art school. I suppose it is better witnessed first-hand.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-calder-mouse-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-calder-mouse-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-calder-mouse-s.webp" alt="A small, black, metal mouse with enormous whiskers curling upwards. The whiskers are as tall as its body, giving this sculpture twice the height overall." /> </picture><figcaption>Would you just look at this mouse’s whiskers?! How charming!</figcaption></figure> <h2 id="%F0%9F%A7%B6-crafting">🧶 Crafting</h2> <ul> <li>Finished making swatch cards for all my art supplies.</li> <li>Finished a small tapestry that I have not posted about yet, since it’s a gift.</li> <li>Decided I wasn’t motivated enough to take the next step in my skirt sewing project and set it down for now. That feels a lot like “giving up”, but I’m proud of myself for sticking a pin (hehe) in a hobby project that isn’t sparking joy right now.</li> <li>Started learning the Magic Loop method for knitting in the round, so that I can start knitting socks. Now THIS feels fun!! ✨</li> </ul> <h2 id="%F0%9F%8C%B1-digital-gardening">🌱 Digital Gardening</h2> <h3 id="this-site">This site</h3> <ul> <li>Updated a couple pages to look nicer on tablet-ish breakpoints.</li> <li>Happened to fix a bunch of dark mode issues on the evening of a new moon. Coincidence or lunar magic??? 🌑✨ <ul> <li>Fixed a dark mode visual bug on the Product page.</li> <li>Fixed a weird galaxy brain thing where I had two different image treatments for my hobbies depending on whether “dark mode” was picked up by the system or via the theme preference in my footer.</li> <li>Also fixed the little quilt SVG on my home page looking “weird” in dark mode. I thought for the longest time it was a mobile Safari rendering issue. The root cause was me messing with image opacity in dark mode, without overriding that treatment for this special case.</li> </ul> </li> <li>Fixed <code>&lt;pre&gt;</code> elements in blog posts causing funky rendering issues on narrow breakpoints.</li> <li>Tweaked a project’s thumbnails so that the SVGs render better.</li> <li>Made the little red rectangle in my header slightly narrower on narrow breakpoints.</li> <li>Fixed a minor rendering issue with the theme switcher in Webkit/Safari.</li> </ul> <p>I’m now clean on open issues for my personal website! 🎉 Worth noting that I’ve closed issues in the past because they weren’t important to me anymore. I’m sure I’ll find new opportunities; this is the nature of digital gardening.</p> <h3 id="what-is-this-strange-feeling%3F">What is this strange feeling?</h3> <p>…10 minutes later, I realized I was clean on all digital gardening issues?? This lasted about 2 weeks, and then I found more opportunities on my product resources site.</p> <h3 id="product-resources"><a href="https://product.melanie-richards.com/">Product resources</a></h3> <ul> <li>Put the category navigation in details/summary elements and expanded the navigation on page load for tablet-ish breakpoints and above. I could get fancier with this, but I’m just trying to provide a reasonable default and then let the visitor decide if they want category navigation opened or closed.</li> <li>Removed all “format” labels except for the “Book” format, as that’s really the only one that felt special enough to label for now.</li> <li>Added a “paywall” label for articles available to paid subscribers only.</li> <li>Linked up my tech stack in the colophon.</li> <li>Made descriptions a little less prominent.</li> </ul> <h2 id="reading">Reading</h2> <p>I read 6 books. My favorite was <a href="https://app.thestorygraph.com/books/a445e1de-b1e2-4dd8-8a47-4ba52adff4f0">“The Way Through the Woods”</a> by Long Litt Woon (4/5 stars).</p> <h3 id="tending-the-reader-garden">Tending the Reader garden</h3> <p>I sent in a feature request for Reader by Readwise to automatically tag particular news sources, in order to populate views without having to do manual tagging labor. In the meantime I rebuilt my custom views by…</p> <ol> <li>Going to “Manage feeds”, selecting a bunch of RSS feeds, and adding them to a new view.</li> <li>Next: querying for <code>category:email</code> in a temporary view, copying the author names of various subscriptions, and dropping an <code>author:&quot;Chauncey Peppertooth&quot; OR</code> clause into a view query. This second one feels fairly brittle because author names are not APIs; they can change and it won’t be obvious my views aren’t catching these email newsletters anymore. Will be cool if they could build some UI around this as with “Manage feeds”. Readwise does seem to be investing in better query UI.</li> </ol> <p>I do love the Reader app. Being able to get a mix of my RSS feeds and newsletter subscriptions in the same place is <code>*chef’s kiss*</code>.</p> <h3 id="product">Product</h3> <ul> <li><a href="https://pivotal.substack.com/p/the-worst-outcome-is-a-mediocre-success">The Worst Outcome Is a Mediocre Success</a></li> <li><a href="https://elenaverna.substack.com/p/3-excuses-enterprise-sales-led-companies">3 Excuses Enterprise Sales-Led Companies Make When Their Self-Serve Motion Fails...🙄</a></li> <li><a href="https://elenaverna.substack.com/p/why-i-quit-full-time-roles">Why I Quit Full-Time Roles</a></li> <li><a href="https://itamargilad.com/prioritization/">Why You’re Struggling to Prioritize</a></li> <li><a href="https://itamargilad.com/the-three-true-north-metrics-that-your-product-and-business-need/">The Three True-North Metrics that Your Product and Business Need</a></li> <li><a href="https://www.lennysnewsletter.com/p/mission-vision-strategy-goals-roadmap">Mission → Vision → Strategy → Goals → Roadmap → Task</a></li> <li><a href="https://wraptext.equals.com/the-fallacy-of-freemium-in-saas/">The Fallacy of Freemium in SaaS</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://future.com/developers-side-projects/">Why Developers Are Building So Many Side Projects</a> #notJustDevelopers</li> </ul> <h3 id="work-%26-productivity">Work &amp; Productivity</h3> <ul> <li><a href="https://www.nytimes.com/2023/10/10/business/remote-work-effects.html">Here’s What We Do and Don’t Know About the Effects of Remote Work</a></li> <li><a href="https://everythingchanges.us/blog/latewood/">Latewood</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; Stationery</h3> <ul> <li><a href="https://hannahmoerman.substack.com/p/things-saving-my-life-journalling">Things Saving My Life: Journalling Edition.</a></li> </ul> <h3 id="fiber-crafts">Fiber Crafts</h3> <ul> <li><a href="https://www.hartfordstitch.com/post/2017/01/11/the-fear-of-sewing-clothes">(Getting Over) The Fear of Sewing Clothes</a></li> </ul> Balancing time as a product manager 2023-11-20T00:00:00.000Z https://melanie-richards.com/blog/pm-time-mgmt/ <p>I have yet to meet a product manager who feels they have enough time for vision, strategy, or customer discovery. It’s pretty concerning that so many of us feel we don’t have enough time for <a href="https://melanie-richards.com/blog/pm-lyfe/">our most impactful responsibilities</a>. And yet, it’s so easy to get caught up in the high daily demands of execution. There is so much work to be done, and shipping just feels so good.</p> <p>I have experimented with multiple methods for managing my time as a PM, and thought I’d share what’s been working decently well as of late.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/tara-winstead-calendar-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/tara-winstead-calendar-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/tara-winstead-calendar-s.webp" alt="A cozy flatlay of a weekly calendar, pen, notebook, and coffee mug on a thick knitted blanket" /> </picture><figcaption>Photo by <a href="https://www.pexels.com/photo/flatlay-photo-of-weekly-planner-6690924/">Tara Winstead</a></figcaption></figure> <h2 id="principles">Principles</h2> <p>There are a few principles that were important in crafting my weekly schedule:</p> <ul> <li><strong>Accept the realities of timezones:</strong> my peak times for deep work are in the mornings and evenings. However, I work from the West Coast U.S. for a globally-distributed company, which means early mornings are prime time for meetings and catching people before they sign off. Instead of fighting this, I’ve come to embrace that my mornings will be a little randomizing as I “make my rounds” with collaborators.</li> <li><strong>Reduce context switching:</strong> just because PMs <em>have</em> to manage so many spinning plates doesn’t mean we crave it or are naturally good at it. I do enjoy the variety of activities involved in product management, but deep-diving on one initiative during focus blocks helps me perform better.</li> <li><strong>Protect focus time for high-impact thinking and future-facing investments:</strong> finding a good stretch of time unbroken by meetings is critical to reach the level of depth required for vision and strategy work.</li> </ul> <h2 id="my-week-at-a-high-level">My week at a high level</h2> <ul> <li><strong>Monday through Thursday:</strong> I am focused on current and recent initiatives. Regardless of what phase an initiative is in—discovery, solution refinement, design, execution, release, iteration—I’m doing what I can to push along our current irons in the fire.</li> <li><strong>Future-Facing Fridays:</strong> I just love alliteration, don’t you? On Fridays I aim to protect as much time as I can for investing in the future. Fridays are great for this, because no one wants a Friday meeting—everyone else is quietly heads down on whatever they’re doing, trying to wrap something up before the weekend (and in fact, some colleagues work a Sunday–Thursday week). It’s much easier to dive deep without feeling like I’m blocking someone.</li> </ul> <h2 id="weekly-and-daily-planning">Weekly and daily planning</h2> <p>At the end of each week, I plan ahead for following week. In a little pocket notebook, I write out a prioritized list of initiatives, each with a high-level goal for that week: what do I need to decide, achieve, or deliver in order to <a class="footnotes__ref" href="https://melanie-richards.com/blog/pm-time-mgmt/#pm-flavors-note" id="pm-flavors-ref" aria-describedby="footnotes-label" role="doc-noteref">keep up forward momentum</a>? This could be “finalize the user experience with Design”, “start working on user comms”, or as lightweight as “be available if the engineers have clarifying functional questions”.</p> <p>At the end of each workday, I pick an initiative to focus on the next day, as well as specific tasks I need to complete to drive that initiative’s weekly goal.</p> <h2 id="monday%E2%80%93thursday">Monday–Thursday</h2> <h3 id="mornings">Mornings</h3> <p>Mornings are spent connecting with people. Until lunchtime, I’m:</p> <ul> <li><strong>In meetings and 1:1s.</strong> Luckily, I don’t feel I’m in any time-wasting meetings.</li> <li><strong>Doing “glue work”.</strong> I’m answering clarifying questions that came up during the EMEA workday, reviewing pull requests, checking in to see if so-and-so needs anything, etc.</li> <li><strong>Tues/Thurs: co-leading a task force.</strong> I co-lead the interoperability task force at the MACH Alliance. We meet as a group on Tuesdays and have check-ins with other parties on alternating Thursdays. I corral my MACH Alliance tasks to these mornings, so I’m checking in with my co-lead, building agendas, reviewing documents or diagrams we’re producing, etc.</li> <li><strong>Mon/Wed: doing timely-but-not-important tasks.</strong> If something needs doing soon but doesn’t require deep focus, I fill in the smaller pockets of morning time with this type of task.</li> </ul> <p>The start of the day can be fairly randomizing as a result, but funnily enough it feels less chaotic to me to push all the little bits together. Acceptance has totally changed my mindset.</p> <h3 id="afternoons">Afternoons</h3> <p>Afternoons are for focus time! With the exception of Thursday afternoons (when I have a couple 1:1s), I take advantage of this time to deep dive on a specific initiative. I’m making progress on the deep-work tasks that will help me achieve my weekly goals.</p> <p>A good example of this would be adding detailed user stories—including assumptions and acceptance criteria—to a product requirements doc (PRD), based on the results of a collaborative solution ideation exercise.</p> <h2 id="friday">Friday</h2> <p>While I still might have some glue work to do on Fridays—e.g. a docs PR is ready for review—I aim to focus on activities that will pay future dividends. As a product manager, it is my core responsibility to identify how we should evolve the product to deliver maximum customer and business value. I can’t connect the product triad to the highest-impact initiatives if I’m not consciously considering the product’s future direction.</p> <p>Some examples of Future-Facing Friday tasks include:</p> <ul> <li>Planning or conducting customer discovery on a specific topic or opportunity. (Note: the actual customer conversations are beholden to customers’ schedules, so they happen throughout the week)</li> <li>Querying our usage data to uncover patterns or insights that will inform our strategy. For example, data exploration led me to define a specific <a href="https://mixpanel.com/blog/north-star-metric/">North Star metric</a> for a customer opportunity area I own.</li> <li>Synthesizing customer, data, and market insights into a time-bound vision and strategy statement</li> <li>Defining roadmaps for the next quarter</li> <li>Conducting market research</li> <li>Honing personal skills or knowledge; for example, I’m currently getting caught up on the latest developments in AI / LLMs.</li> </ul> <h2 id="still-solving">Still solving</h2> <p>I certainly don’t have everything all figured out. I’d like to make more time for:</p> <ul> <li><strong>Open-ended customer discovery:</strong> I’m scheming with a user researcher at work on a continuous discovery program. We often engage with customers about specific topics, but I’d like more time hearing from customers in an open-ended way what they’re trying to achieve, what they’re struggling with, etc.</li> <li><strong>Product and tech reading:</strong> when I had an ~hour long commute by bus/shuttle, it was really easy to make the time to read articles related to my craft. At the moment, they’re kind of piling up in my Reader. I *think* that some timeboxed reading after lunch would help ease me into focus time, but more often I just want to get going on my most important tasks. I’ll have to think about how to better sprinkle this throughout the week. Or alternatively, just carve out some Friday time for it.</li> </ul> <h2 id="that%E2%80%99s-it!">That’s it!</h2> <p>That’s how I balance a typical week: 80% execution, 20% forward thinking. I’m sure I’ll continue to evolve this over time. Fellow productivity nerds: how do you balance your time?</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="pm-flavors-note" class="footnotes__list-item" role="doc-endnote">Product managers are not project managers. A project manager’s core responsibility is to ensure work is delivered on time and on budget. That said, if there is no project manager, keeping a project on track becomes a shared responsibility. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/pm-time-mgmt/#pm-flavors-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, Oct 2023 2023-11-06T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2310/ <p>The social calendar does not seem to be slowing down, despite our transition into fall and the pandemic raging on. This month was full, with returning from our honeymoon to <a href="https://www.netlify.com/conference/">Netlify Compose</a>, Dewey’s Readathon, a double spooky movie night (new tradition I’m hosting!), an annual pumpkin potluck, various monthly meetups.</p> <figure class=""><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2023-q4-bujo-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2023-q4-bujo-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2023-q4-bujo-s.webp" alt="A small teal notebook with a shiny white pen in a light pink pen loop. On the front is a sticker of a chubby pink cat with the old Netlify logo on its collar. The sticker on the back is a drawing of knuckles with very cute tattooed onto them, along with cutesy symbols like a heart, tooth, and cat." /> </picture><figcaption>My pocket-sized Q4 bullet journal (details on my <a href="https://front-end.social/@melanie/111201282123656093">Mastodon post</a>)</figcaption></figure> <h2 id="web-whatnot">Web whatnot</h2> <ul> <li>I had to get into a pro bono Wordpress site I built in 2016 to make a couple of functional changes. Remembering PHP syntax is like calling upon an ancient, half-forgotten magic. Related: Wordpress needs an audit log.</li> <li>I’m trying to catch up a bit to the AI / LLM discussion. I have quite a few reservations still about this technology, but I can’t deny it will be transformative. Best to figure out how to harness the wind, rather than shake a fist at the weather.</li> </ul> <h2 id="fiber-crafts">Fiber crafts</h2> <p>I finished Closet Core’s <a href="https://closetcorepatterns.com/products/learn-to-sew-clothing-online-sewing-class?variant=31646639325318">“Learn How to Sew Clothing” online course</a> and am starting on the Fiore skirt pattern. So far I’ve:</p> <ul> <li>Taken my measurements (ugh) and found my size (ugh)</li> <li>Purchased fabric and notions</li> <li>Printed, taped, and cut out the pattern pieces</li> </ul> <p>Next I need to cut out my fabric. I wish I had gotten a little further along last month; it will be nice if I could finish the project in November.</p> <h2 id="reading">Reading</h2> <p>I finished 7 books in October. My favorite was <a href="https://bookshop.org/a/15644/9781250853677">“Red Queen” by Juan Gómez-Jurado</a>.</p> <h3 id="product">Product</h3> <ul> <li><a href="https://www.lennysnewsletter.com/p/how-to-use-chatgpt-in-your-pm-work">How to Use ChatGPT in Your PM Work</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://niemanreports.org/articles/npr-twitter-musk/">Six Months Ago NPR Left Twitter. The Effects Have Been Negligible</a></li> <li><a href="https://smashingmagazine.com/2023/10/overview-large-language-model-concepts-use-cases-tools/">A High-Level Overview of Large Language Model Concepts, Use Cases, and Tools</a></li> <li><a href="https://daverupert.com/2023/10/accessiblity-shamed/">So You’ve Been Publicly Accessibility-Shamed</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; Productivity</h3> <ul> <li><a href="https://everythingchanges.us/blog/too-much-and-not-enough/">Too Much and Not Enough</a>: fave read</li> <li><a href="https://www.vox.com/the-highlight/23824299/when-to-quit-job-hobby-when-to-keep-going">The Art of Quitting</a></li> <li><a href="https://elenaverna.substack.com/p/do-you-have-career-blues">Do you have career blues?</a> (sorry for all the Substack login walls)</li> <li><a href="https://scribe.rip/nice-work-from-active-voice/hey-designers-theyre-gaslighting-you-e02e5a4d9cff">Hey Designers, They’re Gaslighting You.</a>: really not vibing with the use of “gaslighting” here, but this article contains great advice for any functional role feeling undervalued.</li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; Stationery</h3> <ul> <li><a href="https://hannahmoerman.substack.com/p/16-prompts-you-can-use-in-your-journal">16 Prompts You Can Use in Your Journal, Right This Moment!</a></li> <li><a href="https://clairefromonline.substack.com/p/028-rhythms-and-routines">rhythms &amp; routines</a></li> <li><a href="https://clairefromonline.substack.com/p/what-if-were-asking-the-wrong-questions">what if we're asking the wrong questions?</a></li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li><a href="https://www.japantimes.co.jp/news/2001/10/31/national/ministry-compiles-list-of-nations-100-best-smelling-spots/">Ministry compiles list of nation's 100 best-smelling spots</a></li> <li><a href="https://www.vox.com/even-better/23837430/how-to-make-friends-start-a-club">Want to make more friends? Start a club.</a>: parallel play, a great life hack.</li> <li><a href="https://austinkleon.com/2023/09/20/shitt-should-i-try-that/">SHITT: Should I Try That?</a></li> </ul> Learning Log, Sep 2023 2023-10-11T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2309/ <p><em>Note: I’m posting my monthly update in the midst of a crisis harming Israelis and Palestinians, which includes some of my co-workers. I’m an outsider who can’t begin to understand what that feels like. What I do know and want to acknowledge is that all humans deserve to be safe; to have their needs met; and furthermore to thrive.</em></p> <h2 id="honeymoon">Honeymoon</h2> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-maiori-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-maiori-s.webp" alt="A bunch of small buildings in pastel shades clustered together on a green cliff in Maiori. A golden hour sun washes over the entire cliff." /> </picture><figcaption>The hillside in Maiori on the Amalfi Coast, Italy</figcaption></figure> <p>In September my husband and I went on our belated honeymoon! Like seemingly half of U.S. international travelers, we visited Italy, working our way through Milan, Venice, Florence, Maiori (Amalfi coast), and a quick stop in Rome. We had such a wonderful time exploring the country together. Feeling very grateful for this shared adventure.</p> <h2 id="learn-to-sew-clothes">Learn to Sew Clothes</h2> <p>Prior to our honeymoon, I was working my way through Closet Core’s <a href="https://closetcorepatterns.com/products/learn-to-sew-clothing-online-sewing-class?variant=31646639325318">“Learn How to Sew Clothing” online course</a>. So far the course has been clear and useful: I didn’t skip any videos—not even the “how to use a machine” basics—and learned something new in each one. I’ve been <a href="https://fiber.melanie-richards.com/">sewing little items</a> for my household or other hobbies, so I am looking forward to making some clothes soon. The course has helped remove some of the intimidation I felt with this process, which is what I’d hoped for!</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://mastodon.social/@levelbot">Levelbot on Mastodon</a>. I’ve always wanted to make a fun little text bot like this, but haven’t thought of a fun idea yet.</li> <li>Need to play <a href="https://octodad.com/">Octodad</a>, where you’re a dad who’s secretly also an octopus?? A+ concept, which a couple members of my blog post writing group introduced to me in a conversation about how cool octopi (insert your favorite pluralization here) are.</li> </ul> <h2 id="reading">Reading</h2> <p>I read 6 books in September. My favorite was a re-read of volumes I and II of <a href="https://hivemill.com/products/sakana-volume-1">Sakana</a>. I have an unread copy of vol III on my shelves!</p> <h3 id="product">Product</h3> <ul> <li><a href="https://nothinghuman.substack.com/p/the-tyranny-of-the-marginal-user">The Tyranny of the Marginal User</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://jvns.ca/blog/2023/07/28/why-is-dns-still-hard-to-learn/">Why Is DNS Still Hard to Learn?</a></li> <li><a href="https://krebsonsecurity.com/2023/09/why-is-us-being-used-to-phish-so-many-of-us/">Why Is .US Being Used to Phish So Many of Us?</a></li> <li><a href="https://www.theguardian.com/technology/2023/aug/31/fish-doorbells-historic-sandwiches-50-of-the-weirdest-most-wonderful-corners-of-the-web-picked-by-an-expert">Fish Doorbells! Historic Sandwiches! 50 of the Weirdest, Most Wonderful Corners of the Web – Picked by an Expert</a> (via Eric Bailey)</li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li><a href="https://www.vox.com/future-perfect/21528569/homeless-poverty-cash-transfer-canada-new-leaf-project">A Canadian study gave $7,500 to homeless people. Here’s how they spent it.</a></li> <li><a href="https://everythingchanges.us/blog/energy-makes-time/">Energy Makes Time</a></li> <li><a href="https://bakadesuyo.com/2022/11/epicurus/">How to Be Happier Without Really Trying</a></li> <li><a href="https://daverupert.com/2023/09/one-day-builds/">One Day Builds</a></li> <li><a href="https://www.nytimes.com/2023/08/30/well/family/waking-up-early-morning-person.html?unlocked_article_code=FDS2yBzHy2yCkkdrIp6u-JIGfeIGBMJ51rdc1TIpZBD5YuHiAbKxwQA2yBFqoU1KT5Ml--Tt_nDwyzIJn1GtzNDh92sIqP1uvlVYAgP-Evf2AdrQMTroDsLzpz-jCfRzS8U8O_uJfaAzb6XGhWvist3ahhzzqFsDYJsO_4SzinlF_lWlTHrawWljIgEXwjfSDwDZ8GgD5uMIrbrxWfvZXE6AcTobMf6dzXYshmEbvRks9lRMYy2jFS9Zn2hULnIx0Fq_cP2GhHj2yK8_B0xHw7NDWJMwdk3J-uHGrntzRAmzCDqWJxbmE4DBKiIHYRwLaIhBoOxYkcGMdZkpmmALJ5X9wDp6Rye8E6f7cg&amp;smid=url-share">The Art of Being a Morning Person</a></li> </ul> Quarterly career goals for individual contributors 2023-09-20T00:00:00.000Z https://melanie-richards.com/blog/quarterly-career-goals/ <p>Planning out long-term career goals has always been a challenge for me, and I’ve come to accept that it’s for good reason: I am led by curiosity and want to keep my options open for what sparks my interest. That said, I am not happy unless I’m continuously growing.</p> <p>For my fellow malleable achiever-types, what I’ve found works really nicely is setting quarterly goals. It’s a long enough period that you have time to make in-roads on a priority, without introducing a limiting or overwhelming timescale. And if your organization uses <a href="https://www.whatmatters.com/get-started">OKRs</a>, you have a familiar format to reach for when setting your goals.</p> <p><em>A note on that: this post assumes some familiarity with OKR structures, and also does not attempt to write them perfectly. <a href="https://www.whatmatters.com/get-started">Learn more about OKRs</a></em></p> <h2 id="what-kinds-of-goals-should-i-set%3F">What kinds of goals should I set?</h2> <p>A handy framework for me—a product manager—is to focus on:</p> <ul> <li>1 outcome I want to achieve for the product/business.</li> <li>1 outcome the team or my peers need.</li> <li>1 professional skill or quality to develop further.</li> </ul> <p>This short set of outcomes provides a nice mix of growth types: it sets me up to deliver on my core responsibilities, lead as a more-senior individual contribution, and <a href="https://www.franklincovey.com/the-7-habits/habit-7/">“sharpen the saw”</a>.</p> <h3 id="product%2Fbusiness-goals">Product/business goals</h3> <p>For these, I adopt or adapt organizational OKRs, and consider what agency I have in terms of driving those goals. My personal objective may match a team-level objective or key result verbatim (typically one that I’ve helped write!). My key results (KRs) will reflect what <em>I</em> can do as a product manager to drive those goals.</p> <details> <summary>Sample objective: Increase such-and-such North Star metric by x%.</summary> <ul> <li>Conduct a relevant user research study to uncover customer opportunities.</li> <li>Join <code>x</code> customer calls related to this topic with the Sales team.</li> <li>Execute on <code>y</code> supporting initiatives with the cross-functional team.</li> </ul> <p>By the way: the nice thing about personal OKRs is that you don’t have to go in circles debating whether they are written “correctly”. You can just implement something that works for you and adjust your approach each quarter as you learn.</p> </details> <h3 id="team-goals">Team goals</h3> <p>For this one I consider what “the team” needs most right now. I put “the team” in quotes because as product manager, we may feel belong to more than one scope of team. There’s:</p> <ul> <li>The cross-functional pods or feature teams we execute on initiatives with.</li> <li>The functional product management team.</li> <li>Our broader organizational division, or in fact, partner teams elsewhere in the organization.</li> </ul> <p>Which “peer outcome” to focus on tends to come up naturally. It reflects a trend I’ve observed or something that I’ve heard my peers express frustration about. This could be a missing part of our process, a cultural concern, or a weak relationship with a partner team.</p> <details> <summary>Sample objective: Improve X relationships with Y.</summary> <ul> <li>KR: Conduct 3 1:1s with Y to understand their goals, motivations, and challenges.</li> <li>KR: Brainstorm 3 solutions with X and Y that support our shared goals.</li> <li>KR: Pilot 1 solution for [period of time] and evaluate impact.</li> </ul> </details> <h3 id="professional-skills-or-qualities">Professional skills or qualities</h3> <p>Often this is a capability I want to improve or build upon. It could instead be an opportunity to flex strengths or keep a skill fresh.</p> <p>PMs might work on skills like:</p> <ul> <li>Customer discovery</li> <li>Data analysis</li> <li>Experimentation</li> <li>Influence without authority</li> <li>Communication (I once set a goal around brevity…still working on it!)</li> <li>Market research</li> <li>Design sense</li> <li>Area-specific technical knowledge</li> </ul> <details> <summary>Sample objective: Build on statistical analysis chops.</summary> <p><em>This was from my Q2 this year!</em></p> <ul> <li>KR: Read <a href="https://bookshop.org/p/books/naked-statistics-stripping-the-dread-from-the-data-charles-wheelan/8463650?ean=9780393347777">“Naked Statistics”</a> by Charles Wheelan.</li> <li>KR: Complete [redacted] tutorials. <em>← I ended up scoring 0.33 on this one because I found them to be lower value and bailed out a third of the way through.</em></li> <li>KR: Learn how to calculate <code>P*</code> in SQL.</li> <li>KR: Conduct 1 data analysis project, unrelated to a specific initiative launch.</li> </ul> </details> <h2 id="personal-personal-goals">Personal personal goals</h2> <p>If you too are a massive nerd, you can apply individual OKRs to your personal life as well. They’re not for everyone—and depending on my season of life, sometimes not even for me. But they can be helpful if you have an itch for personal development, and <em>especially</em> if you want to achieve <em>all the things right now</em> (it’s me, hi). By choosing just 3 objectives a quarter for your personal life, you can narrow the field of focus.</p> <p>Next quarter, my personal objectives are to:</p> <ul> <li>🏃‍♀️ Bring my average resting heart rate down to <code>xx</code>.</li> <li>🕊️ Strengthen spiritual connections.</li> <li>🧶 Make regular time for my creative hobbies.</li> </ul> <p>Their KRs each include specific and measurable projects and habits. Again, I try to pick a mix of life areas, particularly those that need a little love right now.</p> <h2 id="keep-a-live-connection">Keep a live connection</h2> <p>A great way to not hit your goals is to write them down and then never revisit them until end of quarter. <code>*cough*</code></p> <p>What I like to do is revisit my professional goals every Friday as part of a work week wrapup. Sunday nights are when I reflect on my personal goals. During these weekly reviews, I:</p> <ul> <li>Look at my KRs and update the scores based on progress I’ve made that week.</li> <li>Reflect on how I’m tracking at this point in the quarter. Anything I need to do to catch up?</li> <li>Identify the “next best steps”: what specific steps should I take next week to stay on track?</li> </ul> <p>For me, a weekly cadence keeps my goals top of mind, without letting their maintenance outweigh their impact. You might find a different cadence works best for you.</p> <h2 id="how-do-you-set-goals%3F">How do you set goals?</h2> <p>That’s my professional goal-setting in a nutshell! Give it a try if you’re feeling overwhelmed by too-long timescales, or too many interests clamoring for primacy. Personal development is always a work in progress, so I’d love to compare notes on goal-setting. What does that look like for you?</p> “Netlify has entered the chat: Netlify official Slack app now in beta” on Netlify 2023-09-18T00:00:00.000Z https://www.netlify.com/blog/netlify-official-slack-app-beta/

Quickly connect your Slack workspace to your Netlify account to keep tabs on all your sites and team activity.

Read the article on Netlify Learning Log, Aug 2023 2023-09-06T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2308/ <p>Welllllp. I finally caught Covid this month. My husband and I have been able to dodge it for just over 3 1/2 years—having been on the more cautious end of the behavioral bell curve—but this summer surge came for us. This pandemic is awful but very thankfully we’re feeling better now, minus the odd coughing fit.</p> <h2 id="%F0%9F%8C%B1-digital-gardening">🌱 Digital Gardening</h2> <p>I disallowed Open AI’s GPTBot from crawling any of my sites’ content. <a href="https://hidde.blog/llm-theft-opt-out/">Hidde’s blog post</a> pretty much says it all.</p> <h3 id="what-to-draw-generator"><a href="https://whattodraw.melanie-richards.com/">What to Draw generator</a></h3> <ul> <li>This idea generator fetches a random photo for Unsplash following the user’s filters for a photo topic and orientation. Very recently, the Unsplash API started returning an error for requests containing <code>orientation=any</code>, instead of silently ignoring this (not-accepted) value as it did previously. I fixed the user filters so that if “Any” is selected for the topic or orientation, that parameter is not sent along in the request to the API. “Any” is the default value for both these filters, so fixing this meant un-borking the entire app. 👍🏼</li> <li>I removed the “Architecture” topic from the filters list, as it seems to have been deprecated. Requests using that topic weren’t returning relevant results.</li> </ul> <h3 id="seasons"><a href="https://seasons.melanie-richards.com/">Seasons</a></h3> <p>The <a href="https://developer.chrome.com/docs/web-platform/notification-triggers/">notification triggers</a> API experiment was at some point deprecated. I was using these to send web notifications any time a seasonal holiday popped up throughout the year. I finally got around to replacing web notifications with a Google calendar.</p> <h3 id="highlights"><a href="https://highlights.melanie-richards.com/">Highlights</a></h3> <p>I added support for content warnings, as well as backfilled a lot of highlights:</p> <ul> <li><a href="https://highlights.melanie-richards.com/book/braiding-sweetgrass/">Braiding Sweetgrass</a> by Robin Wall Kimmerer</li> <li><a href="https://highlights.melanie-richards.com/book/turtles/">Turtles All the Way Down</a> by John Green</li> <li><a href="https://highlights.melanie-richards.com/book/the-sentence/">The Sentence</a> by Louise Erdrich</li> <li><a href="https://highlights.melanie-richards.com/book/tomorrow-and-tomorrow-and-tomorrow/">Tomorrow, and Tomorrow, and Tomorrow</a> by Gabrielle Zevin</li> <li><a href="https://highlights.melanie-richards.com/book/in-the-dream-house/">In the Dream House</a> by Carmen Maria Machado</li> <li><a href="https://highlights.melanie-richards.com/book/enchantment/">Enchantment</a> by Katherine May</li> </ul> <h2 id="crafting">Crafting</h2> <p>I sewed a zippered marker pouch! You can read about it <a href="https://fiber.melanie-richards.com/marker-pouch/">on my fiber blog</a>.</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-marker-pouch-open-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-marker-pouch-open-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-marker-pouch-open-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-marker-pouch-open-s.webp" alt="A cotton pouch in checkerboard pattern with a red zipper, and markers peaking out from the zippered opening" /> </picture> <h2 id="reading">Reading</h2> <h3 id="work-%26-productivity">Work &amp; Productivity</h3> <ul> <li><a href="https://www.oliverburkeman.com/river">Treat your to-read pile like a river, not a bucket</a></li> <li><a href="https://www.oliverburkeman.com/justdo">Just do the thing</a></li> <li><a href="https://www.oliverburkeman.com/fourhours">The three-or-four-hours rule for getting creative work done</a></li> </ul> <h3 id="art-%26-craft">Art &amp; Craft</h3> <ul> <li><a href="https://oddorange.co.uk/blogs/news/4-ways-to-begin-a-sketchbook-again-by-overcoming-your-artist-shadow">4 Ways to Begin a Sketchbook Again by Overcoming Your Artist Shadow</a></li> <li><a href="https://www.theguardian.com/science/2011/sep/30/stone-age-toddlers-art-lessons">Stone-age toddlers had art lessons, study says</a> 🥹</li> <li><a href="https://www.balfourand.co/blog/4-tips-for-designing-your-own-rug">4 Tips for Designing Your Own Rug</a></li> <li><a href="https://austinkleon.com/2023/08/31/make-an-appointment-with-yourself/">Make an Appointment With Yourself</a></li> <li><a href="https://austinkleon.com/2023/08/15/patience-with-everything-unresolved-in-your-heart/">Patience With Everything Unresolved in Your Heart</a></li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li><a href="https://gumshoe.substack.com/p/what-good-personal-style-has-in-common">What Good Personal Style Has in Common</a></li> <li><a href="https://mariandrew.substack.com/p/100-things-i-know">100 Things I Know</a></li> <li><a href="https://www.npr.org/sections/health-shots/2023/07/22/1189303227/neat-fitness-non-exercise-activity-thermogenesis?utm_source=substack&amp;utm_medium=email">There's a way to get healthier without even going to a gym. It's called NEAT</a></li> <li><a href="https://www.vice.com/en/article/88xmdz/thousands-of-octopuses-gather-at-this-mysterious-spot-now-we-know-why">Thousands of Octopuses Gather at This Mysterious Spot. Now, We Know Why.</a></li> </ul> Learning Log, July 2023 2023-08-07T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2307/ <h2 id="pacific-northwest-pen-show">Pacific Northwest Pen Show</h2> <p>I attended my first fountain pen show, the inaugural <a href="https://pnwpenshow.com/">PNW Pen Show</a>! My husband and I took the train down from Seattle to Portland to geek out in a ballroom with a bunch of other stationery nerds. It was so thrilling to share this hobby with folks from all different backgrounds and phases of life; that community connection is something I find myself craving, particularly in this remote work era.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-brilliant-bunny-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-brilliant-bunny-s.webp" alt="A red, sparkly fountain pen with gold trip on the cap and clip. There is a circular ink window that looks like a port hole on a ship." /> </picture><figcaption>So sparkly, so pretty</figcaption></figure> <p>The one drawback of the show for me was that the website teased “classes and activities”, which were in fact never added to the site (it still says these are coming soon). When we showed up, the person who signed us in pointed out the trade show floor, and that was about it. Silly me assumed they never got around to organizing workshops, but apparently there were some activities!! I should’ve asked.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pen-show-ink-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pen-show-ink-s.webp" alt="Ink swatches of Yama budo, a pinkish purple. Storied Blue, a desaturated, warm blue. Haha and Nekoyanagi, two multishaded blueish-purple inks. Ainezu, a dark blue-grey with maroon sheening. And Akasakura, a dark, warm red." /> </picture><figcaption>Inks I acquired at the show, in my Hobonichi Day-Free notebook</figcaption></figure> <p>Right now my favorite combo is the Taccia Ainezu ink I acquired at the show, in a <a href="https://www.jetpens.com/Pilot-Vanishing-Point-Decimo-Fountain-Pen-Pearl-White-18k-Fine-Nib/pd/2650">Pilot Vanishing Point Decimo</a>. I must admit I was a bit skeptical about a retractable fountain pen, but the Decimo is such a joy to use.</p> <h2 id="arts-%26-crafts">Arts &amp; crafts</h2> <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-strawberry-pouch-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-strawberry-pouch-s.webp" alt="A fabric pen pouch featuring a strawberry pattern on the flap and a bright green strap that it tucks into." /> </picture> <p>I made two attempts at a small, summery <a href="https://fiber.melanie-richards.com/pen-pouch/">pen pouch</a> and was successful on the second go. I think this pattern would be easily adaptable for other formats, so watch this space.</p> <p>I also started working on a matching zippered marker pouch. I have some cream, red, lime green, and strawberry fabric squares pieced together in a pseudo-random checkerboard pattern. Next up is to fuse on the batting and start putting the structure of the pouch together.</p> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-urban-sketch-palette-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-urban-sketch-palette-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-urban-sketch-palette-s.webp" alt="Me working through urban sketch palettes for city scapes and parks, using a combination of markers, colored pencils, and crayon pastels" /> </picture> <p>Not much sketching/drawing this month outside of my journal, but I did work out a palette (sort of) for urban sketching.</p> <h2 id="taking-breaks-with-pandan">Taking breaks with Pandan</h2> <p>I really struggle with self-care during the workday, particularly with taking breaks throughout the day.</p> <p>I asked in work chat about a Pomodoro app that will prompt you if you <em>haven’t</em> started a work sprint timer, and someone suggested <a href="https://sindresorhus.com/pandan">Pandan</a>. This app keeps track of how long you’ve been active on your computer, and can (optionally) nudge you after every x minutes. I chose to receive a HUD notification—front and center on my screen—every 45 minutes. Taking breaks is still a work in progress, but I’m much more aware of my behaviors now.</p> <p>Aside: <a href="https://sindresorhus.com/apps">Sindre’s list of apps</a> is #goals.</p> <h2 id="reading">Reading</h2> <p>I read 7 books in July. My favorite was <a href="https://bookshop.org/a/15644/9780063054899">“VenCo” by Cherie Dimaline</a>, a perfect witchy novel if you’re into that sort of thing.</p> <h3 id="work%2C-productivity%2C-%26-creativity">Work, Productivity, &amp; Creativity</h3> <ul> <li><a href="https://austinkleon.com/2023/07/10/laziness-and-discipline/">Laziness and Discipline</a></li> <li><a href="https://austinkleon.com/2023/07/10/never-waste-a-midlife-crisis/">Never waste your midlife crisis</a></li> </ul> <h3 id="journaling-%26-stationery">Journaling &amp; Stationery</h3> <ul> <li>Two posts from Rebecca Green on visual journaling, <a href="https://www.myblankpaper.com/blog/2018/3/21/note-to-self-heres-what-i-saw-and-heres-how-i-felt">from 2018</a> and <a href="https://www.myblankpaper.com/blog/2022/6/24/visual-journaling">from 2022</a></li> <li><a href="https://analogoffice.net/2023/07/05/reader-question-for.html">Reader Question 4: For Daily and Weekly Planning, Do You Use Open and Closed Lists?</a></li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li><a href="https://www.spoon-tamago.com/tokyo-hidden-shrines/">Exploring Tokyo’s Hidden Shrines</a></li> </ul> “Summer Pen Pouch” on Fiber Blog 2023-07-14T00:00:00.000Z https://fiber.melanie-richards.com/pen-pouch/

Two attempts at a summery on-the-go home for my fountain pens

Read the article on Fiber Blog Learning Log, June 2023 2023-07-10T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2306/ <figure class=""><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-the-national-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-the-national-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-the-national-s.webp" alt="A crowd of hipsters is gathered to watch musicians onstage in a park at dusk. There are fairy lights strung up to each side of the stage, and in the background a series of conifers stand tall." /> </picture><figcaption>Watching some sad dads play music at Marymoor Park, with THE BEST LIVE BRASS SECTION</figcaption></figure> <p>Busy busy busy! Pretty much every weekend was booked up:</p> <ul> <li>A second cabin weekend, this time on the Olympic Peninsula</li> <li>The National concert at Marymoor Park in Redmond, WA—one of the best shows I’ve ever been to, honestly</li> <li>Book club hangs</li> <li>An offsite in SF</li> <li>Family visits in Florida</li> </ul> <details> <summary>Content warning: photo of raw oysters</summary> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-oysters-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-oysters-s.webp" alt="A dozen raw oysters arrayed on a bed of ice with a lemon wedge, next to a tray of roasted oysters with a hunk of bread. They were delicious." /> </picture><figcaption>Raw oysters were not a cuisine I had ever dreamed of loving, but here we are! Appreciating the brine in Hama Hama, WA.</figcaption></figure> </details> <p>Summer is back, baby!! Having both a calendar crammed full of social events and a KN95 on my face feels like having each foot in two very different worlds.</p> <h2 id="product-resources">Product Resources</h2> <a class="c-web-preview" href="https://product.melanie-richards.com/"> <picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-product-resources-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-product-resources-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-product-resources-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-product-resources-s.webp" alt="A list of product resource links, organized by categories such as General, Customer Research, Data > SQL, and Data > Statistics" /> </picture></a> <p>Finally found an excuse to play around with the Notion API! I created a <a href="https://product.melanie-richards.com/">product resources minisite</a> from a database in my personal Notion instance. You can peek at the code or suggest a resource <a href="https://github.com/melanierichards/product-resources">on Github</a>. Humble beginnings, but I’ll be adding to this bit by bit as I find neat resources.</p> <h2 id="reading">Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://www.lennysnewsletter.com/p/what-working-at-figma-taught-me-about">What Working at Figma Taught Me About Customer Obsession</a></li> <li><a href="https://www.lennysnewsletter.com/p/linear-regression-and-correlation-analysis">How to Do Linear Regression and Correlation Analysis</a></li> <li><a href="https://mixpanel.com/blog/north-star-metric/">What Is a North Star Metric?</a></li> <li><a href="https://medium.com/boldstart-ventures/how-to-sell-the-value-of-dev-tools-in-2023-cd5d3826a358">How to Sell Dev Tools in 2023</a></li> <li><a href="https://cutlefish.substack.com/p/tbm-226-stuck-in-the-valley-of-doing">Stuck in the Valley of &quot;Doing OK&quot;</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; Productivity</h3> <ul> <li><a href="https://larahogan.me/blog/even-over-statements/">How to Make Hard Decisions: Even/Over Statements</a></li> </ul> <h3 id="journaling%2C-stationery%2C-%26-art">Journaling, Stationery, &amp; Art</h3> <ul> <li><a href="https://wonderpens.ca/blogs/uncategorized/journaling-thoughts_-out-of-one-into-another">Journaling Thoughts—Out of One, Into Another</a></li> <li><a href="https://mindfulartstudio.com/the-three-ps-of-making-more-art/">The Three P’s of Making More Art</a></li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li><a href="https://chriscoyier.net/2023/06/07/what-works-for-you/">What Works for You</a></li> <li><a href="https://jvns.ca/blog/2023/06/05/some-blogging-myths/">Some Blogging Myths</a></li> </ul> Learning Log, May 2023 2023-06-09T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2305/ <figure class=""><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-heybrook-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-heybrook-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-heybrook-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-heybrook-s.jpg" alt="A panorama that includes a few mountain peaks with some snow on top, a valley filled with conifers, and variety of confifers in the foreground. The scene is quite saturated, a nice green spring day." /> </picture><figcaption>The view from Heybrook Ridge. If you squint, you may be able to make out Bridal Veil Falls across the way.</figcaption></figure> <ul> <li>Went on our first hike of the year (lol sob)! Rahul (husband) and I tromped up Heybrook Ridge on a Friday before a cabin weekend with friends. We had the trail nearly to ourselves and enjoyed a private view at the top.</li> <li>Released a small update with team members at Netlify: <a href="https://answers.netlify.com/t/customize-the-email-subject-line-for-form-submission-notifications/91534">Customize the email subject line for form submission notifications</a></li> <li>Started working on a <a href="https://product.melanie-richards.com/">list of product resources</a>. I pretty much just have the data so far—no styling or anything—but it’s been fun learning a new API, Notion in this case. <a href="https://github.com/melanierichards/product-resources">Peep the codebase.</a></li> <li>Started strategizing how I will complete the Seattle Public Library summer book bingo, and <a href="https://app.thestorygraph.com/reading_challenges/4107449d-0772-4bc4-a5c4-4ba08d659e45">made a challenge for it on The StoryGraph</a>.</li> <li>Caught the <a href="https://www.seattleartmuseum.org/exhibitions/ikat">ikat exhibit</a> at the Seattle Art Museum just before it closed and wow, it was incredible! Ikat cloth is made by resistance-dying threads and then weaving them together. It’s most associated with Indonesia, but used across the globe to great visual variety and often deep meaning. The book <a href="https://bookshop.org/a/15644/9781898113904">“Global Ikat”</a> contains all of the pieces from the show and more.</li> </ul> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-ikat-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-ikat-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-ikat-s.jpg" alt="A dark indigo-black cloth with vertical bands of cream every couple of inches. Between some of the bands are verticle tick marks in cream, or thicker vertical cream rectangles separated by smaller horizontal rectangles in red, yellow, and blue." /> </picture><figcaption>One of my favorite ikat cloths, from Côte d’Ivoire</figcaption></figure> <h2 id="reading">Reading</h2> <h3 id="product">Product</h3> <p><em>Can you tell I went through my product article backlog?</em></p> <ul> <li><a href="https://engineering.linkedin.com/blog/2023/inside-look--measuring-developer-productivity-and-happiness-at-l">Inside Look: Measuring Developer Productivity and Happiness at LinkedIn</a></li> <li><a href="https://www.similarweb.com/blog/insights/ai-news/stack-overflow-chatgpt/">Stack Overflow Is ChatGPT Casualty: Traffic Down 14% in March</a></li> <li><a href="https://techcrunch.com/2023/04/24/snapchat-sees-spike-in-1-star-reviews-as-users-pan-the-my-ai-feature-calling-for-its-removal/">Snapchat Sees Spike in 1-Star Reviews as Users Pan the ‘My AI’ Feature, Calling for Its Removal</a></li> <li><a href="https://uxplanet.org/people-dont-read-online-they-scan-this-is-how-to-write-for-them-80a75069c14e">People Don’t Read Online—They Scan. This Is How to Write for Them</a></li> <li><a href="https://www.producttalk.org/2023/05/willingness-to-pay/">Ask Teresa: How Can You Test a Customer’s Willingness to Pay?</a></li> <li><a href="https://www.lennysnewsletter.com/p/how-miro-builds-product">How Miro Builds Product</a></li> <li><a href="https://www.lennysnewsletter.com/p/how-notion-builds-product">How Notion Builds Product</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://www.zachleat.com/web/styling-web-components/">3 Methods for Scoped Styles in Web Components That Work Everywhere</a></li> <li><a href="https://www.netlify.com/blog/the-acronyms-of-rendering/">The Acronyms of Rendering on the Web</a></li> </ul> <h3 id="other-interesting-reads">Other Interesting Reads</h3> <ul> <li><a href="https://austinkleon.com/2021/04/19/i-am-no-longer-weakened-by-the-weekend/">I am no longer weakened by the weekend</a></li> <li><a href="https://mastodon.ie/@MikeMorris/110317513574260072">This made me want to cry</a> but like, in a good way</li> </ul> Learning Log, Apr 2023 2023-05-08T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2304/ <p>All I did in April was gush over the beautiful blossoms in Seattle. I’m sort of kidding but also that’s pretty much my photo roll. Pretty impressive considering it rained like, 90% of the time. It’s been a cold and wet spring so far.</p> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-floral-grid-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-floral-grid-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-floral-grid-s.jpg" alt="A grid of floral-rich photos: A street completely lined with cherry trees bursting with pale pink sakura blossoms. A big bushy magnolia tree. A cluster of white blossoms on our pear tree. A massive rose bush with red roses, next to some fuschia azaleas. The same cherry blossom street now coated in petals like a layer of snow." /> </picture><figcaption>This isn’t even half of it!</figcaption></figure> <p>Otherwise I:</p> <ul> <li>Participated in <a href="https://deweysreadathon.wordpress.com/">Dewey’s Readathon</a> and read 498 pages in one day. Also messed up my neck/shoulders despite best intentions. Am considering if I’m too old for this ish.</li> <li>Launched <a href="https://www.netlify.com/blog/automatic-deploy-subdomains-ga/">automatic deploy subdomains</a> with some of my collaborators at Netlify. Set a custom domain for your Deploy Previews!</li> <li>Started looking into a new product area at work. New big scope: exciting!</li> <li>Continued getting waaaay into writing SQL queries and analyzing data. The title is terrible and the book is not perfect, but I’m enjoying <a href="https://bookshop.org/a/15644/9780393347777">“Naked Statistics”</a> by Charles Wheelan (<a class="footnotes__ref" href="https://melanie-richards.com/blog/learning-log-2304/#affiliate-note" id="affiliate-ref" aria-describedby="footnotes-label" role="doc-noteref">disclosure</a>) so far. Approachable, plain language explanation of statistics.</li> </ul> <h2 id="reading">Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://www.dnv.com/article/terminology-explained-p10-p50-and-p90-202611">Terminology Explained: P10, P50 and P90</a></li> <li><a href="https://medium.com/@djsmith42/how-to-metric-edafaf959fc7">How to Metric</a></li> <li><a href="https://www.lennysnewsletter.com/p/how-duolingo-reignited-user-growth">How Duolingo Reignited User Growth</a></li> <li><a href="https://departmentofproduct.substack.com/p/snaps-ai-backlash-and-gmail-gets">Snap's AI backlash and Gmail gets beautified</a></li> </ul> <h3 id="design">Design</h3> <ul> <li><a href="https://www.itsnicethat.com/news/the-click-norwich-castle-graphic-design-120423">A rebrand for Norwich Castle is inspired by Post-it drawings from the public</a></li> <li><a href="https://www.itsnicethat.com/news/jkr-nordstrom-rack-graphic-design-branding-130423">Nordstrom Rack reinstates its logo from the 70s and 80s in bold refresh</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://chriscoyier.net/2023/04/10/whats-a-basic-use-case-for-cascade-layers-in-css/">What’s a Basic Use Case for Cascade Layers in CSS?</a></li> <li><a href="https://www.netlify.com/blog/framework-popularity-on-netlify/">Framework Popularity on Netlify</a></li> <li><a href="https://timkadlec.com/remembers/2023-04-10-the-golden-rule-revisited/">The Performance Golden Rule Revisited</a></li> </ul> <h3 id="work-%26-productivity">Work &amp; Productivity</h3> <ul> <li><a href="http://larahogan.github.io/blog/be-a-thermostat-not-a-thermometer/">Be a Thermostat, Not a Thermometer</a></li> <li><a href="https://fortelabs.com/blog/para/">The PARA Method: A Universal System for Organizing Digital Information</a></li> </ul> <h3 id="other-interesting-articles">Other Interesting Articles</h3> <ul> <li> <p><a href="https://www.washingtonpost.com/wellness/2023/04/06/spring-clean-brain-fresh-start/">How to Spring Clean Your Mind</a></p> </li> <li> <p><a href="https://austinkleon.com/2018/08/27/a-very-simple-rule/">A Very Simple Rule</a></p> </li> <li> <p><a href="https://uxdesign.cc/rewilding-your-attention-d518ede18855">Rewilding Your Attention</a></p> </li> <li> <p><a href="https://bradthomasparsons.substack.com/p/pepis-pizza-a-central-new-york-landmark">Pepi’s Pizza: A Central New York Landmark</a></p> </li> <li> <p><a href="https://austinkleon.com/2023/04/04/dont-worry-about-style/">Don’t Worry About Style</a></p> </li> <li> <p><a href="https://fromthepencup.wordpress.com/2023/04/15/what-me-worry/">What, Me Worry?</a></p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="affiliate-note" class="footnotes__list-item" role="doc-endnote">Disclosure: I’m an affiliate of Bookshop.org. Any purchases you make using my link will earn me (and local bookstores!) a small commission. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/learning-log-2304/#affiliate-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer></li> </ul> Bout of Books 37 2023-05-08T00:00:00.000Z https://melanie-richards.com/blog/bout-of-books-37/ <p>I recently participated in <a href="https://front-end.social/@melanie/110283037696692385">Dewey’s Readathon</a> again, in which you read a whole bunch within 24 hours. What I learned is that I Am Aging. I read for about 12 hours—around my personal best—and had neck/shoulder pain for a few days after, despite best efforts at taking breaks and looking after my posture.</p> <p>SO, imagine my delight when I found <a href="https://boutofbooks.blogspot.com/">Bout of Books</a>, a weeklong readathon with gentle expectations. In their words:</p> <blockquote> <p>The Bout of Books readathon is organized by Amanda Shofner and Kelly Rubidoux Apple. It’s a weeklong readathon that begins 12:01am Monday, May 8th and runs through Sunday, May 14th in YOUR time zone. Bout of Books is low-pressure. There are reading sprints, daily Discord questions, and exclusive Instagram challenges, but they’re all completely optional. For all Bout of Books 37 information and updates, be sure to visit the <a href="http://boutofbooks.blogspot.com/">Bout of Books</a> blog. - From the Bout of Books team</p> </blockquote> <p>The readathon starts today, and I will be participating! I’ll use this post to share my daily updates.</p> <h2 id="intent">Intent</h2> <p>I would like to read for at least an hour a day. Based on my plans this week, that definitely seems doable. I have a few loans out from the library on my Kindle right now:</p> <ul> <li><a href="https://bookshop.org/a/15644/9781555977887">“Her Body and Other Parties”</a> by Carmen Maria Machado (<a class="footnotes__ref" href="https://melanie-richards.com/blog/bout-of-books-37/#affiliate-note" id="affiliate-ref" aria-describedby="footnotes-label" role="doc-noteref">Disclosure</a>)</li> <li><a href="https://bookshop.org/a/15644/9780393347777">“Naked Statistics”</a> by Charles Wheelan (ridiculous title, actually pretty approachable read)</li> <li><a href="https://bookshop.org/a/15644/9780062979865">“Shed No Tears”</a> by Caz Frear</li> </ul> <p>It will be good to work through these because Libby keeps telling me my other holds are available early, and I’ve had to defer them. Melanie’s Law: “all library holds will become available simultaneously, regardless of when they were placed”.</p> <h2 id="progress">Progress</h2> <h3 id="monday">Monday</h3> <ul> <li>At lunch I read about problems with probability in <a href="https://app.thestorygraph.com/books/b166b0c4-ceed-4f92-8e0c-1f167520f12d">“Naked Statistics”</a>. The author quite astutely pointed out that our ability to gather data has improved, but we haven’t yet figured out morally what to do with that data when it has societal implications. This book was written in 2011, and I hate to tell ya my guy, that doesn’t get any better in the next decade.</li> <li>Before bed, read one short story in <a href="https://bookshop.org/a/15644/9781555977887">“Her Body and Other Parties”</a>.</li> </ul> <p><strong>Pages:</strong> 31 (I am using <a href="https://app.thestorygraph.com/profile/melanierichards">The StoryGraph</a> to track)</p> <h3 id="tuesday">Tuesday</h3> <p>Read part of a short story in <a href="https://bookshop.org/a/15644/9781555977887">“Her Body and Other Parties”</a> that ended up being a longish story, or over an hour per my Kindle.</p> <p><strong>Pages:</strong> 34</p> <h3 id="wednesday">Wednesday</h3> <ul> <li>Read two chapters in the stats book, about 1) problems with probability and 2) central limit theorem. Mulling over how to apply the latter.</li> <li>Finished the long short story from Tuesday.</li> </ul> <p><strong>Pages:</strong> 55</p> <h3 id="thursday">Thursday</h3> <figure class="u-limit-width"><picture> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-books-library-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-books-library-s.jpg" alt="Two non-fiction books, 'Why We Medidate' and 'I Want to Die But I Want to Eat Tteokbokki, held in front of a brick wall dappled with sunlight through the trees" /> </picture><figcaption>Plot twist: picked up a couple books from the library when I went to drop a couple off!</figcaption></figure> <ul> <li>Read in the stats book about statistical inference and polling.</li> <li>Started reading another short story but had an unusually early start the next morning so put it down.</li> <li><strong>Pages:</strong> 50</li> </ul> <h3 id="friday">Friday</h3> <ul> <li> <p>Finished up the stats book by reading about regression analysis and program evaluation. 🎉</p> </li> <li> <p>Wrapped up the short story from Thursday night.</p> </li> <li> <p><strong>Pages:</strong> 119</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="affiliate-note" class="footnotes__list-item" role="doc-endnote">Disclosure: I’m an affiliate of Bookshop.org. Any purchases you make using my link will earn me (and local bookstores!) a small commission. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/bout-of-books-37/#affiliate-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> </li> </ul> “Now generally available: Automatic deploy subdomains” on Netlify 2023-04-26T00:00:00.000Z https://www.netlify.com/blog/custom-domain-for-deploy-previews/

Developers can set a custom domain for Deploy Previews and/or branch deploys, and Netlify will automatically create context-based subdomains for you. Now generally available!

Read the article on Netlify “Made in 2023 Q1” on Fiber Blog 2023-04-04T00:00:00.000Z https://fiber.melanie-richards.com/q1-crafting/

A sewn journal cover, some fabric bookmarks, a finally-completed knitted scarf, and just the one sketchbook spread.

Read the article on Fiber Blog Learning Log, 2023 Q1 2023-04-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2023-q1/ <h2 id="wedding-bonanza-%F0%9F%92%92">Wedding Bonanza 💒</h2> <p><img src="https://melanie-richards.com/assets/images/content/jenn-tai-wedding.webp" alt="My husband and I grinning at each other in front of art deco metalwork. I’m wearing a classic western wedding dress in white, and he has on a burgundy suit." /></p> <p class="caption">Photo by the incredible <a href="https://weddingsbyjenn.com/">Jenn Tai</a> at the Seattle Asian Art Museum. Hair and makeup by <a href="https://anoffwhiteseattle.com/">Offwhite</a> and florals by <a href="https://www.verbenafloralseattle.com/">Verbena Floral</a>.</p> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-shaadi.webp" alt="Rahul and I with our parents in traditional Indian wedding garb, in front of a wall full of flowers. I am wearing a bright red lehenga dress. Rahul is wearing a cream-colored suit called a sherwani. Rahul and I both have garlands of pink and yellow flowers around our necks." /></p> <p class="caption">With our parents in New Delhi. Unfortunately not sure on photographer credit.</p> <p>Occupying most of my brain space this quarter is that we got married—twice! Much of my and Rahul’s free time was spent planning our U.S. wedding. After the American ceremony, we spent some time nursing colds (man, that took me out), then headed straight out to India to get married again.</p> <p>Both our weddings were a reminder to me not just how amazing my chosen life partner is, but also how many incredible people are in our lives. Our closest friends feel like an extension of our family, and I was overcome with emotion on how well loved and supported we are.</p> <p>One challenge with smallish weddings in that you can’t necessarily invite <em><strong>all</strong></em> the people who have been important to you in your life. My feelings of gratitude, then, extend beyond attendees. If you have been a friend to me or to Rahul, thank you, truly. 💕</p> <h2 id="other-happenings">Other Happenings</h2> <ul> <li>Layoffs in this industry have been relentless. Microsoft’s rolling layoffs have especially been causing a great deal of stress given that my now-husband is currently on an H1B visa, tied to his work. He has not been impacted, but I’m feeling for everyone who has lost critical healthcare access, their immigration status, means to support their families…if I can help you by reviewing your resume, sharing leads, chatting about your job search, etc, please shoot me an email.</li> <li>I started a <a href="https://github.com/melanierichards/product-resources">product resources list</a>! Still a fledgling effort but I’ll continue adding to it as I find useful books, podcasts, articles, etc.</li> <li>Waffled over whether I want to keep my <a href="https://fiber.melanie-richards.com/">fiber crafts blog</a> and I <em><strong><strong><strong>think</strong></strong></strong></em> I’m just going to post here about my hobbies. I still quite love the visual design for it, but elsewhere on the internet I’ve tended to default to “bringing my whole self”. Splicing my identity between my interests and my work feels like an artificial divide.</li> <li>Wrote about <a href="https://melanie-richards.com/blog/webhook-payloads/">filtering Netlify builds based on webhook payloads</a> and <a href="https://melanie-richards.com/blog/passing-state-to-function/">passing client state to a Netlify function</a>.</li> <li>Launched a few things with the team at Netlify; <a href="https://www.netlify.com/blog/authors/melanie-richards/">check out my blog posts</a>!</li> <li>I was promoted to Staff Product Manager at Netlify! 🎉 The timing was such a surprise, but I’ve been putting a lot of effort into my work and our product process, so I’m grateful for the recognition.</li> </ul> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-sailor-pgs.webp" alt="A slim black fountain pen with a shiny gold nib, resting on paper with a faint graph pattern" /></p> <p class="caption">Bought my first gold-nib fountain pen as a promotion present! This is a Sailor Pro Gear Slim.</p> <h2 id="digital-gardening-%F0%9F%8C%B1">Digital Gardening 🌱</h2> <h3 id="palindrome-(my-eleventy-starter-template)">Palindrome (<a href="https://github.com/melanierichards/palindrome">my Eleventy starter template</a>)</h3> <ul> <li>Minimized social media metadata. I may go further at some point and fully remove anything Twitter-specific.</li> <li>Added an Eleventy navigation component.</li> </ul> <h3 id="personal-website">Personal website</h3> <ul> <li>Added The StoryGraph and Letterboxd to my social media links.</li> <li>Finally got around to adding <a href="https://melanie-richards.com/blog/webhook-payloads/">code syntax highlighting</a>.</li> <li>Added the <a href="https://github.com/marketplace/actions/merge-schedule">Merge Schedule</a> Github action to my site, so that PRs with new content will merge on a specific date (I don’t use a headless CMS on this site, through which I could control publication date).</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://leaving.live/">leaving.live</a>: ping-pong around existence with anonymous co-visitors</li> <li><a href="https://langcorrect.com/">LangCorrect</a>: write journal entries in the target language you’re learning and get edits from native speakers! Edit entries in your own native languages.</li> <li><a href="https://www.thereisadayforthat.com/calendars/2023">There is A Day For That</a>: a calendar of special, funky holidays</li> <li>I learned the term “<a href="https://en.wikipedia.org/wiki/Pleaching">pleaching</a>”!</li> <li><a href="https://www.spoon-tamago.com/kogei-pokemon/">Japanese Craftsmanship Meets Pokemon at Kanazawa’s National Crafts Museum</a></li> <li><a href="https://thamesfestivaltrust.org/heritage-programme/foragers-of-the-foreshore/artist-inspired-by-mudlarking/johnny-mudlark/">Johnny Mudlark</a></li> </ul> <h2 id="reading">Reading</h2> <blockquote> <p>Every action you take is a vote for the type of person you wish to become. No single instance will transform your beliefs, but as the votes build up, so does the evidence of your new identity.</p> </blockquote> <p>— James Clear from Atomic Habits</p> <blockquote> <p>The responsibility of any creator is to do the work, not judge it. Your job is to fall in love with the process, not grade the outcome.</p> </blockquote> <p>— also James Clear</p> <h3 id="product">Product</h3> <ul> <li><a href="https://www.producttalk.org/2016/08/opportunity-solution-tree/">Why This Opportunity Solution Tree is Changing the Way Product Teams Work</a></li> <li><a href="https://www.producttalk.org/2023/03/okrs-vs-outcomes/">Ask Teresa: What’s the Difference Between OKRs and Outcomes?</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://technically.substack.com/p/the-beginners-guide-to-databases">The Beginner's Guide to Databases</a></li> <li><a href="https://chriscoyier.net/2023/03/13/why-arent-logical-properties-taking-over-everything/">Why aren’t logical properties taking over everything?</a></li> <li><a href="https://calibreapp.com/blog/interaction-to-next-paint">Interaction to Next Paint (INP): What is it and How to Improve It</a></li> <li><a href="https://slack.design/articles/what-weve-learned-about-designing-for-accessibility-from-our-users/">What we've learned about designing for accessibility from our users</a></li> <li><a href="https://ericwbailey.website/published/sabbath-mode-and-assistive-technology-features/">Sabbath mode and assistive technology features</a></li> </ul> <h3 id="design">Design</h3> <ul> <li><a href="https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f">When life gives you lemons, write better error messages</a></li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://news.stanford.edu/2022/12/05/explains-recent-tech-layoffs-worried/">Why are there so many tech layoffs, and why should we be worried? Stanford scholar explains</a></li> <li><a href="https://www.moderndailyknitting.com/2021/12/31/instead-of-resolutions-just-a-word/">Instead of Resolutions, Just a Word</a></li> <li><a href="https://analogoffice.net/2023/02/02/make-an-interest.html">Make an Interest Grid to Figure Out What You Want to Focus On</a></li> </ul> <h3 id="journaling-and-stationery">Journaling and stationery</h3> <ul> <li><a href="https://penguinscreative.com/2016/02/06/how-to-journal-everyday-build-a-hobonichi-habit/">How to Journal Every Day — Build a Hobonichi Habit</a></li> <li><a href="https://kottke.org/23/01/lessons-on-how-to-draw-by-hokusai">Lessons on How to Draw by Hokusai</a></li> <li><a href="https://analogoffice.net/2023/02/13/mess-up-your.html">Mess Up Your Good, Premium, Luxury Notebooks</a></li> <li><a href="https://austinkleon.com/2023/02/26/imperfect-your-memories/">Imperfect your memories</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://kottke.org/22/12/36-things-i-learned-in-2022">36 Things I Learned in 2022</a></li> <li><a href="https://www.self.com/story/strengthen-friendship-tips">5 Ways to Keep Your Friendships Strong—Even When Life Is Hectic</a></li> <li><a href="https://www.thecut.com/article/fake-assistant-tiktok.html">Life Is Easier With a Fake Assistant</a></li> <li><a href="https://www.vice.com/en/article/ake3j5/why-does-everything-on-netflix-look-like-that">Why Does Everything On Netflix Look Like That?</a></li> </ul> “Collaborative Deploy Previews now available with Bitbucket” on Netlify 2023-03-30T00:00:00.000Z https://www.netlify.com/blog/collaborative-deploy-previews-bitbucket/

In addition to Github, Gitlab, and Azure DevOps, Netlify Deploy Previews are now supported with repositories on Bitbucket.

Read the article on Netlify “How to set a custom domain for Deploy Previews” on Netlify 2023-03-27T00:00:00.000Z https://www.netlify.com/blog/custom-domain-for-deploy-previews/

You can now set a custom domain for Deploy Previews and/or branch deploys, and Netlify will automatically create context-based subdomains for you!

Read the article on Netlify Pass client state to a Netlify function 2023-03-22T00:00:00.000Z https://melanie-richards.com/blog/passing-state-to-function/ <p><em>Disclosure: I am currently on the Product team at Netlify.</em></p> <p>Awhile back I built a <a href="https://whattodraw.melanie-richards.com/">drawing idea generator</a>, which pulls a random Unsplash image for you to draw. I wanted to add filters, so that people could refine the result by subject and/or orientation. I use <a href="https://github.com/melanierichards/what-to-draw/blob/main/netlify/functions/photos.js">a Netlify serverless function</a> to fetch from the API, so I needed to pass client state—i.e. the user’s filter configuration—into the Netlify function. Enter query parameters!</p> <h2 id="html">HTML</h2> <p>First, people need to be able to select their filters! I added a couple <code>&lt;select&gt;</code> elements to the markup, using Unsplash’s API values for each <code>&lt;option&gt;</code> value:</p> <pre><code class="language-html">&lt;label for=&quot;topics&quot;&gt;Topic&lt;/label&gt; &lt;select id=&quot;topics&quot; aria-describedby=&quot;topic-desc&quot;&gt; &lt;option value=&quot;any&quot; default&gt;Any&lt;/option&gt; &lt;option value=&quot;Jpg6Kidl-Hk&quot;&gt;Animals&lt;/option&gt; &lt;option value=&quot;rnSKDHwwYUk&quot;&gt;Architecture&lt;/option&gt; ... &lt;/select&gt; &lt;label for=&quot;orientation&quot;&gt;Orientation&lt;/label&gt; &lt;select id=&quot;orientation&quot;&gt; &lt;option value=&quot;any&quot; default&gt;Any&lt;/option&gt; &lt;option value=&quot;landscape&quot;&gt;Landscape&lt;/option&gt; &lt;option value=&quot;portrait&quot;&gt;Portrait&lt;/option&gt; &lt;option value=&quot;squarish&quot;&gt;Squarish&lt;/option&gt; &lt;/select&gt; </code></pre> <p>“Any” is not an accepted value in the API, but I provided that value here so I wouldn’t have to handle conditional logic for undefined filters. Unaccepted values are essentially ignored in requests to the API.</p> <h2 id="client-side-javascript">Client-side JavaScript</h2> <p>Per my <a href="https://github.com/melanierichards/what-to-draw/blob/main/site/script.js">client-side scripts</a>, clicking on the “Try another photo” button calls a function <code>fetchPhoto</code> that then invokes my <a href="https://github.com/melanierichards/what-to-draw/blob/main/netlify/functions/photos.js"><code>photos.js</code> serverless function</a>.</p> <p>I updated <code>fetchPhoto</code> such that it now reads the values from the filter <code>&lt;select&gt;</code>s, and passes those to the serverless function as query parameters:</p> <pre><code class="language-js">const fetchPhoto = async function (delay) { const topicsValue = document.getElementById('topics').value, orientationValue = document.getElementById('orientation').value, functionWithParams = `/.netlify/functions/photos?topics=${topicsValue}&amp;orientation=${orientationValue}`; let response = await fetch(functionWithParams).then(handleErrors).then(response =&gt; response.json()); ... } </code></pre> <h2 id="serverless-function">Serverless function</h2> <p>Now I can reference those in <a href="https://github.com/melanierichards/what-to-draw/blob/main/netlify/functions/photos.js">my serverless function</a>, aka <code>photos.js</code>:</p> <pre><code class="language-js">exports.handler = async function (event) { const API_KEY = process.env.UNSPLASH_API_KEY, photoAPI = `https://api.unsplash.com/photos/random?content_filter=low&amp;client_id=${API_KEY}`, paramTopics = event.queryStringParameters.topics, paramOrientation = event.queryStringParameters.orientation, photoAPIWithParams = `${photoAPI}&amp;topics=${paramTopics}&amp;orientation=${paramOrientation}`, response = await fetch(photoAPIWithParams), data = await response.json(); return { ... } } </code></pre> <p>Here I’m using <code>event.queryStringParameters</code> to retrieve the parameters I passed in from client-side JS. <code>queryStringParameters</code> returns an object, so I’m defining a variable for each key in the params object, then appending it to the API request URL.</p> <p>And voila! Sketchers can now choose a topic and/or orientation, click “try another photo”, and receive an appropriate image:</p> <a class="u-limit-width c-web-preview" href="https://whattodraw.melanie-richards.com/"> <picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-drawing-filters-xl.webp" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-drawing-filters-l.webp" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-drawing-filters-m.webp" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-drawing-filters-s.webp" alt="The filters are set to the animals topic and squarish orientation. The returned photo is a square image of two red-capped birds, one of whom is in flight." /> </picture></a> <p>This isn’t the only way to use query parameters! You could also access them in your <code>return</code> statement, if for example you wanted to print these values for the user.</p> <p>To check out this update in context of the project, you can <a href="https://github.com/melanierichards/what-to-draw">explore my code on Github</a>.</p> Conditionally rebuild a site on Netlify, based on a webhook payload 2023-03-18T00:00:00.000Z https://melanie-richards.com/blog/webhook-payloads/ <p><em>Disclosure: I am currently on the Product team at Netlify.</em></p> <p>My blog displays webmentions using <a href="http://webmention.io/">Webmention.io</a>, and <a href="http://brid.gy/">brid.gy</a> for social media-based activity. With webmentions, other people can respond to an article via their own sites or social media profiles. That interaction can be displayed on my blog, similarly to comments (or pingbacks, if you remember those). Check out Sia Karamalegos’s <a href="https://sia.codes/posts/webmentions-eleventy-in-depth/">in-depth tutorial on setting these up</a>.</p> <p>On my site, I display only a subset of <a href="https://github.com/aaronpk/webmention.io#find-links-of-a-specific-type-to-a-specific-page">webmention types</a>. In the past, I configured my site on Netlify such that the site rebuilds any time I receive a new webmention. But since I only care about a few types of mentions, and <code>like-of</code> is my most common interaction, I wanted to prevent full builds from kicking off for new likes.</p> <p>Here’s what I explored to automatically rebuild a site on Netlify based on webmention type, or in other words, based on a webhook payload.</p> <h2 id="kicking-off-builds-via-webhook">Kicking off builds via webhook</h2> <p>With Netlify’s build hooks, you can trigger a fresh build based on some incoming activity from another service. From <strong>Netlify &gt; Site Settings &gt; Build &amp; deploy</strong>, I created a new build hook and named it “Rebuild on Webmention”.</p> <p>I then went to <strong><a href="http://webmention.io/">webmention.io</a> &gt; Settings &gt; Web Hook</strong> and pasted in the build hook URL from Netlify. Now, any time I receive webmention activity, <a href="http://webmention.io/">webmention.io</a> will send a POST request to that URL, triggering a fresh site build on Netlify.</p> <p>Unlike other services, <a href="http://webmention.io/">webmention.io</a> unfortunately does not have controls enabling you to filter conditions for outgoing webhooks. If it did, my work here would be done at this step! <a href="https://melanie-richards.com/blog/webhook-payloads/#take-two%3A-filtering-webhooks-via-teensy-build-plugin">Skip to final solution</a></p> <h2 id="take-one%3A-filtering-webhooks-via-build-script">Take one: filtering webhooks via build script</h2> <p>Netlify has a concept of <a href="https://docs.netlify.com/configure-builds/ignore-builds/#custom-ignore-command">custom <code>ignore</code> commands</a>, but for Historical Reasons that could probably be rethought, this command will not cancel builds triggered by build hooks.</p> <p>So instead, my first solution was to use a Bash script as my build command.</p> <ol> <li> <p>In <strong>Site Settings &gt; Build &amp; Deploy</strong>, I set my “Build command” to <code>sh ./build.sh</code>.</p> </li> <li> <p>I created a <a href="http://build.sh/">build.sh</a> file in the root directory of my project:</p> <pre><code class="language-bash">#!/bin/sh if echo $INCOMING_HOOK_BODY | grep &quot;like-of&quot; then exit 1 else echo &quot;Regular build&quot; npm run netlify-build fi; </code></pre> <p>This searches the <code>$INCOMING_HOOK_BODY</code> (an environment variable provided by the Netlify platform) for the type of webmention that I wanted to filter out, <code>like-of</code>. If that is found, the build will exit. Otherwise, it will run as normal using the build command configured in my <code>package-json</code> file (<code>netlify-build</code>).</p> </li> <li> <p>I tested my logic from my command line with:</p> <pre><code>curl -X POST -d '[sample webhook payload here]' https://api.netlify.com/build_hooks/my-hook-id </code></pre> <p>This sends an incoming request which triggers the build hook.</p> </li> </ol> <p>A couple notes here: the exit code needed to be <code>exit 1</code>, not <code>exit 0</code>. This unfortunately meant that these builds are a little ugly, because they are listed as failures, not cancelations.</p> <p>Wouldn’t it be nice if they were categorized as cancelations…</p> <h2 id="take-two%3A-filtering-webhooks-via-teensy-build-plugin">Take two: filtering webhooks via teensy build plugin</h2> <p>To avoid false failures, my coworker <a href="https://www.mk.gg/">Matt Kane</a> suggested using a smol <a href="https://docs.netlify.com/integrations/build-plugins/create-plugins/#local-plugins">local build plugin</a> instead.</p> <p>This time around, I:</p> <ol> <li> <p>Declared my plugin in a <code>netlify.toml</code> file in the root of my project:</p> <pre><code class="language-js">[[plugins]] package = &quot;/plugins/filter-webhook-builds&quot; </code></pre> </li> <li> <p>Created a <code>manifest.yml</code> file in the <code>/plugins/filter-webhook-builds</code> directory with the following contents, pretty much just naming the plugin:</p> <pre><code class="language-js">name: filter-webhook-builds </code></pre> </li> <li> <p>In the same directory, added <code>index.js</code> with the heart of the logic:</p> <pre><code class="language-js">// Cancel builds if the incoming webmention hook is of type &quot;like-of&quot; module.exports = { onPreBuild: ({ utils }) =&gt; { const hookBody = process.env.INCOMING_HOOK_BODY; if (hookBody) { const hookBodyJSON = JSON.parse(hookBody); const webmentionType = hookBodyJSON['post']['wm-property']; if (webmentionType &amp;&amp; webmentionType === 'like-of') { utils.build.cancelBuild('Build canceled: &quot;like-of&quot; Webmention'); } } else {return;} } } </code></pre> <p><span class="c-meta">Probably fancier ways to write this, e.g. with a try/catch statement, but it works for me!</span></p> </li> </ol> <p>What this does is:</p> <ol> <li>Gets the webhook body, again via the <code>INCOMING_HOOK_BODY</code> environment variable provided by the Netlify platform.</li> <li>Calls the <code>cancelBuild</code> <a href="https://docs.netlify.com/integrations/build-plugins/create-plugins/#utilities">utility</a> if there is a hook body, and that hook body contains the <code>like-of</code> identifier. Otherwise, the build runs as usual.</li> </ol> <p>Builds are now cancelled if I receive a <code>like-of</code> webmention via webhook!</p> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-build-cancel-short.webp" alt="Netlify showing a build cancelled by plugin" /></p> <p>I have also reverted my build command to <code>npm run netlify-build</code>, instead of the bash script I was using in “take one” of this blog post.</p> <h2 id="wrapping-up">Wrapping up</h2> <p>I hope this walkthrough helps you implement similar hook-based cancelation logic to your project!</p> <p>As I mentioned, how the <code>ignore</code> command interacts with build hooks could be rethought. The challenge for a development platform is always: how might we extend functionality without breaking existing sites relying on current behaviors? If you have a use case for a custom <code>ignore</code> command and build hook payloads, I would love to hear it. Feel free to drop a note <a href="https://answers.netlify.com/c/features/50">on the Netlify forums</a>—or send me a webmention!</p> “QA and collaborate directly on branch deploy URLs” on Netlify 2023-01-17T00:00:00.000Z https://www.netlify.com/blog/qa-and-collaborate-directly-on-branch-deploy-urls/

Developers can now collaborate with stakeholders using the Netlify Drawer on branch deploys!

Read the article on Netlify 2022 in Review 2022-12-30T00:00:00.000Z https://melanie-richards.com/blog/2022-review/ <p>Well, my friends. This has been a bit of an exhausting year. I’m currently back in that familiar-to-me upperclassmen frame of mind: “If I can just make it through [x date]…”</p> <p>2022 has been about traveling for family and friends, working hard, planning our wedding, always running a background process on COVID fears and fresh, fun anxieties. I’m hoping to take a breather after Rahul and I get married early next year (twice!).</p> <p>Despite being an effortful year, it’s also one where I got to explore new passions and reconnect with old ones…</p> <h2 id="highlights">Highlights</h2> <figure class=""><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-field-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-field-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-field-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-field-s.jpg" alt="Rahul smiling in a blue hat and jacket on a dirt path in the middle of a bright green field. There are yellow blossoms scattered throughout." /> </picture><figcaption>Rahul walking through a field into Copalis Beach in Washington state</figcaption></figure> <p><em>Usual disclaimer: this is the highlight reel. The lowlights are kept private!</em></p> <ul> <li>Moving into our new house and getting engaged (Rahul and I have been speed-running life changes the past couple years, it seems)</li> <li>Dabbling in gardening and amari</li> <li>Getting to be with my family for my niece’s 3rd birthday</li> <li>Seeing my friends Saili and Billy get married</li> <li>Screaming along with the girlies (masked) at a Phoebe Bridgers show. I’ve now seen all the boygenius ladies live. 🌟</li> <li>Learning a bit about SQL</li> <li>Floating in the sea in Hawaii</li> <li>Attending my first NHL hockey game</li> <li>Celebrating Diwali in India</li> <li>Launching fun things at Netlify, like support for Azure DevOps as a Git provider, scopes and contextual values for environment variables, and subdomain delegation.</li> <li>Continuing to spend quality time with my online writing group</li> <li>Rediscovering sketchbooking and my love for art</li> <li>Finding a super active art/illustration Discord server, which is currently my virtual home for art</li> <li>Discovering the world of fountain pens and getting totally hooked on this hobby! Opening up each day in Diamine’s Inkvent calendar was especially fun this December.</li> <li>Finding a new craft social (which requires vax cards and masks!)</li> </ul> <h2 id="everything-ish-i-made">Everything-ish I Made</h2> <figure class=""><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-sketch-pouch-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-sketch-pouch-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-sketch-pouch-s.jpg" alt="A black pouch with a patchwork panel made of triangles, squares, and rectangles. Colors include red, yellow, pink, blue, teal, black, and white. There are black and white squares in a checkboard pattern. Two red and yellow Posca markers are next to the pouch" /> </picture><figcaption>My A5 sketchbook pouch!</figcaption></figure> <p>When you add it all up in a list, it feels like quite a bit!</p> <ul> <li>Doodled <a href="https://www.instagram.com/p/CboftA8rNnp/">some paper bookmarks</a> I promptly left in library books</li> <li>Sewed <a href="https://www.instagram.com/p/CeuFXOOPkAU/">a couple other bookmarks</a></li> <li>Built a <a href="https://snacks.melanie-richards.com/">snacks review site</a></li> <li>Designed a phone background for myself</li> <li>Sewed <a href="https://fiber.melanie-richards.com/enamel-pins/">a wall hanging for my enamel pins</a></li> <li><a href="https://www.instagram.com/p/Cf-v6XIuJRf/">Dyed some fabric</a> with indigo in a friend’s backyard</li> <li><a href="http://localhost:8080/blog/website-redesign-2022/">Redesigned my website</a> and actually still like it, for once</li> <li>Sewed a <a href="https://fiber.melanie-richards.com/sketchbook-pouch/">sketchbook pouch</a></li> <li>Wrote <a href="https://melanie-richards.com/blog/year/2022">26 blog posts</a> on product management, the web, Netlify, and various bits and bobs I’m learning about.</li> <li>Finished 1 1/2 sketchbooks and posted some of it <a href="https://www.instagram.com/somelaniesaid/">on my Instgram</a></li> <li>Finished knitting my fiancé’s scarf right at EOY; I couldn’t even tell you what year I started it.</li> <li>Started <a href="https://www.instagram.com/p/ClxG9jQpmPq/">a tea journal</a> and completed a daily journal</li> <li>Started a new abstract / freestyle woven tapestry</li> </ul> <h2 id="favorite-media">Favorite Media</h2> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-faves-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-faves-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2022-faves-s.jpg" alt="The Sentence by Louise Erdrich, Everything Everywhere All at Once, Phoebe Bridgers, and Japanese Breakfast" /> </picture> <h3 id="books">Books</h3> <p>I <a href="https://app.thestorygraph.com/stats/melanierichards?year=2022">read 60 books</a> this year, so a bit of a dip from the past couple years. The culprit is likely my new love for artsy YouTube videos around bedtime.</p> <p><a class="footnotes__ref" href="https://melanie-richards.com/blog/2022-review/#affiliate-note" id="affiliate-ref" aria-describedby="footnotes-label" role="doc-noteref">Some favorites:</a></p> <ul> <li>⭐️ <a href="https://bookshop.org/a/15644/9780062671127">“The Sentence”</a> — Louise Erdrich</li> <li><a href="https://bookshop.org/a/15644/9780062823274">Cat Kinsella series</a> — Caz Frear. I was looking for a Tana French readalike.</li> <li><a href="https://bookshop.org/a/15644/9781770462892">“Ducks”</a> — Kate Beaton</li> <li><a href="https://bookshop.org/a/15644/9781982136468">“The Only Good Indians”</a> — Stephen Graham Jones</li> <li><a href="https://bookshop.org/a/15644/9780525555377">“Turtles All the Way Down”</a> — John Green</li> </ul> <h3 id="movies">Movies</h3> <p>I <a href="https://letterboxd.com/somelaniesaid/films/diary/for/2022/">watched 34 films</a> this year. Some favorites:</p> <ul> <li>⭐️ <a href="https://letterboxd.com/film/everything-everywhere-all-at-once/">Everything Everywhere All at Once</a>: the best movie I’ve seen in a long time.</li> <li><a href="https://letterboxd.com/film/encanto/">Encanto</a></li> <li><a href="https://letterboxd.com/film/glass-onion-a-knives-out-mystery/">Glass Onion</a></li> <li><a href="https://letterboxd.com/film/practical-magic/">Practical Magic</a></li> <li><a href="https://letterboxd.com/film/turning-red/">Turning Red</a>: second favorite after EEAO</li> </ul> <h3 id="music">Music</h3> <p><a href="https://tidal.com/browse/playlist/f2c81d2f-820b-41dd-b475-f3dfabc0eb64">2022 — Tracks playlist</a> on Tidal, which I think I switched to this year. Lots of my favorite sad girls (Phoebe, Julien, and Michelle).</p> <h2 id="2023-word-of-the-year%3A-community">2023 word of the year: Community</h2> <p>I’m still working out if/how I want to do annual goals, but I do know for sure that my theme of the year will be “community”. The pandemic has made me feel more disconnected from my community—both friends and strangers—and it has cost me dearly.</p> <p>In 2023 I want to chip away at my recent hermetic shell, and spend more time 1) enjoying life in the company of others and 2) supporting those around me.</p> <p>Hope you have a wonderful 2023!</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="affiliate-note" class="footnotes__list-item" role="doc-endnote">Disclosure: I’m an affiliate of Bookshop.org. Any purchases you make using my link will earn me (and local bookstores!) a small commission. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/2022-review/#affiliate-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, Dec 2022 2022-12-23T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2212/ <p>As I write this, flights are being canceled in droves all over the country, and the roads and sidewalks in Seattle are covered in ice. I was a bit sad that weren’t traveling to be with family this year for the holidays (long story), but now I’m just glad we’re not stranded somewhere in the middle of the country.</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-rink-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-rink-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-rink-s.jpg" alt="A very icy set of streets in the dark. There are a couple stars in the night sky and a couple houses brightly lit in the dark with Christmas lights." /> </picture> <h2 id="this-month">This month</h2> <ul> <li>💔 <strong>Layoffs:</strong> this month got off to a tough start with a restructure (aka layoffs) at work. It feels odd to say it’s been hard, because I’m one of the lucky ones who still has a job. But I dearly miss my colleagues and friends who were impacted. Like many, I am feeling all sorts of feelings and doing my best to support folks. It’s been a really tough year in the tech industry, so just putting it out there: I’m here to help in any way I can.</li> <li>🎂 <strong>Birthday:</strong> Soon after layoffs I observed a birthday with a very rude number attached. Some birthday thoughts I had marinating appear later in this post.</li> <li>🎨 <strong>Gouache:</strong> I’ve been working my way through Maru Godas’s course “<a href="https://www.domestika.org/en/courses/1434-pictorial-sketchbook-with-gouache">Pictorial Sketchbook with Gouache</a>” on Domestika and rather enjoying it thus far. Maru makes learning gouache technique fun and very clear. The platform also seems to have done a good job with English subtitles (this particular course is in Spanish).</li> <li>📚 <strong>Reading:</strong> I recently started using <a href="https://readwise.io/read">Reader by Readwise</a> as a combination RSS/newsletter feed reader and “read it later” function. The app has been pretty slick and nice to use, I may keep going with it. Over in book land, I’m getting more into The StoryGraph ecosystem by signing up for their plus membership and hosting <a href="https://app.thestorygraph.com/reading_challenges/92b55879-d1f5-4216-89db-f5af2c0b9242">a reading challenge</a>. I love the The StoryGraph enables you to create arbitrary reading challenges outside of the usual “x books this year”.</li> </ul> <figure class=""><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-focaccia-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-focaccia-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-focaccia-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-focaccia-s.jpg" alt="Closeup of focaccia bread studded with tomatoes, olives, and rosemary" /> </picture><figcaption>Birthday focaccia, baked by a friend</figcaption></figure> <h2 id="birthday-thoughts">Birthday thoughts</h2> <ul> <li>Listen to the wisdom that keeps pointing you towards mindfulness.</li> <li>Your art materials will be there whenever you want them.</li> <li>Life is meant to be shared.</li> <li>Routine can set you free.</li> </ul> <h2 id="reading">Reading</h2> <h3 id="product">Product</h3> <ul> <li><a href="https://andrewchen.com/the-adjacent-user-theory/">The Adjacent User Theory</a></li> </ul> <h3 id="web">Web</h3> <ul> <li><a href="https://notes.normally.com/cookieless-unique-visitor-counts/">Counting unique visitors without using cookies, UIDs or fingerprinting.</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://austinkleon.com/2022/12/03/the-bookend-approach-to-reading/">The bookends approach to reading</a></li> <li><a href="https://www.coffeescribbles.com/blog/2020/7/3/twsbi-eco-fountain-pen-platinum-carbon-ink-review">TWSBI ECO Fountain Pen (&amp; Platinum Carbon Ink) Review</a></li> <li>I learned that one of my co-workers is <a href="https://amberley.dev/blog/2020-09-16-how-do-new-emoji-happen">largely responsible for several fiber crafts-related emoji</a>!</li> <li><a href="https://publicdomainreview.org/collection/the-illuminated-sketchbook-of-stephan-schriber-1494">The Illuminated Sketchbook of Stephan Schriber (1494)</a>: heard of this monk’s sketches from <a href="https://www.domestika.org/en/courses/1434-pictorial-sketchbook-with-gouache">Maru Godas</a></li> <li><a href="https://daverupert.com/2022/12/megan-smith-general-magic-prototypes/">Megan Smith explaining the General Magic prototyping process</a></li> <li><a href="https://austinkleon.com/2022/12/29/100-things-that-made-my-year-2022/">100 things that made my year (2022)</a></li> <li><a href="https://www.theatlantic.com/family/archive/2021/12/christmas-new-years-dead-week-romjul/621098/">All Hail Dead Week, the Best Week of the Year</a></li> </ul> Learning Log, Nov 2022 2022-12-02T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2211/ <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fall-leaves-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fall-leaves-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fall-leaves-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fall-leaves-s.jpg" alt="Branches of a tree filled with vibrant orange leaves" /> </picture> <p>I refuse to believe that a whole month has passed; November went by in the blink of an eye.</p> <ul> <li><a href="https://whattodraw.melanie-richards.com/">My drawing generator site</a> was approved for production Unsplash API use (5k requests per hour vs 50!). I started working on some topic-based filters, but they’re not quite ready yet.</li> <li>I learned how to use <a href="https://mode.com/help/articles/definitions/">Definitions</a> in Mode, which I’m using to filter out activity coming from test accounts. It’s a little funky that you have to hit “Run” on the definition query in order to save changes to it, but otherwise cool and useful.</li> </ul> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-nov-collage-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-nov-collage-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-nov-collage-s.jpg" alt="Two women and two men gathered around a table full of serving dishes ready to portion out. This photo is superimposed on top of a textural photo of small leaves scattered on a sidewalk." /> </picture><figcaption>My fiancé, Rahul, and I on Thanksgiving with a couple of our friends</figcaption></figure> <ul> <li>The pandemic has shrunk my social circle and made me more of a homebody, so I’d like to get back out into the community and connect with others. I went to a new-to-me (masked) craft social at the end of the month and felt such incredible joy at simply working on little projects alongside others.</li> <li>Likewise, in parallel play, a friend came over after work one night and we did yoga together, ate dinner, and then drew for an hour. It was adorable and immensely fulfilling.</li> </ul> <div class="l-grid l-grid--media"> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fish-collage-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fish-collage-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fish-collage-s.jpg" alt="Two collages: one in blue and grey, featuring the name cut out of a Japanese candy package, and some cloud shaped cut out of a photo of a cloudy sky. The other has the head of a photographic goldfish poking up from the bottom, under a cluster of red, orange, and pink scales cut from paper and drawn on." /> </picture> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-blue-shapes-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-blue-shapes-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-blue-shapes-s.jpg" alt="A six by three grid of random geometric shapes, drawn in a dark blue variegated ink" /> </picture> </div> <ul> <li>I’ve been doing some <a href="https://www.instagram.com/p/ClMr-v1SvSu/">sketching</a>, and <a href="https://www.instagram.com/p/Clb0sRTPkOf/">collaging</a>, and <a href="https://www.instagram.com/p/ClcIMdISB-5/">doodling shapes with my glass dip pen</a>. The latter I’d like to do more of: so satisfying!</li> <li>I also finally finished my <a href="https://fiber.melanie-richards.com/sketchbook-pouch/">vibrant patchworked sketchbook pouch</a>.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://hostux.social/@valere/109309330866027569">Rocks that need a story written around them</a></li> <li><a href="https://www.projectwallace.com/analyze-css">Analyze CSS</a></li> <li>I learned the little poles sticking out of adobe-style houses are called <a href="https://en.wikipedia.org/wiki/Viga_(architecture)">vigas</a></li> </ul> <h2 id="reading">Reading</h2> <p><a href="https://austinkleon.substack.com/p/30-day-challenge">Via Austin Kleon</a>:</p> <blockquote> <p>“Any man can fight the battles of just one day,” begins a passage collected in Richmond Walker’s book of meditations for recovering alcoholics, <em>Twenty-Four Hours a Day</em>. “It is only when you and I add the burden of those two awful eternities, yesterday and tomorrow, that we break down. It is not the experience of today that drives men mad. It is remorse or bitterness for something which happened yesterday or the dread of what tomorrow may bring. Let us therefore do our best to live but one day at a time.”</p> </blockquote> <p>Also: <a href="https://rachsmith.com/im-in-need-of-a-phase/">I'm in need of a phase</a>. I know I read other articles this month but I don’t seem to have bookmarked anything else…</p> “How to bring a subdomain to Netlify DNS” on Netlify 2022-11-29T00:00:00.000Z https://www.netlify.com/blog/how-to-bring-a-subdomain-to-netlify-dns/

You can now delegate a subdomain to Netlify DNS without having to bring over the apex domain

Read the article on Netlify New reading challenge: 32 owned, unread books 2022-11-23T00:00:00.000Z https://melanie-richards.com/blog/reading-challenge-32-unread/ <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-books-2022-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-books-2022-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-books-2022-s.jpg" alt="A bookshelf chock full of books arranged mostly in rainbow order. In the center of the bookshelf is a Sonos." /> </picture><figcaption>What my bookshelf looked like in January 2022. Not to worry, this is not all unread books.</figcaption></figure> <p>I have a lot of unread books on my shelves. Believe it or not, I’ve downsized quite a bit over the years, but it still stresses me out to have that physical backlog just a glance away.</p> <p>It’s not like this for everyone: for some, having plenty unread books at hand gives them a feeling of abundance. I mentioned my unread book guilt to my book club friends, and they looked at me like I had 8 heads. Noted!</p> <p>For me, though, I would love to get to a place where I have a short queue of unread books, maybe 3–5 of them. If I want something new to read, the library or a book store is easily available to me.</p> <h2 id="the-reading-challenge">The reading challenge</h2> <p>Rather than setting an “x number of books read” goal in 2023, I’m challenging myself to read 32 owned, unread books.</p> <p>A few parameters:</p> <ul> <li>I’m going to start now.</li> <li>It can take however long it takes…</li> <li>…but, I would like to have read 24 books by end of 2023.</li> <li>I don’t have to finish every book I start. If I’m not feeling it, and don’t particularly care to pick the book back up again, I can donate or sell it.</li> </ul> <h2 id="a-reward">A reward</h2> <p>I’ve decided for once to treat myself when I complete the challenge. There’s a fancy fountain pen I have my eye on, in a higher price bracket than the $30 pens I’ve allowed myself to buy. That is the reward I’ll be working towards! In addition to a more spacious bookshelf.</p> <h2 id="wish-me-luck!">Wish me luck!</h2> <p>I’m going to start this challenge off with <a href="https://bookshop.org/a/15644/9781640091603">“Heart Berries”</a> by Terese Marie Mailhot (<a class="footnotes__ref" href="https://melanie-richards.com/blog/reading-challenge-32-unread/#affiliate-note" id="affiliate-ref" aria-describedby="footnotes-label" role="doc-noteref">disclosure</a>), then finish up the first volume of Lord of the Rings.</p> <p>What are your active or upcoming reading goals?</p> <p>Edit, 2022.12.20: I made <a href="https://app.thestorygraph.com/reading_challenges/92b55879-d1f5-4216-89db-f5af2c0b9242">a reading challenge on The StoryGraph</a> if you’d like to join in on reading your backlog!</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="affiliate-note" class="footnotes__list-item" role="doc-endnote">Disclosure: I’m an affiliate of Bookshop.org. Any purchases you make using my link will earn me (and local bookstores!) a small commission. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/reading-challenge-32-unread/#affiliate-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, Oct 2022 2022-11-11T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2210/ <p>The first half of October was disconcertingly warm. My fiancé and I were able to hang out at a beer garden and read in comfort, which is both fun and not great for October.</p> <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-kraken-neon-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-kraken-neon-s.jpg" alt="A hockey arena lit by blue ambient light, with a neon sculpture that looks both like an S and kraken tentacle" /> </picture> <p>More fun was my first NHL hockey game (masked)! It was an exciting experience, even if we lost by 1 in overtime. I would love to go to more games before we get really good and ticket prices skyrocket.</p> <div class="u-limit-width | l-grid l-grid--media l-grid--halves"> <picture class=""> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-diwali-us-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-diwali-us-s.jpg" alt="My fiance and I holding a tray of candles in front of house decorated with lights. We are wearing traditional Diwali shirts in tones of dark green." /> </picture> <picture class=""> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-diwali-lights-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-diwali-lights-s.jpg" alt="Rahul placing candles around the exterior of a house lit up with lights trimming its edges" /> </picture> </div> <p>Late in the month, Rahul (my fiancé) and I visited his family in India for Diwali. It was our first time back in Delhi since the pandemic started, so there was plenty of family time to make up (and engagement-related tasks to accomplish).</p> <p>The lights for Diwali were beautiful: familiar for me, who is used to Christmas, but with their own twist. Lights on buildings either run along the edges or are draped down the building in vertical lines. Diyas (little ghee candles) are placed all around to light Rama’s way home, and garlands of marigolds are hung in doorways.</p> <h2 id="making">Making</h2> <ul> <li><a href="https://melanie-richards.com/blog/website-redesign-2022/">Redesigned my website</a> in an unusual burst of sudden energy!</li> <li>Sketched about <a href="https://www.instagram.com/p/CjyaU7YvedK/">fish</a> and <a href="https://www.instagram.com/p/CjWz65ArFg_/">feelings</a></li> <li>Made some progress on a quilted sketchbook pouch.</li> </ul> <h2 id="reading">Reading</h2> <p>Trying out another Goodreads competitor called StoryGraph. This website/app generates charts of your reading habits, which is fun to compare across the years. It also makes it easier to find your next read based on attributes like mood, pace, and genre. <a href="https://app.thestorygraph.com/profile/melanierichards">Here’s my StoryGraph profile</a></p> <h3 id="articles">Articles</h3> <ul> <li><a href="https://punchdrink.com/articles/where-is-she-now-janee-mahalo-old-fashioned-cocktail-recipe/">JaNee: Where Is She Now?</a></li> <li><a href="https://www.theverge.com/2022/10/28/23428132/elon-musk-twitter-acquisition-problems-speech-moderation">Welcome to hell, Elon</a></li> <li><a href="https://katydecorah.com/notes/one-hundred-times/">Do something 100 times</a></li> </ul> “Now generally available: Scopes and contextual values for environment variables” on Netlify 2022-11-02T00:00:00.000Z https://www.netlify.com/blog/scopes-and-contextual-values-for-environment-variables-ga/

The new environment variables experience allows you to set unique values for different contexts and control where environment variables can be used.

Read the article on Netlify Personal website redesign 2022 2022-10-11T00:00:00.000Z https://melanie-richards.com/blog/website-redesign-2022/ <p>For a couple years now, I’ve had a similiar-ish theme up on my website: black-and-white pixel art, Space Mono headings, with body copy rendered in Mallory. Pixels are fun, but I needed a change and craved more COLOR! 🌈</p> <p>Bright colors have been giving me a ton of dopamine lately, and so this redesign swings far on the other side of the color pendulum:</p> <picture class="u-limit-width c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-home-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-home-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-home-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2022-home-s.png" alt="Home page with a tagline, recent work projects, a list of things I'm up to now, recent blog posts. There's a quilt-like shape of geometric, colorful blocks in orangey red, forest green, pink, and beiges." /> </picture> <p>The blocky, geometric details on this redesign are a nod to the quilting hobby I share with some of my family members: an aesthetic echo of <a href="https://fiber.melanie-richards.com/">my fiber blog</a>. As a ginger, I’ve gotta incorporate an orangey red in there.</p> <h2 id="winter-2020-version">Winter 2020 Version</h2> <p>First, let’s pour one out for the version built in Winter 2020, not long before The Panini. It looked something like this:</p> <div class="l-grid l-grid--media l-grid--halves"> <div> <picture class="u-limit-width c-web-preview c-web-preview--lighter"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-home-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-home-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2020-home-s.png" alt="A collage of my tagline and recent projects and posts, in a black and white pixel theme with headings in a monospace font" /> </picture> <br /> <picture class="u-limit-width c-web-preview c-web-preview--lighter"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-info-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-info-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2020-info-s.png" alt="My info page. The bio image is cut out into a pixelated circular shape." /> </picture> </div> <picture class="u-limit-width c-web-preview c-web-preview--lighter"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-post-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-post-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2020-post-s.png" alt="A blog post, where the responses section seems to pop out of the page given its thick black border and hard-edged black shadow." /> </picture> </div> <p>There are some through-lines I’m keeping in the new design:</p> <ul> <li>The <a href="https://frerejones.com/families/mallory">Mallory typeface</a>, designed by Tobias Frere-Jones. It’s friendly but well-considered. I am thinking of swapping in a funkier display typeface for headings, but nothing has caught my eye yet.</li> <li>Component-level designs: in many ways, components like cards stay the same.</li> <li>Content is largely the same, though I’ve split work-related projects into a new Product page, and the blog has tag archives now as well.</li> </ul> <h2 id="new-version">New Version</h2> <p>Like my previous design, there is a dark theme:</p> <picture class="u-limit-width c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-home-dark-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-home-dark-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-home-dark-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2022-home-dark-s.png" alt="The new home page again, rendered in a dark theme. The quilt blocks are now dark purples, blues, with lilac accents." /> </picture> <p>Previously I would swap out the theme only according to <code>prefers-color-scheme</code>. Now visitors can choose in the footer whether they’d like auto (follow the system theme), light, or dark.</p> <p>The masthead shapes are a small source of joy for me:</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-masthead-icon-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-masthead-icon-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-masthead-icon-s.png" alt="A zig-zaggy, reddish orange icon at the top of my personal projects page" /> </picture> <picture class="u-limit-width c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-info-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-info-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-info-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2022-info-s.png" alt="A different geometric icon on the info page. There's also a section detailing my hobbies" /> </picture> <p>They are reflected in the favicon for that part of the site.</p> <p>Another detail I love is that when you hover over a card, two opposite corners animate to a bubbly corner radius.</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-hover-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2022-hover-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2022-hover-s.png" alt="Two blog post cards. The one on the left has an aggressive border-radius on the top left and bottom right" /> </picture> <p>I like how this subliminally points the card image up and left: onwards!</p> <p>This was also a good excuse to try out the <code>has()</code> selector. In these cards, I'm rendering a pseudo element on the link over the image. This way, the visitor can click on top of the image to navigate (as might be expected), but I can separate out <code>img</code> alt text from the link’s accessible name. Because of this, I needed to select for <code>.c-card:has(.c-card__title:hover)</code> to animate the image’s border radius. Given this is just an aesthetic enhancement, it’s a good first place to try this CSS feature out.</p> <h2 id="up-next">Up Next</h2> <p>Most of the things I’d like to do now are content-related:</p> <ul> <li>Tag more of my blog posts so they can be found in the right tag categories.</li> <li>Add “Uses” and “Media” pages for some good ol’ fashioned navel-gazing/voyeurism.</li> <li>Develop the Product page more: thought leadership? Do I dare?</li> </ul> <p>While I’ve done visual / accessibility testing in this redesign process, it’s always possible I’ve missed something. Please do let me know if you find anything that seems off!</p> Learning Log, Aug/Sep 2022 2022-10-06T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2209/ <p>Life has been super busy this past couple months, hence the double feature this time around. This is also a special Learning Log because it is dedicated to my friend Saili, whose wedding I traveled to Monterrey, CA to attend in August!!</p> <div class="l-grid l-grid--media l-grid--halves"> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-little-bs-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-little-bs-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-little-bs-s.jpg" alt="A neon sign that says Saili and Billy present a little BS" /> </picture> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-jellyfish-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-jellyfish-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-jellyfish-s.jpg" alt="Two big lacy jellyfish floating perpendicular to each other ina blue tank" /> </picture> </div> <p>Saili is my number one hype queen, always quick to jump in with a supportive word. I am pretty sure she is the only person who reads all my fiber crafts posts. Spend an hour with Saili and you will feel capable of punching through brick walls.</p> <p>Congratulations Saili and Billy, and thank you for having all of us share in your day. 💞</p> <h2 id="hawaii">Hawaii</h2> <p>Had the opportunity to go to Maui, Hawaii in September! Unlike most Seattleites it seems, I’d never been to the islands and I extremely get the hype now. Kapalua Coastal Trail in particular was a beautiful afternoon walk:</p> <div class="l-grid l-grid--media l-grid--halves"> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-hi-rocks-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-hi-rocks-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-hi-rocks-s.jpg" alt="A cove of crystalline, turquoise water sweeping into a rocky coastline" /> </picture> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-hi-lava-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-hi-lava-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-hi-lava-s.jpg" alt="A low formation of rock that was clearly formed by slow lava flow. There's small pools of water amidst the lava rocks." /> </picture> </div> <p>I’m realizing I’m a big fan of cool rock formations in or near the sea (looking at you, Giant’s Causeway).</p> <p>My fiancé and I have not taken a real vacation for the better part of 3 years. Our first afternoon in Maui we were just floating happily in the sea, wondering why that felt so MIND BLOWINGLY nice. Turns out when you don’t take time to relax, away from the details of your mid-pandemic life, you end up a little more tightly wound?</p> <h2 id="blogging">Blogging</h2> <ul> <li><a href="https://melanie-richards.com/blog/pm-lyfe/">What does a product manager do?</a></li> <li><a href="https://melanie-richards.com/blog/task-mgmt-tools/">Task Management Tools</a></li> <li><strong>On Netlify:</strong> <a href="https://www.netlify.com/blog/branch-specific-environment-variable-values-from-the-netlify-ui-cli-or-api/">Branch-specific environment variable values from the Netlify UI, CLI, or API</a></li> <li><strong>On Netlify:</strong> <a href="https://www.netlify.com/blog/automated-deploy-cleanup-and-new-deploy-retention-policies/">Automated deploy cleanup and new deploy retention policies starting late October 2022</a></li> </ul> <h2 id="sketching">Sketching</h2> <p>Started a new sketchbook, the <a href="https://www.jetpens.com/Stillman-Birn-Epsilon-Sketchbook-Softcover-5.5-x-8.5/pd/18732">Stillman &amp; Birn Epsilon</a>.</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-filled-not-feared-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-filled-not-feared-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-filled-not-feared-s.jpg" alt="A sketchbook page saying 'your sketchbook wants to be filled not feared, Nina Cosford'. There's a watercolor background in bright warm tones." /> </picture> <figure class="u-limit-width"><picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-black-rock-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-black-rock-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-black-rock-s.jpg" alt="A jetty of rocks rendered in water soluable crayons" /> </picture><figcaption>Black Rock in Maui, Hawaii</figcaption></figure> <p>I’m enjoying it so far: the paper is smooth enough that Posca pens don’t tear up the surface, but it’s thick enough for wet media. The pages do wave a little bit with wet media, but I don’t mind it (kind of enjoy that, if I’m honest).</p> <figure class="u-limit-width"><picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-sand-city-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-sand-city-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-sand-city-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-sand-city-s.jpg" alt="Dunes rendered in pale watercolor, with scribbles of umber and green in crayon on top" /> </picture><figcaption>The view of sand dunes from our Airbnb in Sand City, CA</figcaption></figure> <p>Lately I’ve been exploring how I do/don’t like to use Neocolor II water-soluable crayons.</p> <h2 id="fiber-arts">Fiber arts</h2> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pouch-top-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pouch-top-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pouch-top-s.jpg" alt="A small fabric panel made of triangles, squares, and rectangles. Colors include red, yellow, pink, blue, teal, black, and white. There are black and white squares in a checkboard pattern." /> </picture> <p>Working on a zipper pouch for an A5 sketchbook! Here’s the top (mostly) pieced together. Bright colors have been giving me so much dopamine lately.</p> <h2 id="more-learning-and-doing">More learning and doing</h2> <ul> <li>Found a fountain pen that actually works for me and now am extremely into fountain pens and inks! They look so pretty, especially on the Tomoe River Paper in my Hobonichi journal.</li> <li>Worked for a hot minute on a redesign for my website (which is not yet live). I don’t have a much color on the site right now, and this redesign is definitely swinging towards the “ALL OF THE COLOR” end of the pendulum.</li> <li>Learned the term <a href="https://en.wikipedia.org/wiki/Asterism_(typography)">asterism</a>, and also that “dinkus” is a technical term. 🤨</li> <li>Used my <a href="https://mode.com/sql-tutorial/">Mode Intermediate SQL tutorial</a> chops from earlier in the summer to write a new query for a dashboard at work! Huzzah!</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://overcast.fm/+FzpmjkQuc">Secular Buddism Podcast episode 3: Seeing With I’s of Wisdom</a>: I enjoyed the parable on “who knows what is good and what is bad?” Note, unfortunately I couldn’t find a transcript for this episode.</li> <li><a href="https://twitter.com/austinkleon/status/1575243216592453634?s=46&amp;t=5N7tRXecLC1ekdZDrabRiA">The creative process</a></li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://uxdesign.cc/codifying-product-discovery-process-5e4db83a00ca">Codifying the product discovery process</a></li> <li><a href="https://hbr.org/2015/08/the-research-is-clear-long-hours-backfire-for-people-and-for-companies">The Research Is Clear: Long Hours Backfire for People and for Companies</a>: I need to keep reading these until it sinks in. (Note: a few ableist terms scattered in this article)</li> <li><a href="https://subscribe.marissagoldberg.com/posts/remotely-interesting-the-commute-reimagined">Remotely Interesting: The Commute Reimagined</a></li> <li><a href="https://www.smithsonianmag.com/smart-news/doppelgangers-dont-just-look-alike-they-also-share-dna-180980635/">Doppelgängers Don’t Just Look Alike—They Also Share DNA</a></li> </ul> “Comment and collaborate on Deploy Previews – now available for Azure DevOps projects” on Netlify 2022-10-04T00:00:00.000Z https://www.netlify.com/blog/comment-and-collaborate-on-deploy-previews-azure-devops/

Developers deploying to Netlify from Azure DevOps repositories can now collaborate on deploy previews in the browser and sync feedback back to Azure DevOps.

Read the article on Netlify “Automated deploy cleanup and new deploy retention policies starting late October 2022” on Netlify 2022-09-27T00:00:00.000Z https://www.netlify.com/blog/automated-deploy-cleanup-and-new-deploy-retention-policies/

Starting late October 2022, Netlify will begin automatically batch-deleting non-critical deploys older than 90 days.

Read the article on Netlify Task Management Tools 2022-09-20T00:00:00.000Z https://melanie-richards.com/blog/task-mgmt-tools/ <p>Task management tools I can remember using over the years as a designer, developer, or product manager; roughly in order; often overlapping; whether voluntarily or otherwise:</p> <ul> <li>Teux Deux (and probably other simple tools scattered throughout)</li> <li>Bugzilla</li> <li>Goes to Work</li> <li>Email / Gchat / Slack / text files / bubblegum</li> <li>Jira (for like, one client)</li> <li>GitHub</li> <li>Trello</li> <li>Microsoft’s clone of Trello (Projects?)</li> <li>OneNote</li> <li>Azure DevOps</li> <li>CrBug (Chromium bug tracker)</li> <li>Microsoft To Do</li> <li>Analog</li> <li>Paper notebooks</li> <li>Shortcut, for like, a week</li> <li>Github again</li> <li>Notion</li> </ul> <p>Nothing is perfect. For me the important bits are:</p> <ul> <li>The tool is as close as possible to where the work actually happens (tricky when in multiple places)</li> <li>The tool is flexible to organizational needs, but critically <em>enables the team to hide or ignore complexity where it is irrelevant</em></li> <li>The tool reliably enables async status-sharing, vs serving as a burden / TPS report hellscape</li> <li>I can track the nitty gritty PM details (which are usually too granular for broad consumption) in a way that makes sense to my brain</li> </ul> <p>What’s your list like?</p> What does a product manager do? 2022-08-29T00:00:00.000Z https://melanie-richards.com/blog/pm-lyfe/ <p>Whether you’re new to the tech industry or not quite clear on how some of your colleagues spend their days, you might wonder, “what does a product manager do?”</p> <p class="c-media c-media--limit-width"><img src="https://melanie-richards.com/assets/images/content/what-would-you-say-you-do-here-m.jpg" alt="From the movie Office Space, two consultants asking: 'what would you say you do here?'" /></p> <p>This is a valid question. Many product managers ask themselves the same thing, because the role is a bit slippery and can differ depending on context.</p> <p>I thought I’d take a crack at answering this question from my own perspective. Brevity is not on offer, but you’ll find here:</p> <ul> <li><a href="https://melanie-richards.com/blog/pm-lyfe/#the-classic-answer%3A-it-depends">Factors that create variety in the role</a></li> <li><a href="https://melanie-richards.com/blog/pm-lyfe/#the-role-at-its-core">Product management at its core</a></li> <li><a href="https://melanie-richards.com/blog/pm-lyfe/#day-to-day">The day-to-day at a high level</a></li> <li><a href="https://melanie-richards.com/blog/pm-lyfe/#tasks-throughout-the-product-lifecycle">Deep dive on common tasks</a></li> </ul> <h2 id="the-classic-answer%3A-it-depends">The classic answer: it depends</h2> <p>The first thing to get out of the way is that there <em>is</em> a high degree of variation in product management. The role can differ depending on:</p> <ul> <li>The industry</li> <li>The culture and processes of each level of organization within a company</li> <li>The personalities, abilities, and availability of key partners</li> </ul> <p>Product managers often find their roles expanding to fill gaps on the team. Frequently, this involves picking up <a class="footnotes__ref" href="https://melanie-richards.com/blog/pm-lyfe/#unglamorous-note" id="unglamorous-ref" aria-describedby="footnotes-label" role="doc-noteref">unglamorous work</a>. Product managers may feel somewhat like a “PM and”: PM and engineering manager; PM and pro<em>ject</em> manager; PM and bug backlog wrangler; PM and stakeholder soothsayer. This effect is what often drives the mismatch between reality and what product management books describe.</p> <p>Despite this variation, there are some aspects that are core to product management.</p> <h2 id="the-role-at-its-core">The role at its core</h2> <p>I think of the product management role as <strong>answering 3 basic questions:</strong></p> <ol> <li><strong>Which <a class="footnotes__ref" href="https://melanie-richards.com/blog/pm-lyfe/#customers-note" id="customers-ref" aria-describedby="footnotes-label" role="doc-noteref">customer</a> problems / unmet needs should we prioritize solving, and why?</strong><br /> Product strategy can scale from a narrowly scoped feature area to stratospheric, industry-changing strategic investments. Here, PMs are seeking out problems that are urgent, pervasive, and/or that customers are willing to pay for. The golden opportunities are those that have a projected high impact on both customer goals and business targets.</li> <li><strong>How should we solve those problems?</strong><br /> Solution definition includes owning the requirements that will keep customers on <a href="https://userpilot.com/blog/happy-path/#:~:text=to%20get%20started.-,What%20is%20the%20meaning%20of%20happy%20path%3F,result%20without%20encountering%20any%20error.">“the happy path”</a> as they meet their goals. Product managers ensure the product experience is effective, efficient, and pleasant to use—while scoping requirements tightly enough to ship and iterate quickly.</li> <li><strong>Did we successfully solve those problems, and what impact did that have on our customers and the business?</strong><br /> This entails both talking to customers and monitoring feature success measures: qualitative and quantitative data.</li> </ol> <h3 id="leading-through-relationships">Leading through relationships</h3> <p>From my perspective and experience, this role works best if product managers take a collaborative leadership approach, rather than a dictatorial one.</p> <p>Problem area discovery (question #1) requires gathering insights from a wide variety of inputs in order to find a strong signal. Everyone at the company with a direct connection to customers has valuable insights to offer. They are often critical partners in uncovering more data.</p> <p>Similarly, the strongest solutions often come from team effort and imagination. Instead of writing up a fully-formed solution and throwing it over the wall, it may be ideal to bring cross-functional peers into solution-defining processes. Your mileage may again vary, depending on organizational culture and key partners’ strengths and interests. At Netlify, we’ve started running “Problem-Solution Alignment” exercises to brainstorm as a team how we might solve a customer problem. More on that in another post.</p> <p>A strong product manager does not need to always have the best and smartest ideas. Rather, they create an environment where <a class="footnotes__ref" href="https://melanie-richards.com/blog/pm-lyfe/#core-values-note" id="core-values-ref" aria-describedby="footnotes-label" role="doc-noteref">anyone can contribute</a> towards the final designed solution. That said, PMs do take responsibility for outcomes. They need to use their deep customer knowledge and business savvy to keep the team on track to make the most impact. There’s a balance to strike between being receptive to input, and creating a clear direction forward.</p> <h2 id="day-to-day">Day to day</h2> <p>A day in the life of a product manager can again vary widely depending on role definition, seniority, and how much email people at your company send. “Too many meetings” is inevitable. Broadly, a PM’s time will include:</p> <ul> <li>Researching, defining strategy (always less time spent here than we want)</li> <li>Talking to customers</li> <li>“Planning” activities: setting roadmaps and priorities with input from Design and Engineering</li> <li>Executing on a number of active projects</li> <li>Communicating with stakeholders</li> <li>Creating customer communications</li> <li>Monitoring customer feedback and success measures (possibly writing one’s own data queries)</li> <li>Helping to set priority on incoming issues and feature requests</li> <li>Mentoring others and sharing knowledge</li> <li>Interviewing, including for non-product roles</li> </ul> <p>Again, there may be other activities that are specific to the industry, team, or the PM’s personal background. For example:</p> <ul> <li>My background is in design and web dev, so sometimes I contribute design ideas for small changes. In the past, I’ve also done some heavier lifting when short-staffed on the design team.</li> <li>I’ve created demos and conference talks for features I’ve contributed to. This can overlap with the Developer Advocate role.</li> <li>On the Microsoft Edge web platform team, PMs participated heavily in web standards discussion at the W3C, WHATWG, and IETF. This is again different to other browser vendors, where devs may be the company’s sole representatives.</li> </ul> <h2 id="tasks-throughout-the-product-lifecycle">Tasks throughout the product lifecycle</h2> <p>If you’re still wondering, <em>“ok, but what specific tasks do y’all do?”</em>, you can explore these common activities I’m responsible for as a Senior Product Manager at Netlify (at time of writing). This list focuses on tasks specific to the product development lifecycle, so it’s not exhaustive. If you’re interested in a product management role, you can expect that your days might be filled with a blend of these and other activities.</p> <details> <summary>Discovery (9)</summary> <ul> <li>Gather customer and market insights to identify problems and size potential impact <ul> <li>Conduct user/market research</li> <li>Talk to customers (requires coordination with the Sales org and/or Research)</li> <li>Review previous insights</li> </ul> </li> <li>Make a recommendation on given problem spaces and feature areas: invest / maintain / retire</li> <li>Collaborate with product and engineering partners on: <ul> <li>Product area strategy</li> <li>OKR definition</li> <li>Priorities and roadmaps</li> </ul> </li> <li>Write a “stub” Product Requirements Document (PRD) to define a problem set and sketch out success measures</li> <li>Create parent issue in tracking tool</li> </ul> </details> <details> <summary>Solution refinement (10)</summary> <ul> <li>Prepare problem statements and schedule a Problem-Solution Alignment (PSA) exercise</li> <li>Lead the PSA exercise to define proposed solution set</li> <li>Write the full Product Requirements Document (PRD): refine success measures, add details on the chosen solution set, scope milestone requirements, outline general release plan, set pricing and packaging</li> <li>Circulate PRD for stakeholder feedback and iterate</li> <li>Support Design on a direction for the user experience</li> <li>With Design, write initial UI copy</li> <li>Review UI copy and names for core concepts with writers</li> <li>Circulate UI mocks for feedback and iterate</li> <li>Gather customer feedback (does the solution adequately address their problems? Is it easy and pleasant to use?) <ul> <li>Show customers early designs and iterate</li> <li>With Research, run a usability study and analyze the results. Iterate!</li> </ul> </li> </ul> </details> <details> <summary>Execution (10)</summary> <ul> <li>Schedule and lead kickoff with project contributors</li> <li>Help create tracking issues for discrete buckets of work <em>(fidelity and division of labor between Product and Design/Engineering depends heavily on the team)</em></li> <li>Work with Design and Engineering on ETAs</li> <li>Create a data plan for success measures and other telemetry <ul> <li>Work with Engineering to implement telemetry</li> <li>Work with Data to review implementation plans and set up data dashboards</li> </ul> </li> <li>Add the project to internal launch tracking tools</li> <li>Run regular project syncs, if applicable</li> <li>Work with Design on any UX tweaks along the way</li> <li>Support Engineering with PR reviews and implementation questions</li> <li>Support Docs on documentation for feature; review docs PRs</li> </ul> </details> <details> <summary>Release (15)</summary> <ul> <li>Write blurbs for Labs beta features</li> <li>Keep Product Marketing and Developer Experience in the loop on upcoming functionality; set ETAs for marketing moments</li> <li>Prep and present launch plans to stakeholders</li> <li>Create an internal test plan (manual tests outside of PR reviews / automated testing; often called “acceptance criteria”)</li> <li>Prep and conduct Support training</li> <li>Confirm feature is code complete</li> <li>Facilitate internal testing and help prioritize bugs</li> <li>Announce availability of feature for internal alpha</li> <li>Share availability of feature with key customers, for private beta (if applicable)</li> <li>Confirm data dashboards are ready</li> <li>Create a feedback survey</li> <li>Write a forum post</li> <li>Write a blog post and review with Product Marketing (who often advise and prepare other user comms)</li> <li>Schedule launch &amp; create checklist</li> <li>Confirm readiness, launch the feature 🚀, and celebrate with the team! 🥳</li> </ul> </details> <details> <summary>Iteration (5)</summary> <ul> <li>Monitor customer reception + feedback</li> <li>Review success measures</li> <li>Help team prioritize incoming bugs and future investments in this feature/area</li> <li>Proactively meet with customers to validate their experience</li> <li>Ensure Engineering removes feature flag when ready</li> </ul> </details> <h2 id="in-closing">In closing</h2> <p>The product manager role can be challenging to define, given that ol’ devil in the details. At the core, it’s about working with a cross-functional team to ensure the product you build adequately addresses customer needs, for a positive business impact. Keep those users on the happy path!</p> <p>You might be able to tell from the lists above that product management entails quite a bit of context switching. That’s certainly true. On the other side of the coin, I find PM life thrilling because it’s always different: so many ways to add value, so many interesting and talented people I get to work with every single day. I’m grateful to have fallen into it.</p> <p>I hope my perspective helps clarify what this role actually is—or might be—but can bet the PMs around you have their own perspectives to share!</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="unglamorous-note" class="footnotes__list-item" role="doc-endnote">The best teams I’ve worked with find ways to make unglamorous or tedious work a shared responsibility. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/pm-lyfe/#unglamorous-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li> <li id="customers-note" class="footnotes__list-item" role="doc-endnote">Customers could include the people who use your product; buy your product; or other partners (e.g. advertisers paying for user attention on your product). <a class="footnotes__back-link" href="https://melanie-richards.com/blog/pm-lyfe/#customers-ref" aria-label="Back to reference 2" role="doc-backlink">↩</a></li> <li id="core-values-note" class="footnotes__list-item" role="doc-endnote">At Netlify, one of our core values is “the best ideas can come from anywhere.” <a class="footnotes__back-link" href="https://melanie-richards.com/blog/pm-lyfe/#core-values-ref" aria-label="Back to reference 3" role="doc-backlink">↩</a></li></ol> </footer> “Branch-specific environment variable values from the Netlify UI, CLI, or API” on Netlify 2022-08-23T00:00:00.000Z https://www.netlify.com/blog/branch-specific-environment-variable-values-from-the-netlify-ui-cli-or-api/

Developers can now change an environment variable’s value based on the branch, from the Netlify UI, CLI, or API. Available as a beta in Netlify Labs.

Read the article on Netlify Learning Log, Jul 2022 2022-08-07T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2207/ <p>Fitting for “touch grass” season, I’ve pretty much not touched a computer for personal projects in July. Instead, sketchbook art has taken up a large proportion of creative brainspace.</p> <h2 id="sketching">Sketching</h2> <p>Discovered <a href="https://hudsonvalleysketches.blogspot.com/2012/01/breaking-in-your-stillman-and-birn.html?m=1">this method of breaking in a sketchbook</a> and found it to be quite effective. Also learned about <a href="https://www.jacksonsart.com/blog/2021/02/02/colour-mixing-exploring-the-zorn-palette/">the Zorn palette</a> (and that it’s best for health/environmental reasons to get cadmium-free versions of paint).</p> <p>I also finally made it out to a meetup with Urban Sketchers Seattle. I found the group during the pandemic, so they were on hiatus at the time for in-person outings. Took me a bit to be available for a meeting once they were back on.</p> <div class="l-grid l-grid--media l-grid--halves"> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-locks-sketch-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-locks-sketch-s.jpg" alt="Me holding a picture of trees and a railed walkway in front of said scene. Froth water lies between." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fence-sketch-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fence-sketch-s.jpg" alt="Me holding a pen drawing of fence shadows on top of a fence near water" /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fish-sketch-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fish-sketch-s.jpg" alt="A sketch drawn of windows showing shadowy fish swimming by" /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-locks-sketch-full-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-locks-sketch-full-s.jpg" alt="The tree scene in my sketchbook again, now with a fern drawn beneath it" /> </picture> </div> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-locks-usk-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-locks-usk-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-locks-usk-s.jpg" alt="A bunch of sketchbooks lying on a sidewalk. The dominant color is green." /> </picture> <p>We used a lot of green paint to sketch the Ballard Locks on a meltingly hot day. I’m trying out Neocolor II wax pastel crayons, which were fairly soft from the heat (messier and more fun in equal measure). I still have plenty of room to learn, but honestly had the best time wandering around sketching.</p> <h2 id="fiber-art">Fiber Art</h2> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-indigo-backyard-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-indigo-backyard-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-indigo-backyard-s.jpg" alt="Indigo dyed fabrics hanging on a line in a sunny back yard. Some of the blue and white patterns are strongly graphic while others have loose waves or solid color" /> </picture> <p>July was apparently a month for meeting new people: <a href="http://itsmemeg.com/">my friend Meg</a> co-hosted an indigo dyeing party in her backyard one night after work. I seem to have gotten shyer since the pandemic (out of practice), but it was such a nice and peaceful time making things during the golden hour.</p> <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pin-hanging-full-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pin-hanging-full-s.jpg" alt="An 11 x 17 wall hanging with 3 thick bands of red, salmon pink, and yellow cotton fabric. The binding is salmon pink. There is a pattern of horizontal quilted lines 1.5 inches apart. The wall hanging is filled with all manner of cute enamel pins, including 3 corgis, web-themed icons, a couple cocktail, 'protect trans youth', and a couple eggs." /> </picture> <p>In more vibrant hues, I also <a href="https://fiber.melanie-richards.com/enamel-pins/">made a wall hanging</a> with which to display my enamel pins.</p> <h2 id="creative-hobbies-%26-guilt">Creative hobbies &amp; guilt</h2> <p>Mulling over this <a href="https://www.yumisakugawa.com/">Yumi Sakugawa</a> quote via my ever-thoughtful friend <a href="https://izziezahorian.com/">Izzie</a>:</p> <blockquote> <p>What if instead of guilting yourself for not working hard enough on your creative projects, you ask yourself: what would make this so exciting and compelling that I can’t wait to play and create and build on these ideas?</p> </blockquote> <h2 id="sql">SQL</h2> <p>Back on the computer, I finished the <a href="https://mode.com/sql-tutorial/">Mode basic SQL tutorial</a> while also being dangerous in Mode itself (figuring out enough to hack a couple things together). I can’t wait to <em>actually</em> learn joins! Working on the Intermediate tutorial now…</p> Learning Log, Jun 2022 2022-07-06T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2206/ <div class="l-grid l-grid--media l-grid--halves"> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-butterfly-sketch-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-butterfly-sketch-s.jpg" alt="A sketchbook with a sticker that says “Florida museum”. There are 4 felt-pen butterflies, and the words “butterfly rainforest”. Two butterflies are facing away from each other and are labeled “butt to butt”." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-june-berries-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-june-berries-s.jpg" alt="Small green strawberries on a plant in a patch of dirt" /> </picture> </div> <p class="caption">An explosion of green! A sketchbook page and some June-bearing strawberries in our garden that have mostly missed the boat on the whole “June” thing.</p> <h2 id="netlify-launches">Netlify Launches</h2> <p>June was an absolutely jam-packed month! Mid-month I went to visit family around a certain 3-year-old’s birthday, then came back and launched two features with my team at Netlify (while also attending an offsite!). The lead-up to Unintentional Launch Week had me feeling a bit slammed, but it sure is a whole ton of fun shipping features that folks have been asking for! Maybe I should go for a hat-trick next time? 🏒</p> <p>If you’d like to check out the newly available bits, they are:</p> <ul> <li><a href="https://www.netlify.com/blog/deploy-deletion/">Deploy deletion</a> controls + automatic cleanup of failed deploys</li> <li><a href="https://www.netlify.com/blog/scopes-and-contextual-values-for-environment-variables/">Scopes and deploy contexts</a> for environment variables (beta!)</li> </ul> <h2 id="seasonal-cleaning">Seasonal Cleaning</h2> <p>After I finish a side project, I like to do a bit of <a href="https://github.com/users/melanierichards/projects/5/views/1">seasonal cleaning</a> <a class="footnotes__ref" href="https://melanie-richards.com/blog/learning-log-2206/#issue-privacy-note" id="issue-privacy-ref" aria-describedby="footnotes-label" role="doc-noteref">on Github</a>, i.e. fixing bugs and making small improvements to past personal projects.</p> <p>This month I:</p> <ul> <li>Added a record of older <a href="https://github.com/melanierichards/talks">talks</a></li> <li>Added an <a href="https://snacks.melanie-richards.com/feed.xml">RSS feed</a> to my <a href="https://snacks.melanie-richards.com/">snack review site</a>. Also added a couple reviews, while I was at it.</li> <li>Add a link to the existing RSS feed to my <a href="https://fiber.melanie-richards.com/">fiber crafts blog</a></li> <li>Made little layout tweaks on various projects</li> <li>Made various and sundry updates to <a href="https://github.com/melanierichards/palindrome">Palindrome</a>, my personal Eleventy starter template</li> </ul> <h2 id="reading">Reading</h2> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://www.swyx.io/three-strikes">My Three Strikes Rule for Blogging</a></li> <li><a href="https://daverupert.com/2022/06/demo-to-demo-loop/">The Demo → Demo Loop</a></li> </ul> <h3 id="art-and-creativity">Art and creativity</h3> <ul> <li><a href="https://austinkleon.substack.com/p/the-simplest-cut">The simplest cut</a></li> <li><a href="https://www.smithsonianmag.com/smart-news/secret-exhibition-met-staff-art-180980217/">At This Once-Secret Exhibition, the Met’s Security Guards and Staff Display Their Own Art</a></li> <li><a href="https://www.jeannebowmanillustrates.com/blog-of-the-anxious-bean/2021/5/22/how-to-re-commit-to-your-sketchbook-again">how to re-commit to your sketchbook. again.</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li> <p><a href="https://www.atlasobscura.com/articles/how-capicola-became-gabagool-the-italian-new-jersey-accent-explained">How Capicola Became Gabagool: The Italian New Jersey Accent, Explained</a></p> </li> <li> <p>I learned about <a href="https://en.wikipedia.org/wiki/Rhubarb_forcer">rhubarb forcers</a> via the Great Pottery Throwdown</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="issue-privacy-note" class="footnotes__list-item" role="doc-endnote">It’s interesting that issues from private repos are listed on Github project boards as “no status”; I suppose some custom statuses could leak private info. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/learning-log-2206/#issue-privacy-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer></li> </ul> “Cleaning up deploys you no longer need” on Netlify 2022-06-29T00:00:00.000Z https://www.netlify.com/blog/deploy-deletion/

Teams using Netlify can manually delete deploys they no longer need. To make your seasonal cleaning even easier, Netlify will also automatically delete failed or canceled deploys older than 6 months.

Read the article on Netlify “Manage scopes and contextual values for environment variables through the Netlify UI” on Netlify 2022-06-28T00:00:00.000Z https://www.netlify.com/blog/scopes-and-contextual-values-for-environment-variables/

Developers can now limit environment variables to specific scopes or change environment variables based on deploy context through the Netlify UI, available as a beta in Netlify Labs.

Read the article on Netlify Rotate who sends the newsletter 2022-06-11T00:00:00.000Z https://melanie-richards.com/blog/rotate-status-dris/ <p>Quick tip: if your team sends an internal newsletter or status email, consider rotating which team member is responsible for driving content and sharing out the update.</p> <h2 id="why%3F">Why?</h2> <h3 id="gives-team-members-more-visibility">Gives team members more visibility</h3> <p>Career progression (promotions, raises, interesting projects) often depends heavily on the visibility of your impact to stakeholders and potential collaborators. This can be more difficult at larger companies and leads to “interesting” visibility-hacking behavior.</p> <p>When you change up the directly responsible individual (DRI) for a recurring status update, you give each team member a natural way to show up and raise their visibility. Presumably each person that contributes to the newsletter is also materially contributing to the work that the newsletter reports on. Rather than gatekeeping on one person, everyone on the team can get the chance to share that impact with the broader organization.</p> <h3 id="cultivates-a-shared-sense-of-ownership">Cultivates a shared sense of ownership</h3> <p>Rotating newsletter DRIs increases a shared sense of ownership in 1) the work itself and 2) how the team’s impact is messaged to stakeholders. If Jamie sends the update every sprint, it’s easy to feel like everyone else is executing on Jamie’s vision (or, again, their visibility!). There are other things that should happen to empower cross-functional team members, but being able to help lead on messaging builds the sense that the team is working towards a shared, common goal.</p> <h3 id="makes-the-newsletter-easier-to-compile">Makes the newsletter easier to compile</h3> <p>When the responsibility for a status update always falls on one person’s shoulders, no one else gets to feel the pain of corralling contributions from the rest of the team. People often procrastinate on filling out newsletter content, because it’s unaccounted-for work. When there’s just one DRI, that owner has to beg team members for content with every iteration.</p> <p>I’ve noticed that when the DRI rotates, the team is much more responsive to calls for content. That is likely due in part to a shared sense of messaging ownership. It may also be attributable to an increased empathy for the DRI: you as contributor have gone through the cat-herding yourself, or it’s your turn to do so next month.</p> <p>It’s tempting to think that having one person “just take care of it” leads to efficiency and quality, but in my experience the opposite is true.</p> <h2 id="give-it-a-try">Give it a try</h2> <p>Rotating the newsletter DRI may not work for every organization and audience. That said, it’s worth considering this practice—and whether your current approach to status-sharing best serves the organization in the first place!</p> Learning Log, May 2022 2022-06-08T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2205/ <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-rhodies-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-rhodies-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-rhodies-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-rhodies-s.jpg" alt="A huge cluster of vibrant, dark pink rhododendron flowers" /> </picture> <h2 id="support-for-azure-devops-as-a-git-provider-on-netlify">Support for Azure DevOps as a Git provider on Netlify</h2> <p>My first sizable release with my coworkers at Netlify!</p> <p>Netlify enables you to connect a Git repo, supply us your build command, and whenever you push changes to your Git production branch, we’ll automatically build and deploy your site. You can also configure your site to enable automatic deploy previews, deploy notifications, and other fancy automation through webhooks.</p> <p><img src="https://melanie-richards.com/assets/images/content/netlify-git-providers.png" alt="Azure DevOps is available as an option in the UI for connecting a repo" /></p> <p>For years now, we’ve supported first-class integrations with Github, Gitlab, and Bitbucket; now teams with repos stored in Azure DevOps can connect to Netlify easily—i.e. without manual setup on the CLI, or spinning up an Azure pipeline.</p> <p>If that’s relevant to you, you can learn more at <a href="https://www.netlify.com/blog/how-to-integrate-azure-devops-with-netlify-cicd/">“How to Integrate Azure DevOps with Netlify CI/CD”</a>.</p> <h2 id="world-snacks">World Snacks</h2> <p>In my personal time, I created a site for my snack reviews.</p> <a class="c-web-preview" href="https://snacks.melanie-richards.com/"> <picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-snacks-s.png" alt="The snacks home page with a few items in view. The tagline reads: Eat snacks. Mostly candy. Almost too much." /> </picture></a> <p>I’m posting my impressions on various snacks from around the world. Really this was a great opportunity for me to <a href="https://melanie-richards.com/blog/world-snacks/">play with Contentful as a headless CMS</a>. <a href="https://snacks.melanie-richards.com/suggest/">What should I try next?</a></p> <h2 id="our-blue-planet">Our Blue Planet</h2> <p>Thanks to the pandemic, I honestly haven’t been to a museum since…2019? While out looking at wedding venues, my fiancé and I saw an advertisement for an exhibit that was closing at the Seattle Art Museum that weekend, and decided on a whim to hike over to the SAM to check it out! <a href="https://www.seattleartmuseum.org/Pages/our-blue-planet-global-visions-of-water.aspx">Our Blue Planet</a> was a meditation on water and how we relate to it as human beings. I appreciated the breadth of perspectives the curators brought to the collection. Some of the indigenous artworks really resonated with me:</p> <div class="l-grid l-grid--media l-grid--halves"> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-water-bear-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-water-bear-s.jpg" alt="A conical wooden piece that has a geometric animal head at the top. It looks mammalian, but there's a fin sticking out the back of its head." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-yarrinya-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-yarrinya-s.jpg" alt="Complex patterns etched in black and silver, abstractly emulating the undulating surface of water." /> </picture> </div> <p class="caption">“<a href="http://tsa.an/">Tsa.an</a> Xuu.ujee Dajangee (Sea Bear Crest hat), ~1870. Red cedar, paint. Artist: the indigenous people of Haida Gwaii. | Closeup of “Yarrinya”, 2021. Found and etched aluminum. Artist: Baruwya Munumgurr, Australian Aboriginal Djapu clan.</p> <p>I missed art, I missed museums, I want to come back soon.</p> <h2 id="uvalde">Uvalde</h2> <p><em>Content warning: gun violence, racism</em></p> <p>This shooting really wrenched my heart out of my chest, especially coming so close on the heels of the mass shooting in Buffalo that targeted Black folks for existing. Being an American is often a shameful and scary existence. So many of us are distraught with grief over our fellow human beings. We’re frustrated that we just seem to keep going around the same loops over and over again, with no meaningful action taken on a national level. Something’s gotta give. At the moment I am pondering what I can do, how I can look at my top issues and personal action and try to help break the cycle. That is the other side of being an American: we can be relentlessly optimistic.</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li>Was having a less-than-stellar day and <a href="https://twitter.com/tesseralis/status/1520988955696504832?s=21&amp;t=vkMUTs6qsZnoCw7rwOnyDA">this thread of cursed CSS proposals</a> made me smile</li> <li><a href="https://twitter.com/freshhel/status/1517580248405053441?s=21&amp;t=0dfeUHK7jmHYS20viDF7mw">“U can tell when someones really bonded w their water bottle”</a>. Indeed.</li> </ul> <h2 id="reading">Reading</h2> <p>I don’t actually blog too much about the books I’m reading, although I’m always reading quite a bit (I somehow tend to end up in the middle of 5 books at a time). A couple fun things lately though:</p> <ul> <li>I joined <a href="https://literal.club/melanierichards">literal.club</a>! It’s like Goodreads but 1) without all the Amazon data pipelines and 2) with an API, hooray! 🎉 Love to own my own data.</li> <li>I’m reading a few books “in real time”. <ul> <li>I picked up “The Wood for the Trees” in early May. This meditation on a forest in the U.K. has a chapter per month, starting with April. So, I’m now reading a chapter a month.</li> <li>Through a coworker I discovered <a href="https://draculadaily.substack.com/about">Dracula Daily</a>, the best use of email newsletters yet. This newsletter sends you segments of the book as they happen according to the novel’s timelines. So sometimes the updates are daily, and at other times they are more sporadic.</li> </ul> </li> </ul> <h3 id="articles">Articles</h3> <ul> <li><a href="https://brainbaking.com/post/2022/04/cool-things-people-do-with-their-blogs/">Cool Things People Do With Their Blogs</a></li> <li><a href="https://lettersofnote.com/2013/10/28/make-your-soul-grow/">Make your soul grow</a></li> <li><a href="https://daverupert.com/2022/05/notes-from-a-gopher-site/">Notes from a gopher:// site</a></li> <li><a href="https://www.apartmenttherapy.com/what-to-do-on-day-off-36751428?amp=1">There’s One Key to Not Wasting a Day Off During the Pandemic</a>: a handy framework if you’re like me and feel overwhelmed with options on how to spend a day off work.</li> </ul> “How to Integrate Azure DevOps with Netlify CI/CD” on Netlify 2022-05-24T00:00:00.000Z https://www.netlify.com/blog/how-to-integrate-azure-devops-with-netlify-cicd/

In addition to GitHub, GitLab, and Bitbucket, Netlify now natively supports Azure DevOps as a Git provider! Now teams can connect new and existing sites on Netlify to an Azure DevOps repo, and take advantage of automatic builds and instantaneously-published deploys.

Read the article on Netlify Building a snack review website with Eleventy and Contentful 2022-05-21T00:00:00.000Z https://melanie-richards.com/blog/world-snacks/ <p><em>Full disclosure: at time of writing, I’m employed by Netlify, and I work there because I’m a fan of the platform.</em></p> <p>One thing I’d never quite gotten around to in my Jamstack journey was using a headless CMS for a personal project. I suppose this is because I’m quite content to hang out in a Markdown file. I decided the time was more than nigh to try one out, and so I decided to create a snack review site, using <a href="https://www.contentful.com/">Contentful</a>!</p> <a class="c-web-preview" href="https://snacks.melanie-richards.com/"> <picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-snacks-s.png" alt="The snacks home page with a few items in view. The tagline reads: Eat snacks. Mostly candy. Almost too much." /> </picture></a> <p><a href="https://snacks.melanie-richards.com/">World Snacks</a> is a nice little excuse to try out international treats! All of this started when I was trying to track down a Ramune candy I’d had in Japan, and found <a href="https://www.japancandystore.com/">japancandystore.com</a>. I’ve since found a couple other neat sites, as well as some new-to-me local grocery stores to check out.</p> <p>In any case, I grabbed my fave SSG (Eleventy), checked out <a href="https://www.contentful.com/blog/2020/07/28/integrating-contentful-with-eleventy-create-static-sites/">this quick Eleventy + Contentful walkthrough</a>, and got to hacking!</p> <h2 id="content-structure">Content structure</h2> <p>Contentful enables you to create individual entries of particular content types within spaces (<a href="https://www.contentful.com/developers/docs/concepts/data-model/">more on the data model</a>), via a CMS dashboard. Data can then be fetched asynchronously, and rendered in the web project of your choosing.</p> <p>On Contentful, I have a few different content types each with their own fields:</p> <ul> <li>Snacks. These have “reference” fields pointing to relevant Country and Snack Type entries.</li> <li>Countries</li> <li>Snack Types</li> <li>Pages (of which there is just one so far)</li> </ul> <h2 id="integration-with-eleventy">Integration with Eleventy</h2> <p>For most of the data above, integration with Eleventy goes a little something like this:</p> <h3 id="1.-create-a-global-javascript-data-file">1. Create a global JavaScript data file</h3> <p><a href="https://github.com/melanierichards/world-snacks/blob/main/_data/countries.js">This data file</a> initiates the Contentful JavaScript SDK client, supplying it with my Contentful space token and access token. Next, I call <code>getEntries</code> for whatever content I’m querying at the time. Let’s say it’s Countries. My data file returns an array of Countries and their fields from Contentful.</p> <h3 id="2.-generate-country-pages-via-pagination">2. Generate country pages via pagination</h3> <p><a href="https://github.com/melanierichards/world-snacks/blob/main/country.njk">In a country.njk file</a>, I use pagination with a size of 1 to generate a page for each Country.</p> <h3 id="3.-render-the-country-page">3. Render the country page</h3> <p><a href="https://github.com/melanierichards/world-snacks/blob/main/_includes/layouts/country.njk">A country.njk layout file</a> then prints data for this Country, e.g. <code>country.countryName</code>.</p> <p>I also have a <code>for</code> loop that renders the snacks in this country, using the Snacks data that was similarly pulled from Contentful. I ended up creating an Eleventy filter (<a href="https://github.com/melanierichards/world-snacks/blob/main/.eleventy.js"><code>filterByCountry</code> in my <code>.eleventy.js</code> file</a>) in order to filter the full array of Snacks down to only those in the relevant Country. This takes the Country name, then checks the Snack’s Country reference field for a match. It’s technically possible to filter <code>getEntries</code> calls in a similar fashion, but I couldn’t figure out how to pass the Country name in as a variable to a Snacks data file…which I think makes sense given *handwaves* data lifecycles.</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-spain-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-spain-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-spain-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-snacks-spain-s.png" alt="A page titled Spain with a review for spicy gummy mangos" /> </picture> <p>Anyway, that’s about it! Data is fetched live from Contentful any time the site is built, either locally using my build-and-serve command (<code>npm run start</code>) or any time a new build is kicked off on Netlify. Which brings me to…</p> <h2 id="building-and-deploy-changes-in-contentful-to-netlify">Building and deploy changes in Contentful to Netlify</h2> <p>When I was first putting together this site, I installed the <a href="https://www.contentful.com/marketplace/app/netlify/">Netlify app on Contentful</a>, which enables you to manually trigger a build from the sidebar of the CMS. Funnily enough, I completely missed—until just now when writing this post—that there are simple auto-publish rules tucked a layer within the app.</p> <p>Because I <em>did</em> want to automatically build and deploy newly published changes, I generated a Netlify <a href="https://docs.netlify.com/configure-builds/build-hooks/">build hook</a> for my site, and registered it as a <a href="https://www.contentful.com/developers/docs/concepts/webhooks/">webhook on Contentful</a>. Any time I (un)publish an entry or asset, a build kicks off on Netlify and grabs the latest data from the Contentful API (per the Eleventy integration I described). There are several other events to choose from as a trigger for webhooks.</p> <p>Next I think I’ll filter triggers to particular content types. That way I can automatically deploy whenever I publish changes to a Snack, but not when I create a new Country; that could be empty until I “reference” it via a Snack.</p> <p>I think I will keep using webhooks in lieu of auto-publishing with the app, because:</p> <ol> <li>There is far more granular control.</li> <li>The webhook logs let me view detailed information on when and why the webhook was triggered.</li> </ol> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-contentful-hooks-log-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-contentful-hooks-log-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-contentful-hooks-log-s.png" alt="A list of times the webhook was fired, with a status code and 'view details' link for each" /> </picture> <p>In general I would say Contentful’s user experience around webhooks is pretty nice. There’s a fair amount of detailed things you can do with them, but they’ve laid things out in such a way that make it pretty easy for me personally to digest:</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-contentful-webhooks-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-contentful-webhooks-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-contentful-webhooks-s.png" alt="Contentful webhooks settings. There's a grid of checkboxes for various different combinations of events, a filters section, and a headers section" /> </picture> <h2 id="other-impressions-on-contentful">Other Impressions on Contentful</h2> <p>In general, I found Contentful pretty easy to use, both from a CMS interface and headless API perspective. There are a couple minor things that are odd. For example, when viewing the “Snack” content type, the “Add” button is a dropdown, forcing me to take another click to add a new snack:</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-add-snack-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-add-snack-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-add-snack-s.png" alt="The add snack button just brings up a menu of options, from which you have to select add snack again" /> </picture> <p>A split button might be more appropriate here.</p> <p>The more meaningful gap I noticed is that Contentful doesn’t have a native concept of a “repeater” field. There is <a href="https://www.contentful.com/marketplace/app/repeater/">an app for that</a>, but it’s limited to key-value pairs vs allowing you to repeat an arbitrary set of subfields (as <a href="https://prismic.io/docs/core-concepts/group">Prismic’s group field</a> does). Contentful’s play appears to be towards developer extensibility. Having built quite a few client websites in my day, though, I’d say a repeater field is worth building directly into the platform.</p> <h2 id="more-fun%2C-snacky-things">More fun, snacky things</h2> <p>To close out, I thought I’d share a few favorite details on this site.</p> <p>For awhile now, I’ve been supporting both light and dark modes on websites, but always had that follow the user’s system. I finally got around to building in a theme switcher, in case you’d prefer to view this site in a different scheme than your system:</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-theme-switcher-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-theme-switcher-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-snacks-theme-switcher-s.png" alt="A theme switcher with system, light, and dark options" /> </picture> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-themes-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-themes-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-snacks-themes-s.png" alt="The snack suggestion form rendered in light (cream, purple, and grey on white) and dark (various shades of dark purples)" /> </picture> <p>A coworker says that the dark theme reminds them of black currant candy packaging, which I am delighted by given that black currant is one of the world’s top tier candy flavors (IMHO).</p> <p>I also got way too much joy out of my tortilla chip pagination icons:</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-footer-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-footer-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-snacks-footer-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-snacks-footer-s.png" alt="Country pagination that uses a tortilla chip icon for the arrows. A footer with a pattern of geometric cheese puffs." /> </picture> <p>And who doesn’t love a cheese puff pattern? I swear my time designing at <a href="https://fuzzco.com/">Fuzzco</a> has made me incapable of designing a subtle footer. There is just too much opportunity for one last burst of fun.</p> <h2 id="check-it-out!">Check it out!</h2> <p>You can peek at the <a href="https://github.com/melanierichards/world-snacks">code on Github</a> or <a href="https://snacks.melanie-richards.com/">check out the snacks</a>. And I will always love to hear from anyone who has <a href="https://snacks.melanie-richards.com/suggest/">a snack suggestion</a>. Happy snacking! 🥨</p> Learning Log, Apr 2022 2022-05-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2204/ <p>My main side project lately is a world snacks review site, which I’m using to play around with Contentful as a headless CMS. Much of April was spent doing design-y things, and having far too much fun. Case in point, this cheese doodle footer:</p> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-cheese-doodle-footer.png" alt="A snippet of a footer area, where the background is a bright orange pattern of cheese puffs. The puffs are in C and ball shapes." /></p> <ul> <li>🌿 Off the computer, weeds rule everything around me. Now that we are “furniture complete” in our new-ish house, I’ve turned my attentions to the planters, where the weeds have recently been allowed to thrive with abandon. We had a ton of rain and a bit of sun in April, so it seems each time I look at a weed I haven’t pulled yet, it’s grown taller. Good thing I love weeding…making slow and steady progress.</li> <li>🤝 I discovered via an exercise in <a href="https://bookshop.org/books/refuse-to-choose-use-all-of-your-interests-passions-and-hobbies-to-create-the-life-and-career-of-your-dreams/9781594866265">“Refuse to Choose”</a> that community is actually pretty important to me when pursuing an interest. It’s not just about accountability, it’s sharing a purpose (however humble) and feeding into each other’s inspiration. I joke a lot about wanting “parallel play”, but I was still surprised by this revelation. Typically I see myself as an introvert who wants to go off and do her little projects. The trouble now is how to rebuild that community, during a pandemic, when everyone has Zoom fatigue.</li> <li>📚 Also in books, I’ve been in a bit of a reading slump this year. Out of the first 18 books I’ve finished (i.e., not including those I abandoned), I thought all but one were “fine” at best. I may take the advice of some co-workers and re-read a “5 star” book as a palette cleanser…or take it as a sign that I’m less into books right now and just need a breather.</li> <li>🌷 I am very picky about my lock screen vs home screen needs and made myself a couple wallpapers. You can grab them both (<a href="https://melanie-richards.com/assets/images/content/melanierichards-flowers-lock-screen.png">lock screen</a>, <a href="https://melanie-richards.com/assets/images/content/melanierichards-flowers-home-screen.png">home screen</a>) if you like! The image ratios are optimized for an iPhone 11 Pro.</li> </ul> <div class="u-limit-width l-grid l-grid--media l-grid--halves"> <img class="l-grid__item" src="https://melanie-richards.com/assets/images/content/melanierichards-2204-lock-screen.png" alt="A lock screen with a black solid wallpaper. The wallpaper has three geometric flowers displayed in a column, ranging from a soft pink to a bright red. The first flower looks vaguely daisy-ish, the second like a tulip, the third maybe like a mum." /> <img class="l-grid__item" src="https://melanie-richards.com/assets/images/content/melanierichards-2204-home-screen.png" alt="A home screen showing the three geometric flowers at the bottom of the screen this time, arranged in a row such that they avoid being overlapped by any app icons" /> </div> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://sailorhg.com/home_sweet_homepage/">Home Sweet Homepage</a></li> <li><a href="https://lovetosewpodcast.com/episodes/episode-201-beadwork-design-with-kat-brown-akootchook/">Love to Sew podcast: Beadwork &amp; Design with Kat Brown Akootchook</a></li> </ul> <h2 id="reading">Reading</h2> <h3 id="the-web">The web</h3> <ul> <li><a href="https://www.nytimes.com/2022/03/22/dining/instagram-algorithm-reels.html">Food Businesses Lose Faith in Instagram After Algorithm Changes</a>. Brute-forcing green KPI dashboards to stay relevant: not cute.</li> <li><a href="https://infrequently.org/2022/03/cache-and-prizes/">Cache and Prizes</a></li> <li><a href="https://webaim.org/blog/webaim-million-2022/">The WebAIM Million – 2022 Update</a>: the results continue to exhaust.</li> </ul> <h3 id="product">Product</h3> <ul> <li><a href="https://melissaperri.com/blog/2016/07/14/what-is-good-product-strategy">What is Good Product Strategy?</a></li> <li><a href="https://www.intercom.com/blog/rice-simple-prioritization-for-product-managers/">RICE: Simple prioritization for product managers</a></li> <li><a href="https://adamnash.blog/2009/07/22/guide-to-product-planning-three-feature-buckets/">Guide to Product Planning: Three Feature Buckets</a></li> <li><a href="https://gibsonbiddle.medium.com/6-the-glee-model-6af740bdf3b1">The GLEe Model</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.magalifranov.com/blog/6-ideas-to-fill-your-sketchbook">6 ideas to fill your sketchbook</a></li> <li><a href="https://www.mixedcolor.net/blog/2020/7/10/elemental-creativity-choosing-artforms-as-treatments">Elemental Creativity: Choosing Artforms as Treatments</a></li> <li><a href="https://www.thrillist.com/news/nation/manuscript-writing-cafe-helps-writers-finish-work">This Cafe Won't Let Writers Leave Until They Hit Their Deadlines</a>: via one of the buddies in my blog post writing group. A hint, perhaps? 😄</li> <li><a href="https://www.figma.com/blog/figjam-washi-tape/">Good ideas stick</a></li> </ul> Learning Log, Mar 2022 2022-04-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2203/ <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-cherry-blossoms-close-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-cherry-blossoms-close-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-cherry-blossoms-close-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-cherry-blossoms-close-s.jpg" alt="A close-up of light pink cherry blossoms hanging low from a tree." /> </picture> <p>Sometimes (often) when I sit down to write these monthly logs, I am at a loss for how another entire month has passed by. What the heck did I actually do with the time? Side-stepping the inevitable existentialist freakout, a few things come to mind:</p> <ul> <li>In order to play more with headless CMSes, I’m working on a world snacks review site. It combines data from <a href="https://www.contentful.com/">Contentful</a> with my all-time fave SSG <a href="https://www.11ty.dev/">Eleventy</a>. I am having the most fun time pulling in snackies and manipulating the data—and of course, consuming candy. For research purposes.</li> <li>One of the things I’ve been enjoying as a product manager at Netlify is the opportunity to don my design hat again on various little projects. I think it’s possible to wear multiple hats at any size company, if that’s enjoyable to you and beneficial to the team’s success. But I appreciate the product design team that I work with, who have made it particularly welcoming to jump in and join the party.</li> <li><a href="https://help.figma.com/hc/en-us/articles/360039238353-View-and-explore-library-analytics">Figma library analytics</a> are very cool and helped me track down an example of a component being used in situ. The Eye of Sauron sees all [instance detachments].</li> <li>I got a new Macbook for the first time since 2014, and had to spend a bit of time fixing a bunch of old Sass packages that imploded on various and sundry side projects when I cloned them to this device.</li> <li>I have been slowly, imperfectly re-establishing my running practice that fell off at the beginning of the pandemic.</li> <li>Now that it’s light after work somewhat, my fiancé and I have been talking nice early-evening walks together. Seattle at this time of year is heartbreakingly gorgeous, thanks to all the cherry blossoms in bloom. 🌸</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li>The <a href="https://mobile.twitter.com/PayGapApp">Gender Pay Gap Bot</a> retweeted companies posting about International Women’s Day, along with pay gap data, leading to a lot of corporations with egg on their faces. I recall seeing one company with equal pay.</li> <li><a href="https://twitter.com/helveticablanc/status/1503840709970841600">This beautiful, ethereal illustration</a>. Don’t know what it is, but I like it.</li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://jvns.ca/blog/2022/03/08/tiny-programs/">Some tiny personal programs I've written</a></li> <li><a href="https://www.producttalk.org/2022/03/selecting-customers-for-customer-interviews/">Ask Teresa: How Do You Select Customers for Customer Interviews?</a></li> <li><a href="https://marisamorby.com/output-vs-outcome/">Output vs. Outcome</a></li> </ul> First Impressions of Forced Colors Emulation 2022-03-14T00:00:00.000Z https://melanie-richards.com/blog/forced-colors-emulation/ <p><em>Note: this post assumes familiarity with forced colors modes styling and Windows High Contrast, now called “Contrast Themes” in Windows 11. Refer to <a href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/">“Styling for Windows high contrast with new standards for forced colors”</a> for a primer.</em></p> <details> <summary>Brief summary of forced colors modes</summary> <p>Forced colors modes enable a person to view digital content rendered in exactly the color scheme of their choosing. Browsers that support forced colors modes render all web content in the user’s colors, taking HTML semantics into account in order to apply the right semantic colors. Web developers don’t need to do anything for colors to be forcibly applied, but can optimize their web content for best styling in this mode.</p> </details> <p>Recently I was delighted to learn that <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools#emulate-forced-colors-mode">forced colors emulation</a> is available in the Chromium DevTools, as of Microsoft Edge v98! 🥳 I’d been eagerly anticipating this moment for quite some time: when we were first working on forced colors in Chromium, the Microsoft Edge web platform and DevTools teams were excited about the prospects of bringing emulation to developers on any OS platform. No longer would you need a PC or test tooling like <a href="https://assistivlabs.com/">Assistiv Labs</a> in order to understand what your web content might look like in Windows High Contrast (“Contrast Themes” on Windows 11). Developers on Windows also wouldn’t need to force their entire system into a contrast theme in order to test their content. And now: emulation is <a class="footnotes__ref" href="https://melanie-richards.com/blog/forced-colors-emulation/#on-patience-note" id="on-patience-ref" aria-describedby="footnotes-label" role="doc-noteref">finally here!</a></p> <h2 id="playing-with-the-new-feature">Playing with the new feature</h2> <p>I now work at Netlify, and learned that forced colors emulation was available right before an internal hack day. That posed the perfect opportunity to audit our components for forced colors mode optimization, and try the new emulation feature. Several colleagues joined the project, to my delight and the project’s benefit; all of them have Macbooks and were game to test drive the new emulation tooling.</p> <p>After a quick demo of how Contrast Themes actually looks and feels on a Windows machine, we set to work auditing components using the Chromium DevTools. To use forced colors emulation, you would navigate to the “Rendering” tab in DevTools &gt; “Emulate CSS media feature forced-colors” &gt; Select “forced-colors: active”.</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-emulation-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-emulation-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-emulation-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-emulation-s.png" alt="The DevTools pulled up on a Netlify page, showing the Rendering tab and the Emulate forced colors setting" /> </picture> <p>The page will now behave as if this media query evaluates as true. If you’re in light mode, a forced light theme will be applied. Change over to dark mode, and you’ll get a white-on-black theme:</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-netlify-hc-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-netlify-hc-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-netlify-hc-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-netlify-hc-s.png" alt="The Netlify page rendered in both a high contrast black-on-white theme, and a black-on-white theme" /> </picture> <p>These themes basically follow a user agent default stylesheet. If you pull up <a href="https://www.w3.org/TR/css-color-4/#css-system-colors">System Colors</a> in the CSS Color Level 4 spec and enable forced colors emulation, you’ll get a palette of system color swatches:</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-spec-palette-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-spec-palette-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-spec-palette-s.png" alt="A list of system colors in the CSS spec, with swatches next to each. There is a lot of white, black, and blue." /> </picture> <p>Note that the array of colors actually used by Contrast Themes on Windows is smaller than the list above:</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-contrast-theme-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-contrast-theme-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-contrast-theme-s.png" alt="A Windows Contrast Theme showing swatches only for background, text, hyperlink, inactive text, selected text, buttons" /> </picture> <p>Here’s an example of that theme being applied to my operating system and browser on Windows:</p> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-os-night-sky-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-os-night-sky-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-os-night-sky-s.png" alt="My entire OS, including browser with web content, rendered in a white on black contrast theme with blue, purple, and yellow accents" /> </picture> <p>Developers and designers should limit themselves to the following list for now:</p> <ul> <li><code>CanvasText</code> and <code>Canvas</code></li> <li><code>LinkText</code></li> <li><code>ButtonText</code> and <code>ButtonFace</code></li> <li><code>HighlightText</code> and <code>Highlight</code></li> <li><code>GrayText</code></li> </ul> <h2 id="moar-themes%2C-please!">Moar themes, please!</h2> <p>I am ecstatic that forced colors emulation is available to all today, and I would say the main limitation is precisely that a default user agent stylesheet is applied, for a few reasons:</p> <h3 id="doesn%E2%80%99t-give-an-accurate-sense-of-what-a-user-will-experience">Doesn’t give an accurate sense of what a user will experience</h3> <p>The beauty of the Contrast Themes feature on Windows is that it enables the user to select whatever theme they wish. Forced colors are very useful for low vision individuals, and many people do use the out-of-the-box contrast themes. However, users can create any combination of colors, and may define a color scheme that has <em>lower</em> contrast than is typical for web content.</p> <p>That said, I doubt—without backing data—that there are many if any users experiencing the web in a color palette like the user agent stylesheet. Certainly there are folks using black-on-white themes, but there will be differences in some of the other semantic colors, such as highlights, buttons, and disabled text.</p> <p>This means that the color scheme you experience through emulation won’t look much like what a person using forced colors mode experiences day-to-day. It does, however, force (heh) you as the developer/designer to think about how you might design for this mode in a maximally constrained palette, because so many of the semantic colors end up rendering the same.</p> <h3 id="hard-to-see-some-details">Hard to see some details</h3> <p>Which one of these fields is focused?</p> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fields-hc.png" alt="Two form fields with very slightly different border colors, and no other styling differences. The text values read 'I am the humble text input' and 'Me too, me. too.'" /> </picture> <p>It’s hard to tell, because the color palette uses a dark purple for the highlight color, which is hard to discern from the black border at rest (the colors for both these states have been automatically applied by the browser rendering engine). Having these colors configured so closely in a forced colors palette is unusual, though again: it does force you to consider whether something other than color should be used to disambiguate state. Ensuring that focus <code>outline</code>s are preserved would help.</p> <h3 id="ambiguity-on-used-color">Ambiguity on used color</h3> <p>SVG elements <a href="https://drafts.csswg.org/css-color-adjust/#forced-color-adjust-prop">retain their original colors in forced colors modes</a>, because these can be complex illustrations or documents where such color is important to meaning or entertainment.</p> <p>In a simple black-on-white theme, you might think that a (non-clickable) SVG icon is rendering with a black fill because it’s picking up the user’s <code>CanvasText</code> color correctly. It is actually rendering in its original <code>fill</code> color. This may cause legibility problems for your visitors with themes that do not use black text, particularly in dark forced colors themes.</p> <p>For this reason, I recommend even when testing with the full Contrast Themes feature on a PC:</p> <ul> <li>Test with both light and dark forced colors themes</li> <li>Test using a custom scheme with “funky” colors. Never use purple and fuschia in your web content? Put ‘em in a test theme in Contrast Themes. Any issues will be glaringly obvious.</li> </ul> <p>To work around this with emulation, you could add some funky colors to a test stylesheet or inline in the DevTools.</p> <h3 id="a-proposed-resolution">A proposed resolution</h3> <p>The DevTools probably don’t need to go so far as to support completely custom forced color schemes, but it would be nice to have a small selection of themes to help you cover light and dark forced colors, including colors that are less likely to be used in most web content.</p> <p>Based on <a class="footnotes__ref" href="https://melanie-richards.com/blog/forced-colors-emulation/#browser-architecture-note" id="browser-architecture-ref" aria-describedby="footnotes-label" role="doc-noteref">browser architectures</a> at play here, the way this was implemented—plumbing in light/dark user agent default stylesheets—makes sense as a first pass. DevTools processes currently have to communicate only that the document should be rendered in a forced colors mode. The renderer process can go ahead and apply forced colors accordingly, using the user agent stylesheet in the absence of a user color scheme detected on the system level.</p> <p>With theme switching, the DevTools would likely need to communicate a key for the theme that should be used; some logic would need to be added to the rendering engine to draw from a third source of forced colors (these being additional user agent stylesheets that would also need to be stored).</p> <h2 id="in-conclusion">In conclusion</h2> <p>There is still some work left to do before forced colors emulation is <em>great</em>, but the addition of this feature is good news. Developers on non-Windows OS platforms can finally play around with optimizing their web content for forced colors modes, without the use of VPNs or test machines. You may still want to use testing tools like <a href="https://assistivlabs.com/">Assistiv Labs</a> to dive deeper into forced colors, but so long as you are aware of the above caveats, DevTools emulation is a great place to start. Thank you to all who contributed on this feature, and making accessibility testing more available to all through emulation!</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="on-patience-note" class="footnotes__list-item" role="doc-endnote">It should be stated that in the iterim, the MS Edge DevTools team—with the Chromium community—continuously invested in improving the accessibility of the DevTools themselves. A worthy priority. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/forced-colors-emulation/#on-patience-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li> <li id="browser-architecture-note" class="footnotes__list-item" role="doc-endnote">Apologies to previous colleagues for any over-simplifications or misrememberings of browser architecture here! <a class="footnotes__back-link" href="https://melanie-richards.com/blog/forced-colors-emulation/#browser-architecture-ref" aria-label="Back to reference 2" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, Feb 2022 2022-03-09T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2202/ <p>The most important and devastating thing to come out of February is Russia’s attack on Ukraine. It is so incredibly frustrating and heartbreaking that people are dying, over one egomaniacal man’s ideas of what his legacy should be. I wish that all people could be safe and happy and free from their oppressors, and am thinking of the Ukrainian people and their loved ones over these past couple weeks.</p> <p>If you’re feeling powerless and want to help:</p> <ul> <li>Netlify (my employer) is <a href="https://www.netlify.com/donation-matching/">doing donation matching</a> to a few 501(c)(3) orgs helping Ukraine</li> <li><a href="https://how-to-help-ukraine-now.super.site/">Real ways you can help Ukraine as a foreigner</a> is a crowdsourced list of resources, contextualized for wherever you are</li> <li><a href="https://standwithukraine.live/peace-protests/">Find a peace protest in your city</a></li> </ul> <h2 id="things-of-lesser-consequence">Things of lesser consequence</h2> <ul> <li>I got engaged! 🥰</li> <li>I realized early on in the month that I have a touch of “community” fatigue: I belong to many communities related to my hobbies facets of my identity—multiple Slacks, multiple Discords, multiple subreddits, Instagram, and Twitter—and it’s getting to feel like too much. Time to prune. ✂️</li> <li>The “many communities” thing is also somewhat a symptom of being a magpie for identities: I have been a designer / front-end developer ⇒ a web platform person embedded in accessibility, privacy, and HTML ⇒ a product manager on middleware developer tooling/platforms; I weave, and knit, and sew; I want to draw more again...sometimes I feel the need to let go of an old identity in order to make room for future growth. That said, 1) it’s helpful to keep that context, being a PM focused on the needs of web makers and 2) I don’t wanna.</li> <li>I joined <a href="https://mobile.twitter.com/i/spaces/1YpKkZpZrRjxj">a Twitter “Space”</a> where folks were talking about side projects and I love something Charlie Gerard said. Her new side projects are initiated by a question she poses to herself; she knows when it’s time to stop when she’s answered the question she started with.</li> <li>Episode 351 of Creative Pep Talk (<a href="https://overcast.fm/+E_xDfNQTc">Afraid You’ll Never Catch Up? Give Up Trying and Do This Instead</a>) is also relevant. Andy suggests doing project-based learning: observe others’ work that <em>you</em> like and wish you were making; identify the next most specific skill you want to learn (i.e. what <em>exactly</em> does that person do well?); and bake that into your next project. For product management it can be a little harder to do that observational bit, but the general strategy still applies.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <p><a href="https://www.instagram.com/sculpttheworld">Sculpt the World</a>: I’m a sucker for land art</p> <h2 id="reading">Reading</h2> <ul> <li><a href="https://www.baldurbjarnason.com/2022/i-cant-keep-up-with-web-dev/">How to keep up with web development without falling into despair</a></li> <li><a href="https://www.zachleat.com/web/trailing-slash/">Trailing Slashes on URLs: Contentious or Settled?</a></li> <li><a href="https://www.nytimes.com/2022/02/13/opinion/culture/pandemic-languishing-behavioral-activation.html">You’ve Done Self Care. You’ve Languished. Now Try This.</a></li> <li><a href="https://www.rnz.co.nz/news/on-the-inside/462163/altruism-in-birds-magpies-have-outwitted-scientists-by-helping-each-other-remove-tracking-devices">Altruism in birds? Magpies have outwitted scientists by helping each other remove tracking devices</a></li> </ul> Learning Log, Jan 2022 2022-02-02T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2201/ <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-bookshelf-2022-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-bookshelf-2022-s.jpg" alt="Industrial-style bookcase with five wood shelves and iron piping on the sides. It’s chock full of books of various genres (some sections rainbow ordered), a large Sonos device, and with a couple knickknacks in front of the books." /> </picture> <p>Late in January we moved into our new/first house! It’s been a whirlwind of a month between all the packing and unpacking and life administrative tasks, as well as getting things off the ground for this quarter at work. I am looking forward to soon relaxing in a completely unpacked home.</p> <h2 id="improving-my-figma-chops">Improving my Figma chops</h2> <p>When I was a designer/developer full-time, I was making websites in Illustrator. I’ve played around with Figma on personal projects or on small things for work, but really hadn’t gotten the opportunity to embrace the design-at-scale, team-centric features that are really the force multipliers behind the product.</p> <p>In the past week or so, I’ve made much more of a concerted effort to actually learn Figma. A random collection of thoughts on this:</p> <ul> <li>I usually learn by doing. If I <em>am</em> following a tutorial, I like to read docs or a blog post, rather than watch a video. I’m realizing that 1) learning UI is <em>the</em> place where video walkthroughs are WAY more helpful to me, and 2) Figma is one of those products where I will absolutely miss or take a long time to discover time-saving features if I just mess around with things as I go. For example: <ul> <li>I feel like a buffoon for not realizing there’s a keyboard shortcut to zoom to a selection (<code>SHIFT</code> + <code>2</code>).</li> <li>I wouldn’t have necessarily discovered particular Smart Selection features.</li> </ul> </li> <li>I have <em>clearly</em> been under-utilizing Constraints.</li> <li>I learned so much about libraries, styles, components, and variants in the past week. Shout out to my colleague <a href="https://kuka.design/">Kristy Marcinova</a> for some 🔥 tips on this, and also for letting me know you <em>can</em> have more than one prototype “flow” per Page.</li> <li>Despite some initial learning curves, Figma would’ve saved me <em>so</em> much time when I was a designer. Web designers today—who have access to Figma to do their work—are very fortunate.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li>Seeing other peoples’ <a href="https://mobile.twitter.com/williamapan/status/1477476556025077761">Genuary submissions</a> made me wish afresh that I had dabbled in generative art.</li> <li><a href="https://neal.fun/lets-settle-this/">Let’s Settle This</a>: vote on the internet’s age-old debates.</li> <li>Deeply enamored with the type on <a href="https://ryanbugden.com/Strawberry-Western">this brand for Strawberry Western</a>, by Ryan Bugden.</li> <li><a href="https://jigsawpuzzles.io/">Play jigsaw puzzles online!</a></li> </ul> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://ericwbailey.design/writing/where-do-you-put-spacing-on-design-system-components/">Where do you put spacing on design system components?</a></li> <li><a href="https://katydecorah.com/code/build-your-metadata-library/">Build your metadata library</a></li> <li><a href="https://scottohara.me//blog/2022/01/20/divisive.html">Div divisiveness</a></li> <li><a href="https://mxb.dev/blog/make-free-stuff/">Make Free Stuff</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.theguardian.com/environment/2021/nov/18/ten-ways-confront-climate-crisis-without-losing-hope-rebecca-solnit-reconstruction-after-covid">Ten ways to confront the climate crisis without losing hope</a></li> <li><a href="https://projects.seattletimes.com/2021/seattle-kraken-ice-hockey-basics-101/">A Kraken fan’s visual guide to hockey and the NHL</a></li> </ul> Learning Log, Dec 2021 2021-12-31T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2112/ <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-homebuyers-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-homebuyers-s.jpg" alt="My boyfriend and I holding up keys in front of a cream-colored farm-style house with black and white trim. There is heavy snow on the roof and small lawn in front of the house." /> </picture> <p>The biggest development this month: my significant other and I bought a house! 🏡 We’ve been working on this the past couple months and closed juuuust before the end of the year. Being a part of the millennial generation, becoming a homeowner did not seem assured, especially in a market as bonkers as Seattle. We got incredibly lucky in our search and we’re so excited to (continue to) build a life together in our new home. Friends, please come visit when public health allows! <em>(Aside: should you find yourself in the market around Seattle, we can recommend an agent and lender who were really chill but helpful partners to have as first-time homebuyers.)</em></p> <h2 id="future-facing-fridays">Future-Facing Fridays</h2> <p>Workwise, I just reached my 90-day milestone at Netlify before the holiday break. It’s been super fun being in sponge mode, strategizing about how we can continue to improve the developer workflow in the coming months.</p> <p>Something I’ve been considering as more projects move into execution mode is how to keep a healthy balance with high-level strategic work. I don’t know that I’ve met an [individual contributor] product/program manager who feels they have enough time to focus on strategy. Ironic and inadvisable, given that setting a well-informed strategy is core to the PM role.</p> <p>IMHO, the root cause of PMs over-indexing on execution lies in unrealistic expectations as to how many investments can meaningfully progress simultaneously—at least at a high bar of quality. As I’m still fairly new to the company, now is the perfect time to set an intentional rhythm of execution.</p> <p>In addition to not spreading myself too thin, I’ve decided in the new year I’d like to try out what I’m calling “Future-Facing Fridays”. I’ll make sure to carve out time on Fridays to feed the team’s future work:</p> <ul> <li>Conducting or planning customer and market research</li> <li>Reviewing customer feedback/bugs and seeking out thematic opportunities</li> <li>Doing some early thinking about higher-level strategy or the next period’s roadmap</li> <li>Laying the groundwork for the next known iron in the fire</li> <li>Etc.</li> </ul> <p>Will see how this goes! I always seem to be tinkering with how to make myself more productive and the outcome of my work more effective.</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://twitter.com/samdylanfinch/status/1468126373361291264">This Twitter thread on so-called self improvement</a></li> <li><a href="https://messwithdns.net/">Mess with DNS</a>: a playground for learning DNS!</li> <li><a href="https://twitter.com/nyeusi_waasi/status/1473668312101961736">Bolivian architecture</a></li> <li><a href="https://twitter.com/EllaMcHawk/status/1476135833103175686">Some highly stylized cookies</a>. People are amazing.</li> </ul> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://tink.uk/thoughts-on-skin-tone-and-text-descriptions/">Thoughts on skin tone and text descriptions</a></li> <li><a href="https://daverupert.com/2021/12/sustaining-maintaining/">Sustaining Maintaining</a></li> </ul> <h3 id="the-web">The web</h3> <ul> <li><a href="https://iconmap.io/blog#speed-file-size--resolution">We Analyzed 425,909 Favicons</a></li> <li><a href="https://li.substack.com/p/building-the-middle-class-of-the">Building the Middle Class of the Creator Economy</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.insidehook.com/article/art/jane-rosenberg-americas-courtroom-sketch-artist">How Jane Rosenberg Became America’s Most Celebrated Courtroom Sketch Artist</a></li> <li><a href="https://www.theatlantic.com/ideas/archive/2021/12/how-care-less-about-work/620902/">How to Care Less About Work</a>: great article on embracing hobbies for no reason other than joy.</li> <li>Fascinating point from <a href="https://www.data-to-viz.com/caveat/spider.html">this article on the dangers of spider charts</a>: just ordering the categories differently on a spider chart can have meaningful impact on the visual shape of the data, and thus human perception of said data.</li> <li><a href="https://www.tofugu.com/japanese/kosoado/">How to Use <span lang="ja">こそあど</span> Words to Refer to Things You Can’t See</a></li> </ul> 2021 in Review 2021-12-21T00:00:00.000Z https://melanie-richards.com/blog/2021-review/ <div class="l-grid l-grid--media l-grid--thirds"> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-rahul-clive-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-rahul-clive-s.jpg" alt="A man in a puffy coat grins while placing his hands on the proverbial shoulders of a goofy-looking snowman" /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-ivy-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-ivy-s.jpg" alt="The whole frame is full of deep green ivy, upon which are sprinkled pale pink petals" /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-anenomes-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-anenomes-s.jpg" alt="The sand of a beach at a high tide. The waves have made impressions in the sand, and there are lots of little circular spots where anenomes are buried in the sand." /> </picture> </div> <p class="caption">Rahul proudly shows off his snow-son / Cherry blossom petals on ivy in the neighborhood / Anenomes on the beach at Discovery Park</p> <p>Well, Year 2 of the pandemic is in the books. Despite the heaviness of the past year—and the intermittent moments at which I process anew everything we’ve been collectively going through—I’ve been feeling overwhelmed with gratitude as of late. Work is interesting and fulfilling; I am surrounded, near and far, by people I love; and I am currently working on an exciting personal life milestone. I feel somewhat sheepish about expressing gratitude in public, given that good and ill fortune visit us unevenly and at different times. That said, I figure sharing positivity and passing along some of that good fortune in more tangible ways can’t hurt at times like these.</p> <h2 id="highlights">Highlights</h2> <ul> <li>I wrapped up my time on the Microsoft Edge web platform, where I’ve spent the better part of 7 years contributing to the web’s evolution as an even-more-capable platform. Some of the last projects I collaborated on are <a href="https://blogs.windows.com/msedgedev/2021/06/01/available-for-preview-automatic-https-helps-keep-your-browsing-more-secure/">Automatic HTTPS</a>, and more customizable HTML controls; I still participate in those discussions in <a href="https://open-ui.org/">Open UI</a>.</li> <li>In September I started a new role at <a href="https://www.netlify.com/">Netlify</a>, again in product management. The Netlify platform was a revelation to me in my own personal web development practice, so it’s really exciting to be able to contribute back to that ecosystem.</li> </ul> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2021-projects-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2021-projects-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2021-projects-s.png" alt="A collage of screenshots from my fiber blog, seasons site, and drawing a generator" /> </picture> <p>I shipped a couple small side projects in 2021:</p> <ul> <li><a href="https://fiber.melanie-richards.com/">Fiber blog</a>, which I update with my sewing, knitting, and weaving projects as I complete them.</li> <li><a href="https://seasons.melanie-richards.com/">SEA — Seasons</a>, which is all about living more seasonally and is optimized to the Seattle area.</li> <li><a href="https://whattodraw.melanie-richards.com/">What to Draw</a>, continuing my need to pursue more analog creative hobbies.</li> </ul> <div class="l-grid l-grid--media l-grid--thirds"> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-kayak-front-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-kayak-front-s.jpg" alt="The front of a lime green kayak in a narrow pass of water. Wind is picking up small waves." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-bainbridge-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-bainbridge-s.jpg" alt="Big logs of driftwood on an empty beach. There are plenty of clouds in a sunny sky, and evergreens off in the distant." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-ikea-pegboard-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-ikea-pegboard-s.jpg" alt="A white pegboard hung above a desk. On the pegboard are hooks bearing scissors and rotary cutters; jars of pencils, pens, and brushes; and a couple shelves holding little figurines and a Pomodoro clock." /> </picture> </div> <p class="caption">Kayaking on the Fremont cut / A beach on Bainbridge Island / Finally got the pegboard up</p> <ul> <li>I wrote <a href="https://www.notion.so/blog-0649715ded4c4ebd9b0a082f846069be">20 blog posts</a>, including my monthly Learning Logs. <a href="https://melanie-richards.com/blog/currentcolor-svg-hcm/">“CurrentColor SVG in forced colors modes”</a> seems to be my most-read 2021 blog post, and <a href="https://melanie-richards.com/blog/css-grid-sticky/">“Sticky CSS Grid Items”</a> is still going strong.</li> <li>Baby’s first podcast episode: I went on <a href="https://www.smashingmagazine.com/2021/02/smashing-podcast-episode-35/">Smashing Podcast</a> with Steph Stimac to talk about customizable form controls. Thanks again for having us, Drew.</li> <li>I spoke about web platform accessibility at An Event Apart’s <a href="https://aneventapart.com/event/spring-summit-2021">Spring Summit</a> and <a href="https://aneventapart.com/event/fall-summit-2021">Fall Summit</a>. This was my first time speaking with AEA, and unsurprisingly this crew runs great events. Everything went smoothly for me as a speaker, and AEA draws out a great audience: I loved observing the chat while my talk was live, seeing attendees sharing knowledge and encouraging each other to keep going with web accessibility!</li> <li>Outside of work and the web, I’m most grateful for having gotten to see my family again. I live in the opposite corner of the country from them, and visited them for the first time in a year and a half in June: when we were vaccinated, people were spending more time outside, and things were starting to look a little more hopeful. Of course, we are now 6 months wiser on that front, but being able to see my niece for her 2nd birthday and have everyone stay healthy was priceless.</li> </ul> <h2 id="media">Media</h2> <h3 id="books">Books</h3> <p><a href="https://www.goodreads.com/review/list/2236850?shelf=2021">I read 74 books this year!</a> That’s a new personal high, which is funny considering I <a href="https://www.goodreads.com/user_challenges/25447102">set my Goodreads Reading Goal</a> to <code>1</code> this year. Over the past year I’ve been working on reducing my “own but unread” piles, AND have really taken advantage of the physical library branches opening back up again. So many stacks of books merrily piled on the checkout plate.</p> <p>Here’s <a href="https://bookshop.org/lists/2021-favorite-books-d5a6bf98-8d20-486d-a9ba-cc9973c095d3">a few favorite books</a> I read this year (<a class="footnotes__ref" href="https://melanie-richards.com/blog/2021-review/#affiliate-note" id="affiliate-ref" aria-describedby="footnotes-label" role="doc-noteref">disclosure</a>):</p> <ul> <li><em><a href="https://bookshop.org/a/15644/9781631494512">American Fire</a></em> by Monica Hesse</li> <li><em><a href="https://bookshop.org/a/15644/9781571313560">Braiding Sweetgrass</a></em> by Robin Wall Kimmerer</li> <li><em><a href="https://bookshop.org/a/15644/9781250177964">Check, Please!</a></em> by Ngozi Ukazu</li> <li><em><a href="https://bookshop.org/a/15644/9780062379276">The Cooking Gene</a></em> by Michael W. Twitty</li> <li><em><a href="https://bookshop.org/books/djinn-patrol-on-the-purple-line/9780593129289">Djinn Patrol on the Purple Line</a></em> by Deepa Anappara</li> <li><em><a href="https://bookshop.org/a/15644/9780374159122">Four Thousand Weeks</a></em> by Oliver Burkeman</li> <li><em><a href="https://bookshop.org/a/15644/9781250767769">The Library of the Dead</a></em> by T. L. Huchu: there are some world-building elements I would’ve liked to see developed more, but the story was quite unique</li> <li><em><a href="https://bookshop.org/a/15644/9781626251137">Rewire Your Anxious Brain</a></em> by Catherine M. Pittman, Elizabeth M. Karle</li> <li><em><a href="https://bookshop.org/a/15644/9781250027436">Shadow and Bone</a></em> by Leigh Bardugo: I don’t think I’ve seen another fictional world based on Russia before.</li> <li><em><a href="https://bookshop.org/a/15644/9781984880987">The Thursday Murder Club</a></em>, <em><a href="https://bookshop.org/a/15644/9781984880994">The Man Who Died Twice</a></em> by Richard Osman</li> <li><em><a href="https://bookshop.org/a/15644/9780062968944">Winter Counts</a></em> by David Heska Wanbli Weiden</li> </ul> <h3 id="movies">Movies</h3> <p>I watched <a href="https://letterboxd.com/somelaniesaid/films/diary/for/2021/">29 movies</a> this year, but don’t remember a whole ton about them. I seem to have most appreciated <a href="https://letterboxd.com/film/his-house/">His House</a>, <a href="https://letterboxd.com/film/i-care-a-lot/">I Care a Lot</a>, and <a href="https://letterboxd.com/film/promising-young-woman/">Promising Young Woman</a>. Definitely recommend checking trigger warnings on these, by the way.</p> <h3 id="music">Music</h3> <p>This summer I switched from Spotify to Tidal due to better outcomes (💰) for artists. <a href="https://listen.tidal.com/playlist/1a990b14-306c-420a-a959-7afa2ecc4da4">2021 — Tracks</a> is a compilation of the songs I particularly liked or listened to on repeat this year:</p> <div style="margin: 2rem auto;" class="u-limit-width"> <div style="position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%;"><iframe src="https://embed.tidal.com/playlists/1a990b14-306c-420a-a959-7afa2ecc4da4" frameborder="0" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 1px; min-height: 100%; margin: 0 auto;"></iframe></div> </div> <p>Definitely continuing on my “ladies of boygenius” kick. A couple albums that got a lot of airtime include:</p> <ul> <li><em><a href="https://listen.tidal.com/album/175149281">Jubilee</a></em> by Japanese Breakfast</li> <li><em><a href="https://listen.tidal.com/album/114041416">Immunity</a></em> by Clairo (thank you, <em>Mare of Easttown)</em></li> <li><em><a href="https://tidal.com/browse/album/173654268">Little Oblivions</a></em> by Julien Baker</li> <li><em><a href="https://listen.tidal.com/album/135629244">Punisher</a></em> by Phoebe Bridgers</li> </ul> <h3 id="podcasts">Podcasts</h3> <p>I wish I listened to more music, because I end up spending a lot of podcasts! Particularly when doing chores. A couple I listened to a lot this year:</p> <ul> <li><a href="https://www.currentlyreadingpodcast.com/">Currently Reading</a>, my laundry-folding soundtrack</li> <li><a href="https://lovetosewpodcast.com/">Love to Sew</a></li> <li><a href="https://maximumfun.org/podcasts/reading-glasses/">Reading Glasses</a>, for hardcore cleaning</li> <li><a href="https://bookriot.com/listen/shows/readordead/">Read or Dead</a></li> </ul> <p>Yes…there’s a theme here…</p> <h2 id="2022">2022</h2> <p>No Resolutions for the next year, but in the next couple of months I want to:</p> <ul> <li>Continue learning at work, helping to keep web teams productive on the Jamstack.</li> <li>Work my way back towards a pre-pandemic level of fitness. 😬</li> <li>Keep finding joy in my analog creative hobbies and cross <a href="https://fiber.melanie-richards.com/making-plans-fw-2021/">some of my fiber craft goals</a> off the list!</li> </ul> <p>Hope you have a delightful end to your year, and best wishes to you and your loved ones in 2022!</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="affiliate-note" class="footnotes__list-item" role="doc-endnote">Disclosure: I’m an affiliate of Bookshop.org. Any purchases you make using my link will earn me (and local bookstores!) a small commission. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/2021-review/#affiliate-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, Nov 2021 2021-12-04T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2111/ <p>In November I spent much of my free time on an exciting but time-consuming life task/goal (being vague here by design), so this will be a fairly light learning log. I’ve been doing some knitting here and there, and a teensy bit of drawing, but I am really feeling the itch of not having a side project in the works at the moment. I do really love making things.</p> <p>Completed just a couple webby administrative tasks:</p> <ul> <li>Added <a href="https://github.com/calibreapp/image-actions">Calibre Image Actions</a> to my <a href="https://fiber.melanie-richards.com/">fiber blog</a>, which does a lovely job of substantially compressing images while keeping quality high. I also attempted to add it to my main site, but because the action currently updates all images that match the supplied path (vs just the image files that were <em>actually</em> changed in the given PR), the action timed out for me. Too many darn images. Subscribed to <a href="https://github.com/calibreapp/image-actions/issues/92">this request to optimize only changed files</a>, and will try again if that update lands. I don’t currently know enough about Github actions to volunteer contributing towards the change myself…yet, anyway!</li> <li>Added highlights for <a href="https://highlights.melanie-richards.com/book/four-thousand-weeks/"><em>Four Thousand Weeks</em> by Oliver Burkeman</a>. I thought about and started implementing general reading logs on the highlights site, but ended up deciding against it. I haven’t decided yet how I want to store a log of all the books I’ve read for posterity. Assuming I’ll care about that when I’m 80, 90.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li>[Video] <a href="https://www.adobe.com/max/2021/sessions/na-keeping-a-sketchbook-for-fun-and-inspiration-s400.html">Keeping a Sketchbook for Fun and Inspiration</a></li> <li>I forgot about Aleia’s snails! Snails set up as if they’re in the <a href="https://www.instagram.com/reel/CWQvM_AjQlG/?utm_medium=copy_link">Great British Bakeoff competition</a>, and <a href="https://www.instagram.com/reel/CQZgCvQDGWH/">snails in da club</a> (music is a special treat).</li> <li><a href="https://twitter.com/depthsofwiki/status/1463637178509139968">Onfim, the younger elder</a>. <a href="https://en.m.wikipedia.org/wiki/Onfim">Direct Wikipedia article</a>.</li> <li><a href="https://twitter.com/Franrekk/status/1463453463107579912">How to make coolio patterns</a>. Image alt: draw a right angle triangle, draw some squiggles [in it], colour em, flip and combine [two of the triangles into a square], repeat, keep repeating until it looks cool.</li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://devbizops.substack.com/p/purposeful-side-projects">Purposeful Side Projects</a></li> <li><a href="http://www.burieddiamond.com/blog/2021/11/3/a-week-of-knits-part-2-learnings-from-a-week-of-sewing-simple-knit-garments">This post on sewing with knits</a>; clever idea of using a ribbon as neck stabilizer.</li> </ul> Learning Log, Oct 2021 2021-11-06T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2110/ <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-seward-rainier-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-seward-rainier-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-seward-rainier-s.jpg" alt="Mt. Rainier, a snowy mountain, as glimpsed behind two hills full of trees, blue lake water, and in the foreground, a tangle of bushes." /> </picture> <p class="caption">Mt. Rainier from Seward Park on Halloween weekend.</p> <p>Mid-October marked my first official month at Netlify! I’m having a ton of fun strategizing on how to help web teams be productive on the Jamstack and the Netlify platform. It’s interesting engaging with web developer needs at a different level than the web platform, where I had been for a few years. After navigating the long wait for consensus-building that is the standards process, it’s freeing to be in a position where you can just…ship things. That consensus-building is of course an important protection for the web platform, and I’m still a part of it via the <a href="https://open-ui.org/">Open UI Community Group</a>.</p> <p>At home I’ve been doing some organization work, i.e. filing the mess of sketchbooks and journals into some linen boxes, and finally putting up a pegboard to house some of my drawing and sewing supplies:</p> <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pegboard-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pegboard-s.jpg" alt="A white pegboard hung above a desk. On the pegboard are hooks bearing scissors and rotary cutters; jars of pencils, pens, and brushes; and a couple shelves holding little figurines and a Pomodoro clock." /> </picture> <picture class="u-limit-width"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-journal-piles-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-journal-piles-s.jpg" alt="Piles and piles of journals and sketchbooks, all haphazardly thrown on top of each other." /> </picture> <p>I may or may not have also recently bought yet another new sketchbook (shhh). Expirementing with what paper I like best for Posca paint markers.</p> <p>Other recent happenings:</p> <ul> <li><strong>Blog posts:</strong> wrote about <a href="https://melanie-richards.com/blog/currentcolor-svg-hcm/">CurrentColor SVGs in forced color modes</a>.</li> <li><strong>Side projects:</strong> finished a <a href="https://whattodraw.melanie-richards.com/">drawing idea generator</a> that uses serverless functions, and <a href="https://melanie-richards.com/blog/drawing-idea-generator/">wrote about it here</a>.</li> <li><strong>Fiber art:</strong> put together a list of <a href="https://fiber.melanie-richards.com/making-plans-fw-2021/">things I want to make in fall/winter</a> and finished up a <a href="https://fiber.melanie-richards.com/mug-rug/">woven mug rug</a>.</li> <li><strong>Japanese:</strong> have almost entirely fell off of my kanji-learning practice, but did read <a href="https://www.tofugu.com/japanese/uchi-soto/">this article on uchi and soto</a> and found it quite fascinating.</li> <li><a href="https://twitter.com/soMelanieSaid/status/1451944216964313089">Participated in a 24-hour readathon</a> again and read for about 8 hours, my personal best.</li> <li>Dreaming of an ASMR channel that’s just artists peeling off the masking tape from the edges of their paintings.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://caninclude.glitch.me/">Can Include</a>: reference material for HTML element content models.</li> <li><a href="https://twitter.com/thecaitcode/status/1451353379133820928?s=21">Ideas for screen-less evening activities</a></li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://css-tricks.com/cascade-layers/">Cascade Layers?</a></li> <li><a href="https://www.wired.com/story/to-do-apps-failed-productivity-tools/">Hundreds of Ways to Get S#!+ Done—and We Still Don’t</a>. This article captures much of the reasons I’ve settled on paper for task management: infinitely flexible, and having to rewrite tasks forces you to consider whether they are actually important.</li> <li><a href="https://sarajbenincasa.medium.com/how-to-get-unstuck-come-back-97be237824d8">How to Get Unstuck: Come Back</a></li> <li><a href="https://sarajbenincasa.medium.com/how-to-get-unstuck-be-a-student-969856f514e8">How to Get Unstuck: Study</a></li> <li><a href="https://daverupert.com/2021/10/pre-publish-blogging-rituals/">My pre-publish blogging rituals</a></li> <li><a href="https://bulletjournal.com/blogs/bulletjournalist/embracing-messy-inconsistent-journaling">Embracing Messy &amp; Inconsistent Journaling</a></li> </ul> New project: What to Draw 2021-10-19T00:00:00.000Z https://melanie-richards.com/blog/drawing-idea-generator/ <p>Lately, I’ve wanted to draw more, but don’t always have ideas on what to draw. At the same time, I’ve wanted to play around with Netlify functions (full disclosure: I’m currently a Netlify employee). What do we do when we have web dev skills? Solve all of our problems by building a website!</p> <a class="c-web-preview" href="https://whattodraw.melanie-richards.com/"> <picture> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-what-to-draw-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-what-to-draw-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-what-to-draw-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-what-to-draw-s.png" alt="A website titled ’What to Draw’. It displays a photo with an alpine lake scene ringed with craggy mountains, and a button to try another photo." /> </picture></a> <p><a href="https://whattodraw.melanie-richards.com/">What to Draw</a> is a teeny site that provides photographic inspiration for your next drawing. Click a button and fetch a random photo from the <a href="https://unsplash.com/">Unsplash</a> site!</p> <h2 id="serverless-function">Serverless function</h2> <p>In the case of this drawing idea generator, the serverless function I’ve set up effectively acts as middleware between my client-side script and the Unsplash API. Instead of sending my API key in the clear, or spinning up my own backend to protect it, I can <a href="https://github.com/melanierichards/what-to-draw/blob/main/site/script.js#L56">make a <code>fetch</code> request</a> to my <a href="https://github.com/melanierichards/what-to-draw/blob/main/netlify/functions/photos.js">custom photos function</a>. This in turn requests a random photo from the Unsplash API, using the API key I’ve stored as an environment variable in the Netlify app.</p> <p>If you’d like an end-to-end tutorial on using Netlify functions to make API calls—including developing locally with functions using the Netlify CLI—I would suggest following along with <a href="https://explorers.netlify.com/learn/up-and-running-with-serverless-functions">Up and Running with Serverless Functions</a>, compiled by my now-colleague Ben Hong. The only notable difference is that Ben’s example uses an API that does not require an API key, so my <a href="https://github.com/melanierichards/what-to-draw/blob/main/netlify/functions/photos.js">photos function</a> can serve as an example as to how to reference a key you’ve stored in <a href="https://docs.netlify.com/configure-builds/environment-variables/">Netlify environment variables</a>. As an alternative, Sia Karamalegos also has a <a href="https://sia.codes/posts/serverless-functions-netlify/">great Netlify functions walkthrough post</a> incorporating API keys.</p> <h2 id="the-photo-rendering-area">The photo rendering area</h2> <p>The cool thing about the Unsplash photo API is that it returns a color as part of an individual photo’s metadata. I’ve used this to skin the photo rendering area (and the header SVG icon) to match the retrieved photo:</p> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-draw-render-area-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-draw-render-area-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-draw-render-area-s.png" alt="The drawing idea generator, with screenshots of several different results. The photo rendering area is shown in brown, light pink, dark green, orange, and grey according to the colors in the given photo." /> </picture> <p>I’m not sure how their color selection process works, but it’s pretty nifty in that it doesn’t return a muddy brown for every photo (a concern in taking average color values).</p> <p>That photo rendering area also takes advantage of CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio">aspect ratios</a>:</p> <pre><code>/* .reference__image is an img element */ @supports (object-fit: contain) { .reference__image { width: 100%; height: 100vh; object-fit: contain; } @supports (aspect-ratio: 1) { .reference__image { height: auto; max-height: 100vh; aspect-ratio: 3 / 4; } } } </code></pre> <p>If the browser supports <code>object-fit</code>, I size the image to 100% of the width of its container, and 100% of the viewport height. <code>object-fit</code> is set to <code>contain</code>, so that the image contents scale down to fit within both dimensions of the <code>img</code> element, but the original aspect ratio of those contents is preserved. <code>100vh</code> can feel a little too tall on tall-and-skinny mobile-ish viewports, though, especially if the current photo is in landscape orientation.</p> <p>So, if the browser supports <code>aspect-ratio</code> (which has <a href="https://caniuse.com/mdn-css_properties_aspect-ratio">just arrived in iOS 15</a>), I’ve set the <code>aspect-ratio</code> to <code>3 / 4</code>, a common portrait aspect ratio. A <code>max-height</code> then clamps the image rendering area to be no taller than the viewport height, so that you can see the entire image at once when the viewport window is in a landscape orientation.</p> <p>To help visualize this the difference on a narrow viewport, here is a comparison of the layout using <code>aspect-ratio</code> (left), and the fallback layout (right):</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-viewport-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-viewport-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-viewport-s.png" alt="The lefthand version of the page shows the fetched image with metadata, site header, and ’try another photo’ button. The righthand version shows only the fetched image, rendered at the same size as the lefthand version." /> </picture> <p>The viewports are the same dimensions, as are the rendered size of the photo contents. When using <code>aspect-ratio</code>, however, the user now has access to more content vs just the photo rendering area.</p> <h2 id="a-note-on-photo-apis-and-alt-text">A note on photo APIs and alt text</h2> <p>It ended up that one of the most challenging parts of this project was finding a photography API that returns alternative text for images! My first choice was to use the <a href="https://pexels.com/">Pexels</a> API, as I feel they have a good selection of images for drawing inspiration purposes. However, neither the <a href="https://www.pexels.com/api/documentation/">Pexels API</a> nor the <a href="https://pixabay.com/api/docs/">Pixabay API</a> appear to return anything approximating image alt text.</p> <p>Unsplash ended up winning for this reason, and it’s still not perfect. The photo response can include a usable <code>alt_description</code> value, <code>description</code> value, or both. I’m not sure if this text is generated by a human or a machine, but I’ve opted to prioritize <code>alt_description</code>, fall back to <code>description</code>, and finally fall back to “No description provided” if both return the null string.</p> <p>It seems quite odd to me that more photography APIs don’t support alternative text at this point, but in any case I’ll try to find a way to make that suggestion to those other APIs.</p> <h2 id="what%E2%80%99s-next">What’s next</h2> <p>I might add the option to filter photo results by a couple of parameters, including category and image orientation. That can be done by using the <code>POST</code> method to customize requests made to the serverless function from client-side script (<a href="https://github.com/netlify/explorers-up-and-running-with-serverless-functions/commit/b24daf93acd7f9236d99aa4baa17da70403ff457">here’s an example from Ben again</a>). That all sort of depends on how I end up using this site, and if it’s useful to anyone else who might benefit from this drawing idea generator.</p> <p>In the meantime, you can play with the <a href="https://whattodraw.melanie-richards.com/">What to Draw</a> generator and <a href="https://github.com/melanierichards/what-to-draw">check out the code on Github</a> (pardon my YOLO JavaScript style). I should note that my Unsplash API calls are currently limited to 50/hour, so if you mash on that button pretty hard, you might receive a rate-limiting error. In any case, happy drawing! 🎨</p> CurrentColor SVG in forced colors modes 2021-10-16T00:00:00.000Z https://melanie-richards.com/blog/currentcolor-svg-hcm/ <p><em>Note: this post assumes familiarity with forced colors modes styling and Windows High Contrast, now called “Contrast Themes” in Windows 11. Refer to <a href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/">“Styling for Windows high contrast with new standards for forced colors”</a> for a primer.</em></p> <p>If you’ve been optimizing your web content for various color modes for some time, you may be familiar with using <code>currentColor</code> as an efficient way to manage single-color SVGs. Traditionally, setting <code>currentColor</code> to the strokes and fills of SVG parts…</p> <p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="Yzqxogg" data-user="somelaniesaid" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>Visit the Pen <a href="https://codepen.io/somelaniesaid/pen/Yzqxogg"> Forced Colors: Simple SVG Demo</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</span> </p> <script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> <p>…has meant that those SVG parts automatically inherit the SVG parent’s color value in the active color scheme. This has been true for your developer-provided light and dark modes styles, <em>as well as</em> forced colors modes such as Windows High Contrast:</p> <figure class="u-limit-width"><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-logo-color-modes.png" alt="The logo from the example, automatically rendered in light mode (a dark blue), dark mode (a light blue), and Windows High Contrast (the user’s link color)" /> </picture><figcaption>The SVG logo in a light color scheme, dark color scheme, and Windows high contrast as a result of using currentColor.</figcaption></figure> <p>If you’ve tried to use this technique in the past few months and found that your SVG appeared “broken” in Windows High Contrast mode on Chromium-based browsers (i.e. the SVG is not rendering in a forced system color), don’t worry—you are not imagining things.</p> <p>The described <code>currentColor</code> technique <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1164162">was broken</a> by a <a href="https://github.com/w3c/csswg-drafts/issues/5419">CSS specification change</a>, in which the CSS Working Group decided that forced color values should be applied at used value time. Previously, they were applied at computed value time. I was not active in the CSS WG during this period, so can’t comment from firsthand experience, but it appears the change was made in large part to help clarify how animations and transitions behave in forced colors modes. <code>currentColor</code>, when used in the <code>color</code> property, inherits its parent’s <em>computed color value</em>. So, this spec change means that the SVG would inherit whatever that parent’s color was <em>before</em> forced color values were applied to web content.</p> <p>Because the Chromium implementation was updated to match the <a class="footnotes__ref" href="https://melanie-richards.com/blog/currentcolor-svg-hcm/#firefox-impl-note" id="firefox-impl-ref" aria-describedby="footnotes-label" role="doc-noteref">spec</a>, the logo example currently looks like this in a dark Windows High Contrast theme in MS Edge v96:</p> <picture class="u-limit-width"> <img src="https://melanie-richards.com/assets/images/content/melanierichards-broken-hc-logo.png" alt="The logo from the example, which is rendered in a light blue shade on top of a dark background, but it doesn’t match the bright blue shade of the system link color" /> </picture> <p>The logo in this example is as least still visible, because we have provided a dark mode theme with <code>prefers-color-scheme: dark</code>, and the SVG is inheriting the light color we’ve used for the link in our dark mode styles. However, it would be better for this logo to pick up the system link color in forced colors modes, so that 1) it is rendered in the user’s chosen link color, with their preferred level of contrast and 2) the user knows that this is part of an invokable link target.</p> <p>The proper way to deal with this problem in the short term is to explicitly apply <a href="https://www.w3.org/TR/css-color-4/#css-system-colors">system colors</a> to the SVG parts in forced colors modes. In this case, we would use the <code>LinkText</code> system color:</p> <p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="mdMVjvY" data-user="somelaniesaid" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>View the Pen <a href="https://codepen.io/somelaniesaid/pen/mdMVjvY"> Forced Colors: Simple SVG Demo [CurrentColor Temporary Fix]</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</span> </p> <figure class="u-limit-width"><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fixed-hc-logo.png" alt="" /> </picture><figcaption>The logo now picks up the proper system link color in Windows High Contrast.</figcaption></figure> <p>So, this works, but it’s certainly not as convenient as using <code>currentColor</code> and having the right color propagate automatically across color modes.</p> <p>Thankfully, Amelia Bellamy-Royds <a href="https://github.com/w3c/csswg-drafts/issues/6310">brought up the issue again</a>, and the CSS WG arrived at a solution to restore this common <code>currentColor</code> technique and heal currently-broken experiences. The spec now defines a <code>preserve-parent-color</code> keyword value for <code>forced-color-adjust</code>:</p> <blockquote> <p>In forced colors mode, if the color property inherits from its parent (i.e. there is no cascaded value or the cascaded value is currentColor, inherit, or another keyword that inherits from the parent), then it computes to the used color of its parent’s color value.</p> <p>In all other respects, behaves the same as none.</p> </blockquote> <p>Because <code>currentColor</code> inherits the <em>used</em> color in this case, and forced colors are applied at <em>used</em> value time, it would now inherit the parent’s forced system color value.</p> <p>This is effectively a direct fix for ensuring that SVG parts with <code>currentColor</code> inherit the correct user-defined system color in forced colors modes. Web developers would not need to use this keyword directly, as it will be applied to SVGs by default in the user agent stylesheet:</p> <pre><code class="language-css">@namespace &quot;http://www.w3.org/2000/svg&quot;; svg|svg { forced-color-adjust: preserve-parent-color; } svg|foreignObject { forced-color-adjust: auto; } </code></pre> <p>This replaces a user agent stylesheet rule where <code>forced-color-adjust</code> is set to <code>none</code> on SVGs.</p> <p>Once this change lands, web developers should be able to use the <code>currentColor</code> technique once again to their hearts’ content (perhaps keeping the explicit system colors around for a bit, for compat on 2021 browser versions). At time of writing, this patch is <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1242706">in active development</a> in the Chromium code base, so my hope is that this all resolves soon. In the meantime, <strong>use <a href="https://www.w3.org/TR/css-color-4/#css-system-colors">system color</a> keywords for SVG parts in forced colors modes</strong>, and thank you for testing in Windows High Contrast! 🖤</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="firefox-impl-note" class="footnotes__list-item" role="doc-endnote">Firefox’s forced colors implementation does not appear to have the described issue, i.e. currentColor SVG parts inherit forced colors as expected. As far as I can tell, this appears to be because the Gecko implementation has not yet made the change to apply forced colors at used value time. Folks on the Mozilla team would be better positioned to clarify! <a class="footnotes__back-link" href="https://melanie-richards.com/blog/currentcolor-svg-hcm/#firefox-impl-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, Sep 2021 2021-10-02T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2109/ <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-netlify-journal-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-netlify-journal-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-netlify-journal-s.jpg" alt="A teal journal opened to the first page, where I have written in teal pen 'Inaugural Netlify journal'" /> </picture> <p>This month I started a new job as a Senior Product Manager at <a href="https://www.netlify.com/">Netlify</a>! I’d been on the Microsoft Edge web platform team for the better part of 7 years, so “new kid” energy is not something I’ve felt in awhile. I’ll admit to some nerves: I’d left a team where I know well how I can add value and support our collective growth, for a new environment where I’ll need to build up trust and strong working relationships from scratch.</p> <p>That said, excitement far outweighs the nerves. Netlify is chock-full of friendly people who are very generous with their time and prior knowledge. I’ve long appreciated the Netlify platform for my own projects, and I’m having so much fun ramping up and considering how we might expand the platform to support robust web apps and organizations at scale.</p> <h2 id="various-and-sundry-musings">Various and Sundry Musings</h2> <ul> <li>I sewed a <a href="https://fiber.melanie-richards.com/tool-roll/">tool roll</a>!</li> <li>Speaking of which, I’ve been feeling like I have too many creative hobbies in flight and decided to put 3D art on hold for now. It was a painful cut, as I’d like to make some cute environmental renders, but there is relief in being able to give some of my other creative outlets more attention. As <a href="https://melanie-richards.com/blog/learning-log-2101/">I’ve said before</a>, I seem to need more time creating by hand lately, and less time in front of a glowing rectangle.</li> <li>I’ve noticed that it is much easier to be successful with habits I aim to complete daily, rather than a few times a week or as the need arises. I was a little looser with my habits around journaling, which means I did almost no journaling.</li> <li>Talking things out with other humans is extremely effective in level-setting expectations; perfectionism brain sets a high bar.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://youtu.be/rfeADdY1rHw">Video: How I Journal for Mental Clarity</a></li> <li><a href="https://twitter.com/miimows/status/1433609785664892931?s=21">Video: some sage advice</a></li> <li><a href="https://patterns.helloyes.dev/">Basic Pattern Repository (SVG)</a></li> <li><a href="https://css-tricks.com/so-many-little-design-helper-sites/">So many little design helper sites!</a></li> </ul> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://adrianroselli.com/2021/08/sentence-forms-not-mad-libs.html">Sentence Forms (not Mad Libs)</a></li> <li><a href="https://css-tricks.com/grainy-gradients/">Grainy Gradients</a></li> <li><a href="https://tink.uk/notes-on-synthetic-speech/">Notes on synthetic speech</a></li> <li><a href="https://www.smashingmagazine.com/2021/09/reducing-carbon-emissions-on-web/">Reducing Carbon Emissions On The Web</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="http://seattle.urbansketchers.org/2021/09/effort-and-surrender-my-10th-year.html?m=1">Effort and Surrender: My 10th Year</a> [of urban sketching]</li> <li><a href="https://ericwbailey.design/writing/100/">100</a> [blog posts]</li> <li><a href="https://www.nytimes.com/2021/09/24/well/live/parallel-play-for-adults.html">This article on the benefits of parallel play for adults</a></li> <li><a href="https://dev.to/meganesulli/how-to-be-a-better-learner-421l/">How to be a Better Learner</a></li> <li><a href="https://themarkup.org/citizen-browser/2021/09/21/facebook-rolls-out-news-feed-change-that-blocks-watchdogs-from-gathering-data">Facebook Rolls Out News Feed Change That Blocks Watchdogs from Gathering Data</a>. Absolutely disgusted.</li> </ul> Learning Log, Aug 2021 2021-09-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2108/ <picture class="u-limit-width"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-kayak-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-kayak-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-kayak-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-kayak-s.jpg" alt="Me sitting in a neon-green kayak, holding my paddle aloft with an excited expression. I am in the middle of a lake with a cityscape behind me." /> </picture> <p class="caption">Finally got around to kayaking on Lake Union!</p> <ul> <li>Most notably, my last day at Microsoft—after the better part of 7 years—was the end of the month. There’s a lot of feelings bound up in that change. I’m excited to try something new and grow in a different way. But that’s a solid amount of time to build up a lot of relationships with people I’ll miss working with, and I wonder if it will feel odd not being a “browser person” anymore. Well, you can take the girl out of the web platform but you can’t take the web platform out of the girl—I’m hoping to keep doing a bit with web standards. And though it’s at a different layer of the stack, I’ll still get to work with web developers and their needs in my next product role. In any case, feeling very grateful to my community for a wonderful past few years, and excited for the future and new folks I will meet.</li> <li>I took a bit of a staycation (really missing travel…) and ended up finishing up a couple different side projects: <a href="https://seasons.melanie-richards.com/">this minisite about seasonal living</a> (<a href="https://melanie-richards.com/blog/seasons-site/">writeup here</a>) and <a href="https://fiber.melanie-richards.com/a-cozier-reading-chair/">a quilted pillowcase</a> for my reading chair.</li> <li>I am also feeling somewhat smug about my new solution for my ridiculous <a href="https://www.goodreads.com/review/list/2236850-melanie-richards?shelf=to-read">to-read list</a> on Goodreads, which at some point ballooned up to ~1300 books (currently at ~250). I had been putting the work into continuously whittling that down to a more reasonable number, but it still stressed me out see how many books were on the list. What I do now is: I never look at the full list. I’ve set my view for this Goodreads list to 10 books per page, in random order. So if I’m thinking about what to read next, I can review just 10 random books and determine if there’s anything in there I want to read. If not, I can refresh and get another 10 books. I do still prune from time to time if it feels like I’ll never read a particular book, but it is such a nice way to focus on just a few options.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://nestflix.fun/">Nestflix</a>, a fun showcase of fictional media embedded into show and movies in the Netflix catalog. Made by Lynn Fisher.</li> <li><a href="https://sunday-suns.com/">6 years of Sunday Suns</a></li> <li><a href="https://www.kiwihen.com/">If you love corgis and cute things…</a></li> <li><a href="https://mobile.twitter.com/_katherine_may_/status/1428307414047203331">Star-shaped crinoid fossils</a></li> </ul> <h2 id="reading">Reading</h2> <p>Apparently I didn’t bookmark many articles this month…</p> <ul> <li><a href="https://mobile.twitter.com/ceeoreo_/status/1430899630061985792">Lots of great ideas on this Twitter thread about dealing with overwhelm</a></li> <li><a href="https://tastecooking.com/it-was-a-big-year-for-tiktok-foraging/">It Was a Big Year for TikTok Foraging</a></li> </ul> <p>I did appreciate this quote from <a href="https://bookshop.org/a/15644/9781941529089">“How to Relax” by Thich Nhat Hanh</a> (<a class="footnotes__ref" href="https://melanie-richards.com/blog/learning-log-2108/#affiliate-note" id="affiliate-ref" aria-describedby="footnotes-label" role="doc-noteref">disclosure</a>), on letting go of worrying (emphasis mine):</p> <blockquote> <p>Our practice is to learn to take care of the present moment. Don’t allow yourself to be lost in the past or the future. Taking good care of the present moment, we may be able to change the negative things from the past and prepare for a good future. We tend to worry about what will happen in the future. The practice helps us to come home to the present moment, to our body, to our feelings, to the environment around us. When we breathe in and breath out mindfully, our mind is brought back to our body, and we are truly there in order to take care of the present moment. If there’s some stress, some tension in our today, we practice mindful breathing in order to release the tension, and that brings us relief. If there’s a painful feeling in us, we use mindfulness to embrace our feeling so that we can get relief. The key point is that you are fully there in the present moment, in the here and now, to take care of yourself and what’s happening around you. You don’t think too much about the future or project too much about how it might be; and you’re not trapped too much in the past. You have to tain yourself, to learn how to go home to the present moment, to the here and now, and to take care of that moment, to take care of your body and your feelings in this moment. <strong>As you learn how to be in the present moment, you’ll gain faith and trust in your ability to handle the situation. You learn how to take care of your feelings and what’s happening around you. That makes you confident, and as your confidence grows, you’re no longer the victim of your worries.</strong></p> </blockquote> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="affiliate-note" class="footnotes__list-item" role="doc-endnote">Disclosure: I’m an affiliate of Bookshop.org. Any purchases you make using my link will earn me (and local bookstores!) a small commission. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/learning-log-2108/#affiliate-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> New project: SEA — Seasons, and Notification Triggers 2021-08-17T00:00:00.000Z https://melanie-richards.com/blog/seasons-site/ <div class="c-web-preview"> <a href="https://seasons.melanie-richards.com/"> <img src="https://melanie-richards.com/assets/images/content/melanierichards-seasons-xl.png" alt="A home page where there are tiles for eight segments of the year: early and late winter, spring, summer, and autumn." /> </a> </div> <p>I’d been thinking about how I want to live more intentionally with the seasons, and naturally end up reaching for a mini-site to address some small need I have. <a href="https://seasons.melanie-richards.com/">SEA — Seasons</a> is a little site dedicated to seasonal living; it’s optimized for the Seattle area, but many of the ideas may be relevant elsewhere in the Northern hemisphere.</p> <p>With recent dire climate change news, I’m actually more thankful than ever that I’ve been compiling some of these ideas. I want to cherish our natural world we have while we have it, and I agree with those who say there’s nothing like love to inspire you to fight hard and protect something.</p> <div class="c-web-preview"> <img src="https://melanie-richards.com/assets/images/content/melanierichards-seasons-mabon-xl.png" alt="An individual page for late autumn, with ideas for Mabon, seasonal activities, events, and LOTS of produce. The background is a pale brown." /> </div> <p>There are individual pages for each of the eight segments of the year. These mark the beginning of the season (named after traditional pagan observances), and provide ideas for activities, local events, and produce that is timely for that season.</p> <p>Each of the seasonal pages has its own color:</p> <div class="c-web-preview"> <img src="https://melanie-richards.com/assets/images/content/melanierichards-seasons-beltane-xl.png" alt="The same page, but for late spring (Beltane). The background is a light green." /> </div> <div class="c-web-preview"> <img src="https://melanie-richards.com/assets/images/content/melanierichards-seasons-imbolc-xl.png" alt="The same page, but for late winter (Imbolc). The background is a light blue, and there aren't many events or produce." /> </div> <p>When working out the layout of these pages, it annoyed me at first that some things weren’t in balance. But now I’ve come to love how some of the pages are lopsided: it just further illustrates how some seasons are periods of bounty, and others of hibernation.</p> <h2 id="notification-triggers">Notification Triggers</h2> <p>I like to play around with something new on my side projects. On this one I tried out the experimental <a href="https://web.dev/notification-triggers/">Notification Triggers API</a>, which I first caught wind of via <a href="https://css-tricks.com/creating-scheduled-push-notifications/">“Creating Scheduled Push Notifications”</a>. To demo this, you’d have to enable <a href="edge://flags/#enable-experimental-web-platform-features">the #enable-experimental-web-platform-features flag</a> in a Chromium-based browser, but Notification Triggers basically enable you to schedule notifications client-side based on a location- or time-based trigger.</p> <p>When a user invokes the “notify me of new seasons” button on the site, that will pop a notification request prompt. Accepting the prompt will then schedule notifications for the start of each season, one week in advance and day-of—but only if those dates are still in the future. <a href="https://github.com/melanierichards/seasons.melanie-richards.com/blob/main/assets/js/notifications.js">You can check out the notifications logic here</a>.</p> <p>Each new year will bring new dates along with it, which can shift a bit year-to-year. I’m not exactly sure how I want to handle scheduling notifications for those new dates, so will have to do a little more thinking there!</p> <h2 id="check-it-out">Check it out</h2> <p>Find some ideas for seasonal living at <a href="https://seasons.melanie-richards.com/">SEA — Seasons</a>, or you can <a href="https://github.com/melanierichards/seasons.melanie-richards.com/">explore the code on Github</a>.</p> Learning Log, Jul 2021 2021-08-06T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2107/ <div class="l-grid l-grid--media l-grid--halves"> <picture class="l-grid__item"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-puget-sketchbook-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-puget-sketchbook-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-puget-sketchbook-s.jpg" alt="My sketchbook open on a blanket, with a sketch of the water and mountains also pictured beyond." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-orange-berries-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-orange-berries-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-orange-berries-s.jpg" alt="A cluster of vibrant, dark orange berries on a tree in a golden-hour glow" /> </picture> </div> <p class="caption">Sketching in Discovery Park overlooking the Puget Sound / Some very orange berries</p> <p>Another month passed? Really? It feels like July just evaporated in the summer air!</p> <ul> <li>If I had to pick a word for July, it would be “friendship”. My local friends and I are lucky enough to have had access to COVID vaccines, and now that everyone’s vaccinated and the weather is nice, it feels like we’re making up for lost time by spending more of it together. Two of my friends got married (to each other); there were a couple birthdays; and other hangs at each other’s homes, just because. As someone who is fairly introvert-y, it sometimes feels like going from 0 to 60 in a short period of time. That said, I am so grateful for the opportunity to spend time together (keeping an eye on the Delta variant…), having felt the lack of in-person connection over the prior ~15–16 months.</li> <li>Still making progress on a mini-site for seasonal living in the Pacific Northwest. In early July, I crossed off a lot of visual/linting items off the list, added support for dark mode and forced color modes, added social metadata, etc. Later in the month I added <a href="https://github.com/melanierichards/seasons.melanie-richards.com/tree/main/_data/seasons">content for most of the seasons</a>. Left to do: add content for early and late winter; write an intro the site; add push notification capability (for alerts to upcoming seasons); and do one last pass on fundamentals.</li> <li>Attended a couple workshops at the free, virtual <a href="https://www.portlandzinesymposium.org/">Portland Zine Symposium</a>. While it will be nice to participate in IRL communities again, the silver lining is I’ve gotten to participate in events I might not normally have access to. My favorite workshop was <a href="https://www.eventbrite.com/e/sketchbooking-as-an-anti-capitalist-practice-with-mara-ramirez-tickets-160906109505">“Sketchbooking as an Anti-Capitalist Practice with Mara Ramirez”</a>, which inspired me to have a chill, fun, low-stakes relationship with my sketchbook. Unfortunately it doesn’t seem like the recording is up anywhere, but you can <a href="https://planetmars.earth/">find their work here</a>.</li> <li>My Japanese practice sort of languished in July; I have a huge backlog of review items in WaniKani that I’m currently chipping away at.</li> <li>TIL: if you type <code>lorem50</code> into an HTML file in VS Code, then press the <code>TAB</code> key, the built-in Emmet extension will generate 50 words of lorem ipsum for you.</li> </ul> <figure class="u-limit-width"><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-stress.png" alt="Messages on Slack: clap emoji, What have we learned from this for future Melanie's stress" /> </picture><figcaption>NOTHING!</figcaption></figure> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://mobile.twitter.com/vpandav/status/1416686434610683908">This gif of dancing pixel sushi</a></li> <li><a href="https://www.instagram.com/rebeca__anaya/">All of this beautiful type design work by Rebeca Anaya</a></li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://larahogan.me/blog/bring-solutions-not-problems/">Why “bring solutions not problems” doesn’t work</a></li> <li><a href="https://css-tricks.com/good-meetings/">Good Meetings</a></li> <li><a href="https://maketime.blog/article/the-low-tech-approach-to-email/">The Low-Tech Approach to Email</a></li> <li><a href="https://www.flowmagazine.com/flow-magazine/as-seen-in-flow/more-color-in-your-life-journalist-caroline-buijs-tried-color-meditation.html">More color in your life: what is color meditation?</a></li> </ul> Learning Log, Jun 2021 + Seasonal Cleaning IV 2021-07-17T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2106/ <p>I think this is the latest I’ve ever posted a monthly Learning Log, but times have been busy! I also haven’t posted the most recent <a href="https://melanie-richards.com/blog/seasonal-cleaning-vol-iii/">seasonal cleaning</a> recap, so…it’s all getting rolled into one.</p> <ul> <li>Late in the month I went to visit my family in Florida! 🐊 The weather was an absolute mess (torrential downpour every day, before going back to &gt;100° temps in Seattle!) but it was so, so nice to see my family again and celebrate several birthdays. The last time I was with them in person was Christmas 2019. Some families are more used to long breaks, but it was hard for me—especially considering my niece was 6 months old the last time I visited. Thank goodness for FaceTime and its ilk.</li> <li>Declared GitHub notification bankruptcy and marked &gt;100 notifications as read. I feel all powerful! 😈 I’m probably missing stuff!</li> <li>Thinking lately about: “what is my through line?” In true generalist fashion I am interested in many things—what is a stable interest or passion? What underlying theme connects my many interests? Something to lean into.</li> <li>Chipping away at a mini-site dedicated to ideas for seasonal living.</li> <li>Japanese: I’ve started “burning” items on <a href="https://www.wanikani.com/users/somelaniesaid">WaniKani</a>, which sounded like a bad thing but AFAICT means they are “burned” into your memory.</li> </ul> <h2 id="seasonal-cleaning-iv">Seasonal Cleaning IV</h2> <ul> <li>Renamed an <code>sr-only</code> utility class to <code>u-vis-hidden</code> across a couple of older projects, as that is more accurate: this content is visually hidden; screen readers are not the only assistive tech that can access the hidden text on behalf of the user.</li> </ul> <h3 id="bucketlist"><a href="https://bucketlist.melanie-richards.com/">Bucketlist</a></h3> <ul> <li>Fixed a responsive layout issue where a masthead image was <a href="https://github.com/melanierichards/bucketlist/issues/20">rendered in the wrong place</a> when viewed on my iPad. I was using both <code>min-width</code> and <code>max-width</code> queries for the same 48em-breakpoint (I was avoiding resetting styles that were small-viewport-specific), but that led to a bad mix of styles precisely at 48em wide.</li> <li>Reordered the “anywhere” list according to general category: activities, specific adventures, and general travel. That way, when I visit the site to see what to try next, the immediately actionable items are at the top of the list.</li> </ul> <h3 id="fiber-blog"><a href="https://fiber.melanie-richards.com/">Fiber blog</a></h3> <ul> <li>Embraced <code>loading=&quot;lazy&quot;</code> and <code>decoding=&quot;async&quot;</code> attributes on images. It’s interesting to note how implementations of lazyloading differ: the <a href="https://web.dev/browser-level-image-lazy-loading/">Chromium implementation</a> has a distance-from-viewport threshold of 1250px on fast connections, while Gecko seems to only start loading <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1703048">600px from the viewport</a>. The difference is noticeable when omitting dimension attributes, so I suppose I need to stop being lazy (heh) about that now. Good news is that adding <code>width</code> and <code>height</code> attributes is also helpful in reducing <a href="https://web.dev/optimize-cls/">cumulative layout shift</a>, beneficial for the user experience and <a href="https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/">now for SEO</a>.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://github.com/djrrb/fern-ornaments">Fern Ornaments</a>, a decorative typeface through which you could generate some really nifty patterns.</li> <li>Video: <a href="https://www.youtube.com/watch?v=_AnikVUrNP0">How I Filled 100 Sketchbooks</a> (this guy’s videos are generally pretty charming)</li> <li><a href="https://www.instagram.com/p/CQEfB7dhyeu/">Kolonihaver</a>, or village circles</li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://katydecorah.com/code/improve-documentation-with-failed-searches/">Improve documentation with failed searches</a></li> <li><a href="https://refactoring.fm/p/how-to-prioritize-bugs-">How to Prioritize Bugs</a></li> <li><a href="https://css-tricks.com/chapter-9-community/">Web History: Chapter 9: Community</a></li> <li><a href="https://rainesford.medium.com/its-okay-to-outgrow-the-life-you-thought-you-wanted-f31dd745c094">It’s Okay to Outgrow the Life You Thought You Wanted</a></li> </ul> Call for web dev feedback: anchored positioning use cases + requirements 2021-07-01T00:00:00.000Z https://melanie-richards.com/blog/anchor-pos-use-cases/ <p>Alongside Google and other participants in the <a href="https://open-ui.org/">W3C Open UI Community Group</a>, Microsoft is exploring new primitives that will unlock greater customization of HTML control elements. The goals for customization include flexibility over both content models and full styling capabilities. Based on developer feedback, we’re starting with the <code>&lt;select&gt;</code> element. Approaches and primitives include:</p> <ul> <li><a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/ControlUICustomization/explainer.md">Replacement of control parts with named slots</a></li> <li>A <a href="https://open-ui.org/components/popup.research.explainer">popup element</a> that can be used for the <code>&lt;select&gt;</code>’s listbox part. <code>&lt;popup&gt;</code> will enable many classes of transient, top-layer UI.</li> <li>A new proposal for <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md">CSS Anchored Positioning</a>. This will enable web developers to position one element to another, and reposition or resize the element according to viewport boundaries. The initial proposal only applies to browser-managed, top-layer elements (like <code>popup</code>) due to performance concerns, but we are exploring whether this could be reasonably extended to other use cases.</li> </ul> <p>The newest proposal—anchored positioning—enables authors to express a preferred position for a given element, and then provide the rendering engine how to reposition the element in the event that it would overflow the viewport. For example, this button menu is positioned to the bottom-left of the button by default. It can be automatically positioned to the button’s top edge if there is insufficient space in the viewport:</p> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/button-menu-reposition.png" alt="A popup menu is displayed below a button when there is available space; above the button when the layout viewport gets too small to display the menu" /> </picture> <p>The proposal enables web developers to express these preferred and fallback positions without any scripting. Based on observed use cases in component libraries, the initial explainer errs on the side of web developer control over positioning logic. We have heard from some folks that they don’t necessarily need fine-tuned control; they would rather provide an initial position and let the browser rendering engine handle repositioning with internal logic.</p> <p>There are many different avenues that we could take regarding syntax for these APIs. In order to land on an optimal final solution, we would like to invite the broader web developer community to provide feedback on use cases and requirements for CSS anchored positioning. We imagine that the right solution will provide a range in simplicity/magic vs control, but your input will help us understand what is truly a priority and what is a nice-to-have.</p> <p>With that, we’d like to invite web developers to:</p> <ol> <li>Review the <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md">initial proposal</a> to become more familiar with what these APIs aim to achieve, and what options might be available. Note, “alternate A” in that proposal is considered a still-viable alternative for exploration.</li> <li>Respond to the <a href="https://github.com/openui/open-ui/issues/357#issuecomment-871839171">questions posed in this Github issue comment</a>, regarding use cases and preference for control vs simplicity. Please feel free to comment directly on the issue or upvote others.</li> </ol> <p>Thank you in advance for influencing the direction of these new web APIs! Any feedback you provide will be greatly appreciated as we iterate on the design.</p> Learning Log, May 2021 2021-06-05T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2105/ <h2 id="sea-%E2%80%94-seasons">SEA — Seasons</h2> <p>I always want to live more in tune with the seasons, so I'm pulling together a little site about seasonal living in the Seattle area. It'll help track the soltices throughout the year, and each season will have lists of: things to do, recurring events to attend, and seasonal produce to cook with.</p> <p>This month I worked on some icons for sabbats and esbats throughout the year:</p> <div class="l-grid l-grid--media l-grid--quarters"> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-square-imbolc-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-square-imbolc-s.png" alt="An icon with a candle and a single snowflake, framed in a vertical ring." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-square-ostara-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-square-ostara-s.png" alt="An icon with a basket, an egg that has a zigzag design, and two clovers in the corner." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-square-beltane-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-square-beltane-s.png" alt="An icon with a ring of flowers surrounding a wedge of cheese." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-square-litha-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-square-litha-s.png" alt="An icon with bonfire framed in a triangle." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-square-lammas-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-square-lammas-s.png" alt="An icon with a loaf of bread, a sheaf of wheat, and an abstract field." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-square-mabon-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-square-mabon-s.png" alt="An icon with a pinecone, a marigold, and seeds, framed in a circle." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-square-samhain-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-square-samhain-s.png" alt="An icon with a pumpkin and two little bats fluttering nearby." /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-square-yule-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-square-yule-s.png" alt="An icon with a yule log in flame, framed by two sprigs of mistletoe." /> </picture> </div> <p class="caption">Imbolc / ostara / beltane / litha / lammas / mabon / samhain / yule.</p> <h2 id="user-research-decision-trees">User research decision trees</h2> <p>I've been picking up <a href="https://www.goodreads.com/book/show/56332351-cracking-the-pm-career">Cracking the PM Career</a> by Jackie Bavaro and Gayle Laakmann McDowell in between other books. I've wanted a book about the art of PMing, without all the bro-y bluster, and this book is pretty much the universe's response.</p> <p>I came across in a recent passage the idea of creating a user research decision tree. Basically, you take each and every question and pre-plan for: if the answer to this question was x, what would we do?</p> <p>On my team at work we tend to go into user research with a set of hypotheses: we identify what we hope to learn and how we will apply the findings. That's more of an overarching theme to the research, though. What's different about this decision tree is it forces you to look at each question in turn to define the resulting action. Seems neat—I imagine that mindfulness would help ensure that every question is truly needed and best phrased to suit its purpose.</p> <h2 id="%E3%81%AB%E3%81%BB%E3%82%93%E3%81%94-(japanese)">にほんご (Japanese)</h2> <p>Still slowly chipping away at vocabulary; reached the end of my free levels in WaniKani (level 3), so I sprung for a year’s subscription. Would like to get more consistent with practice again in June.</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://mobile.twitter.com/agnesianwitch/status/1388275549349445638">This highly-textured embroidered patch of moss</a></li> <li><a href="https://jamesclear.com/3-2-1/april-29-2021">The quote from Alice Walker in this newsletter</a></li> </ul> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://webaim.org/blog/webaim-million-2021/">WebAIM Million – 2021 Update</a>. I want to highlight this observation: “Web site categories that were subject to increased civil rights complaints and lawsuits in 2020 were among the most improved.”</li> <li><a href="https://www.kirupa.com/html5/creating_colorful_smart_shadows.htm">Creating Colorful, Smart Shadows</a></li> <li><a href="https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/">16px or Larger Text Prevents iOS Form Zoom</a>—TIL!</li> <li><a href="https://css-tricks.com/what-googles-new-page-experience-update-means-for-images-on-your-website/">What Google’s New Page Experience Update Means for Images on Your Website</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.theatlantic.com/family/archive/2021/05/family-secret-language-familect/618871/?mc_cid=0a74a0f9f9&amp;mc_eid=e2a5a07056">Why We Speak More Weirdly at Home</a>: whenever my S.O. and I get sucked into our homegrown memes again—lots of pandemic togetherness—we say, “we need to see other people. Not date them, just see them.”</li> <li>Caught up on James Clear newsletter issues and particularly liked <a href="https://jamesclear.com/3-2-1/april-15-2021?rh_ref=0ba9c410">the quotes in this issue</a></li> </ul> “Proposal: CSS Anchored Positioning” on Microsoft Edge Explainers 2021-06-03T00:00:00.000Z https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md

A proposal for a CSS-based positioning scheme that will enable a web developer to position a top-layer element (like the proposed <popup>) with respect to any other element *and* the layout viewport.

Read the article on Microsoft Edge Explainers “Available for preview: Automatic HTTPS helps keep your browsing more secure” on Microsoft Edge Dev 2021-06-01T00:00:00.000Z https://blogs.windows.com/msedgedev/2021/06/01/available-for-preview-automatic-https-helps-keep-your-browsing-more-secure/

Starting with Microsoft Edge 92, users can preview the Automatic HTTPS feature, which automatically switches your connections to websites from HTTP to HTTPS.

Read the article on Microsoft Edge Dev Learning Log, Apr 2021 2021-05-01T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2104/ <div class="u-limit-width l-grid l-grid--media"> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-bell-blossoms-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-bell-blossoms-s.jpg" alt="Clusters of small white bell-shaped blossoms on a tree" /> </picture> <picture class="l-grid__item"> <source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-blossom-path-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-blossom-path-s.jpg" alt="Cherry blossoms strewn about a sunlit path. There are lots of blossoms still on the trees, and many other trees with bright green leaves." /> </picture> </div> <p class="caption">Blossoms everywhere at the Seattle Arboretum</p> <p>I got the first dose of the vaccine late this month! 💉🎉 Feeling very fortunate and wishing all communities had the same access to these resources. World health &gt; IP and nationalism.</p> <h2 id="an-event-apart-spring-summit">An Event Apart Spring Summit</h2> <p>I had the honor of speaking at An Event Apart for the first time! My talk,<br /> <a href="https://aneventapart.com/event/spring-summit-2021#s27032">“Semantics to Screen Readers”</a>, covers how markup becomes something that assistive tech can interact with on behalf of the user—and how you can prepare your content for representation in accessibility APIs.</p> <p>This was the first talk I’ve done that was pre-recorded, so it was neat hanging out in chat and witnessing folks cheer each other on in their accessibility practices. We wrapped the talk with a live Q&amp;A, and I had a lot of fun mulling over great questions with my host, Eric Meyer. I miss hallway chats, because it would have been nice to keep chatting with folks afterwards. Someday, someday. All in all, really well-run conference with good folks in the lineup, in the audience, and on the AEA team.</p> <p>There’s lots of great sessions in the lineup, and if you’re interested in catching them <a href="https://store.aneventapart.com/register/2021/spring-summit">there’s on-demand passes available</a>. I also have a <a href="https://github.com/melanierichards/talks/tree/main/2021/aea">very long list of resources</a> you can peruse.</p> <h2 id="%E3%81%AB%E3%81%BB%E3%82%93%E3%81%94-(japanese)"><span lang="ja">にほんご</span> (Japanese)</h2> <p>Still working on Level 3 vocabulary in <a href="https://www.wanikani.com/users/somelaniesaid">WaniKani</a>, so I am definitely behind where I’d like to be. Oh well, still at it and every little bit counts. I keep seeming to drop or add a <span lang="ja">う</span> and thus being just barely off the correct spelling/pronunciation for a vocab term.</p> <p>Also read <a href="https://www.tofugu.com/japanese/naka-vs-uchi/"><span lang="ja">中</span> vs <span lang="ja">内</span>: The Difference Between These Two Japanese Words for “Inside”</a> and I think I ~75% understand the distinction.</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://twitter.com/htop_gunder/status/1379138024294998020?s=21">This baby Gozilla using a copier</a>, staring into the distance and thinking about his life choices.</li> <li><a href="https://www.citymilk.net/">City Milk</a>, “a little museum of old Japanese milk bottles &amp; milk paraphernalia” (<a href="http://blog.presentandcorrect.com/easy-lait">via Present &amp; Correct</a>)</li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://www.newyorker.com/magazine/2017/06/05/the-work-you-do-the-person-you-are">The work you do, the person you are</a></li> <li><a href="https://www.politico.com/amp/news/magazine/2020/12/26/books-by-the-foot-washington-dc-covid-books-440347">Washington’s Secret to the Perfect Zoom Bookshelf? Buy It Wholesale.</a></li> </ul> Seasonal Cleaning Vol III 2021-04-17T00:00:00.000Z https://melanie-richards.com/blog/seasonal-cleaning-vol-iii/ <h2 id="highlights-site"><a href="https://highlights.melanie-richards.com/">Highlights site</a></h2> <ul> <li><a href="https://github.com/melanierichards/highlights/commit/249212885ece9ad08cd9c8274f916b55d3193c6a">Fixed a <code>title</code> attribute</a> I broke when migrating the site to Eleventy, d’oh. 🤦‍♀️ This is what happens when we think we’re not making user-visible changes and don’t test thoroughly.</li> <li>Awhile ago I tried to add a couple Netlify plugins to help catch anything—accessibility or otherwise—that I might have missed via manual testing. My deploys blew up, and I lost patience at the time. I tried again now and: same thing. Digging into the Netlify logs, I found <code>Problem writing Eleventy templates</code> errors regardless of which Netlify plugin I was working with. I noticed that the errors were referencing files in the <code>./.netlify/plugins/node_modules/</code> directory, so basically Eleventy was trying to build from plugin dependencies. I added <code>./.netlify/plugins/node_modules/</code> to an <code>.eleventyignore</code> file and that fixed the issue! So, the <a href="https://www.npmjs.com/package/netlify-plugin-a11y">a11y plugin</a> I was trying to install is now working and I <a href="https://github.com/melanierichards/highlights/commit/463b6552029d97e8d483187736f85f0ec54964ca">fixed a few issues as a result</a> (mostly duplicate IDs within book cover SVGs).</li> <li>Installed the Netlify <a href="https://www.npmjs.com/package/netlify-plugin-checklinks">Checklinks</a> and <a href="https://www.npmjs.com/package/netlify-plugin-html-validate">HTML Validate</a> plugins and fixed a few issues.</li> <li><a href="https://github.com/melanierichards/highlights/commit/3e8afceff8f4b9e3277bde188ff28794d7d795f1">Added spoiler alerts</a> for relevant sets of highlights. This was the first issue I ever opened on this project!</li> <li><a href="https://github.com/melanierichards/highlights/commit/31c31b697f9f74e008dfe70ecdbf1026fb893135">Increased the tap target</a> of a “clear permalink” button. I both added a little bit of padding to increase the visual size of the button, as well as added a pseudo to increase the physical size of the target without breaking the line of the paragraphs these buttons sit inline with:</li> </ul> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-remove-highlight.png" alt="An X button sits inline next to text, a focus ring showed around it. The focus ring nearly touches the line of text above it." /> </picture><figcaption>The “remove permalink” button at its new (visual) dimensions, displayed next to a highlighted quote from Luster by Raven Leilani</figcaption></figure> <h2 id="good-things"><a href="https://goodthings.melanie-richards.com/">Good Things</a></h2> <ul> <li>Installed the a11y and HTML Validate Netlify plugins and fixed just a couple validation issues.</li> <li>Ran an <code>npm audit</code> and updated some dependencies.</li> <li>Added <a href="https://github.com/melanierichards/good-things/commit/0b0cb7871e4ff6956204109223f4925b9a3c914f">some spring-y things</a> to the list.</li> </ul> <h2 id="bucketlist"><a href="https://bucketlist.melanie-richards.com/">Bucketlist</a></h2> <p>Installed the same plugins and fixed some validation errors. This practice has pointed out to me that I still have some old-school habits of including a trailing slash in self-closing tags.</p> <h2 id="fiber-blog"><a href="https://fiber.melanie-richards.com/">Fiber blog</a></h2> <ul> <li>Same song and dance with Netlify build plugins! For HTML Validate plugin integration on this project, I ended up setting <a href="https://html-validate.org/rules/wcag/h30.html">this link text rule</a> to warn instead of fail the build. My home page link uses the <code>title</code> attribute for its name instead of its child SVG, and the validator doesn’t recognize this as a valid pattern. I don’t want to add yet another naming mechanism to the anchor link just to please the validator and potentially end up causing a double read-out with assistive technologies: <code>title</code> is used for the <a href="https://www.w3.org/TR/html-aam-1.0/#a-element-accessible-description-computation"><code>&lt;a&gt;</code> element’s accessible description</a> if it was not used for the name. So, non-blocking warning it is.</li> <li>Added <code>autocomplete</code> attributes to the comment form where appropriate.</li> <li>Made things a little less horrible-looking in IE (pretty much only fixing things that were fairly broken by the lack of custom CSS properties support, rather than just ugly).</li> <li>Reduced top/bottom margins on images at small viewport sizes.</li> </ul> <h2 id="this-site">This site</h2> <ul> <li>Add. Plugins. To. ALL the things!</li> <li>Added IDs back to headings with <a href="https://preview.npmjs.com/package/markdown-it-anchor">markdownit-anchor</a>; never got around to it after converting from Jekyll to Eleventy.</li> </ul> Learning Log, Mar 2021 2021-04-01T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2103/ <h2 id="experiment-of-the-month-%F0%9F%91%A9%E2%80%8D%F0%9F%94%AC">Experiment of the Month 👩‍🔬</h2> <p>I decided to try out a <a href="https://twitter.com/soMelanieSaid/status/1364408478215729152">30 day experiment</a> for myself, and for this first month picked “take a mid-workday walk break”. This experiment was…not very successful. I only took a walk break 1–2 workdays out of each week. In ~half the cases my misses were due to having a ridiculous meeting schedule. On other days I was just glad to finally have time to sit down and get some non-meeting work done.</p> <p>Despite the low output, I think it would be worth trying this again. The first week of the experiment I actually experienced the least amount of work-induced anxiety I’ve had since switching to PM…there were potentially other confounding factors, though certainly no change in my work environment. I think that my brain was just so excited that I was doing something to take care of myself that those optimism levels got cranked to 11.</p> <p>Bedtime is another one I struggle with, especially with pandemic-flavored WFH. In April, my experiment will be to <strong>turn my devices on airplane mode at 10pm.</strong></p> <h2 id="python-%F0%9F%90%8D">Python 🐍</h2> <p>As it turns out, <a href="https://twitter.com/soMelanieSaid/status/1351270087206977537">I could not resist</a> learning a new technology: late in the month started learning Python. I was curious; it seemed like a versatile language you can do a lot with (automate stuff! Play with data!); and so here we are.</p> <p>To start, I:</p> <ul> <li>Finished setting up my <a href="https://docs.microsoft.com/en-us/windows/python/web-frameworks">Python environment on WSL2</a> and played a bit with the interpreter on the command line.</li> <li>Started reading/following along with exercises in <a href="https://www.py4e.com/book.php">Python for Everybody</a>. Thus far I’ve read through the intro to programming; variables, expressions, and statements. Charles Severance’s teaching style feels like this would be pretty approachable if you were new to programming—though I suppose I’m not the appropriate judge of that, being familiar with the concepts laid out thus far via other languages.</li> </ul> <p>Interesting thus far:</p> <ul> <li>Variable assignment statements don’t begin with a language-reserved keyword, as they do in JavaScript (<code>var</code>, <code>let</code>, <code>const</code>).</li> <li>The difference in types between integers and floating numbers.</li> </ul> <h2 id="%E3%81%AB%E3%81%BB%E3%82%93%E3%81%94-(japanese)">にほんご (Japanese)</h2> <p>I’m just now starting Level 3 vocabulary on <a href="https://www.wanikani.com/users/somelaniesaid">WaniKani</a>, so I’m a little behind where I’d like to be, if I’m to complete one level per month. However, there is absolutely no time pressure here, so I’m enjoying the lackadaisical pace. My favorite kanji from this level are 元 (origin), 北 (north), and 用 (task). Yes, I am picking these on aesthetics. I like how the “task” kanji sorta looks like a simplified task management UI or spreadsheet. 😁</p> <p>Also cool is that I’m starting to recognize a few kanji in the wild, i.e. on stationery supplies…</p> <h2 id="highlights">Highlights</h2> <a class="c-web-preview" href="https://highlights.melanie-richards.com/"> <picture> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-highlights-2103-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-highlights-2103-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-highlights-2103-s.png" alt="My highlights site index" /> </picture></a> <p>Added <a href="https://highlights.melanie-richards.com/">highlights</a> to the mini-site for:</p> <ul> <li><a href="https://highlights.melanie-richards.com/book/eternal-life/"><em>Eternal Life</em> by Dara Horn</a></li> <li><a href="https://highlights.melanie-richards.com/book/keep-going/"><em>Keep Going</em> by Austin Kleon</a></li> <li><a href="https://highlights.melanie-richards.com/book/luster/"><em>Luster</em> by Raven Leilani</a></li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://twitter.com/presentcorrect/status/1367101491429969924?s=21">Nice Japanese floors</a>: geometric patterned tiling in muted colors</li> <li><a href="https://www.lcsd.gov.hk/CE/Museum/Arts/en_US/web/ma/collections/wu-guanzhongs-paintings-and-personal-archives.html">The art of Wu Guanzhong</a>, via <a href="https://twitter.com/jinjinxsun/status/1369141631765647360?s=21">Jinjin Sun</a></li> <li><a href="https://www.reddit.com/r/PixelArt/comments/m1nqds/bird_meeting">Bird meeting!!!</a> It’s so cute I want to cry. (Alt text: pixel art of a video conference call with various species of birds shown in a grid. The “currently speaking” focus rectangle highlights an ibis, a bluebird, and finally an owl)</li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://css-tricks.com/a-dry-approach-to-color-themes-in-css/">A DRY Approach to Color Themes in CSS</a></li> <li><a href="https://newsletter.bringthedonuts.com/p/the-tools-dont-matter">The Tools Don’t Matter</a></li> <li><a href="https://getpocket.com/explore/item/the-daily-routine-experts-recommend-for-peak-productivity">The Daily Routine Experts Recommend for Peak Productivity</a></li> <li><a href="https://www.mentalfloss.com/article/522883/25-things-you-might-not-know-about-birds-your-backyard">25 Things You Might Not Know About the Birds in Your Backyard</a></li> <li>Some quick ideas on <a href="https://adactio.com/journal/17906">improving the readability of long sentences</a></li> <li><a href="https://austinkleon.com/2021/03/25/big-mood/">Big Mood</a>, particularly the bit on corroboration</li> </ul> Learning Log, Feb 2021 2021-03-01T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2102/ <h2 id="an-event-apart">An Event Apart</h2> <p>During my weekend project time in February I’ve mostly been working away at my talk for <a href="https://aneventapart.com/event/spring-summit-2021#s27032">An Event Apart’s Spring Summit</a>! It’s my first time speaking with them and I’m very excited to nerd out on accessibility with this audience. My talk, “Semantics to Screen Readers” will focus on how markup becomes something that assistive technologies can understand and interact with on behalf of the user. There will be a lot of nitty gritty details on how this all works, and how that impacts web devs who want to create accessible content…and chase down the source of bugs! I’m currently having way too much fun giving my slides 90s flair…</p> <h2 id="fiber-crafts">Fiber crafts</h2> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-s.jpg" alt="The blog home page, showing a couple recent project posts, and a list of current/upcoming projects" /> </picture> <p>I started a <a href="https://fiber.melanie-richards.com/">blog for my fiber crafts</a> earlier this year and <a href="https://melanie-richards.com/blog/fiber-blog/">wrote a bit about it</a>, including which direction I went in for JAMstack comments. Most recently in my craft projects I’ve been <a href="https://fiber.melanie-richards.com/leftovers-upon-leftovers/">using up leftover cotton yarn</a> and <a href="https://fiber.melanie-richards.com/all-the-small-things/">sewing up a bunch of small things</a>. I also recently sewed up a pouf ottoman (saving a surprising amount of money) and will probably blog about that once I’ve made a matching quilted pillow case.</p> <h2 id="%E3%81%AB%E3%81%BB%E3%82%93%E3%81%94-(japanese)">にほんご (Japanese)</h2> <p>Steadily working on kanji/vocab study through <a href="https://www.wanikani.com/">WaniKani</a>, and I’ve just finished with level 2. At my current pace I’m currently getting through ~1 level per month, which means I’ll finish all the levels in…roughly 5 years. I could stand to get a little more consistent about study, and maybe increase the number of terms I’m learning at a time. But it is nice to chip away at something at a relaxed but consistency pace. No reason to rush right now!</p> <p>Some favorite kanji from this level: 火 for fire, because it sort looks like a little guy running around screaming “help! I’m on fire!”; 月 (moon) is pretty cute; and 本 (book) because…books! I also love very literal combinations of kanji. For example, 子犬 = child-dog = puppy. These are fun to collect in any language. I enjoy the term <em>paraguas</em> in Spanish: literally it translates to stop-water. It means “umbrella”.</p> <h2 id="on-the-internet">On the Internet</h2> <p>Tickled by <a href="https://mobile.twitter.com/EmilyYoon/status/1357202460415201282">this vintage new-folder naming schema on Korean computers</a>, especially given the current trend in the ads privacy space to name new standards proposals after birds. 🐦</p> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://www.jayfreestone.com/writing/bulletproof-flag/">Bulletproof flag components</a></li> <li><a href="https://smashingmagazine.com/2021/02/useful-chrome-firefox-devtools-tips-shortcuts/">Useful DevTools Tips And Shortcuts (Chrome, Firefox, Edge)</a>: found it really interesting to read how Smashing Mag uses browser profiles in testing.</li> <li><a href="https://smashingmagazine.com/2021/02/building-personal-learning-curriculum/">Building Your Own Personal Learning Curriculum</a></li> </ul> <h3 id="work%2C-productivity%2C-and-creativity">Work, productivity, and creativity</h3> <ul> <li><a href="https://web.archive.org/web/20140201230239/https://the-toast.net/2014/01/29/everyone-imposter-syndrome-except/">Everyone Has Imposter Syndrome Except For You</a></li> <li><a href="https://www.nytimes.com/2021/02/06/style/work-life-balance-tips-pandemic.html">Remember: What You Do Is Not Who You Are</a></li> <li><a href="https://sive.rs/obvious">Obvious to you, amazing to others</a></li> <li><a href="https://austinkleon.com/2021/02/16/pointing-at-things/">Pointing at things</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://hbr.org/2021/02/dont-underestimate-the-power-of-a-walk">Don’t Underestimate the Power of a Walk</a></li> <li><a href="https://www.rosieleizrowice.com/blog/self-experimentation">Try more stuff: the benefits of 30-day self-experiments</a> (and <a href="https://www.rosieleizrowice.com/blog/38-experiments">some clever ideas for this</a>)</li> <li><a href="https://kosoff.medium.com/i-hate-talking-about-the-pandemic-wall-f66fd716f2fd">I Hate Talking About The “Pandemic Wall”</a></li> <li><a href="https://nosidebar.com/finding-happy/">Finding Happy</a></li> </ul> A fiber crafts blog and JAMstack comments 2021-02-23T00:00:00.000Z https://melanie-richards.com/blog/fiber-blog/ <p>I don’t know about you, but I’ve reached a point of exhaustion with screens amidst this pandemic, and have realized that my analog creative outlets give me the most joy in the Era of Video Chats. Being able to make things with my hands and observe real, tangible progress is just more exhilarating these days.</p> <p>As I’m exploring more in knitting, sewing, and weaving, I wanted a cohesive place to record what I’m making and how my skills are growing. To that end, I’ve put together a <a href="https://fiber.melanie-richards.com/">fiber crafts blog</a> where I’m documenting my projects:</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-s.jpg" alt="The blog home page, showing a couple recent project posts, and a list of current/upcoming projects" /> </picture> <p :="" class="caption">The three geometric blocks in the header represent knitting, sewing, and weaving, and each post has a flag according to which craft it’s been filed under.</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-footer-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-footer-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-footer-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-footer-s.jpg" alt="A footer with a personal bio and very bright, geometric pattern of vector quilt-block shapes done up in red, yellow, and blue." /> </picture> <p :="" class="caption">A return to ridiculous footers.</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-dark-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-dark-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-dark-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fiber-blog-dark-s.jpg" alt="The home page rendered with a very dark navy page background, and purplish-blue tiles for the blog post links instead of a blush color" /> </picture> <p :="" class="caption">Dark mode!</p> <p>I won’t stick to a specific schedule, instead only posting when I have something to share. You can get a sense of the slow-and-steady pace of these fiber projects based on the number of posts that are on the blog now. 😊 Even though the fiber communities I want to participate in are largely on a couple social media platforms at the moment, I’m choosing to invest more in the blogging community—I don’t love these social platforms’ business models, and I hope more people return to owning their own content.</p> <h2 id="jamstack-comments">JAMstack comments</h2> <p>Speaking of communities and owning one’s own content, I wanted to be able to support comments on the fiber blog. I’m pretty much all-in on Eleventy + Netlify for most side projects at this point, and I hadn’t really explored the commenting solutions available for a site running on an SSG (static site generator) until now.</p> <p>My requirements were that such a system be:</p> <ul> <li>Accessible</li> <li>Performant</li> <li>Privacy-preserving</li> <li>No more than ~$5/mo</li> <li>Appropriate for people who aren’t familiar with Github or Webmentions</li> </ul> <p>I have long ruled out Disqus due to its loading a hefty weight of JavaScript, much of it in service to user tracking behaviors.</p> <p>The first solution I looked at was <a href="https://css-tricks.com/jamstack-comments/">this comments engine</a>, and at first blush it seemed a little overcomplicated to me: perhaps a bit funny to re-generate the site each time I moderate a comment. After looking into <a href="https://twitter.com/soMelanieSaid/status/1346294125495140354">some other options that perhaps you might be interested in</a>, I ended up returning to that initial comments engine. I liked that it already integrated really well with my setup (Eleventy and Netlify), and I wouldn’t really have to pull in any new dependencies to get comments working.</p> <p>That being said, I did simplify a couple things. That JAMstack comments engine uses two separate Netlify forms: one to collect submissions, and another to host moderated comments. Submission notifications are sent to Slack, where the site owner can approve/deny the given comment, pushing it to the second form, which subsequently triggers a build. That doesn’t integrate very well with my workflow. My day job <em>mostly</em> operates out of Microsoft Teams these days, so I do a poor job of paying attention to Slack. I also don’t expect to get very many comments on this site at all. So I skipped all this business with multiple forms and Lambda functions and made the workflow slightly less automated/intelligent. Whenever a comment is submitted through the form, I get an email notification. I can review these as a batch (<em>if</em> there is a batch!) and trigger a build when I’m happy with the moderation.</p> <p>Depending on one form like this does leave you somewhat open to accidentally pushing a build-triggering change before comments have been fully moderated. Given the rate of comments I expect to receive and the rate of changes I expect to push, I don’t really anticipate this being an issue. But I might revisit this at some point because if you can believe it, human errors do happen! All of the time!</p> <p>That is probably sufficient rambling on JAMstack comments solutions, so <a href="https://fiber.melanie-richards.com/">check out the blog</a> if fiber crafts are your idea of fun!</p> ““What’s Next For HTML Controls?” on Smashing Podcast” on Smashing Podcast 2021-02-11T00:00:00.000Z https://www.smashingmagazine.com/2021/02/smashing-podcast-episode-35/

My first time recording a podcast episode! Had a lot of fun chatting about controls with Steph and Drew. Check it out if you're into rambly opining on controls customizability.

Read the article on Smashing Podcast Learning Log, Jan 2021 2021-02-02T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2101/ <p>Whew, it’s been a busy month. Lots of work projects hitting the ground running in the new year, including but certainly not limited to a <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md">proposal we published for a new <code>&lt;popup&gt;</code> element</a>. Outside of work: a little bit of pro bono work here, some talk writing here, etc.</p> <p>I’ve realized recently that the creative outlets giving me the most joy during the pandemic are my analog hobbies. Ever less interest in extra screen time, ever more satisfaction from making something with my hands. A couple things I’ve done this month:</p> <ul> <li>Took a lunch break to join a virtual urban sketching session (actually took a lunch break!! I bestow upon myself a medal. 🥇)</li> <li>Finished a knitted dish cloth with leftover cotton yarn from a woven tapestry.</li> <li>Sewed some <em>more</em> masks—this is the last batch, I’m over it!</li> <li>Half-finished some pine needle sachets; currently working on filling those.</li> <li>Half-finished a pouf ottoman, for which I need more polyfil.</li> </ul> <p>I’ll be documenting a lot of this on a fiber arts blog I’m putting together, to be shared soon…</p> <h2 id="%E3%81%AB%E3%81%BB%E3%82%93%E3%81%94-(japanese)">にほんご (Japanese)</h2> <p>I started using <a href="https://www.wanikani.com/">WaniKani</a> to learn kanji, and I’m currently learning level 2 kanji. WaniKani uses mnemonics to help you remember the various different characters. I found these too goofy at first and yet one more thing to memorize, so I didn’t consciously try to recall these for the first few lessons. Then, of course, I noticed that the meanings/readings I was recalling more successfully were those where I happened to remember the little backstory they provided. Alright, I guess I’m sold on mnemonics! I can now apparently recognize and read 60 radicals, 26 kanji, and 40 vocabulary terms (built from kanji and/or hiragana). I especially like the character meaning “river”: 川</p> <p>I should change the spelling in this blog post heading once I learn all the kanji in the word “Japanese”: 日本語 I’ve already come across the first two (“sun” and “book”, respectively), but as WaniKani focuses on simple forms first, I think it’ll be awhile until I get to that last character…</p> <p>Also read <a href="https://www.tofugu.com/japanese/onyomi-kunyomi/">this article on on-yomi and kun-yomi readings</a>, which illustrates all the many fun exceptions to the exceptions in Japanese. I’d known that the kanji system had its genesis in China and that on-yomi pronunciations were borrowed from Chinese, but this article helped fill in a little more context on the history and evolution as well</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://twitter.com/ArtSciencePasta/status/1349129116549787658">This simple self-care guide</a> 😉</li> <li><a href="https://mobile.twitter.com/dancohen/status/1350831682350415872">The “Never Been Seen” museum</a></li> <li><a href="https://howlongtoread.com/">How Long to Read</a> tells you how long it’ll take to read a book, based on the average time or your own reading speed</li> <li><a href="https://www.theatlantic.com/video/index/485297/turn-anxiety-into-excitement/">How to Turn Anxiety Into Excitement</a>: I don’t know how you quantify 17% more persuasive, but I’ll take it</li> <li><a href="https://twitter.com/FroyoTam/status/1354291706108076060">Susan Kare’s wallpaper for Microsoft (1989)</a>: proof of my opinion that pixel art and weaving are close cousins</li> <li><a href="https://mobile.twitter.com/byscottmiller/status/1355608872556376064">This richly-detailed mini house</a></li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://tink.uk/thoughts-on-screen-readers-and-image-recognition/">Thoughts on screen readers and image recognition</a></li> <li><a href="https://austinkleon.com/2021/01/02/30-day-practice-and-suck-less-challenge/?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A+austinkleon+%28AUSTIN+KLEON+-+BLOG%29">30-day “Practice and Suck Less” challenge</a></li> <li><a href="https://austinkleon.com/2021/01/17/mary-ruefles-madness-rack-and-honey/">Mary Ruefle’s Madness, Rack, and Honey</a>: “fear is overcome by procedure”</li> </ul> “Enabling Popups” on Microsoft Edge Explainers 2021-01-26T00:00:00.000Z https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md

An early proposal for a new popup HTML element. This element would unlock a broad range of UI whose top-layer positioning would be managed by the browser rendering engine.

Read the article on Microsoft Edge Explainers Learning Log, Dec 2020 2020-12-31T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2012/ <p>Work/life balance was a dubious concept prior to the holidays, so many of the investments I made into self-directed learning came after the holiday break. The exception was some Japanese study!</p> <h2 id="%E3%81%AB%E3%81%BB%E3%82%93%E3%81%94">にほんご</h2> <p>Many moons ago, I started learning a bit of Japanese in preparation for travel to the country. I actually can't recall what the trigger was to revisit the language, but I've started studying Japanese again:</p> <ul> <li>I started by spending some time refreshing and practicing my kana. Hiragana has always been easier for me than katakana (used for borrowed words). Maybe because so many of the forms look very similar in katakana, and you come across these less often in early vocabulary.</li> <li>I've picked up my copy of the Genki textbook and am working through the first chapter (some basic greetings, time telling, numbers, etc).</li> <li>I started using <a href="https://ankiweb.net/">Anki</a> for flashcards, which seems to be pretty widely used in language-study communities. Likely because it naturally helps support a spaced-repetition practice: you can select whether a term was easy/hard/needs another repeat, and Anki will schedule when to next show you that term. I also like the fact that you can export flashcard decks. The native apps are ugly as sin, so I pretty exclusively use the mobile web app.</li> <li>At some point I discovered the &quot;flick&quot; gesture on iOS's Japanese keyboard, which makes it so much easier to type out kana. Instead of tapping <code>か</code>, then holding and dragging to select <code>き</code>, you can simply swipe left from <code>か</code> and the keyboard will select <code>き</code> for you.</li> </ul> <h2 id="3d-art">3D Art</h2> <p>Speaking of picking study up again, staycation gave me the chance to pick back up on <a href="https://www.3dfordesigners.com/">3D for Designers</a>. Working through the &quot;form&quot; section and really excited about the tools available to 3D-ify type!</p> <h2 id="a-fiber-blog">A Fiber Blog</h2> <p>I also spent some of my free time putting together a blog for my fiber crafts.</p> <picture class="u-limit-width special-fiber-header"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-header-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-header-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fiber-header-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fiber-header-s.jpg" alt="Site header that says Melanie Richards is knitting, sewing, and weaving" /> </picture> <style>.special-fiber-header {border: 2px solid #ccc;}</style> <p>I'd like to level up certain skills in all 3 hobbies: knitting, sewing, and weaving. It would be neat if someday most of my wardrobe was homemade. There's a really great and joyous community around these crafts (sewing in particular, IMHO) and I'd like to participate in that culture of open learning. Unfortunately fiber cultures are mostly centered around a certain social media network, but who knows—maybe RSS will make a comeback someday, or we'll all move on to another social platform. I'm spinning up a blog because I'd like to document my progress all in one place and, well, I'd like to see indie blogs make a comeback!</p> <p>Working on the first couple blog posts and the moment and will publish the site in early January.</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li>Ordered a new Filco for my forever-at-home &quot;office&quot; and fell deep down a mechanical keyboard rabbit hole. Scheming about making keycaps from <a href="https://m.youtube.com/watch?v=CmZ_Z_370so">polymer clay</a> or resin. I should probably chill on hobbies just a *little* bit, so for now I'll take your recs on favorite keycap sources!</li> <li>Delighted by the ceramic art of Katie Rose Johnston. I love this <a href="https://www.instagram.com/p/CF6q2h_ljol/?igshid=qv5s6pe9e5ez">multi-compartmental, multi-legged shelf</a>.</li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://www.figma.com/blog/adding-it-all-up-the-math-behind-designing-your-career/">Adding it all up: the math behind designing your career</a></li> <li><a href="https://www.nytimes.com/2020/12/02/business/japan-old-companies.html">This Japanese Shop Is 1,020 Years Old. It Knows a Bit About Surviving Crises.</a></li> <li><a href="http://seattle.urbansketchers.org/2020/12/early-riser.html">Early Riser</a> almost makes me want to be an early worm. Almost.</li> <li><a href="https://www.foodandwine.com/lifestyle/kitchen/dont-be-weird-about-cast-iron">Don't Be Weird About Cast Iron</a></li> <li><a href="https://thecreativeindependent.com/people/tips-for-how-to-prioritize-your-project-ideas/">How to prioritize your project ideas</a></li> <li><a href="https://eyeondesign.aiga.org/in-defense-of-generalism/">In Defense of Generalism</a></li> </ul> <h3 id="syllabus-by-lynda-barry"><em>Syllabus</em> by Lynda Barry</h3> <p>Leaving you with a couple quotes on creativity and image-making from <a href="https://bookshop.org/a/15644/9781770461611">Lynda Barry</a> (<a class="footnotes__ref" href="https://melanie-richards.com/blog/learning-log-2012/#affiliate-note" id="affiliate-ref" aria-describedby="footnotes-label" role="doc-noteref">disclosure</a>):</p> <blockquote> <p>Daily practice with images both written and drawn is rare once we have lost our baby teeth and begin to think of ourselves as good at some things and bad at other things. It's not that this isn't true…but the side effects are profound once we abandon a certain activity like drawing because we are bad at it. A certain state of mind—(what McGilchrist might call &quot;attention&quot;) is also lost. A certain capacity of the mind is shuttered and for most people, it stays that way for life. It is a bad trade.</p> </blockquote> <p>and:</p> <blockquote> <p>We know that athletes, musicians, and actors all have to practice, rehearse, repeat things until it gets into the body, the &quot;muscle memory&quot;, but for some reason, writers and visual artists think they have to be inspired before they make something. Not suspecting the physical act of writing or sdrawing is what brings that inspiration about. Worrying about its worth and value to others <em>before it exists</em> can keep us immobilized forever. Any story we write or picture we make cannot demonstrate its worth until we write it or draw it. The answer can't come to us any other way.</p> </blockquote> <p>Keep making, even if things turn out wonky. Try not to <a href="https://melanie-richards.com/blog/advice-to-stick-to-ones-forehead/">mind the gap</a>.</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="affiliate-note" class="footnotes__list-item" role="doc-endnote">Disclosure: I’m an affiliate of Bookshop.org. Any purchases you make using my link will earn me (and local bookstores!) a small commission. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/learning-log-2012/#affiliate-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> 2020 in Review 2020-12-27T00:00:00.000Z https://melanie-richards.com/blog/2020-review/ <p>2020 was the year of plans changed, of systemic inequities laid bare by a global pandemic. With all that 2020 demanded, just getting through this year is an incredible achievement in itself.</p> <p>A lot of us are looking at a shorter than usual “highlights reel” this year. Maybe that reel feels entirely nonexistent. Maybe you actually <em>thrived</em> in these conditions. Whatever the case may be, I hope you can afford yourself some grace during a time that was difficult for so many. I hope you can feel proud of your resourcefulness and ability to adapt in the face of significant, long-term challenges. And if you experienced any painful losses this year, I just want to send all the love your way.</p> <h2 id="highlights">Highlights</h2> <p>This year I was lucky enough to stay healthy and employed. Not being able to see my family for so long (they live in the opposite corner of the country) has admittedly been taking its toll on me. I am, however, thankful for more FaceTime than ever with my parents, siblings, and my sweet/funny <s>baby</s> toddler niece. Whenever I feel safe enough to travel again, these are people who will be getting a too-long hug.</p> <p>Other highlights, whilst I am counting my blessings:</p> <ul> <li><strong>A trip to India:</strong> I got to visit Delhi / Agra / Jaipur with my S.O. and a few friends <em>right</em> before the pandemic hit at global scale (we were boarding the plane home as the first cases were emerging in Seattle). I am so thankful we got to see a little bit more of the world before being stuck inside our homes for months on end. One of the best things about that trip was getting to meet my S.O.’s [absolutely lovely] parents, and I’m so glad he got to spend time with his family before travel became a no-go.</li> <li><strong><a href="https://mybuild.microsoft.com/sessions/f4134be8-0e49-40e3-a8a2-935ec397c8fa?source=speakerdetail">Speaking at Build</a>:</strong> I gave an overview of what we’re building at Microsoft Edge on top of the Chromium project. This was: 1) my first time speaking at Build, 2) my first time <em>“attending”</em> Build, 3) my first online-only speaking engagement, and 4) the first time I’ve given the same talk multiple times at a conference (once at 1:30am PST!). It is truly bizarre staring into the lens on your computer and later learning that you were speaking live to a couple thousand people. 😱</li> <li><strong>I was promoted to Senior PM!</strong> I don’t really talk about my promotions, but this one felt more meaningful to me. Perhaps because program management is something I’ve learned 100% on the job (whereas when I was a designer/developer I held a graphic design BFA).</li> <li><strong>Blogging:</strong> I wrote 21 blog posts on things like <a href="https://melanie-richards.com/blog/css-grid-sticky/">sticky grid items</a>, <a href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/">forced colors standards</a> (still one of my favorite web platform advancements I’ve contributed to), <a href="https://blogs.windows.com/msedgedev/2020/07/23/reducing-distractions-quiet-notification-requests/">quiet notifications</a>, and <a href="https://melanie-richards.com/blog/lefty-pen-test/">you know, pens</a>. A tiny group of friends and I have recently been getting together online to write blog posts. The solidarity is a really nice motivator, so if we’re mutual online/IRL friends, let me know if you’d like to join us!</li> <li><strong><a href="https://goodthings.melanie-richards.com/">Good Things</a>:</strong> my list of good things has been a solace to me in the pandemic more than once. <a href="https://melanie-richards.com/blog/good-things/">This blog post</a> goes into a little more detail. Feel free to fork and create your own personal list of good things.</li> <li><strong>Moving in with my S.O.:</strong> over the summer we moved into an apartment together, and it’s been soooo much nicer than shuttling back and forth between our respective apartments on the weekends.</li> <li>A new-found appreciation for walks around the neighborhood.</li> </ul> <h2 id="media">Media</h2> <h3 id="books">Books</h3> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-books-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-books-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2020-books-s.jpg" alt="Collage of a bunch of book covers listed at the goodreads link" /> </picture> <p><a href="https://www.goodreads.com/review/list/2236850-melanie-richards?shelf=2020">I read 64 books this year</a>! I’m slowly working my way through the shamefully-large piles of books that I own but hadn’t yet read. I’ve also been taking advantage of eBook loans from the library and eagerly awaiting my branch reopening for physical books.</p> <p>My reads were a pretty good balance of fiction and nonfiction, and I discovered this year that I really enjoy food industry memoirs. Here’s a <a href="https://bookshop.org/lists/2020-favorite-books-a6379447-e518-48ce-9cea-896222285d47">few favorite books</a> I read this year (<a class="footnotes__ref" href="https://melanie-richards.com/blog/2020-review/#affiliate-note" id="affiliate-ref" aria-describedby="footnotes-label" role="doc-noteref">disclosure</a>):</p> <ul> <li><a href="https://bookshop.org/a/15644/9780062917607">10% Happier</a> by Dan Harris</li> <li><a href="https://bookshop.org/a/15644/9780142420911">Akata Witch</a> by Nnedi Okorafor</li> <li><a href="https://bookshop.org/a/15644/9780143128090">Cork Dork</a> by Bianca Bosker</li> <li><a href="https://bookshop.org/a/15644/9781524759216">Eat a Peach</a> by David Chang</li> <li><a href="https://bookshop.org/a/15644/9780393356564">Eternal Life</a> by Dara Horn</li> <li><a href="https://bookshop.org/a/15644/9780735224315">Little Fires Everywhere</a> by Celeste Ng</li> <li><a href="https://bookshop.org/a/15644/9780374194321">Luster</a> by Raven Leilani</li> <li><a href="https://bookshop.org/a/15644/9781250192752">Sourdough</a> by Robin Sloan</li> <li><a href="https://bookshop.org/a/15644/9781101983638">Stir</a> by Jessica Fechtor</li> <li><a href="https://bookshop.org/a/15644/9780525436140">There, There</a> by Tommy Orange</li> <li><a href="https://bookshop.org/a/15644/9780525536291">The Vanishing Half</a> by Brit Bennett</li> <li><a href="https://bookshop.org/a/15644/9781524748098">We Ride Upon Sticks</a> by Quan Barry</li> </ul> <p><small>Note: these are affiliate Bookshop links. Feel free to buy/borrow books from wherever you like, but consider supporting small businesses over *ahem* gigantic online mono-retailers.</small></p> <h3 id="music">Music</h3> <p>Playlists of random songs I enjoyed or had on loop:</p> <ul> <li><a href="https://open.spotify.com/playlist/5rnByU8Ae7z3R4RqihI4hV?si=93o0RGzTTjeoAxXGi4Skrw">2019/2020 — Winter</a></li> <li><a href="https://open.spotify.com/playlist/2kEjMUqvRDcFz9abatKLk9">2020 — Spring</a></li> <li>No summer playlist, sometimes life is like that.</li> <li><a href="https://open.spotify.com/playlist/5EjKZvPckW1RCt3NaDwrbH">2020 — Autumn</a></li> </ul> <p>Continued listening quite a lot to the ladies of <a href="https://open.spotify.com/album/6RjlLIuDFC8Dw91yRAdPz9">boygenius</a>, as well as indie instrumental (not sure what you’d call that Album Leaf / Kruangbin / Tycho / Washed Out genre).</p> <p>I’d like to discover and listen to more music in 2021. My listening habits have been lighter in the past few years as I’ve leaned more on podcasts (e.g. while doing chores or going for a run) and I now have a role where even less of my work activities can be done with music in the background.</p> <h3 id="movies%2Ftv">Movies/TV</h3> <picture class="u-limit-width"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-movies-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-movies-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2020-movies-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2020-movies-s.jpg" alt="Collage of posters for the movies listed" /> </picture> <p>I watched <a href="https://letterboxd.com/somelaniesaid/films/diary/for/2020/">32 movies</a> this year, many of them during the holiday break. Favorites:</p> <ul> <li><a href="https://letterboxd.com/film/doctor-sleep/">Doctor Sleep</a> (Kind of surprised how much I liked this one)</li> <li><a href="https://letterboxd.com/film/good-boys-2019/">Good Boys</a></li> <li><a href="https://letterboxd.com/film/palm-springs-2020/">Palm Springs</a> (Same surprise)</li> <li><a href="https://letterboxd.com/film/parasite-2019/">Parasite</a> (One of two movies I watched in the theater)</li> <li><a href="https://letterboxd.com/film/portrait-of-a-lady-on-fire/">Portrait of a Lady on Fire</a></li> <li><a href="https://letterboxd.com/film/soul-2020/">Soul</a></li> </ul> <p>I don’t track my TV watching anywhere so I kind of forget what all I watched…we have been watching and enjoying a lot of British series for whatever reason: <a href="https://www.imdb.com/title/tt1877368/">GBBO</a>, <a href="https://www.imdb.com/title/tt6417190/">The Great Pottery Throwdown</a>, <a href="https://www.imdb.com/title/tt8001106/">Giri / Haji</a>, <a href="https://www.imdb.com/title/tt7016936/">Killing Eve</a>…I’m not a big TV watcher so I’ve been amazed at the speed at which everyone seems to be binge watching Netflix shows. By the time I get around to a show, the zeitgeist has already passed.</p> <h2 id="2021">2021</h2> <p>2020 underscored my suspicion of year-long goals, as so much can change best-laid plans. In 2021, I’ll again stick to quarterly personal goals when aiming for something specific. That’s enough time to focus on a few priorities while remaining flexible.</p> <p>There are, however, a couple “themes” I want to center in 2021:</p> <ul> <li>Trust in your own dang self.</li> <li>Find freedom and excellence through consistency.</li> <li>Remember that life is found in the small things.</li> </ul> <p>Wishing you all good things in 2021. 🌠</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="affiliate-note" class="footnotes__list-item" role="doc-endnote">Disclosure: I’m an affiliate of Bookshop.org. Any purchases you make using my link will earn me (and local bookstores!) a small commission. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/2020-review/#affiliate-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Sticky CSS Grid Items 2020-12-15T00:00:00.000Z https://melanie-richards.com/blog/css-grid-sticky/ <p>If you’ve ever tried to put a sticky item in a grid layout and watched the item scroll away with the rest of the content, you might have come to the conclusion that <code>position: sticky</code> doesn’t work with CSS Grid. Fear not! It <em>is</em> possible to get these two layout concepts working together. All you likely need is one more line of CSS.</p> <h2 id="the-problem">The Problem</h2> <p>Let’s start with the root issue you’re likely running into, because it’s not always obvious at first why your grid item isn’t sticking.</p> <p>Suppose we’re putting together a template layout for articles on various candies. We have our title in the left-hand column of a grid layout, and have set the title to be sticky:</p> <pre><code>article { display: grid; grid-template-columns: 20em 1fr; grid-gap: 4em; } .title { position: sticky; top: 2rem; } </code></pre> <p>Unfortunately, our title isn’t sticking to the top of the viewport, but instead scrolls away with the rest of the text:</p> <p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="result" data-user="somelaniesaid" data-slug-hash="ExyKBNR" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Blog post &amp;gt; grid + sticky &amp;gt; demo 1"> <span>See the Pen <a href="https://codepen.io/somelaniesaid/pen/ExyKBNR"> Blog post &gt; grid + sticky &gt; demo 1</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</span> </p> <script async="" src="https://static.codepen.io/assets/embed/ei.js"></script> <p> </p> <p>If we throw a border on our sticky title (or use a <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/css/grid">CSS Grid inspector</a>), our root issue becomes more obvious:</p> <p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="result" data-user="somelaniesaid" data-slug-hash="RwRazxw" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Blog post &amp;gt; grid + sticky &amp;gt; demo 2"> <span>See the Pen <a href="https://codepen.io/somelaniesaid/pen/RwRazxw"> Blog post &gt; grid + sticky &gt; demo 2</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</span> </p> <p>The CSS Grid item sizing algorithm has effectively sized the grid item (our sticky title) to fill the height of the grid slot it has been placed in. We don’t see any sticky effects because its computed height is the same as the content in the grid slot beside it.</p> <h3 id="nitty-gritty-details-on-sizing">Nitty gritty details on sizing</h3> <p><em>Things are about to get nerdy, skip to <a href="https://melanie-richards.com/blog/css-grid-sticky/#how-to-fix-it">“How to fix it”</a> if you just want the solution!</em></p> <p>Because we didn’t use any CSS properties that specify how to size our grid items (we will get to these in a minute!), CSS Grid defaulted to its <a href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing">“normal” sizing algorithm</a> when determining the sticky title’s size.</p> <p>Our title, an <code>h1</code>…</p> <ul> <li>Is not a <a href="https://drafts.csswg.org/css-display/#replaced-element">replaced element</a>, such as an <code>img</code>, <code>video</code>, <code>embed</code>, <code>iframe</code>, etc. These have special sizing rules.</li> <li>Does not have a “preferred aspect ratio”. Such an intrinsic aspect ratio can be set to particular elements by the user agent’s stylesheet, or by using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio"><code>aspect-ratio</code> property</a>.</li> </ul> <p>…therefore, the algorithm fell back to a “stretch” sizing scheme. This basically ensures that the box’s size in this dimension is set to fill the layout container it’s in (to simplify, the grid slot).</p> <h2 id="how-to-fix-it">How to fix it</h2> <p>One way to address this is to specify an extrinsic height dimension for our sticky title, e.g. <code>height: 10em</code>, <code>max-height: 50vh</code>, whatever. Specifying such a literal height for our content is hacky though—we don’t want a specific height, we want the computed height to be just enough to accommodate the element’s contents. Instead we can change how this element is aligned to the grid slot.</p> <p>We can specify one of the following:</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self"><code>align-self</code></a>: this property, when specified on the sticky title, tells the element how to align itself to the block direction of the grid slot it’s in. <code>align-self: start</code> would work nicely in our example, as it will align the item to the “start” edge of the grid slot (in this context, the top edge).</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items"><code>align-items</code></a>: this property, when specified on the <code>article</code> (our grid parent), tells each grid item how to align itself to the block direction of the grid slot it’s in.</li> </ul> <p>(Note: the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-self"><code>place-self</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-self"><code>place-items</code></a> shorthands will also work; these handle both block and inline axes)</p> <p>It might be nice to align the text baseline of our sticky title and the text baseline of our first paragraph. If we set <code>align-items: baseline;</code> on the <code>article</code>, that forces the CSS Grid sizing algorithm to use a “fit-content” scheme. There’s some complexity there, but in our case, the algorithm used our grid item’s “max-content size”, or “the smallest size the box could take in that axis while still fitting around its contents”.</p> <p>Because the sticky title is now sized according to its contents, we get the <code>position: sticky</code> behavior we’re after:</p> <p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="result" data-user="somelaniesaid" data-slug-hash="KKMzjZv" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Blog post &amp;gt; grid + sticky &amp;gt; demo 3"> <span>See the Pen <a href="https://codepen.io/somelaniesaid/pen/KKMzjZv"> Blog post &gt; grid + sticky &gt; demo 3</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</span> </p> <p>Our updated styles:</p> <pre><code>article { display: grid; grid-template-columns: 20em 1fr; grid-gap: 4em; /* The new line we added! */ align-items: baseline; } .title { position: sticky; top: 2rem; } </code></pre> <p>And that’s it! Hope this helps you out of a <em>sticky</em> situation. 😏</p> <h2 id="additional-resources">Additional resources</h2> <ul> <li><a href="https://www.w3.org/TR/css-grid-1/">CSS Grid specification</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self"><code>align-self</code> on MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-self"><code>place-self</code> on MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items"><code>align-items</code> on MDN</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-self"><code>place-items</code> on MDN</a></li> </ul> Seasonal Cleaning Vol II 2020-12-12T00:00:00.000Z https://melanie-richards.com/blog/seasonal-cleaning-vol-ii/ <p>Earlier this year I started a new practice called <a href="https://melanie-richards.com/blog/seasonal-cleaning/">seasonal cleaning</a>, in which I make little improvements to my existing side projects, workflow, tooling, etc. A lot of this is driven out of an account-wide <a href="https://github.com/users/melanierichards/projects/1">Github project board</a>.</p> <p>Though I did update a couple counts on my <a href="https://bucketlist.melanie-richards.com/">bucketlist</a>, I focused almost exclusively on my <a href="https://bucketlist.melanie-richards.com/">highlights minisite</a> this go around:</p> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-permalink-highlight.png" alt="A permalinked highlight that says “I love a broad margin to my life.”" /></p> <ul> <li>Whenever you invoke a highlight permalink and scroll it into view, the highlight would butt up right against the top of the viewport. I added a bit of margin to an individual highlight’s scroll snap area using <code>scroll-margin-top</code>. Now there’s <a href="https://highlights.melanie-richards.com/book/wherever-you-go/#i+love+a+broad+">a little bit of breathing room</a>.</li> <li>I also made the permalinked highlight background color a little bit less harsh. What was pure white (<code>#fff</code>) is now a very light grey (<code>#ececec</code>). It’s a subtle distinction, but I think it’s an improvement for many pairs of eyeballs, especially when reading long highlights.</li> </ul> <hr /> <p><a href="https://github.com/melanierichards/highlights/commit/961415632bb1975699a29091a1c82c9185da42d8">I added pagination to the home page</a>. You won’t actually notice that yet, because there’s 24 posts per page. Soon! I didn’t have pagination on the home page before because the site used to run on Jekyll. In order to have more than one paginated page with Jekyll, you need a plugin, which at the time was disallowed on Github Pages (my deployment environment at the time). As of November, I’m using Eleventy for my SSR and deploying to Netlify. Adding pagination in this environment was fairly trivial.</p> <hr /> <p>I <a href="https://github.com/melanierichards/highlights/commit/53248d78cc054714262d6390bb5330f3a42602d7">updated the favicon</a> so that it’s more friendly to browser UI rendered in various color modes. Previously, the favicon was a static png holding a black ribbon icon. The change here entails using an SVG favicon, and querying for <code>prefers-color-scheme</code> and <code>forced-colors</code> within the SVG to target dark mode and Windows high contrast. <a href="https://github.com/melanierichards/highlights/commit/53248d78cc054714262d6390bb5330f3a42602d7">Here’s the code snippet</a>.</p> <p>For forced colors, I optimized for Microsoft Edge UI. The background of the favicon is <code>Highlight</code>, and the SVG fill is <code>HighlightText</code>. This means the icon blends into the background of the tab when the tab is activated:</p> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-hc-favicon-active.png" alt="The favicon on an active browser tab. It’s a black ribbon shown seamlessly on the tab’s teal background." /></p> <p>It does look slightly less nice when the tab is inactive:</p> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-hc-favicon-inactive.png" alt="The favicon on an inactive browser tab. It’s a black ribbon on a teal background, which sticks out a bit on the tab’s black background." /></p> <p>I played around first with just having a transparent background and <code>CanvasText</code> (normal, unhighlighted text color) foreground or <code>HighlightText</code> foreground. But generally speaking you could potentially run into some visibility issues if you mismatch system colors used for different states. For example, some high contrast themes have a light text color, a dark highlight text color, and a light highlight background color. In those cases the light text color on top of the light highlight background color would be hard to make out.</p> <hr /> <p>In content, I added some new highlights for <a href="https://highlights.melanie-richards.com/book/eat-a-peach/">David Chang’s <em>Eat a Peach</em></a> and am about halfway through the work to add Dara Horn’s <em>Eternal Life</em>.</p> <p><img src="https://melanie-richards.com/assets/images/content/melanierichards-social-preview.png" alt="The social preview settings UI on Github" /></p> <p>And finally, I added a “social preview” image to the repo settings in Github, because it is so awkward when Twitter share cards have a giant avatar of your own face.</p> Learning Log, Nov 2020 2020-12-01T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2011/ <p>Took a break from my regularly scheduled side projects this month to:</p> <ul> <li><a href="https://melanie-richards.com/blog/lefty-pen-test/">Gab too much about pens</a></li> <li>Build [most of] a blog for my fiber crafts (knitting, sewing, weaving) that I’m not sure I’ll actually use 🙃</li> <li>Convert a couple lingering projects from Jekyll to Eleventy.</li> </ul> <p>For the Eleventy migrations, I started with my <a href="https://github.com/melanierichards/bucketlist">bucketlist</a>, which is super simple and has, like, one fork. Next I tackled my <a href="https://github.com/melanierichards/highlights">highlights</a>—still a simple site but with a few more Jekyll-esque practices baked in to think about. For example, I had to do a little bit of <a href="https://www.11ty.dev/docs/data-custom/#yaml">extra work to continue supporting YAML data files</a>.</p> <p>To be honest, I felt a bit guilty switching out a core dependency in a project I’ve published in the open (namely, the highlights site). I don’t know that that’s the right feeling to have: the main purpose of my repo is to deploy <a href="https://highlights.melanie-richards.com/">highlights.melanie-richards.com</a>. I released it without a license, which effectively implies default copyright expectations. That said, people have forked it and remixed it to stand up their own collection of highlights. And I think there are some expectations placed upon the maintainer of a public repo, regardless of promises you have or haven’t made.</p> <p>In the end, I did what is right for me and my development practices; the <code>main</code> branch now takes a dependency on Eleventy. To support people who’d still like to use the Jekyll version, I <a href="https://github.com/melanierichards/highlights/releases/tag/1.0.2">packaged that up in a release</a> and will keep a <a href="https://github.com/melanierichards/highlights/tree/jekyll"><code>jekyll</code> branch</a> up that people can fork off of and contribute to. And I’ll need to think about what license would be appropriate for the repo to make it clearer I’m cool with people remixing. 🤔</p> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://www.smashingmagazine.com/2020/11/playfulness-code-supercharge-fun-learning/">Playfulness In Code: Supercharge Your Learning By Having Fun</a></li> <li><a href="https://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/">Behind the feature: the making of the new Auto Layout</a></li> <li><a href="https://lea.verou.me/2020/11/simple-pie-charts-with-fallback-today/">Simple pie charts with fallback, today</a></li> <li><a href="https://sarasoueidan.com/blog/one-checkbox-or-two-radio-buttons/">&quot;Yes or No?&quot; — One Checkbox vs Two Radio Buttons.</a></li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://una.im/productivity-2017/">I'm Useless Without a To-Do List</a></li> <li><a href="https://www.huffpost.com/entry/the-30-second-habit-that-_b_4808632">The 30 Second Habit That Can Have a Big Impact On Your Life</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://austinkleon.com/2020/10/29/when-i-share-i-learn/">When I share, I learn</a></li> <li><a href="https://thisblogisnotforyou.com/we-need-to-stop-making-our-hobbies-stressful/">We need to stop making our hobbies stressful</a></li> <li><a href="https://simplicityrelished.com/wp-content/easy-cache/others/why-you-need-a-true-hobby-and-not-just-a-side-hustle/">Why You Need A True Hobby (and not just a side-hustle)</a></li> <li><a href="https://bulletjournal.com/blogs/bulletjournalist/on-becoming-grateful">On Becoming Grateful</a></li> <li><a href="https://www.sinosplice.com/life/archives/2016/08/25/what-80-comprehension-feels-like">What 80% Comprehension Feels Like</a></li> <li><a href="https://austinkleon.com/2020/12/01/there-is-no-finish-line/">There is no finish line</a></li> </ul> Lefty Pen Test 2020-11-23T00:00:00.000Z https://melanie-richards.com/blog/lefty-pen-test/ <p>No, not <a href="https://en.wikipedia.org/wiki/Penetration_test">that kind of pen test</a>. Fully exasperated with how much smudging I get with gel pens, I thought I’d try out Jetpens’ <a href="https://www.jetpens.com/JetPens-Pen-Sampler-for-the-Left-Handed-Black/pd/21609">recommended pens for lefties</a>.</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pen-cup-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pen-cup-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pen-cup-s.jpg" alt="A cup of pens on a desk, with more pens in the background" /> </picture> <p>The basic idea is that these are faster-drying pens, which should presumably cut down on the smudging. There’s nothing special about the pens’ physical design that would tailor them to a left-handed grip.</p> <p>I opted not to spring for the <a href="https://www.jetpens.com/JetPens-Pen-Sampler-for-the-Left-Handed-Black/pd/21609">full sampler set</a>. I don’t have much need for highlighters, and I generally like a slightly beefier point size than was common in the set. Here’s what I ended up buying, based off the recommendations in the sampler:</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pen-lay-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pen-lay-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pen-lay-s.jpg" alt="The pens laid out on top of an Olfa cutting mat. Except the first pink pen, which is a ballpoint, all are gel pens." /> </picture> <p class="caption">Please pardon all the cotton yarn dust I didn’t notice until later…</p> <ul> <li><a href="https://www.jetpens.com/Uni-Jetstream-Standard-Ballpoint-Pen-0.5-mm-Black-Ink-Apricot-Body/pd/3238">Uni Jetstream Standard Ballpoint Pen - 0.5 mm - Black Ink - Apricot Body</a></li> <li><a href="https://www.jetpens.com/Paper-Mate-InkJoy-Gel-Pen-0.7-mm-Black/pd/15866">Paper Mate InkJoy Gel Pen - 0.7 mm - Black</a></li> <li><a href="https://www.jetpens.com/Zebra-Sarasa-Dry-Gel-Pen-0.5-mm-Black/pd/15637">Zebra Sarasa Dry Gel Pen - 0.5 mm - Black</a></li> <li><a href="https://www.jetpens.com/Pentel-EnerGel-Euro-Needle-Point-Gel-Pen-0.35-mm-Black/pd/6511">Pentel EnerGel Euro Needle-Point Gel Pen - 0.35 mm - Black</a></li> <li><a href="https://www.jetpens.com/Pentel-EnerGel-X-Gel-Pen-Needle-Point-0.5-mm-Black/pd/7535">Pentel EnerGel-X Gel Pen - Needle-Point - 0.5 mm - Black</a></li> <li><a href="https://www.jetpens.com/Pilot-Multi-Ball-Rollerball-Pen-Medium-Black/pd/13782">Pilot Multi Ball Rollerball Pen - Medium - Black</a></li> <li><a href="https://www.jetpens.com/Pilot-Hi-Tec-C-Gel-Pen-0.5-mm-Black/pd/118">Pilot Hi-Tec-C Gel Pen - 0.5 mm - Black</a></li> <li><a href="https://www.jetpens.com/Pilot-FriXion-Ball-Knock-Retractable-Gel-Pen-0.5-mm-Black/pd/5948">Pilot FriXion Ball Knock Retractable Gel Pen - 0.5 mm - Black</a></li> </ul> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pen-list-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pen-list-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pen-list-s.jpg" alt="One sentence each written with each pen, with no visible smudging" /> </picture> <p class="caption">What looks like a smudge on the word “dry” is due to a drop of condensation from a water glass, funnily enough 😥</p> <p>After writing a test sentence with each, I was ecstatic to find that not a single pen smudged! This is a random ¥180 notebook I bought in Japan (truly random, the brand/website referenced on the sticker doesn’t appear to exist anymore).</p> <p>I ended up liking the feel of the Pentel EnerGel-X best: not too thin, not too thick, not too bouncy. That’s the pen I’ve been using in my daily(ish) journal, a <a href="https://www.jetpens.com/Midori-MD-Notebook-A6-Blank/pd/13602">Midori A6 blank notebook</a>. I’ve been really pleased at how that pen has held up and continued not to smudge. I’ve had problems in the past where some gel pens go on the fritz in the Midori (but seem fine on other paper? Weird).</p> <p>Where this gets a bit disappointing is on Tomoe River Paper…</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pen-hobonichi-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pen-hobonichi-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pen-hobonichi-s.jpg" alt="The pen names written in a Hobonichi planner, with mild to moderate smudging on all but the ballpoint." /> </picture> <p>Because I’ve decided to switch back to a <a href="https://www.1101.com/store/techo/en/lineup/">Hobonichi Techo</a> for my 2021 journal, I thought I’d test these pens in a planner with the same paper. Tomoe River Paper is very smooth and thin, so I saw smudging in the Hobonichi planner with all the gel pens. I was a bit surprised to see such a marked difference, as the other papers I’d tested on were not particularly toothy. Ah well, I’ll try to use the 0.35mm Pentel Energel for awhile and see how that goes.</p> <h2 id="final-verdict">Final verdict</h2> <ul> <li>The <a href="https://www.jetpens.com/Pentel-EnerGel-X-Gel-Pen-Needle-Point-0.5-mm-Black/pd/7535">Pentel EnerGel-X</a> was my favorite for lack of smudging, ease of flow, and ergonomics. The <a href="https://www.jetpens.com/Pentel-EnerGel-Euro-Needle-Point-Gel-Pen-0.35-mm-Black/pd/6511">Pentel EnerGel Euro Needle-Point</a> might be better for smoother paper.</li> <li>Left-handed people should consider paper texture when fighting the smudge.</li> <li>Being a lefty in an LTR language is still a bit of a pain.</li> </ul> Learning Log, Oct 2020 2020-11-05T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2010/ <p>Writing this month’s Learning Log is mostly an exercise in restraint, i.e. resisting the temptation to refresh a map of the United States…</p> <picture class="bookshop-banner"> <img src="https://melanie-richards.com/assets/images/content/melanierichards-bookshop-banner.png" alt="A repeating pattern of open books and notched bookmarks. Both illustrations are done in black and white pixel art on a light grey background." /> </picture> <style> @supports (object-fit: cover) { .bookshop-banner { width: 100%; height: 300px; object-fit: cover; } } </style> <p>I made a <a href="https://bookshop.org/shop/melanierichards">Bookshop</a>! Mostly in service to a <a href="https://melanie-richards.com/blog/art-of-brevity">post on brevity</a>. Sharing here honestly because the pixel banner I threw together gives me joy.</p> <p>Other creative pursuits giving me joy:</p> <ul> <li>I’ve been slowly chipping away at a small soundboard project. Think CBT (Cognitive Behavioral Therapy) but with buttons!</li> <li>A few friends and I have been online monthly to write blog posts together. We chat for a half hour, sign off of the video call for a couple hours to work on our individual posts, then sign back on to discuss, ask for feedback, etc. This has been a really fun way to get accountability on posts, even though the one I’ve been working on most recently is still in progress…please shoot me an email if 1) you want to participate, 2) we’re mutual friends online/IRL, and 3) you’re local to the Seattle area. We intend to meet up in person whenever…that’s a thing again.</li> <li>On a truly meta level, <a href="https://www.coursera.org/learn/learning-how-to-learn">Learning How to Learn</a>. Lots of khaki and earnestness, but the instructors are delightful and I’m learning some neat stuff about the brain.</li> </ul> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://www.instagram.com/aleia/">Little scenes featuring pet snails!</a></li> <li><a href="https://katydecorah.com/code/read/">Track your books with GitHub Actions</a></li> <li><a href="https://twitter.com/lukechesser/status/1316767692620267520">Neat little UX-improvement update to the Unsplash API</a></li> <li><a href="https://www.madeinthefuturefellowship.com/">Made in the Future</a>: a fellowship run by Kristy Tillman &amp; co, for underrepresented designers.</li> <li><a href="https://squircley.app/">Squircley</a>: a “squircle” generator giving me joy</li> <li>Becky Margraf seems to be a fount of fun and clever ideas. Case in point, <a href="https://www.instagram.com/p/CGxbo93AIWt/?igshid=8edmi32wmkdi">these little scrap buddies</a>.</li> </ul> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://adactio.com/journal/17465">Unobtrusive feedback</a>: the animation could stand to be a little slower for better accessibility, but this is a neat little idea.</li> <li><a href="https://www.smashingmagazine.com/2020/09/learnings-coding-artwork/">Unexpected Learnings From Coding Artwork Every Day For Five Years</a></li> <li><a href="https://medium.com/the-100-day-project/100-days-of-3d-4b28a514f3ac">100 Days of 3D Design</a></li> </ul> <p>And this quote from Elizabeth Gilbert:</p> <blockquote> <p>A good-enough novel violently written now is better than a perfect novel meticulously written never.</p> </blockquote> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.thelily.com/your-guide-to-making-big-decisions-right-now/">Your guide to making big decisions right now</a></li> <li><a href="https://www.japan-guide.com/e/e2007.html">Traditional Japanese style tatami rooms</a>: honestly, I looked this up for Animal Crossing-related research purposes. Found the details interesting.</li> <li><a href="https://www.nytimes.com/2020/09/28/dining/banchan-recipes.html">A Spread Worthy of Royalty</a></li> <li><a href="https://heated.medium.com/okra-the-vegetable-of-survival-45caaf2ff9a3">Okra, the Vegetable of Survival</a></li> <li><a href="https://www.bonappetit.com/story/24-solar-terms">This Hyper-Seasonal Eating Strategy Helps Prevent My Winter Colds</a></li> <li><a href="https://www.balfourand.co/blog/responding-to-the-grid">Responding To The Grid</a>: appreciate and co-sign this ode to the grid in tapestry weaving. Parallels here to web design.</li> </ul> <p>More goodness from esteemed weaver, Annie Albers:</p> <blockquote> <p>Being creative is not so much the desire to do something as the listening to that which wants to be done. The dictation of the materials.</p> </blockquote> The Art of Brevity 2020-10-26T00:00:00.000Z https://melanie-richards.com/blog/art-of-brevity/ <p>After firing off another long <s>missive</s> email the other day, I tweeted <a href="https://twitter.com/soMelanieSaid/status/1318361870814781441">a request for resources on the art of brevity</a>. I felt fairly certain that this is one of those things you just have to practice, but wow—people came through with a LOT of suggestions. For posterity, here’s a roundup of the recommendations:</p> <h2 id="books">Books</h2> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-bookshop-brevity-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-bookshop-brevity-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-bookshop-brevity-s.png" alt="The Art of Brevity list on Bookshop" /> </picture> <p>Lots of books! I compiled these into <a href="https://bookshop.org/lists/the-art-of-brevity">a list on bookshop.org</a> (<a class="footnotes__ref" href="https://melanie-richards.com/blog/art-of-brevity/#affiliate-note" id="affiliate-ref" aria-describedby="footnotes-label" role="doc-noteref">disclosure</a>).</p> <p><small><i>For transparency, that’s an affiliate link, so I’ll receive a small portion of sales from those books. Please don’t feel the need to buy from Bookshop (though they support small businesses!). Wherever you buy/borrow your books from, I do humbly ask that you avoid making *ahem* massively wealthy mono-retailers any richer.</i></small></p> <h2 id="online-resources">Online Resources</h2> <ul> <li><a href="https://readabilityguidelines.co.uk/">Content Design London: Readability Guidelines</a></li> <li><a href="http://www.cherylstephens.com/online-resources.html">This list compiled by Cheryl Stephens</a></li> <li><a href="https://www.youtube.com/watch?v=36-VQQawpsk">This clip from “A River Runs Through It”</a></li> <li><a href="https://w3c.github.io/coga/content-usable/#objective-3-use-clear-and-understandable-content-0">In-progress guidelines for cognitive accessibility</a></li> </ul> <h2 id="advice-%2F-personal-process">Advice / Personal Process</h2> <ul> <li><strong>Edit!!!</strong></li> <li>…and give yourself at least a day between writing and editing your own work.</li> <li>Work with an editor, or peer review.</li> <li>Cut adverbs and adjectives.</li> <li>Cut out unnecessary words, ruthlessly.</li> <li>Break down compound sentences and clauses.</li> <li>Use active voice.</li> <li>More literally, read your words aloud.</li> <li>Or explain a concept out loud to another person—then write that down!</li> <li>Use <a href="https://sembr.org/">semantic line breaks</a> as a “code smell” for run-on sentences.</li> <li>Have clarity of purpose.</li> <li>Ask yourself: “Do people need to know that at this point?”</li> </ul> <p>What are your favorite tips on brevity? Feel free to <a href="https://twitter.com/soMelanieSaid/status/1318361870814781441">chime in on Twitter</a> or shoot me an email!</p> <footer role="doc-endnotes" class="footnotes"> <h2 id="footnotes-label" class="footnotes__title c-meta">Footnotes</h2> <ol class="footnotes__list"><li id="affiliate-note" class="footnotes__list-item" role="doc-endnote">Disclosure: I’m an affiliate of Bookshop.org. Any purchases you make using my link will earn me (and local bookstores!) a small commission. <a class="footnotes__back-link" href="https://melanie-richards.com/blog/art-of-brevity/#affiliate-ref" aria-label="Back to reference 1" role="doc-backlink">↩</a></li></ol> </footer> Learning Log, Sep 2020 2020-10-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2009/ <p>Not much interesting to share this go-around (for me, anyway. The world is…something else). Seattle spent half the month in wildfire smoke; I've been applying intense excitement for various creative hobbies in rotation; and I started playing a little bit with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>. In the beginning prototypical stages of a soundboard I'm working on, this has mostly involved making SpeechSynthesis utter some childish strings. 😁</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://twitter.com/rougeux/status/1300235885867421696?s=21">Title Cities</a>: cityscapes based on title pages of influential antique books (<a href="https://twitter.com/hj_chen">via HJ Chen</a>). Nicholas Rougeux has quite a few fascinating and beautiful data vis projects.</li> <li><a href="https://twitter.com/page_eco/status/1309490061243604993?s=20">The level of petty I strive for</a></li> </ul> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://bighack.org/5-most-annoying-website-features-i-face-as-a-blind-screen-reader-user-accessibility/">5 most annoying website features I face as a blind person every single day</a>: unfortunately a “greatest hits” of web accessibility issues.</li> <li><a href="https://www.shopify.com/partners/blog/internationalization">Internationalization: Practical Tips to Build for a Global Audience</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.nytimes.com/2020/08/24/us/politics/lebron-james-poll-workers.html">LeBron James and a Multimillion-Dollar Push for More Poll Workers</a></li> <li><a href="https://www.nytimes.com/2020/08/25/realestate/blacks-minorities-appraisals-discrimination.html?action=click&amp;module=Top%20Stories&amp;pgtype=Homepage">Black Homeowners Face Discrimination in Appraisals</a></li> <li><a href="https://austinkleon.com/2020/09/10/will-this-enlarge-me-or-diminish-me/">Will this enlarge me or diminish me?</a></li> <li><a href="https://www.self.com/story/food-justice-tips?mc_cid=09c46d93b1&amp;mc_eid=e2a5a07056">4 Ways to Join the Food Justice Movement as a Total Beginner</a></li> <li><a href="https://www.babbel.com/en/magazine/comma-ellipses/">Why Do Young People Use Commas So Weirdly?</a>: the Youths are at it again,,,</li> <li><a href="https://www.esquire.com/uk/style/a33603325/sew-bro-men-making-clothes-lockdown/?mc_cid=00032ff08d&amp;mc_eid=11722e5548">Rise Of The Sew Bro: Why Men Have Been Crafting Their Own Clothes Over Lockdown</a></li> <li><a href="https://elemental.medium.com/amp/p/de285d542f4c?source=social.tw&amp;__twitter_impression=true">Your ‘Surge Capacity’ Is Depleted — It’s Why You Feel Awful</a></li> </ul> “Styling for Windows high contrast with new standards for forced colors” on Microsoft Edge dev 2020-09-17T00:00:00.000Z https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/

Features like high contrast can help improve readability by enforcing a user’s required color scheme. Learn how browsers apply forced colors, how to optimize styles with new standards, and differences you can expect from legacy implementations.

Read the article on Microsoft Edge dev Learning Log, Aug 2020: 3D Art and Collaging with CSS Grid 2020-09-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2008/ <p>Thanks to working from home and having nowhere to go in the evenings, I (like many who are lucky to have a job right now) have been operating under burnout-in-motion this year. I finally forced myself to take a week of staycation in August, and I feel like I could probably have used another week to pay down that overwork debt.</p> <p>In any case, having some time off at home gave me a good excuse to read a bunch of books and work on some fun personal learning that I hadn’t had time for previously.</p> <p>I was particularly excited to finally start going through Devon Ko’s <a href="https://www.3dfordesigners.com/">3D for Designers</a> course. As someone who loves math and art, messing with numbers to create imaginary scenes feels…really nice. I don’t think I’ll make hyper-realistic scenes like some other folks do; I prefer a little bit of cuteness and abstraction, partially because that uncanny valley is wide. Partially because I just like it.</p> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-chopsticks-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-chopsticks-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-chopsticks-s.png" alt="A 3D art scene with chopsticks lying on a chopstick rest, next to a little ramekin of soy sauce" /> </picture> <p :="" class="caption">Devon has you model chopsticks as a lesson in how to taper/distort shapes.</p> <p>If you’ve been interested in learning Cinema4D / how to make 3D art, I really and truly recommend Devon’s course. She manages to ramp you up really quickly with a whole bunch of skills, without making things feel overwhelming. And her casual, upbeat teaching style just makes things fun.</p> <p>I’m still chipping away at this course, but looking forward to making more stuff! Also super pleased to learn that “gizmo” is an actual term of art in 3D modeling programs.</p> <h2 id="personal-website">Personal Website</h2> <p>I’ve also been making little tweaks to my site recently, and finally got around to tackling the home page a couple weeks ago. I decided to collage some recent bits together using CSS Grid:</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-collage-home-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-collage-home-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-collage-home-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-collage-home-s.png" alt="Boxes which contain my tagline, recent projects, a recent post, and contact info collage together atop a dithered pixel background." /> </picture> <p>This screenshot from Illustrator demonstrates my squiggly line process on this:</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-collage-sketch-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-collage-sketch-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-collage-sketch-s.png" alt="A few, mostly empty boxes overlapping each other, with transparent purple and pink overlays marking where the overlaps occur. This digital sketch lacks most of the content in the final design." /> </picture> <p>I put just enough detail in Illustrator to figure out what I wanted to build in code. Mostly I needed to figure out where the grid template columns were, in order to facilitate the right grid item spanning / overlapping. The purple bands represent large gaps/overlaps, the pink ones more subtle spacing.</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li><a href="https://twitter.com/artbypac/status/1294350775343292417?s=21">This adorable bagworm caterpillar</a></li> <li><a href="https://youtu.be/ILMEVnVD8m8">John Green draws a lot of circles</a></li> <li><a href="https://twitter.com/cozmiclown/status/1298442008906743809?s=21">Colorful, angular Neo-Andean architecture</a></li> <li><a href="https://mymodernmet.com/totoro-sculpture-bus-stop/">Japanese Grandparents Create Life-Size Totoro With Bus Stop For Their Grandkids</a></li> </ul> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://frictionlog.com/">Friction Logs</a>: I’ve been making a point of opening documentation issues whenever I hit something, but keeping a log as you go along seems like a good idea.</li> <li><a href="https://lea.verou.me/2020/07/the-cicada-principle-revisited-with-css-variables/">The Cicada Principle, revisited with CSS variables</a>: cool strategy for perceived randomness</li> <li><a href="https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202">Leading-Trim: The Future of Digital Typesetting</a></li> </ul> <h3 id="the-web">The web</h3> <ul> <li><a href="https://emilymstark.com/2020/07/14/debunking-the-users-always-click-yes-myth.html">Debunking the &quot;users always click yes&quot; myth</a></li> <li><a href="https://www.eff.org/deeplinks/2020/07/legislative-path-interoperable-internet">A Legislative Path to an Interoperable Internet</a></li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://www.visbii.com/blog/9thingswithvisbii">9 Simple Things I Do Daily To Boost My Creativity</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://thehardtimes.net/harddrive/man-tasked-with-making-score-for-a-monkey-riding-a-swordfish-underwater-creates-transcendent-piece-of-music/">Man Tasked With Making Score for a Monkey Riding a Swordfish Underwater Creates Transcendent Piece of Music</a> (<a href="https://www.youtube.com/watch?v=-5rAjOjTGtc">“Aquatic Ambience” track</a>)</li> <li><a href="https://www.thecut.com/2020/07/when-we-were-bread-heads.html">When We Were Bread Heads</a></li> </ul> New Practice: Seasonal Cleaning 2020-09-01T00:00:00.000Z https://melanie-richards.com/blog/seasonal-cleaning/ <p>At the end of August I started a new quarterly practice: Seasonal Cleaning! 🧼✨</p> <p>For ~one week in a season, my intent is to spend any personal project time on fixing issues in previously-shipped side projects, as opposed to building new things. I was hoping to chip away at issues across the week, but due to work/life stuff, most of my fixes were concentrated on the weekend. Still, got a few things done!</p> <p>Something interesting I learned in the course of this is that on Github, you can create a “project” with issues from various different (manually-connected) repos that a person/organization owns. So my <a href="https://github.com/users/melanierichards/projects/1">Seasonal Cleaning kanban board</a> includes issues from across my own public and private Github repos.</p> <p>Here’s what I fixed this time around:</p> <h2 id="bucket-list"><a href="https://bucketlist.melanie-richards.com/">Bucket List</a></h2> <p>Renamed the <code>master</code> branch to <code>main</code>.</p> <h2 id="good-things"><a href="https://goodthings.melanie-richards.com/">Good Things</a></h2> <p><a href="https://github.com/melanierichards/good-things/commit/ec3101f0123d181fd1c647d2195686c26b928c2e">Moved references to my name/URLs to site data</a>, to make it easier for folks to update that info in their forks.</p> <h2 id="highlights"><a href="https://highlights.melanie-richards.com/">Highlights</a></h2> <ul> <li>Renamed the <code>master</code> branch to <code>main</code>.</li> <li>Thinking about converting this and the bucket list site from Jekyll to Eleventy. I admit it: utter fangirl for Eleventy. Also really don’t enjoy taking a local dependency on Ruby just to compile a static site.</li> </ul> <h2 id="personal-site"><a href="https://melanie-richards.com/">Personal Site</a></h2> <ul> <li>Pruned blog post ideas</li> <li>Webmentions (<a href="https://melanie-richards.com/blog/presenting-at-build/">here’s an example post</a>): <ul> <li>Labeled with an icon any Webmentions that are coming from Twitter</li> <li>Made it easier to tell what are “response” tweets by labeling these “Reply from…”</li> <li>Fixed a bug where Webmentions weren’t displaying quite in chronological order. Realized that the property values I was comparing in my sort function were strings, not Dates. D’oh. 🤦‍♀️ Fun with data types!</li> <li>Added a <a href="https://www.voorhoede.nl/en/blog/scheduling-netlify-deploys-with-github-actions/">cron job</a> to build and deploy the site daily, in order to regularly fetch any new Webmentions</li> </ul> </li> <li>A couple weeks ago, I had made it so that for any posts published elsewhere, their tiles on blog indices would take you immediately to the publication in question. I, uh, forgot that post pagination wouldn’t skip over these posts though, and so the single page view for these posts was basically useless. <a href="https://melanie-richards.com/blog/quiet-notifications/">Added a treatment for these kinds of posts</a>, as opposed to removing them from the pagination loop.</li> <li>Cleaned up meta tags</li> <li>Fixed a minor margin bug</li> </ul> <h2 id="process-%2F-dev-environ">Process / Dev Environ</h2> <p>I’d like to have a consistent set of issue tags across my repos: same syntax, label colors, etc from project to project. I’m trying to figure out the best way to go about this. It’s a pain to create a new repo, delete or modify the default generated labels, then add my own.</p> <p>This week I tried creating a template repo, and included a few of the issue labels I wanted on this template. When I started a new test repo from the template, however, none of the issue labels carried over. 😕 I’ll have to see if there’s a good way to generate these using Github Actions instead.</p> <p>That’s it for this Seasonal Cleaning! Anyone do something similar?</p> Learning Log, Jul 2020: making moves 2020-08-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2007/ <p>I haven’t done my Learning Log in a couple months. In a certain sense, lack of a record is its own record. As May rolled into June, the United States was actively contending with systemic racism with the death of George Floyd. What ails us has not been cured, and the work to contend with this needs to be ongoing…</p> <p>As for June, it was a bit of a slump for me. The stress and sorrow of COVID-19, of perennial injustices, of the current political climate—these all seemed to hit me harder than months previous. Unclear why.</p> <p>July had its share of feeling-stuck-ness, but I’ve gotten a few things done:</p> <ul> <li><span aria-hidden="true">📦</span> Moved in with my significant other; we’re loving our new neighborhood.</li> <li><span aria-hidden="true">✊🏾</span> Started working on a more sustainable civic engagement practice</li> <li><span aria-hidden="true">🧵</span> Sewed 15 masks for <a href="https://craftersagainstcovid19.org/">Crafters Against COVID-19</a></li> <li><span aria-hidden="true">📚</span> Indulged in a seasonal “reading weekend”, which is where my S.O. and I just…read a whole bunch</li> </ul> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-masks-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-masks-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-masks-s.jpg" alt="A pile of masks made from hot pink fabric with black triangles on it" /> </picture> <p :="" class="caption">Donated masks! Don’t stare too hard at the seams, I was having some trouble with my sewing machine…</p> <h2 id="personal-site">Personal site</h2> <p>I’ve been making various and sundry updates to my personal website, choosing a bit ago to extend what I have, rather than start all over with the visual design.</p> <p>I now have a “Projects” section again, something I seem to cycle in and out of over time:</p> <picture class="u-limit-width c-web-preview c-web-preview--lighter"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-projects-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-projects-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-projects-s.jpg" alt="A list of web platform projects, then a grid of web project images" /> </picture> <p>Something I’d been wrestling with for awhile is how to share my full self on my personal website. I am lucky to be able to contribute to the core web platform; I got here from a web design and dev background; and I still want to build my own projects on top of the expressive medium that is the web. Linking out to live projects, blog posts, and explainers felt like a good way to combine all these without spinning up a full-fidelity “portfolio”. I also want to find a way to host an older Variable Fonts demo that I worked on with <a href="https://www.gwhitworth.com/">Greg Whitworth</a> and <a href="https://fremycompany.com/">François Remy</a>. The demo site that used to host it is no longer live, but every so often we get people interested in using the demo as a reference.</p> <p>I also added a “Play” section, for dabbling in illustration and collecting other one-off experiments:</p> <picture class="u-limit-width c-web-preview c-web-preview--lighter"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-play-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-play-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-play-s.jpg" alt="A page titled 'Play: drawings and experiments', with a paint marker drawing of Puget Sound beneath it" /> </picture> <p>If I post here enough, I’ll add the ability to filter by medium. Adding this section is a show of optimism, i.e. “build it and I will set aside the time for creative pursuits”.</p> <h3 id="other-little-updates%3A">Other little updates:</h3> <ul> <li>Left-aligned some stuff on small-width breakpoints.</li> <li>Added a visible title to the Info/Contact page, to match the others</li> <li>Normalized that page to new column widths used elsewhere, and will probably restructure/reduce the length of that bio sometime in the future</li> <li>Fixed a border color issue in dark mode. I had forgotten to re-declare that variable within the <code>prefers-color-scheme: dark</code> media query.</li> <li>Fixed a longstanding bug where the <code>&lt;title&gt;</code> text was too verbose. This would’ve been most annoying with an assistive technology which presents tech synchronously.</li> </ul> <h2 id="on-the-internet">On the internet</h2> <video class="u-limit-width" controls=""> <source src="https://melanie-richards.com/assets/videos/content/hackney-church-hover.mp4" type="video/mp4" /> <source src="https://melanie-richards.com/assets/videos/content/hackney-church-hover.webm" type="video/webm" /> <p>Your browser doesn't support video, but this is described below in text.</p> </video> <p>Clever little use of an animated <code>border-radius</code> on the <a href="https://hackney.church/">Hackney Church website</a>: images are given an aggressive border radius so that they’re rendered in the shape of a rounded church window. Hovering over the image decreases the border radius a bit, revealing more of the “masked” image.</p> <p><a href="https://www.instagram.com/p/CDPJ1uipudN/?igshid=gnk4alwqwh8c">A helpful perspective</a> from our buddy Meg.</p> <h2 id="reading">Reading</h2> <ul> <li><a href="https://css-tricks.com/when-do-you-use-inline-block/">When do you use inline-block?</a></li> <li><a href="https://austinkleon.com/2013/12/29/something-small-every-day/">Something small, every day</a></li> <li><a href="https://shoppeblack.us/2020/07/congress-black-owned-businesses/">Congress Pressed to Rescue Struggling Black Owned businesses</a></li> </ul> <h2 id="cooking">Cooking</h2> <p><em>Content warning: food</em></p> <p>🤷‍♀️: fine, no pressing need to make again <br /><br /> 👍: I like it, would cook again <br /><br /> 🌟: I love it!</p> <ul> <li><a href="https://www.lastingredient.com/roasted-vegetable-lemon-tahini-couscous/">Roasted Vegetable Lemon Tahini Couscous</a>: 🌟, adding chickpeas for protein would be a solid idea!</li> <li><a href="https://food52.com/recipes/27295-tahini-toast">Tahini toast</a>: 🌟, skipped butter out of laziness and didn’t miss it. Used agave instead of honey.</li> <li><a href="https://www.rabbitandwolves.com/vegan-one-pot-creamy-garlic-brussels-sprouts-pasta/">Creamy Garlic Brussels Sprouts Pasta</a>: 👍</li> <li><a href="https://www.lastingredient.com/roasted-tomato-olive-couscous/">Roasted Tomato Olive Couscous</a>: 👍</li> <li><a href="https://www.budgetbytes.com/chimichurri-chickpea-salad/">Chimichurri Chickpea Salad</a>: 👍, add a squirt of lemon juice</li> <li><a href="https://minimalistbaker.com/easy-pizza-burgers/">Easy Pizza Burger</a>: 🤷‍♀️</li> </ul> “Reducing distractions with quiet notification requests” on Microsoft Edge dev 2020-07-23T00:00:00.000Z https://blogs.windows.com/msedgedev/2020/07/23/reducing-distractions-quiet-notification-requests/

Many people find notification requests annoying or disruptive, unless they can clearly understand the value of notifications in their current context. Quiet notification requests in Microsoft Edge reduces such requests to a more subtle user interface (UI) treatment, so users can stay focused as they browse.

Read the article on Microsoft Edge dev Black. Lives. Matter. 2020-06-01T00:00:00.000Z https://melanie-richards.com/blog/black-lives-matter/ <p><em>Last updated: June 19, 2020</em></p> <p>I’ll keep this simple: systemic racism has got to stop. Anti-Black police brutality has got to stop. Everyone should feel safe, respected, and able to go about their day unbothered. No one should need to assert their humanity. Black. Lives. Matter.</p> <p>I am livid from the recent deaths of Ahmaud Arbery, Breonna Taylor, George Floyd, David McAtee…I am angry because instead of taking steps to solve the root problem, leadership calls out more force and further escalates the situation. I want us to be the generation that heals things.</p> <p>The following are resources that you can contribute your money, time, attention, or skills to. I’ll update the list as I come across them and they seem legit. Please be alert for fake fundraisers: <a href="https://twitter.com/MNFreedomFund/status/1266550293157892100">Minnesota Freedom Fund does not have a Venmo account</a>. Thank you for supporting.</p> <h2 id="find-support">Find Support</h2> <ul> <li><a href="https://calendly.com/ethels-club/in-the-name-of-freedom?month=2020-06">In The Name of Freedom: A Gathering For Black Healing</a></li> <li><a href="https://docs.google.com/document/u/0/d/1bE95WT6q8n2EQDqXjAxItjxckY97fhoOWCAx7MvfjPs/mobilebasic">Black Mental Health Resources</a></li> </ul> <h2 id="make-donations">Make Donations</h2> <h3 id="501(c)(3)-nonprofits">501(c)(3) Nonprofits</h3> <ul> <li>ActBlue: <a href="https://secure.actblue.com/donate/ab_mn?refcode=tweet">split donations across orgs fighting racism and police brutality</a> (may want to go directly through respective orgs / your giving portal if your company requires it for matching)</li> <li><a href="https://advancementproject.org/">Advancement Project</a></li> <li><a href="https://bailproject.org/">The Bail Project</a></li> <li><a href="https://www.themarshallproject.org/">The Marshall Project</a></li> <li><a href="https://www.naacpldf.org/">NAACP Legal Defense Fund</a></li> <li><a href="https://www.nlg-npap.org/">National Police Accountability Project</a></li> <li><a href="https://unicornriot.ninja/donate/">Unicorn Riot</a> (encouraged by <a href="https://minnesotafreedomfund.org/donate">MFF</a>)</li> </ul> <h3 id="additional-organizations">Additional Organizations</h3> <p><em>May also have non-profit status, couldn't always clarify one way or the other</em></p> <ul> <li><a href="https://www.blackvisionsmn.org/">Black Visions</a> (encouraged by <a href="https://minnesotafreedomfund.org/donate">MFF</a>)</li> <li><a href="https://colorofchange.org/">Color of Change</a></li> <li><a href="https://secure.everyaction.com/zae4prEeKESHBy0MKXTIcQ2">Reclaim the Block</a> (encouraged by <a href="https://minnesotafreedomfund.org/donate">MFF</a>)</li> </ul> <h3 id="bail-funds">Bail Funds</h3> <p><em>Refer also to the list of non-profits</em></p> <ul> <li><a href="https://brooklynbailfund.org/">Brooklyn Community Bail Fund</a></li> <li><a href="https://actionnetwork.org/fundraising/louisville-community-bail-fund/">Louisville Community Bail Fund</a></li> <li><a href="https://www.communityjusticeexchange.org/nbfn-directory">National Bail Fund Network</a></li> <li><a href="https://twitter.com/issatrae/status/1267520423824154625">Long list of vetted bail funds across the U.S.</a></li> </ul> <h3 id="memorial-funds">Memorial Funds</h3> <ul> <li><a href="https://www.gofundme.com/f/9v4q2-justice-for-breonna-taylor">Justice for Breonna Taylor</a></li> <li><a href="https://www.gofundme.com/f/georgefloyd">Official George Floyd Memorial Fund</a></li> </ul> <h3 id="mutual-aid-funds">Mutual Aid Funds</h3> <ul> <li><a href="https://www.atlantamutualaid.org/">Metro Atlanta Mutual Aid Fund</a></li> </ul> <h3 id="rebuilding-efforts">Rebuilding Efforts</h3> <ul> <li><a href="https://www.migizi.org/support-us">Migizi Communications</a>, an Indigenous youth organization whose building burned down in the fires (501(c)(3))</li> <li><a href="https://www.welovelakestreet.com/">We Love Lake Street</a> (501(c)(3))</li> </ul> <h2 id="take-action">Take Action</h2> <h3 id="now">Now</h3> <ul> <li>5 Calls: <a href="https://5calls.org/issue/surplus-military-equipment-police-1033/">call U.S. reps to stop militarization of police</a></li> <li><a href="https://secure.everyaction.com/eR7GA7oz70GL8doBq19LrA2">Sign Reclaim the Block’s petition to defund MPLS police</a></li> <li><a href="https://www.standwithbre.com/">Stand with Bre</a>: make calls and sign a petition for Breonna Taylor</li> <li><a href="https://blmsites.carrd.co/">Collected links on how to help, including quite a few petitions</a></li> </ul> <h3 id="always">Always</h3> <ul> <li><a href="https://www.nytimes.com/2019/05/29/books/review/antiracist-reading-list-ibram-x-kendi.html">An Antiracist Reading List</a></li> <li><a href="https://medium.com/equality-includes-you/what-white-people-can-do-for-racial-justice-f2d18b0e0234">75 Things White People Can Do for Racial Justice</a></li> <li><a href="https://twitter.com/FATHERBONNET/status/1266496139605487616">Watch this powerful speech from Tamika Mallory</a></li> <li><a href="https://twitter.com/gendervamp/status/1267187714052349953">Ways to support protestors from home</a></li> </ul> <ul> <li><a href="https://tatianamac.com/posts/white-guyde/">White Guyde To The Galaxy</a> / <a href="https://tatianamac.com/posts/save-the-tears/">Save the Tears: White Woman's Guide</a></li> </ul> <ul> <li>Write and share alternative text for social media posts (e.g. text embedded in images), so that everyone can have access to critical information.</li> </ul> <h2 id="support-%26-hire-black-professionals">Support &amp; Hire Black Professionals</h2> <ul> <li>First, some food for thought: <a href="https://www.pollenmidwest.org/opportunities/why-asking-for-a-list-wont-solve-your-racial-disparities/">Why asking for a list won’t solve your racial disparities</a>. Lists can’t replace the real work to support existing communities; build an inclusive network; and actually make work environments safe spaces.</li> <li><a href="https://www.blackgamedevs.com/">Black Game Devs</a></li> <li><a href="https://blackswho.design/">Blacks Who Design</a></li> <li><a href="https://peopleofcraft.com/">People of Craft</a></li> </ul> <h2 id="support-black-owned-businesses">Support Black-owned Businesses</h2> <ul> <li><a href="https://bookriot.com/2020/06/04/upcoming-books-by-black-authors/">45 Upcoming Books By Black Authors You Can Preorder Right Now</a></li> <li><a href="https://twitter.com/jessdjefferson/status/1267958077745217541">Black Museums</a></li> <li><a href="https://twitter.com/bookshop_org/status/1267846208237776904">Black-Owned Bookstores</a></li> <li><a href="https://docs.google.com/document/d/1wJUm5YK7NV9lkSMyNuXzfcx_r2EMFiilthyEvIpQYv4/mobilebasic">Black-Owned Businesses</a>: a loooong list covering many different industries!</li> <li><a href="https://blkgrn.com/">BLK + GRN</a>: Black-owned health and wellness businesses</li> <li><a href="https://shoppeblack.us/">Shoppe Black</a>: this site also runs features on individuals and their businesses</li> </ul> Presenting this week at Microsoft Build 2020-05-18T00:00:00.000Z https://melanie-richards.com/blog/presenting-at-build/ <p>Due to the current global health crisis, Microsoft has moved its huge developer flagship event—Build—online for 2020. A great many us will be presenting to you live from our living rooms, home offices, and studio apartments across May 19–20. We wanted to be inclusive of the global dev community, so the conference will run 48 hours straight, and registration is free.</p> <p>I have the immense honor this year of presenting live on behalf of the Microsoft Edge team on technologies for web developers. Here’s the details for <a href="https://mybuild.microsoft.com/sessions/a0f213d7-66f7-4a6e-a595-4c0d7acb2e6e?source=speakerdetail">“Moving the web forward with Microsoft Edge and Chromium”</a>:</p> <blockquote> <p>Over the past year, we've reinvented Microsoft Edge on a new foundation, and built significant momentum in the Chromium project and new standards innovation. In this session, you'll learn about the latest capabilities coming to Microsoft Edge for web developers, including a new experimentation infrastructure to enable you to try the latest features early in incubation. We'll cover new platform features, improvements to developer tooling, and what our improvements around privacy, accessibility, and other fundamentals mean for you.</p> </blockquote> <p>If that interests you, you can tune at (all times PDT):</p> <ul> <li>May 19 at 7:30pm</li> <li>May 20 at 8:15am</li> <li>May 21 at 1:30am</li> </ul> <h2 id="additional-microsoft-edge-sessions">Additional Microsoft Edge sessions</h2> <ul> <li><a href="https://mybuild.microsoft.com/sessions/2118150e-250b-4a7f-94dd-2a23db4bd7df?source=sessions">WebView2: Bringing the best of the web to your native apps</a> with Limin Zhu (May 19, 12:45pm PDT)</li> <li><a href="https://mybuild.microsoft.com/sessions/9198aeac-0c8e-4d32-96d1-cbb99a390aa6?source=sessions">Microsoft Edge: What’s New for Web Developers</a> with Kyle Pflug (May 19, 4:30pm PDT)</li> <li><a href="https://www.youtube.com/watch?v=Ols0DkR9nwM&amp;feature=youtu.be">Microsoft Edge DevTools for web developers</a></li> <li><a href="https://www.youtube.com/watch?v=EvbZ9svD3DA&amp;feature=youtu.be">End-to-end web development with VS Code and Microsoft Edge</a></li> <li><a href="https://www.youtube.com/watch?v=y4p_QHZtMKM&amp;feature=youtu.be">Building rich app experiences with Progressive Web Apps</a></li> <li><a href="https://www.youtube.com/watch?v=QeV8teIw6UM&amp;feature=youtu.be">Building Extensions for the new Microsoft Edge</a></li> </ul> <h2 id="and-more!">And more!</h2> <p>There’s plenty of great content in addition to the browser sessions, so <a href="https://mybuild.microsoft.com/">register free</a> to build out your session schedule! Catch you at Build! 👋</p> Learning Log, Apr 2020: day by day 2020-05-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2004/ <p>Posting these Learning Logs during the COVID-19 pandemic feels somewhat uncomfortable. All of us are going through some of the most impactful challenges to the global community in generations. This does difficult things to focus, comprehension, and energy. This does difficult things to livelihoods and physical safety. It’s hard on most of us, to varying degrees; in certain situations, it is all folks can manage to get from one day to the next.</p> <p>I write my Learning Log mostly as a record for myself, and in case other people find any of this of interest. I am guilty of this myself, but: please don’t benchmark yourself against what other people share on the internet. We all have our own contextual blend of resources and privileges, and most of us filter heavily in what we share online (I am doing this right now!). Please be gentle with yourself, especially in times of high stress. “Productivity” may not even be anywhere near your radar right now, and that is extremely OK. 💖</p> <p><em>*takes a moment to internalize my own words*</em></p> <h2 id="what-i%E2%80%99ve-been-up-to">What I’ve been up to</h2> <ul> <li>Sewing masks. <a href="https://seekatesew.com/how-to-sew-a-face-mask-with-filter-pocket-no-elastic/">This pattern</a> requires no elastic, in case you’re having trouble tracking that down (I didn’t even bother, based on what I heard about availability at the time).</li> <li>Early in the month I chatted with students and alumni from my alma mater, the University of Florida Graphic Design program. <a href="https://cassiemcdaniel.com/">Cassie McDaniel</a> and I teamed up to share our life experiences and answer questions about navigating the design and tech industries. I wish I could take away all the stress students are feeling right now—especially the seniors—but I feel thankful for opportunities to connect and support my community. Big thanks to <a href="https://mariarogal.com/">Maria Rogal</a> for providing those opportunities.</li> <li>Lately I’ve been fixating on whether I add value to my professional communities. Forsaking my own be-gentle-with-yourself advice, I tend to consider only objectively-positive qualities or perfect execution as “adding value”. The other day someone more junior than me shared concerns on how efficient and knowledgeable they were in a particular space; their vulnerability enabled me to share that I have those same kinds of worries, too, and it seemed to give them some relief that this is a common part of the learning process. That was a good reminder to me that the qualities we don’t like about ourselves—for me, that anxious feeling I am never enough—can be exactly what we need to “add value” to those around us.</li> <li>And in more trivial realizations…after a file opened in VS Code with 4-space tabs, it dawned on me that I’ve done a complete about-face with regards to tab sizing. The first time I came across 2-space tabs in the wild, I thought, “what is the point of tabs if you’re going to make them that small?” Now I’m ride-or-die for 2 spaces. 😂</li> </ul> <h2 id="good-things">Good Things</h2> <p>I made a tiny one-pager site called <a href="https://goodthings.melanie-richards.com/">Good Things</a> to compile some good sensory things in life:</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-good-things-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-good-things-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-good-things-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-good-things-s.png" alt="A one-page website displaying in large text a list of nice, simple things" /> </picture> <p>This was a pre-COVID-19 idea but has been highly useful to me as of late, whenever I need to retreat from pandemic-related anxiety into a happy place. I <a href="https://melanie-richards.com/blog/good-things">wrote a bit more on Good Things</a>, including randomizing the list at build time.</p> <h2 id="on-the-internet">On the Internet</h2> <ul> <li>Timely fundraisers: <a href="https://charity.gofundme.com/o/en/campaign/help-ups-teamsters-protect-ourselves-and-the-public-from-covid-19">Help UPS Teamsters Organize</a>, <a href="https://www.saveourchinatowns.org/">Save Our Chinatowns</a>, <a href="https://seattletipjar.com/">Seattle Tip Jar</a></li> <li><a href="https://mobile.twitter.com/FedeItaliano76/status/1247188137178251265">Concrete landscapes by French painter Jean-Pierre Ugarte</a></li> <li>#TIL that <a href="https://www.justonecookbook.com/konjac-konnyaku/">konnyaku</a> is a taro-based, jelly-like food used in Japanese cooking</li> <li><a href="https://mobile.twitter.com/roisiningle/status/1247522465032495112">This quote about ongoing personal growth</a></li> <li><a href="https://www.archdaily.com/936976/kaleidoscope-in-tianshui-sako-architects">This beautiful kindergarten</a>: a white-washed-looking building with colored glass cutouts in alternating shades of the rainbow.</li> <li><a href="https://mobile.twitter.com/AlexPenn_1/status/1254792809162379265">This chaffinch nest</a>, ringed with lichen.</li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://daverupert.com/2020/04/low-challenge-high-skill-tasks-in-terrible-times/">Low-Challenge, High-Skill Tasks in Terrible Times</a></li> <li><a href="https://www.eff.org/deeplinks/2020/04/challenge-proximity-apps-covid-19-contact-tracing">The Challenge of Proximity Apps For COVID-19 Contact Tracing</a></li> <li><a href="https://www.theatlantic.com/science/archive/2020/04/coronavirus-pandemic-earth-pollution-noise/609316/">The Pandemic Is Turning the Natural World Upside Down</a></li> <li><a href="https://austinkleon.com/2020/04/15/make-bad-art-too/">Make bad art, too</a> (note: a couple ableist terms in one of the quotes; good sentiment otherwise)</li> </ul> <h2 id="cooking">Cooking</h2> <p><em>Content warning: food and alcohol</em></p> <p>🤷‍♀️: fine, no pressing need to make again <br /><br /> 👍: I like it, would cook again <br /><br /> 🌟: I love it!</p> <ul> <li><a href="https://naturallyella.com/harissa-sweet-potato-ricotta-toast/">Harissa Sweet Potato Ricotta Toast</a>: 👍</li> <li><a href="https://www.onegreenplanet.org/vegan-recipe/bunny-chow-south-african-curry-in-a-bread-bowl/">Bunny Chow</a>: 👍</li> <li><a href="https://brooklynsupper.com/sage-gold-rush-cocktails/">Sage Gold Rush Cocktails</a>: 👍</li> <li><a href="https://www.bonappetit.com/recipe/cauliflower-bolognese">Cauliflower Bolognese</a>: 👍, could do with a bit more spice</li> <li><a href="https://www.lastingredient.com/harissa-roasted-cauliflower-couscous/">Harissa Roasted Cauliflower Couscous</a>: 🌟</li> </ul> New project: Good Things, and randomization at build time 2020-04-27T00:00:00.000Z https://melanie-richards.com/blog/good-things/ <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-good-things-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-good-things-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-good-things-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-good-things-s.png" alt="A one-page website displaying in large text a list of nice, simple things" /> </picture> <p>Back before COVID-19 hit the global scene, I thought it would be pleasant to have a list of the good things in life. This list wouldn’t be an exhaustive account of all the checked boxes on Maslow’s Hierarchy of Needs, but rather would document small pleasures which evoke some kind of clear and specific emotional response. If I had The Sads, I could pull up this list and sink down into the sensory details of, say, that strong hit of pine scent you randomly get on a hiking trail.</p> <p>Now that we’re all in the thick of this pandemic, this new tiny side project—<a href="https://goodthings.melanie-richards.com/">Good Things</a>—has offered me a peaceful little portal to things I miss. Your mileage may vary, but I’ve found that reading my personal list of good things can be comforting as I help protect my community by sheltering in place.</p> <h2 id="project-details">Project details</h2> <p>Good Things is pretty much just a one-pager static site. It’s built on top of Eleventy, with a singular data file to pull in list items, which are displayed in random order. <a href="https://github.com/melanierichards/good-things">The code is available on Github</a>, and I hope other folks do fork this! I’d love to know what would be on your list and how else you might personalize this to suit your needs.</p> <p>Aesthetically, I’ve been itching to get this evergreen shade out of my system, and I enjoy how that turned out in the dark scheme as well:</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-good-things-schemes-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-good-things-schemes-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-good-things-schemes-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-good-things-schemes-s.png" alt="The light color scheme is dark green on cream, and the dark color scheme is inverted. The dark background is a slightly darker and less saturated version of the green from the light scheme text." /> </picture> <h2 id="randomization-at-build-time">Randomization at build time</h2> <p>As I was putting this together, I felt it would be ideal for the list items to be displayed in random order, so that the list felt fresh each time I referred to it. I considered implementing client-side randomization, but actually, that’s kind of overkill—I’m unlikely to visit the site more than once daily, and I don’t need some button to mash on in rapid succession.</p> <p>How I solved this with a static site is to randomize the list order at build time. I’ve done this using <a href="https://github.com/melanierichards/good-things/blob/master/.eleventy.js">a lodash function to shuffle the array</a>. That script will execute each time a build is triggered. The trick then is to trigger a daily build.</p> <p>Interestingly, Netlify—which hosts my one-pager—doesn’t yet offer (AFAICT) an in-built solution for kicking off builds at a regular interval. They do offer build hook URLs that you can trigger via a cron job. <a href="https://www.voorhoede.nl/en/blog/scheduling-netlify-deploys-with-github-actions/">“Scheduling Netlify deploys with GitHub Actions”</a> provides a great walkthrough on how you can do this using Github workflows, including repo secrets to keep your key safe in a public repo. With this solution, my build now randomizes at midnight, PST!</p> <h2 id="please-fork!">Please fork!</h2> <p>That’s pretty much all there is to this project. Please do let me know if you end up hosting your own list, I’d love to check it out!</p> Learning Log, Mar 2020: the great indoors 2020-04-07T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2003/ <h2 id="quarantine">Quarantine</h2> <p>So. COVID-19 has turned the whole world upside down, and it’s been one full month of isolation inside the apartment. Right now I am admittedly the archetype of a person who has this easiest—able to work from home, no kids, not immunocompromised AFAIK—and still, plenty of worry for the health and financial security of others, known and unknown to me. My best thoughts to those who are having a hard time right now, whatever position you find yourselves in. I'll be looking for ways to support others throughout this thing—besides <strong>staying home!</strong>—so please feel free to pass along an organization name or a Square Cash handle (please no Venmo, long story).</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-posca-pens-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-posca-pens-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-posca-pens-s.jpg" alt="A blank notebook with a paint pen drawing of a bay with mountains behind it. A green and a blue pen are laid next to the notebook." /> </picture> <p>Due to my life situation, this shelter-in-place time has been an exploration of the great indoors: finding a new thrill in <a href="https://www.instagram.com/p/B94ZyAbgsB2/">Posca paint pens</a>; going for lunchtime walks (the highlight of my day, when I do squeeze them in); playing Animal Crossing in bits and pieces; working way too much; and getting in lots of video chatting time. I'm thankful to have more opportunities to talk to my family on the other side of the country, and having a lot of fun with socially-distanced happy hours or art hangouts. My next project: sewing masks!</p> <h2 id="highlights">Highlights</h2> <p>Added to my highlights site: “<a href="https://highlights.melanie-richards.com/book/make-time/">Make Time</a>” and “<a href="https://highlights.melanie-richards.com/book/miracle-of-mindfulness/">The Miracle of Mindfulness</a>”. I swear I read about topics other than mindfulness!</p> <picture class="c-web-preview c-web-preview--lighter"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-highlights-mar-2020-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-highlights-mar-2020-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-highlights-mar-2020-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-highlights-mar-2020-s.png" alt="A grid of book covers on my highlights site" /> </picture> <h2 id="personal-site">Personal Site</h2> <p>Didn’t make a whole ton of progress here, but did make body text and link underlines a little less contrasty, by choosing a slightly lighter grey for the text and knocking back underlines from black to a medium grey:</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-link-diff-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-link-diff-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-link-diff-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-link-diff-s.png" alt="Side by side: dark text and links on the left, less contrasted text and links on the right" /> </picture> <h2 id="on-the-internet">On the Internet</h2> <ul> <li>These <a href="https://www.instagram.com/luckylotusmi/?igshid=18pq59t6odrd3">resin geode paintings</a> are wild!</li> <li><a href="https://papaya-whip.glitch.me/">Named Color Dither</a>: a teeny function that recolors images with named CSS colors</li> <li><a href="https://twitter.com/electrolemon/status/1182047291084959744?s=21">This riff on the Succession theme</a> had me in stitches 😂</li> <li><a href="https://twitter.com/veschwab/status/1242402509102120961">Same girl, same.</a></li> </ul> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://webplatform.news/issues/2020-03-19">My findings after browsing the web without a User-Agent header for one week</a></li> <li><a href="https://daverupert.com/2020/03/maintaining-performance/">Maintaining Performance</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://gwhitworth.com/blog/2020/03/please-dont-stick-to-tech/">Please don't stick to tech</a></li> <li><a href="https://www.theatlantic.com/science/archive/2017/11/rats-of-new-york/546959/">New York City Has Genetically Distinct ‘Uptown’ and ‘Downtown’ Rats</a></li> <li><a href="https://www.vox.com/science-and-health/2020/3/11/21173187/coronavirus-covid-19-hand-washing-sanitizer-compared-soap-is-dope">How soap absolutely annihilates the coronavirus</a></li> <li><a href="https://www.spoon-tamago.com/2020/03/13/amabie-japanese-epidemic-yokai/">Amabie: the Japanese Yokai That Can Stave Off Epidemics</a></li> <li><a href="https://marker.medium.com/what-everyones-getting-wrong-about-the-toilet-paper-shortage-c812e1358fe0">What Everyone’s Getting Wrong About the Toilet Paper Shortage</a></li> </ul> <h2 id="cooking">Cooking</h2> <p><em>(Content warning: food)</em> Starting a new section in the Learning Log for new recipes I've tried out! Here's the key:</p> <p> 🤷‍♀️: fine, no pressing need to make again<br /> 👍: I like it, would cook again<br /> 🌟: I love it! <br /> </p> <ul> <li><a href="https://pinchofyum.com/morrocan-spiced-chickpea-glow-bowl">Detox Moroccan-Spiced Chickpea Glow Bowl</a>: 🌟 (despite the silly name)</li> <li><a href="https://recipes.instantpot.com/recipe/chickpea-curry-2/">Chickpea Curry</a>: used chili powder instead of kashmiri chili, and doubled the garam masala. 🌟</li> <li><a href="https://ministryofcurry.com/spinach-daal-instant-pot/">Spinach Daal</a>: 🌟</li> </ul> Fonts with open source licenses 2020-03-11T00:00:00.000Z https://melanie-richards.com/blog/open-source-fonts/ <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-open-source-fonts-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-open-source-fonts-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-open-source-fonts-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-open-source-fonts-s.png" alt="A decorative image that says 'Open Source Fonts' using an open source font" /> </picture> <p class="caption">Typeface is <a href="https://github.com/sebsan/Bagnard">Bagnard</a> by <a href="https://github.com/sebsan">sebsan</a></p> <p>I <a href="https://twitter.com/soMelanieSaid/status/1227103041280602112">started a new open source project</a> the other day, and wondered where—other than <a href="https://fonts.google.com/">Google Fonts</a>—I might find fonts for inclusion in a permissive public repo. Here's a list of resources I found for font files released with the <a href="https://choosealicense.com/licenses/ofl-1.1/">SIL Open Font License (OFL)</a>:</p> <h2 id="curated-resources">Curated resources</h2> <ul> <li><a href="https://www.theleagueofmoveabletype.com/">The League of Movable Type</a></li> <li><a href="https://open-foundry.com/">Open Foundry</a></li> <li><a href="https://usemodify.com/">Use &amp; Modify</a></li> <li>Heck, just take a scroll through <a href="https://www.are.na/frederic-brodbeck/open-source-typefaces">Frederic Brodbeck's Are.na collection</a></li> </ul> <h2 id="larger-libraries">Larger libraries</h2> <ul> <li><a href="https://fontlibrary.org/en">Font Library</a></li> <li><a href="https://www.fontsquirrel.com/fonts/list/find_fonts?filter%5Blicense%5D%5B0%5D=open">Font Squirrel &quot;open&quot; category</a></li> <li><a href="https://github.com/KyleAMathews/typefaces">Kyle A Matthews typefaces repo</a>: this is a collection of NPM packages to self-host fonts from the Google Fonts collection and beyond. I haven’t done an exhaustive review of available typefaces, but at time of writing there's &gt; 1000 packages here so…a great jumping off point for finding more options.</li> </ul> <h2 id="combining-licenses-in-one-project">Combining licenses in one project</h2> <p>#iAmNotALawyer, but I imagine I'll munge together licenses within one <code>license.txt</code> file: specifying/including the SIL license first for any relevant font files, and MIT for everything else.</p> <h2 id="giving-back-to-open-source">Giving back to open source</h2> <p>The fantastic thing about open source is that it is free and open, and helps foster creativity within the community. Writing code, designing typefaces, and making other open source contributions takes real human time, though, so whichever typefaces I go with, I’ll seek out a tip jar for the type designer(s). 👍</p> Learning Log, Feb 2020: the Golden Triangle 2020-03-06T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2002/ <p>Late in February, I headed out to India with my S.O. (R) and some friends to meet R's family and do some tourism in the Golden Triangle (Delhi ⇒ Agra ⇒ Jaipur). We were absolutely spoiled by R's lovely parents—I am now 78% roti—and got the chance to visit a dizzying number of monuments.</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-india-arch-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-india-arch-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-india-arch-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-india-arch-s.jpg" alt="Light streaming through a pointed archway; terracotta mosque ceiling with an intricate white design inside a large circle; intricate ironwork in a geometric pattern" /> </picture> <p :="" class="caption">Details from the mosque at the Taj Mahal and from Humayan’s Tomb</p> <p>Some things I particularly enjoyed from our more touristy activities:</p> <ul> <li>Learning about the ancient Harappa civilization and viewing artifacts at the National Museum in Delhi. I'd love to get my hands on some further reading.</li> <li>Islamic architecture: mosques, monuments, tombs, I love the intricate details and the masterful adherence to symmetry. This also highlighted for me a gap in my previous sightseeing.*</li> <li>Centuries-old strategies for climate control: cross-ventilation, blue and white paint for cooling, silver-painted convex mirrors for heating. Also filling one’s bedroom floor with rose water—I’m guessing when you’re the king, that gets changed out frequently?</li> <li>Gazing out at the built-up, mountainous terrain around Amer Fort in Jaipur.</li> <li>The luxury of a metro train every 4 minutes in Delhi. 🚉</li> </ul> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-jatar-mantar-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-jatar-mantar-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-jatar-mantar-s.jpg" alt="Large structures in triangular shapes" /> </picture> <p :="" class="caption">I couldn’t help but feel transfixed by the mega-sized sun dials on the Jatar Mantar complex.</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-jatar-mantar-dial-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-jatar-mantar-dial-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-jatar-mantar-dial-s.jpg" alt="A large structure with a curved slope extending from the side" /> </picture> <p :="" class="caption">Another vantage point of the world’s largest sundial.</p> <p>* <em>As an outsider, I’m not the right person to comment on this at length. But I do want to acknowledge the frustrating delta between the preservation of national Islamic monuments, vs. India’s recent anti-Muslim citizenship law and <a href="https://www.nytimes.com/2020/02/25/world/asia/new-delhi-hindu-muslim-violence.html">resulting escalated tensions (CW: graphic imagery)</a>. People &gt; buildings.</em></p> <hr /> <p>As for side projects stateside…</p> <h2 id="personal-site">Personal Site</h2> <ul> <li>Decided to build upon what I already have and improve the things that bother me, rather than completely start over with a redesign.</li> <li>Re-implemented Webmentions in the Eleventy version of my site and found <a href="https://sia.codes/posts/webmentions-eleventy-in-depth/">this walkthrough by Sia Karamalegos</a> very helpful. There's something funky going on with date ordering in mentions on some but not all of the posts, so I need to play with this a little bit more.</li> </ul> <h2 id="egg-weaving">Egg Weaving</h2> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-egg-weaving-final-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-egg-weaving-final-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-egg-weaving-final-s.jpg" alt="A tapestry featuring fried eggs with fluffy yokes on a navy background" /> </picture> <p>After spending many months almost but not quiiiite finished, I finished sewing the header (top bit) to the back of the tapestry, added the loops for the bar, and hung this fried-egg weaving. 🎉🍳</p> <h2 id="breathing">Breathing</h2> <p>Love this sentiment from <a href="https://twitter.com/shl/status/1225283973854588928?s=21">Sahil Lavingia</a>:</p> <blockquote> <p>Reading is the inhale, writing is the exhale. Breathe.</p> </blockquote> <p>Related: <a href="https://twitter.com/TatianaTMac/status/1222538813848735744">this Mean Girls-esque acronym</a> from Tatiana Mac.</p> <h2 id="reading">Reading</h2> <ul> <li><a href="https://www.npr.org/2019/12/30/792439555/making-art-is-good-for-your-health-heres-how-to-start-a-habit?mc_cid=5684a35f38&amp;mc_eid=e2a5a07056">Making Art Is Good For Your Health. Here's How To Start A Habit</a></li> <li><a href="https://www.foodandwine.com/vegetables/the-difference-between-yams-and-sweet-potatoes-is-structural-racism">The Difference Between Yams and Sweet Potatoes Is Structural Racism</a></li> </ul> Learning Log, Jan 2020: routines and rhythm of business 2020-02-01T00:00:00.000Z https://melanie-richards.com/blog/learning-log-2001/ <p>Decided to revert from Weeknotes back to monthly Learning Logs for various and sundry reasons. I think I may re-title the Learning Logs to be numbered, because that was fun in Weeknotes. That’ll be a nice first test of using a <a href="https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file">Netlify redirects file</a>.</p> <p>The past couple weeks I haven’t made a terrible amount of progress on my side projects. Right now I’m trying to figure out my routines and how they align with my energy levels throughout the day and week.</p> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://www.robinrendle.com/essays/systems-mistakes-and-the-sea">Systems, Mistakes, and the Sea</a></li> <li><a href="https://frankchimero.com/blog/2020/burnout-list/">The Burnout List</a>: I'm in this post several times and I don't like it.</li> <li>Also eagerly enjoying Frank Chimero’s open redesign, with posts like <a href="https://frankchimero.com/blog/2020/nose-first/">Redesign: Nose-First</a>, <a href="https://frankchimero.com/blog/2020/looking-at-letters/">Looking at Letters</a>, <a href="https://frankchimero.com/blog/2020/picking-typefaces/">Picking Typefaces</a>, and <a href="https://frankchimero.com/blog/2020/scales-and-hierarchy/">Scales &amp; Hierarchy</a></li> <li><a href="https://github.com/WICG/interventions">Interventions</a> is a discussion on user agent interventions re: web APIs.</li> </ul> <h3 id="privacy">Privacy</h3> <ul> <li><a href="https://techcrunch.com/2020/01/08/spotify-brings-streaming-ad-insertion-technology-to-podcasts/">Spotify brings streaming ad insertion technology to podcasts</a></li> <li><a href="https://www.nytimes.com/2020/01/18/technology/clearview-privacy-facial-recognition.html">The Secretive Company That Might End Privacy as We Know It</a></li> <li><a href="https://www.eff.org/deeplinks/2020/01/ring-doorbell-app-packed-third-party-trackers">Ring Doorbell App Packed with Third-Party Trackers</a></li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://css-tricks.com/sit-and-do-it/">“You’ll be surprised how much you will do in a day if you sit and do it.”</a></li> <li><a href="https://stackoverflow.blog/2020/01/13/avoiding-burnout-as-an-ambitious-developer/">Avoiding burnout as an ambitious developer</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://bit.ly/2EHCQck">What Happens to Your Body on No Sleep</a></li> <li><a href="https://getpocket.com/explore/item/remembering-nshu-the-19th-century-chinese-script-only-women-could-write">Remembering Nüshu, the 19th-Century Chinese Script Only Women Could Write</a></li> <li><a href="https://www.fastcompany.com/90440201/this-app-matches-marginalized-communities-to-therapists-who-share-their-background">This app matches marginalized communities to therapists who share their background</a></li> <li><a href="https://blogs.microsoft.com/blog/2020/01/16/microsoft-will-be-carbon-negative-by-2030/">Microsoft will be carbon negative by 2030</a></li> </ul> <h2 id="project-goals-for-february">Project Goals for February</h2> <p>This is overly ambitious given that I also have travel coming up, but ya know, shoot for the moon:</p> <ul> <li>📝 Write + publish 3 blog posts</li> <li>💻 <strong>This site:</strong> <ul> <li>Re-implement Webmentions on top of Eleventy</li> <li>Figure out what I want to get out of my site, what I want to communicate (i.e. deal with the identity crisis that is being a web platform PM that still wants to keep their design-dev background alive)</li> <li>Figure out if I want to completely redesign my site or just revamp what I have, and start making progress on whichever path I choose</li> </ul> </li> <li>✂ <strong>Sewing:</strong> sew some drawstring bags for my reusable makeup pads (I'm trying to get back into sewing!)</li> <li>🍳 <strong>Weaving:</strong> finally finish my egg weaving. All it needs are the final touches in order to hang it up. That’s all it has needed for months now.</li> <li>📚 <strong>Studying:</strong> build more knowledge in web networking &amp; storage.</li> </ul> Weeknotes #22: swapping out Jekyll for Eleventy 2020-01-06T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-22/ <h2 id="draft-jam">Draft Jam</h2> <p>I’ve been thinking about a project modeled after game jams, which is where developers build a game from scratch on a compressed timeline (e.g. a couple days). I thought it would be neat to devote one Saturday, every other month, to turning blog post drafts into published posts. I’m tabling this idea for now because:</p> <ol> <li>I know at some point I’m going to get cranky about setting aside Saturdays to run the project. I wish that weren’t the case, but it is.</li> <li>The project as currently designed doesn’t really encourage the creation of writing habits.</li> </ol> <p>There is still something to explore here, some community to build around sharing through writing. Maybe that’s getting together an in-person writing crew on regular weekday mornings. Maybe that’s simply a hash tag where folks can share what they’re writing, find peer reviewers, and encourage each other. I’ll keep this idea simmering on the back burner.</p> <h2 id="converting-my-site-from-jekyll-to-eleventy">Converting my site from Jekyll to Eleventy</h2> <p>This time of year, I tend to be in the mood to redesign my website, which leads to plenty of unnecessary emotional suffering. This year I plan to keep the base theme generally in tact, but make some improvements on top of it: a nicer landing page, add back a projects section, updates to the blog index and info page, some readability things on blog posts.</p> <p>January 2nd, I cracked open Windows Terminal and found that my Ruby gems had gotten into a funky state on WSL 2. I did what any enterprising developer would do: rewrite the site on a new tech stack. 😂</p> <p>In all seriousness, I’ve wanted to play around with <a href="https://www.11ty.dev/">Eleventy</a>, and am kind of fed up with taking an [albeit mild] dependency on a language I don’t really know and am not currently motivated to learn better (Ruby). So this was a good opportunity to try out a Node-based static site generator.</p> <p>Y’all…Eleventy is FAST. I am so in love with how quickly builds compile. Eleventy can handle a bunch of different templating languages, so most things were fairly trivial to port over. I had to rewrite a shortcode, change some minor syntax things, and install some additional Markdown plugins, but with the exception of <a href="https://www.11ty.dev/docs/dates/#dates-off-by-one-day">fun with dates, as per usual</a> things have gone pretty smoothly. After adding RSS, Webmentions, and doing a bit of file cleanup, I’ll be able to deploy the new Eleventy version on Netlify and…work on changes that will actually be observable to users.</p> <h2 id="hindi-learning">Hindi learning</h2> <p><em>(<a href="https://melanie-richards.com/blog/2019-review#next-personal-goals">Hindi learning is a seasonal goal</a>)</em> This week, I got to the first checkpoint in Duolingo, which covers Devanāgarī characters and a couple basic words. I’m going to go back over this first set of lessons several times, to set a good foundation for the rest of the course. I actually completely reset the course because I found discerning the difference between the syllables to be challenging. Reading <a href="https://omniglot.com/language/articles/devanagari.htm">this article on the script</a> a couple weeks ago actually helped a lot.</p> <h2 id="reading">Reading</h2> <p>Humanity can’t catch a break in 2020, apparently: two days into the year and we already have natural and man-made disasters on our hands. For the wildfires in Australia, <a href="https://www.cnet.com/how-to/australian-fires-everything-we-know-and-how-you-can-help/">this article provides context and action items</a> and there is a <a href="https://www.gofundme.com/f/fire-relief-fund-for-first-nations-communities">Fire Relief Fund for First Nations Communities</a>.</p> 2019 in Review 2019-12-31T00:00:00.000Z https://melanie-richards.com/blog/2019-review/ <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-seagulls-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-seagulls-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-seagulls-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-seagulls-s.jpg" alt="Seagulls swooping in the air above a grey beach on a delightfully dreary day" /> </picture> <p class="caption">So long, 2019! Photo of La Push beach, WA in September.</p> <p>It’s the end of the year and time for another annual review!</p> <p>2019 has been an interesting one professionally, as the Microsoft Edge team has been working on top of Chromium to build the vNext version of the browser. It is incredibly refreshing to be able to ship preview versions of the browser quickly (at long last!), but it also means changing our processes and building up expertise in a new codebase.</p> <p>As for me, I’ve been contributing as a Program Manager to accessibility-related projects like implementing <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/Accessibility/UIA/explainer.md">UI Automation</a> in open source, support for <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/WebVTTCaptionStyling/explainer.md">styled captions</a> and <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/Accessibility/HighContrast/explainer.md">Windows High Contrast</a>, standardization of styling for said HC mode, and <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/Accessibility/VirtualContent/explainer.md">ideas for making virtualized content more accessible</a>. More recently, I’ve started working on projects to protect privacy and build user trust while browsing the web. Trust is a challenging space, and I’m looking forward to honing my PM craft by tackling these industry-wide challenges.</p> <h2 id="highlights">Highlights</h2> <ul> <li>My baby niece was born! She is the first kiddo of this generation in my family and potentially the happiest baby I’ve seen; accordingly we all are completely smitten with her.</li> <li>Gave my first international talk at the W3C Developer Meetup, <a href="https://www.w3.org/2019/09/Meetup/speaker-melanie.html">“Finessing forced-colors: tailoring the High Contrast experience”</a>.</li> <li>At ViewSource, gave a longer version of my aforementioned talk, which covers <code>prefers-color-scheme</code> and touches briefly on the future <code>prefers-contrast</code> as well. <a href="https://www.youtube.com/watch?v=Z_QZhoBrWPc&amp;list=PLo3w8EB99pqLt4A5jZP5Fiw2Gi08CYj6H&amp;index=3&amp;t=0s">“The Tailored Web: Effectively Honoring Visual Preferences”</a> is my favorite of the two versions, as it tells a little bit more of the fuller story with regards to color and contrast preferences. Note: system color keyword <code>Text</code> has since been renamed to <code>CanvasText</code>, to disambiguate from other CSS properties’ values.</li> <li>Also at ViewSource, spoke on <a href="https://www.youtube.com/watch?v=LB9yimgl58o&amp;list=PLo3w8EB99pqLt4A5jZP5Fiw2Gi08CYj6H&amp;index=14&amp;t=0s">my first panel</a>, which to me is 1000x more terrifying than a talk I can prepare ahead of time.</li> <li>Started writing weeknotes to chronicle what I’m working on, thinking about, and reading.</li> </ul> <h2 id="books">Books</h2> <p>I baaaaarely made my <a href="https://www.goodreads.com/user_challenges/14892646">reading goal</a> of 72 books <a href="https://twitter.com/soMelanieSaid/status/1211121999952728064">by the skin of my teeth</a> (thank you, internet friends and short comics). Here are a few books I particularly enjoyed, in alphabetical order:</p> <ul> <li><a href="https://www.goodreads.com/book/show/37976541-bad-blood">Bad Blood: Secrets and Lies in a Silicon Valley Startup</a> by John Carreyrou</li> <li><a href="https://www.goodreads.com/book/show/20613761-citizen">Citizen: An American Lyric</a> by Claudia Rankine</li> <li><a href="https://www.goodreads.com/book/show/42771901-how-to-do-nothing">How to Do Nothing: Resisting the Attention Economy</a> by Jenny Odell</li> <li><a href="https://www.goodreads.com/book/show/39317186-make-time">Make Time: How to Focus on What Matters Every Day</a> by Jake Knapp and John Zeratsky</li> <li><a href="https://www.goodreads.com/book/show/29983711-pachinko">Pachinko</a> by Min Jin Lee: this is probably my favorite book of the year. ✨</li> <li><a href="https://www.goodreads.com/book/show/34506912-the-prince-and-the-dressmaker">The Prince and the Dressmaker</a> by Jen Wang</li> <li><a href="https://www.goodreads.com/book/show/19034943-the-secret-commonwealth">The Secret Commonwealth (The Book of Dust #2)</a> by Philip Pullman</li> <li><a href="https://www.goodreads.com/book/show/20967058-the-secret-place">The Secret Place (Dublin Murder Squad #5)</a> by Tana French</li> <li><a href="https://www.goodreads.com/book/show/35407505-why-art">Why Art?</a> by Eleanor Davis</li> </ul> <p>For 2020, I won’t have a goal for total number of books read. Instead, I want to read 4 books that I owned at the beginning of the year for every new book I borrow/buy/am gifted.</p> <h2 id="next-personal-goals">Next personal goals</h2> <p>I’m not making annual goals this year either, but I am setting seasonal ones. The goals I’m currently working through for December 2019–February 2020 are:</p> <ul> <li><strong>Health:</strong> consistency in exercise, meditation, and going to bed on time (the last one is the hardest for me).</li> <li><strong>Personal:</strong> learn some Hindi for my upcoming trip to India in February! The Devanāgarī alphabet is tricky; I think it’ll take a bit to train my ear for sounds that seem very similar to me as a native English speaker.</li> <li><strong>Side Project:</strong> I was aiming to get Draft Jam launched this season, but I’m having second thoughts about the project (I’ll go into this more in this week’s Weeknotes). I have some candidates for a replacement goal, but I wonder if it might be advantageous to focus instead on showing up consistently to experiment with new things.</li> </ul> <p>Happy New Year!</p> Weeknotes #21: coming to you from rainy Florida 2019-12-22T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-21/ <ul> <li><a href="https://www.figma.com/blog/announcing-auto-layout/">Auto Layout in Figma</a> is a revelation! I must’ve spent hours of my life in the past futzing with rectangles in Illustrator every time I changed some text or added a new element to a component. I want this feature in every program (just imagining now how much time it would save me in PowerPoint).</li> <li>Work this week found me executing on a new-to-me user research task. I found it interesting that every iteration of the task took me 20 minutes less than the previous; usually getting better and more efficient at something new takes awhile, so it was interesting to note such a tight progress loop.</li> <li>Added <a href="https://highlights.melanie-richards.com/book/how-to-do-nothing/">“How to Do Nothing”</a> to my highlights collection.</li> </ul> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://www.24a11y.com/2019/building-an-accessible-bingo-web-app/">Building an accessible bingo web app</a></li> <li><a href="https://alistapart.com/article/making-room-for-variation/">Making Room for Variation</a>: awesome writeup from Yesenia Perez-Cruz on how to make flexible design systems work, with some practical examples.</li> </ul> <h3 id="the-web">The web</h3> <ul> <li><a href="https://medium.com/@derek./how-is-nordvpn-unblocking-disney-6c51045dbc30">How is NordVPN unblocking Disney+? It might be through YOUR own computer. Even if you’ve never used Disney+ or NordVPN.</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.24a11y.com/2019/adding-people-with-disabilities-to-your-team/">What adding people with disabilities to your team brings to the mix</a></li> <li><a href="https://www.eff.org/deeplinks/2019/12/mint-late-stage-adversarial-interoperability-demonstrates-what-we-had-and-what-we">Mint: Late-Stage Adversarial Interoperability Demonstrates What We Had (And What We Lost)</a></li> <li><a href="https://www.vox.com/the-highlight/2019/11/25/20975946/hobby-what-should-i-try-how-to">How to have a true hobby, not a side hustle</a></li> </ul> Weeknotes #20: switching ALL the gears! 2019-11-30T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-20/ <h2 id="week-of-nov-15">Week of Nov 15</h2> <h3 id="thinking-and-doing">Thinking and doing</h3> <ul> <li>Overtime work this week is really cutting into my Pokémon Sword time.</li> <li>Chipping away at some adjustments to my upcoming <a href="https://24a11y.com/">24 Accessibility</a> article (thanks to Sarah Higley for editing!)</li> <li>Thinking about how not everyone needs a five-year plan. If following your fancy has worked for you, who’s to say it can’t continue working for you? #abundanceMindset</li> <li>Fixed and closed a TWO YEAR OLD issue on my personal site. Feels good.</li> </ul> <h3 id="draft-jam">Draft Jam</h3> <p><em>(<a href="https://melanie-richards.com/blog/weeknotes-14/#draft-jam">Original context on Draft Jam</a>)</em></p> <p>When I worked at Fuzzco (design studio) and on MS Edge as a combo dev/designer, switching back to design after a period of dev always felt slow going at first. Now that I’m full time Program Managing on the web platform, context switching to design feels—I’m not going to lie—a bit excruciating. On Saturday morning I tried working on some brand options for Draft Jam, really disliked everything I came up with, and ended up bouncing over to some dev work instead.</p> <p>I think this is okay, because I can get as far as I can on dev without having a design in mind, then switch back to design and spend some more time there. I’m trying out <a href="https://www.11ty.io/">Eleventy</a> (static site generator) for the first time on this project. Digging how it feels lightweight, and fascinated by how un-opinionated it is on what types of files you use.</p> <h2 id="week-of-nov-22">Week of Nov 22</h2> <p>Ended up abandoning the <a href="https://melanie-richards.com/blog/weeknotes-18/#chemex-timer">Chemex Timer project</a> because I found a way to work around limitations I was running into in iOS <a href="https://support.apple.com/en-us/HT208309">Shortcuts</a>.</p> <p><em>Quick note:</em></p> <ul> <li><em>The built-in timer on iOS does not support concurrent timers, ugh.</em></li> <li><em>The Chemex Timer utility would’ve kept time on the various phases needed to brew coffee in a Chemex.</em></li> </ul> <p>Basically, instead of trying to chain together uses of the iOS timer and then running into a race condition where I couldn’t stop the first timer fast enough, I used the Shortcuts “scripting” feature to play a sound after waiting for given intervals of time to pass.</p> <p>I could’ve continued building out this utility for funsies and practice, but eh, I have plenty other side project ideas to get my hands on.</p> <h2 id="reading">Reading</h2> <h3 id="design-and-development">Design and development</h3> <ul> <li><a href="https://adactio.com/journal/16138">Mental models</a></li> </ul> <h3 id="the-web">The web</h3> <ul> <li><a href="https://www.fastcompany.com/90423457/50-years-ago-today-the-internet-was-born-in-room-3420">50 years ago today, the internet was born in Room 3420</a></li> <li><a href="https://www.nytimes.com/2019/11/04/business/secret-consumer-score-access.html">I Got Access to My Secret Consumer Score. Now You Can Get Yours, Too.</a></li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://hbr.org/2018/03/for-women-and-minorities-to-get-ahead-managers-must-assign-work-fairly">For Women and Minorities to Get Ahead, Managers Must Assign Work Fairly</a></li> <li><a href="https://hbr.org/2018/02/if-youre-so-successful-why-are-you-still-working-70-hours-a-week">If You’re So Successful, Why Are You Still Working 70 Hours a Week?</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://kottke.org/19/11/the-secret-to-enjoying-a-long-winter">The Secret to Enjoying a Long Winter</a></li> <li><a href="https://onezero.medium.com/hospital-algorithms-are-biased-against-black-patients-new-research-shows-7ab4cc896fb3">Hospital Algorithms Are Biased Against Black Patients, New Research Shows</a></li> <li><a href="https://www.wired.com/story/truth-about-amazon-food-stamps-tax-breaks/">Bernie Sanders and the Truth About Amazon, Food Stamps, and Tax Breaks</a></li> </ul> Weeknotes #19: shiny toys 2019-11-15T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-19/ <p>Over the weekend I decided to be slightly ridiculous and get the new <a href="https://www.microsoft.com/en-us/p/surface-laptop-3/8vfggh1r94tm">Surface Laptop 3 in Sandstone</a> (disclaimer: I work for Microsoft). I’ve really enjoyed my Surface Pro 4, especially as a drawing tablet, but I’ve wanted a (personal) true laptop on Windows for awhile. The new laptop is so preeeetty, and the keys and trackpad feel like butter.</p> <p>To break in the new device, I started pixelling a doorway that I walked by the other night and thought was neat:</p> <picture class="u-limit-width"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-swansonia-step1-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-swansonia-step1-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-swansonia-step1-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-swansonia-step1-s.png" alt="Pixel art showing dark windows and a blue-and-red stained glass sign bearing the name 'Swansonia'" /> </picture> <p>I may add a little bit more detail to the left window (or not, I’ll see how I feel) and then get started on the doorway area. Yes, this is a multi-session endeavor: pixel art takes me forever.</p> <h2 id="reading">Reading</h2> <ul> <li><a href="https://www.eff.org/press/releases/federal-court-rules-suspicionless-searches-travelers-phones-and-laptops">Federal Court Rules Suspicionless Searches of Travelers’ Phones and Laptops Unconstitutional</a></li> </ul> Weeknotes #18: time for coffee! 2019-11-09T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-18/ <h2 id="chemex-timer">Chemex Timer</h2> <p>Instead of making progress on Draft Jam, I ended up working a bit on the design for that’s a timer for the various phases of Chemex brewing. I think about making this little web app every time I make coffee and have to watch my stopwatch for the various timings.</p> <p>I took this opportunity to finally start playing with Figma in earnest. The <a href="https://www.figma.com/c/plugin/731841207668879837/Image-Palette">Image Palette plugin</a>, which pulls a palette out of a given image, is super fun:</p> <p><img src="https://melanie-richards.com/assets/images/content/figma-plugin-m.jpg" alt="Brown color palettes abstracted from and displayed beneath 3 different photos of coffee. Each palette feels very different than the last." /></p> <p>In other first Figma impressions: it seems weird that, unless there’s an update I haven’t found in the UI, <a href="https://spectrum.chat/figma/general/how-do-i-define-a-new-frame-size~e16dfec2-1c1c-41e7-b78d-1d9451556a29">you can’t define a custom frame size</a> (Figma’s notion of an artboard).</p> <p>I got a little impatient with the vector tools in Figma and ended up bouncing over to Illustrator to work on an app icon:</p> <p><img src="https://melanie-richards.com/assets/images/content/chemex-icon-v1.png" alt="An icon that’s a blend between a Chemex brewer and an hourglass" /></p> <p>Once I got the icon in situ:</p> <p><img src="https://melanie-richards.com/assets/images/content/chemex-icon-v1-iphone.jpg" alt="The icon displayed small on an iPhone, looks a little bit muddy" /></p> <p>I decided that I need to re-introduce more contrast (that I had previously removed) and perhaps simplify details a bit. I’m also going to look into a dark-on-light option as well.</p> <h2 id="right-%5Bhealth%5D-habits%2C-right-time">Right [health] habits, right time</h2> <p>This week I’m grateful for two health habits which hadn’t truly resonated with me in the past but, like an ultimately-beloved album, have now found me at the right time:</p> <ul> <li><strong>Running:</strong> allow me to say that I don’t actually look forward to going for a jog, primarily because what I’d rather be doing with my solo time is sleeping or reading or working on a project. That said, I’m currently enamored with running: for me, it is the most resource-efficient exercise in terms of both money and planning. I feel accomplished and capable when I come back from a jog, no matter how “well” I ran that day. What I love most about running is the time to observe the world around me, to window-shop for houses or note who has weird stuff in their front yard. As the leaves rapidly change in Seattle—marking nearly a year of my new practice—running has become an active meditation on the passing of seasons.</li> <li><strong>Meditation:</strong> speaking of which, I’ve tried meditation several times before, and it actually feels like it might stick this time. I still need to work on meditating daily, and my mind wanders constantly, but I’ve already noticed how a small time investment can make a big difference on processing thoughts and emotions.</li> </ul> <h2 id="reading">Reading</h2> <p>We’ve been reading <a href="https://www.goodreads.com/book/show/44334073-tools-and-weapons">Tools and Weapons</a> for a book club at work, through which I discovered <a href="https://www.microsoft.com/en-us/corporate-responsibility/airband/technology">TV “white spaces”</a>, aka unused TV channels, can be used to provide broadband internet access.</p> <ul> <li><a href="https://www.raymondcamden.com/2019/10/12/why-im-digging-eleventy">Why I’m Digging Eleventy</a></li> <li><a href="https://www.washingtonpost.com/business/2019/10/14/colleges-quietly-rank-prospective-students-based-their-personal-data/">Student tracking, secret scores: How college admissions offices rank prospects before they apply</a></li> <li><a href="https://www.theatlantic.com/magazine/archive/2019/11/why-dont-i-see-you-anymore/598336/">Why You Never See Your Friends Anymore</a></li> <li><a href="https://www.vice.com/en_us/article/43k7z3/nationwide-fake-host-scam-on-airbnb">I Accidentally Uncovered a Nationwide Scam on Airbnb</a></li> </ul> Weeknotes #17: 👻🎃 2019-11-01T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-17/ <p>Happy Halloweek!</p> <h2 id="draft-jam-(original-context))">Draft Jam (<a href="https://melanie-richards.com/blog/weeknotes-14/">original context</a>))</h2> <p>Started setting up a Mailchimp account for Draft Jam and forgot about that whole you-legally-need-a-physical-address bit to sending email newsletters. Three things are true:</p> <ol> <li>If I perceive the rule as moral-to-neutral, I am a rule follower.</li> <li>I don't want to put my home address on this newsletter.</li> <li>P.O. boxes are $140 a year.</li> </ol> <p>Which means that updates for those interested in Draft Jam will be pushed out via RSS or social media . 😄 Unless I discover that I can use my professional mailing address (again, rule follower) in this instance.</p> <p>After some administrative work on the project, I started doing a bit of mood boarding and scribbling down some random thoughts on design elements. Next up is to start playing in Illustrator with some ideas for the brand.</p> Weeknotes #16: *autumn intensifies* 2019-10-26T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-16/ <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fall-foliage-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fall-foliage-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fall-foliage-s.jpg" alt="A trail with lots of trees all in yellow for fall" /> </picture> <p class="caption">Fall foliage along a river-side trail in Leavenworth, WA</p> <p>I’ve been thinking about whether I want to change the frequency of these posts, because they can be hard to keep up week-over-week. I do like Weeknotes because they provide an honest and informal view into how a person thinks and works; you can see naturally how a person’s capacity for doing stuff ebbs and flows. For now, I’ve decided to keep the weeklies, and just move writing them to Fridays. I’m building a personal weekly review habit at work, and so I think it would be nice to go over my work stuff for the week, then type up my Weeknotes while I’m already in a reflective mood.</p> <p>If you’re wondering what I write about in my weekly reviews at work, I:</p> <ul> <li>Review what I accomplished that week (clarifying impact where needed) and anything particularly interesting that happened</li> <li>Write down my prioritized tasks for the next week</li> <li>Capture anything I’m currently thinking about: what I want to improve at, strategies that might make me a more effective PM, any feedback I’ve received, etc.</li> </ul> <p>The weekly reviews I do for myself make it SO MUCH EASIER to type up Official semi-annual reviews, because the answers are all right there. I’d like to start a practice reviewing my personal notes seasonally or annually, so I can observe how and in which direction I’m growing.</p> <h2 id="draft-jam">Draft Jam</h2> <p>Not much time for personal projects this week, but did get around to some small administrative items for <a href="https://melanie-richards.com/blog/weeknotes-14/#draft-jam">Draft Jam</a>: I set up the project email address and ordered SSL sertificates for my registered domains.</p> <h2 id="reading">Reading</h2> <h3 id="web-platform">Web platform</h3> <p>Improve ALL the things:</p> <ul> <li><a href="https://blogs.windows.com/msedgedev/2019/10/15/form-controls-microsoft-edge-chromium/">Improving form controls in Microsoft Edge and Chromium</a></li> <li><a href="https://textslashplain.com/2019/10/16/privacy-tweaks-limiting-referrer/">Improving Privacy by Limiting Referrers</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://theweek.com/articles/864481/much-more-than-cooking">It's so much more than cooking</a></li> <li><a href="https://hbr.org/2019/10/entrepreneurs-who-sleep-more-are-better-at-spotting-good-ideas">Entrepreneurs Who Sleep More Are Better at Spotting Good Ideas</a></li> <li><a href="https://advice.shinetext.com/articles/blame-it-on-the-zzzs-7-sneaky-ways-a-lack-of-sleep-can-derail-us/">Blame It On the Zzzs: 7 Sneaky Ways a Lack of Sleep Can Derail Us</a></li> <li><a href="https://advice.shinetext.com/articles/the-7-types-of-rest-you-need-to-actually-feel-recharged/">The 7 Types of Rest You Need to Actually Feel Recharged</a></li> </ul> Weeknotes #15: autumn and proactive engagement 2019-10-15T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-15/ <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pumpkins-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-pumpkins-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-pumpkins-s.jpg" alt="A cairn of pumpkins in a sunny pumpkin patch" /> </picture> <h2 id="batching-tasks">Batching tasks</h2> <p>A couple months ago I read <a href="https://maketime.blog/">“Make Time”</a> by John Zeratsky and Jake Knapp, which encourages you to choose a “highlight”, or a daily priority to focus on above all else. A highlight should take 60–90 minutes. One of the authors’ suggestions was to batch smaller tasks and use that as a highlight. I batched some to-dos I was dragging around into a few buckets: home-based tasks, errands, phone-based tasks, and online tasks. I found that working in batches is extremely satisfying, because you can knock a whole bunch of things out at once, instead of scheduling 1–2 per day and feeling cruddy when you have to reschedule them time and again.</p> <h2 id="proactive-collective-action">Proactive collective action</h2> <p>Learning that Github (owned by my current company, Microsoft) has <a href="https://twitter.com/evan_greer/status/1181745056698572802">renewed a contract with ICE</a> was incredibly frustrating. I applaud the <a href="https://www.washingtonpost.com/context/letter-from-github-employees-to-ceo-about-the-company-s-ice-contract/fb280de9-2bc3-40d5-b1a5-e3b954bf0d25/">Github employees</a> and <a href="https://github.com/MSWorkers/support.Githubbers">Microsoft employees</a> who called for Github to cancel this contract. This was also a good reminder to me to find a way to <em>proactively</em> engage with my fellow employees to take action on building a more ethical tech industry. A mad dash to help out when something happens does not always pan out well, in part because at a big company it can be really challenging to connect with the folks you need. Gotta get plugged in early.</p> <h2 id="reading">Reading</h2> <ul> <li><a href="https://www.eff.org/deeplinks/2019/10/chinas-global-reach-surveillance-and-censorship-beyond-great-firewall">China’s Global Reach: Surveillance and Censorship Beyond the Great Firewall</a></li> <li><a href="https://textslashplain.com/2019/09/30/same-site-cookies-by-default/">Same-Site Cookies By Default</a></li> </ul> Weeknotes #14: many travels, much talking 2019-10-08T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-14/ <p>Once again it’s been a bit since I last put together a Weeknotes post, and for good reason: I spent the past nearly-three weeks traveling outside of the U.S. I've never been gone from home for this long of a stretch, as evidenced by feeling homesick about a week and a half in. Much respect to the constant travelers among us in the web industry! Regardless, it was a productive couple of weeks in which I got to chat with many web friends, old and new.</p> <h2 id="tpac%3A-fukuoka%2C-japan">TPAC: Fukuoka, Japan</h2> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fukuoka-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fukuoka-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-fukuoka-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fukuoka-s.jpg" alt="Sunset scene from a high window in Fukuoka, with a couple office buildings, the sea, and distant mountains" /> </picture> <p>TPAC is the annual, week-long conference for standards groups at the W3C. It’s essentially 5 days of meetings, and provides the opportunity for different groups to cross-pollinate and share new ideas. The longer I spend working on the web platform, the more this entails scheduling conflicts at TPAC, which was especially the case this year. The flip side is that this community feels more and more like home; there are so many fantastic people working on the open web, and I feel lucky to know more of them with each passing year.</p> <h3 id="w3c-developer-meetup">W3C Developer Meetup</h3> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/w3c-dev-meetup-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/w3c-dev-meetup-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/w3c-dev-meetup-s.jpg" alt="Me speaking at the podium at the W3C Web Developer Meetup" /> </picture> <p class="caption">Photo via <a href="https://twitter.com/TravisLeithead">Travis Leithead</a></p> <p>Alongside standards body meetings, the W3C holds a developer meetup to connect local developers with the standards community. I gave a talk at the meetup this year on new standards for styling in forced color modes (e.g. Windows High Contrast); <a href="https://github.com/melanierichards/talks/tree/master/2019/tpac-hc">“Finessing forced-colors” slides and resources</a> are online. Incidentally, this was my first international presentation.</p> <h2 id="view-source-conference%3A-amsterdam%2C-netherlands">View Source conference: Amsterdam, Netherlands</h2> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-windmills-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-windmills-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-windmills-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-windmills-s.jpg" alt="Windmills looming behind some tall grasses blowing in the wind" /> </picture> <p class="caption">Zaanse Schaans is very windy. Turns out the Dutch knew what they were doing.</p> <p>After spending some personal time exploring Japan and avoiding too much time-zone yoyo’ing, I hopped on over to the Netherlands for View Source. I’ve never been to the country before, so naturally had to squeeze in just a bit of tourism time at the Rijksmuseum and the windmills of Zaanse Schaans.</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/viewsource-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/viewsource-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/viewsource-s.jpg" alt="Me speaking on stage at View Source, in front of a slide showing various Windows High Contrast themes" /> </picture> <p class="caption">Resting speaker face? Photo via <a href="https://twitter.com/viewsourceconf/status/1178600212010606593">View Source</a></p> <p>At <a href="https://2019.viewsourceconf.org/#schedule">View Source</a> I gave a longer version of my inclusive color and contrast talk: incorporating some guidance on styling for dark mode alongside styling for forced color modes, and touching briefly on future <code>prefers-contrast</code> standards. The recording is not yet online, but I’ve uploaded <a href="https://github.com/melanierichards/talks/tree/master/2019/color-contrast-view-source">slides and other resources for “The Tailored Web”</a>. I’m eager for those recordings to come online, as there’s lots of great content on the roster: like a framework for perf culture from <a href="https://twitter.com/shrell">Sharell Bryant</a> and a focus on privacy from <a href="https://twitter.com/selenamarie">Selena Deckelmann</a> and a couple of my Microsoft colleagues <a href="https://2019.viewsourceconf.org/#lillian">Lillian Kravitz</a> and <a href="https://twitter.com/ryancropp">Ryan Cropp</a> (who gave their first talk!).</p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/viewsource-panel-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/viewsource-panel-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/viewsource-panel-s.jpg" alt="The View Source panel participants listening to Desigan Chinniah speaking in turn" /> </picture> <p class="caption">Curious what Dees was saying at this point in the panel. Photo via <a href="https://twitter.com/MSDev_NL/status/1178614037170573314">MSDev NL</a></p> <p>Also at the conference, I spoke on <a href="https://twitter.com/viewsourceconf/status/1178622975584677889">a panel about commitments to the web platform</a>. I’d never participated in a panel before, so I’m grateful to <a href="https://twitter.com/torgo">Daniel Appelquist</a>’s inclusive and considerate moderation style. I have to say I was a bit nervous about said panel—I feel more comfortable with public speaking the more I can “prepare”—but felt richly rewarded by getting to know my fellow participants. In general, meeting people is what I love most about conferences, and View Source was an excellent venue in which to do so.</p> <h2 id="home-again">Home again</h2> <p>Took a couple days off at the end of last week to recuperate, which—against better judgement—swiftly turns into me working on side projects instead of lazing around on the couch…</p> <h3 id="draft-jam">Draft Jam</h3> <p>Two of my recent personal goals are to write more blog posts, and to encourage more folks to likewise share their thoughts. A lot of us filter ourselves out of the conversation (“this has already been blogged about before”, “is this even interesting to anybody but me?”), but I believe everyone has something to share, and the web industry needs to hear from more voices. To this end, I think it might be fun to hold “draft jams”: weekend-long, mostly-online events where folks collectively focus on turning their draft ideas into publishable blog posts.</p> <p>So far I’ve got a couple domains registered, a site map sketched out, and a bit of copy written. But stay tuned! I'm thinking January 2020 will be a great time for the first draft jam.</p> <h2 id="reading">Reading</h2> <h3 id="design-and-development">Design and development</h3> <ul> <li><a href="https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/">An HTML attribute potentially worth $4.4M to Chipotle</a></li> <li><a href="https://adrianroselli.com/2019/09/an-html-element-potentially-worth-18m-to-indiegogo-campaigns.html">An HTML Element Potentially Worth $18M to Indiegogo Campaigns</a></li> <li><a href="https://www.figma.com/blog/how-a-designer-makes-background-patterns-to-push-her-creativity/">How a designer makes background patterns to push her creativity</a>: gotta add that color palette plugin to my repertoire!</li> <li><a href="https://daverupert.com/2019/10/coil-to-monetize-prompts/">Is Using Coil to Monetize Prompts Gonna Work?</a></li> <li><a href="https://www.filamentgroup.com/lab/5g/">5G Will Definitely Make the Web Slower, Maybe</a></li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://alistapart.com/article/the-career-management-document/">An Essential Tool for Capturing Your Career Accomplishments</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.usatoday.com/story/news/nation/2019/09/01/hurricane-dorian-waffle-house-index-disasters/2187708001/">'Waffle House Index' is a real thing during disasters. How does the restaurant chain do it?</a></li> <li><a href="https://qz.com/work/1703963/businesses-should-pay-attention-to-consumers-with-disabilities/">The disabled community is the world’s third-largest economic power</a></li> <li><a href="https://www.nytimes.com/2019/09/11/technology/california-passes-landmark-bill-to-remake-gig-economy.html">California Bill Makes App-Based Companies Treat Workers as Employees</a></li> </ul> Weeknotes #13: the waning summer 2019-09-09T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-13/ <p>It’s been about a month since I last wrote some weeknotes, which I suppose is a datapoint in and of itself. My free time as of late has been filled with visiting family, burning the midnight oil, working on upcoming conference talks (I don't have much speaking experience but/so these take me foreeeevvver), and trying to grab the tail end of a mild summer.</p> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-lapush-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-lapush-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-lapush-s.jpg" alt="Piles of drift wood at La Push beach, with rock formations in the foggy sea" /> </picture> <p class="caption">La Push Beach #2, Olympic Peninsula, WA</p> <p>Over Labor Day weekend, my S.O. and I headed out to the Olympic Peninsula to finally explore the <a href="https://www.wta.org/go-hiking/hikes/hall-of-mosses">Hoh Rainforest</a> and meander down <a href="https://www.wta.org/go-hiking/hikes/second-beach">the beach at La Push</a>. As the crow flies, the peninsula is quite close to Seattle, but it takes 3½–5 hours to get to various points of interest. With many other hikes much closer in drive-time radius (#blessed), this means I've been to Olympics…twice. I hope to make it out there more frequently in the future because there is immense and varied beauty everywhere you go. Feeling: very lucky to live in such a beautiful state; called upon to support local tribal rights and climate justice; and grateful to have gotten a solid and restful break between projects at work.</p> <h2 id="on-the-internet">On the internet</h2> <ul> <li><a href="https://twitter.com/tararobertson/status/1156292056874008576">This low-tech Apple Watch</a> (image alt: small buttons sewn on felt, to mimic the clustered view of app icons on the Apple Watch)</li> <li><a href="https://twitter.com/presentcorrect/status/1164160900103843841?s=21">Tim Pugh’s pleasing arrangements of rocks and other nature bits</a></li> </ul> <h2 id="reading">Reading</h2> <ul> <li><a href="https://www.smashingmagazine.com/2019/08/pitching-writing-publications/">Pitching Your Writing To Publications</a></li> <li><a href="https://css-tricks.com/advice-for-technical-writing/">Advice for Technical Writing</a></li> <li><a href="https://hiddedevries.nl/en/blog/2019-08-23-equality-a-reading-list">Equality: a reading list</a></li> <li><a href="https://www.npr.org/2019/08/25/754190347/giant-pumice-raft-floating-towards-australia-could-help-replenish-great-barrier-">Giant Pumice Raft Floating Toward Australia Could Help Replenish Great Barrier Reef</a>: never rooted for a pumice stone before, but here we are.</li> </ul> Weeknotes #12: going more indie web with Webmentions 2019-07-30T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-12/ <h2 id="webmentions">Webmentions</h2> <p>I’ve been working on getting <a href="https://indieweb.org/webmention.io">Webmentions</a> up and running on my blog posts. If you’re familiar with the pingbacks and trackbacks of Wordpress yore, Webmentions are a similar concept. Website A can send Website B a notification that Website A contains a reference to B. These can include things like social media posts (like the example on <a href="https://melanie-richards.com/blog/weeknotes-10/">Weeknotes #10</a>, hi Dave 👋) or response articles, and can be displayed similarly to comments on Website B.</p> <p>Some resources that were helpful to me in setting up receipt of Webmentions:</p> <ul> <li><a href="https://indieweb.org/Webmention-developer">IndieWeb on Webmentions</a></li> <li><a href="https://webmention.io/">Webmention.io itself</a></li> <li><a href="https://github.com/aarongustafson/jekyll-webmention_io/">Aaron’s Jekyll plugin</a></li> <li><a href="https://brid.gy/">Bridgy</a>, for connecting social media mentions (I’ve filtered out likes and reposts, considering these vanity metrics)</li> </ul> <p>Next I need to <a href="https://jordanmerrick.com/2017/10/14/netlify-and-ifttt/">set up Netlify to automatically build every few hours</a>. I also want to keep thinking through the UX of how Webmentions are displayed beneath posts, as it can be a little “what…the heck…is this?” if you’re unfamiliar and expect a comment box.</p> <h2 id="how-to-help-targeted-immigrants-in-the-u.s.">How to help targeted immigrants in the U.S.</h2> <p>Switching gears to a more serious topic…I would characterize this administration’s immigration practices as crimes against humanity; reporting from the camps make me sick to my stomach, especially when so many detainees have sought asylum in the U.S. to keep their families <em>safe</em> from targeted violence. If you feel likewise (and I hope you do), here are some ways to help:</p> <ul> <li><a href="https://www.nytimes.com/2019/06/24/opinion/border-kids-immigration-help.html">Children Shouldn’t Be Dying at the Border. Here’s How You Can Help.</a></li> <li><a href="https://www.lawyersforgoodgovernment.org/blog/2019/6/21/what-can-you-do-to-help-immigrants-whose-rights-are-under-attack">What can YOU do to help immigrants whose rights are under attack?</a></li> <li><a href="https://www.marketwatch.com/story/this-is-what-it-costs-to-free-one-immigrant-from-detention-2018-06-20">Advocates say the fastest way to help immigrants separated from their children: Post their bail</a>: goes into a little more detail about paying into bail funds. You’re going to want an ad blocker on this site, and CW for suicide.</li> <li>Several prompts for calls to lawmakers on <a href="https://5calls.org/">5calls.org</a></li> <li><a href="https://www.aclu.org/know-your-rights/immigrants-rights/">Immigrants’ Rights</a> and <a href="https://www.immigrantdefenseproject.org/raids/">info on immigration raids for allies</a></li> </ul> <h2 id="on-the-internet">On the internet</h2> <ul> <li><a href="https://queeringthemap.com/">Queering the Map</a>: so many pins. So many feelings. 😭</li> </ul> <h2 id="reading">Reading</h2> <h3 id="design-and-development">Design and development</h3> <ul> <li>[Drop caps &amp; design systems](<a href="https://product.voxmedia/">https://product.voxmedia</a> .com/2019/6/17/18524029/the-ballad-of-drop-caps-and-design-systems)</li> <li><a href="https://www.alexonsager.net/2013/06/04/behind-the-scenes-pokemon-fusion.html">Pokemon Fusion: Behind the Scenes</a></li> <li><a href="https://textslashplain.com/2019/07/17/finding-where-fixes-landed-in-chrome-edge-chromium/">Livin’ on the Edge: Dude Where’s My Fix?!?</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://theaspergian.com/2019/06/09/autism-autistic-communication-differences/">Autistic Communication Differences &amp; How to Adjust for Them</a></li> <li><a href="https://medium.com/@jamsusmaximus/how-to-set-your-personal-okrs-and-stick-to-them-632acec44084">How to set your Personal OKRs and stick to them</a>: something I’m trying out, since I always try to do 5000 things with my personal time, which is not conducive to getting things done.</li> </ul> Weeknotes #11: staycation weekend 2019-07-15T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-11/ <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-alki-framed-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-alki-framed-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-alki-framed-s.jpg" alt="View of Puget Sound from Alki Beach" /> </picture> <p>Having been #blessed with actually-summery weather last weekend, my S.O. and I hopped over to West Seattle to meander in <a href="https://www.wta.org/go-hiking/hikes/schmitz-preserve-park">Schmitz Preserve Park</a>, grab a beer at a brewery, and walk along Alki Beach. We were just a couple neighborhoods from our usual haunts, but as we walked past sunbathers and shaved-ice stalls, it was incredible to me how easy it was to access the feeling that I was away on vacation.</p> <h2 id="reading">Reading</h2> <h2 id="design-and-development">Design and development</h2> <ul> <li><a href="https://www.scottohara.me//blog/2019/07/08/a-toast-to-a11y-toasts.html">A toast to an accessible toast...</a></li> <li><a href="https://css-tricks.com/indieweb-and-webmentions/">IndieWeb and Webmentions</a></li> <li><a href="https://overreacted.io/preparing-for-tech-talk-part-2-what-why-and-how/">Preparing for a Tech Talk, Part 2: What, Why, and How</a></li> <li><a href="https://overreacted.io/preparing-for-tech-talk-part-3-content/">Preparing for a Tech Talk, Part 3: Content</a></li> <li><a href="https://www.smashingmagazine.com/2019/07/javascript-knowledge-reading-source-code/">Improve Your JavaScript Knowledge By Reading Source Code</a></li> </ul> <h2 id="work-and-productivity">Work and productivity</h2> <ul> <li><a href="https://advice.shinetext.com/articles/guess-what-being-consistently-good-enough-can-unlock-your-greatness/">Guess What? Being Consistently 'Good Enough' Can Unlock Your Greatness</a></li> </ul> <h2 id="other-interesting-articles">Other interesting articles</h2> <ul> <li><a href="https://nosidebar.com/decluttering-minimalism/">The Difference Between Decluttering and Minimalism</a></li> <li><a href="https://nosidebar.com/minimalism-and-books/">Minimalism and Books: Tips on Letting Go</a>: relevant to my interests.</li> </ul> Weeknotes #10: Happy birthday, America! Do better. 2019-07-08T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-10/ <h2 id="independence-day-resolutions">Independence Day resolutions</h2> <p>A friend I used to work with—and whom I’m most likely to run into at marches and rallies—shared <a href="https://www.crustaceansingles.com/2018/07/resolve-to-be-better.html">this comic</a> around the 4th of July (aka Independence Day for the United States):</p> <p><img src="https://melanie-richards.com/assets/images/content/independence-day-resolutions.jpg" alt="A single-panel comic with one upbeat and one confused stick figure conversing; conversation follows" /></p> <details> <summary>Text alternative for the comic dialog</summary> <p>Person A: So, have you decided on your Independence Day resolutions yet?</p> <p>Person B: My…what?</p> <p>Person A: You know…like what specific injustices do you plan to rebel against in the coming year?</p> </details> <p><strong>I LOVE THIS IDEA.</strong> Unquestioning patriotism doesn’t resonate with me—believing that my country can do better, and I can be part of that, does resonate. So I really love the action of tying civic goals to this holiday. Starting this year, I’m choosing (quietly) 2–3 top priorities where I can focus my energy and resources.</p> <h2 id="including-remote-colleagues">Including remote colleagues</h2> <p>Being the only person calling into a meeting—where everyone else is physically present—reminds me that I can do a better job of making sure my remote colleagues are heard. It is really, really hard to interject into a conversation, so I want to be better at polling the folks on the phone every so often.</p> <h2 id="reading">Reading</h2> <p>Speaking of remote colleagues, the only links I set aside this week are from a one Eric Lawrence:</p> <ul> <li><a href="https://textslashplain.com/2019/06/24/surprise-undead-session-cookies/">Surprise: Undead Session Cookies</a></li> <li><a href="https://textslashplain.com/2019/07/05/challenges-with-federated-identity-in-modern-browsers/">Challenges with Federated Identity in modern browsers</a></li> </ul> Weeknotes #9: gimme a break 2019-07-01T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-9/ <h2 id="taking-breaks-for-productivity">Taking breaks for productivity</h2> <p>A couple weeks ago I was feeling a little bit frayed around the edges and decided to take a couple days off work to simply chill. The funny thing is that I felt the same way almost exactly a year ago, which is fairly instructive—I’ve got to take some downtime before mid-June rolls around. Maybe that’s a little…obvious to some, but like others, I have a hard time stepping away from the work to rest. I want to acknowledge here that (rather unfortunately) PTO is a privilege that not everyone has. But for those who do, sometimes taking a short break to recharge can be far more beneficial to productivity than powering through on fumes.</p> <h2 id="balc-accessibility-remediation">BALC accessibility remediation</h2> <p>(<a href="https://melanie-richards.com/blog/weeknotes-3/#starting-accessibility-remediation-on-an-old-project">Context in Weeknotes #3</a>) I started simplifying the layout of some pages that had inaccessible filters, which are also no longer very applicable. For example, filtering design grads based on where they wanted to live in 2014 makes no sense in 2019+. In the process of simplifying the layout, I started using CSS Grid here (again, 2019), then decided to write these parts as components (in the design sense, thank you Web Components for making this confusing) and started porting other parts of the site over to the new components. If you give a mouse a cookie, he'll ask for a glass of milk...In any case, now I've got dust all over the place, and none of this pushed to production yet, but there you are. Progress?</p> <h2 id="reading">Reading</h2> <h3 id="design-and-development">Design and development</h3> <ul> <li><a href="https://alistapart.com/article/responsible-javascript-part-2/">Responsible JavaScript, part 2</a></li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://advice.shinetext.com/articles/how-to-actually-enjoy-and-stick-with-your-new-years-goals/">How to Actually Enjoy—And Stick With—Your New Year's Goals</a></li> <li><a href="https://doist.com/blog/complete-guide-to-deep-work/">The Complete Guide to Deep Work</a></li> <li><a href="https://www.ted.com/talks/laura_vanderkam_how_to_gain_control_of_your_free_time/up-next">How to Gain Control of Your Free Time (video)</a>: found this advice particularly inspiring, will have to try out writing about future me's past year to set priorities!</li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.brucelawson.co.uk/2019/why-would-a-screen-reader-user-have-a-braille-display/">Why would a screen reader user have a braille display?</a>: not the reason I was expecting this article to touch on (a break from the cognitive load of aural output). 👨‍👧‍👦</li> <li><a href="https://melmagazine.com/en-us/story/i-staked-out-my-local-dominos-to-see-just-how-accurate-its-pizza-tracker-is">I Staked Out My Local Domino’s to See Just How Accurate Its Pizza Tracker Is</a>: hard-hitting journalism!</li> <li><a href="https://blogs.windows.com/msedgedev/2019/06/27/tracking-prevention-microsoft-edge-preview/">Introducing tracking prevention, now available in Microsoft Edge preview builds</a>: much as I love the internet, there’s a lot of junk out there. Excited for this privacy feature we shipped!</li> </ul> Weeknotes #8: I’m an auntie! 2019-06-18T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-8/ <p>My niece was born within the past week, making me a first-time auntie! I might be biased 😇, but she’s an especially adorable tiny person and I can’t wait to meet her in person when I visit my sister in a few weeks. Moments like these make it hard to live far away from family, but I’m looking forward to spending quality time with my new niece and her parents as the initial crush of visitors recedes a bit.</p> <h2 id="cabin-weekend-in-packwood%2C-wa">Cabin weekend in Packwood, WA</h2> <p>Over the weekend a few friends and I stayed at a cabin near-ish to Mt. Rainier. This was one of those magical couple of days where all of nature conspires to please you with its immense beauty, everyone’s mood is relaxed and easy, and all is well in life.</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-packwoodlake-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-packwoodlake-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-packwoodlake-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-packwoodlake-s.jpg" alt="Panoramic view of an aqua lake with snow-capped mountains beyond" /> </picture> <p>It was too early in the season to actually hike on Rainier, but we got the chance to stretch our legs on the trail to <a href="https://www.wta.org/go-hiking/hikes/packwood-lake">Packwood Lake</a> and were rewarded by beautiful aqua waters.</p> <p>There were also these odd Seussical clustered flowers at a certain point along the trail. <span class="u-sr-only">Deleted text</span> <del>I’m still trying to ID them, so let me know if you happen to be savvy with Washington wildflowers:</del> <span class="u-sr-only">Inserted text</span> <ins>Based on <a href="https://twitter.com/AmeliasBrain/status/1141114811306000384">Amelia Bellamy-Royds’s sleuthing</a>, these seem to be <a href="https://www.wildflower.org/gallery/result.php?id_image=34431">Xerophyllum tenax</a> aka Common Beargrass.</ins><span class="u-sr-only">End inserted text</span></p> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-seussflowers-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-seussflowers-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-seussflowers-s.jpg" alt="Tall flowers with vertical clusters of white blossoms and a large central stamen" /> </picture> <p>In wildlife this weekend, we spotted: two very sturdy-looking deer on the drive into Packwood (blessedly they decided to stay on their side of the highway); electric-blue dragonflies zipping along at Packwood Lake; and a tiny hummingbird hovering overhead of the backyard hammock.</p> <p>On Sunday after checkout, my S.O. and I squeezed in an extra hike. We intended to head to Kelly Butte, but the GPS led us to a dead-end road where some dude was just trying to shoot a couple targets in peace. He sent us over to <a href="https://www.wta.org/go-hiking/hikes/green-lake">Green Lake trailhead</a> where we indulged a bit of spontaneous hiking. I’m still not clear if the body of water we saw was the actual advertised lake, but this was a peaceful, forested trail and a great end to our time in the national forests before driving back to Seattle.</p> <h2 id="catching-up-on-lit-highlights">Catching up on lit highlights</h2> <p>When not tromping throught the woods, I updated my <a href="https://highlights.melanie-richards.com/">highlights collection</a> with a couple more books: <a href="https://highlights.melanie-richards.com/book/big-magic/">Big Magic</a> by Elizabeth Gilbert, <a href="https://highlights.melanie-richards.com/book/mindset/">Mindset</a> by Carol Dweck, and <a href="https://highlights.melanie-richards.com/book/upstream/">Upstream</a> by Mary Oliver.</p> <h2 id="reading">Reading</h2> <h3 id="design-and-development">Design and development</h3> <ul> <li><a href="https://www.zachleat.com/web/facepile/">The Crushing Weight of the Facepile</a>: stealing this for when I implement Webmentions on my blog.</li> <li><a href="https://css-tricks.com/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing/">What if we got aspect-ratio sized images by doing almost nothing?</a>: assuming those attributes are present. ☺</li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://blog.trello.com/hack-anxiety-at-work">How To Hack The Anxiety Roadblock And Get More Done</a></li> <li><a href="https://randsinrepose.com/archives/the-builders-high/">The Builder’s High</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://developer.paciellogroup.com/blog/2019/06/disability-etiquette-university-of-guelph-accessibility-conference/">Disability Etiquette</a></li> <li><a href="https://www.seattlemet.com/articles/2018/6/19/around-the-clock-at-pike-place-market">Around the Clock at Pike Place Market</a></li> </ul> Weeknotes #7: foggy-day hikes 2019-06-14T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-7/ <p>Another double-feature weeknotes covering the past couple weeks. 🤷‍♀️</p> <p>On Sunday of Memorial Day weekend I went with my S.O. for a hike on <a href="https://www.wta.org/go-hiking/hikes/ira-spring-memorial">Ira Spring Trail</a>, with Mason Lake as our destination; you can also follow the trail to Bandera Mountain. Either way, you’re going to get quite a bit of elevation in a short distance.</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-iraspring-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-iraspring-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-iraspring-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-iraspring-s.jpg" alt="A chain of verdant mountains with a ring of fog hanging halfway up the peaks" /> </picture> <p>We drove through light showers on Sunday morning, which were pretty much cleared up by the time we got on the trail. This made for a lovely view of the surrounding mountains, with fog hanging low in the valleys.</p> <p>This was probably my favorite hike of the year thus far, because despite being a fairly short distance and not hiking to the peak, we had tons of sweeping views off the side of the mountain.</p> <p>One of my favorite things is a strong smell of pine, which doesn’t happen consistently even if you’re completely surrounded by pine/fir trees. I’d like to look into exactly what helps bring forward the scent, but I suspect recent rains help, because this was a very piney hike.</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-masonlake-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-masonlake-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-masonlake-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-masonlake-s.jpg" alt="A partially snowy peak and some pine trees reflected and their reflection in a calm lake" /> </picture> <p>We stopped for lunch at Mason Lake, where a food-motivated chipmunk was very inquisitive and snow still hung around the trail. A light rain hitting the surface of the lake and little bugs skating across the water made this a Very Good Day.</p> <p>Trails hiked earlier this year: [Vashon] <a href="https://twitter.com/soMelanieSaid/status/1084659950662574080">Island Center Forest</a> and <a href="https://www.instagram.com/p/BsmLSiBBD6Y/">Point Robinson Park</a>, <a href="https://www.instagram.com/p/BvXYc2_h5WM/">Coal Creek Falls</a> and a bunch of connected tiny trails in the Cougar Mountain area, <a href="https://www.instagram.com/p/BvsXwzyBLrg/">Poo Poo Point</a> (first redux in WA), <a href="https://www.instagram.com/p/Bwle-MxhJ_L/">Teneriffe Falls</a>, and <a href="https://www.instagram.com/p/BxbF73bBlAs/">Little Si</a>. We hiked Little Si when we felt too lazy to go for Mt. Si, and were pleasantly surprised by how sublime and lovely the hike was.</p> <h2 id="on-the-internet">On the internet</h2> <ul> <li><a href="https://twitter.com/prokaryota/status/1132744852129636353?s=21">Birds that sew</a>?! In the video, the Common Tailorbird is poking holes in two leaves with its beak, then sewing them together with more plant material.</li> <li><a href="https://zzz.dog/">Zdog</a> is a JS engine for <code>&lt;canvas&gt;</code> that creates pseudo-3D effects for “flat” illustration. <a href="https://codepen.io/desandro/pen/vdwMyW">Here is a good example</a>. CW: both links contain continuous motion.</li> <li>I like that <a href="https://katydecorah.com/">Katy Decorah’s site</a> is a simple paginated list of personal and professional explorations, categorized by adventures, code, epicurean, notes, and playlists. It’s like “bringing your whole self” in a chill format.</li> <li>As someone interested in both typography and internationalization, I can’t wait to dig into Donny Trương’s <a href="https://vietnamesetypography.com/">Vietnamese Typography</a>. (via <a href="https://twitter.com/TatianaTMac/status/1136646712292810752">Tatiana Mac</a>)</li> </ul> <h2 id="til">TIL</h2> <p>Lenses are named after lentils; <em>lens</em> is the Latin for “lentil”. (via <a href="https://www.goodreads.com/book/show/25663961-how-not-to-die">How Not to Die</a>; silly title, interesting book)</p> <h2 id="reading">Reading</h2> <h3 id="design-and-development">Design and development</h3> <ul> <li><a href="https://matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/">Building the most inaccessible site possible with a perfect Lighthouse score</a>: evilly poetic demonstration of the value of manual testing</li> <li><a href="https://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/">Reducing motion with the picture element</a></li> <li><a href="https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html">Contextually Marking up accessible images and SVGs</a></li> <li><a href="https://hiddedevries.nl/en/blog/2019-05-24-baking-accessibility-into-components-how-frameworks-help">Baking accessibility into components: how frameworks help</a></li> <li><a href="https://github.blog/2019-05-23-introducing-new-ways-to-keep-your-code-secure/">Introducing new ways to keep your code secure</a>: some helpful new features on Github</li> <li><a href="https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/">W3C and WHATWG to work together to advance the open Web platform</a></li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="https://css-tricks.com/prioritizing/">Prioritizing</a>: I especially dig Sarah’s approach to gauging whether tasks align with her values.</li> <li><a href="https://cupofjo.com/2019/05/how-to-prevent-sunday-scaries/">A Trick for Making Weekends Feel Longer</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://adage.com/creativity/work/north-face-top-imagens">The North Face used Wikipedia to climb to the top of Google search results</a>: capitalism continues to eat the web ☹</li> <li><a href="https://destroytoday.com/writings/burning-out-and-finding-stability/">Burning Out and Finding Stability</a>: always appreciate people sharing their stories; so many can relate.</li> </ul> Weeknotes #6: canaries in flight 2019-05-30T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-6/ <p>Last week, we released our <a href="https://blogs.windows.com/msedgedev/2019/05/20/microsoft-edge-macos-canary-preview/#fDfwqLCZqc5IWL0F.97">Canary ring of Microsoft Edge on MacOS</a>! It’s wild to have a Microsoft browser on MacOS again, via our transition to working in the Chromium open source project. I didn’t know this before joining Microsoft a few years ago, but <a href="https://en.wikipedia.org/wiki/Internet_Explorer_for_Mac_OS_X">IE was available on MacOS</a> in the late 90s and early aughts.</p> <p>In other Microsoft-y thoughts, why did it take me so long to learn more keyboard shortcuts for Outlook?! <code>CTRL + Q</code> (mark as read) and <code>Backspace</code> (archive) are my new jam.</p> <h2 id="balc-accessibility-remediation">BALC accessibility remediation</h2> <p>As mentioned in <a href="https://melanie-richards.com/blog/weeknotes-3/">Weeknotes #3</a>, I’m fixing accessibility issues in a project I built in 2013, <a href="https://baladycreatives.com/">Badass Lady Creatives</a>. The week of May 19th I:</p> <ul> <li>Made sure text in blog posts maxed out at a shorter line length (this was also bothering me from a purely visual perspective).</li> <li>Reduced the number of links in post “card” components, and added empty alt attributes to the thumbnails so that the images would be treated as presentational. Previously, alt text was adding clutter to link readout.</li> </ul> <p>Separately from the main remediation project, I made sure that all traffic was directed over HTTPS.</p> <h2 id="egg-tapestry-weaving">Egg tapestry weaving</h2> <p>Took some me-time on the weekend to work on my <a href="https://melanie-richards.com/blog/weeknotes-3/">previously-mentioned egg tapestry</a> while listening to too much Brooklyn 99. I’m so close to finishing this tapestry, finally! I wove the last couple inches of the design, wove the “header” (a section that gets tucked under and sewn to the back, to provide a clean edge to the work), and started trimming and weaving in the loose ends on the back. I’ll post a photo when this thing is finally done-done and hung!</p> <h2 id="reading">Reading</h2> <h3 id="web-design-and-development">Web design and development</h3> <ul> <li><a href="https://www.dannyguo.com/blog/automating-turbotax-data-entry-with-puppeteer/">Automating TurboTax Data Entry With Puppeteer</a></li> <li><a href="https://rachelandrew.co.uk/archives/2019/05/23/css-grid-subgrid-lands-in-firefox-nightly/">CSS Grid subgrid lands in Firefox Nightly</a></li> <li><a href="https://davidwalsh.name/resize-observer">Resize Observer</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.newyorker.com/tech/annals-of-technology/can-indie-social-media-save-us">Can “Indie” Social Media Save Us?</a></li> <li><a href="https://insider.windows.com/en-us/articles/new-microsoft-paint-accessibility-features/">New Microsoft Paint Accessibility Features</a>: paint’ing with the keyboard, oooh.</li> </ul> Weeknotes #5: Willkommen to Washington 2019-05-19T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-5/ <p>I have a pro-bono client that I’ve worked with long-term the past couple years (10/10 would recommend for feeling connected to something larger than yourself). When we first put together the website, we did a “work party” retreat to get everyone in a room together to populate the site, ask technical questions, etc. This weekend we had a similar retreat in Leavenworth, WA to get things up and running for their 2019 conference. I’d recommend this somewhat unique way of working—instead of spreading out work across weeks and sporadic communications, you can get a whole lot done by sitting down together for a longer work session.</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-leavenworth-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-leavenworth-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-leavenworth-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-leavenworth-s.jpg" alt="Leavenworth, WA: a cozy street of Bavarian-style buildings with 3 mountains looming close behind" /> </picture> <p>If you are unfamiliar, Leavenworth is a somewhat ridiculous little place east of the Cascades mountain range that is decked out in full Bavarian regalia. I’m talking: heavily-guarded corporate branding rendered here in ornate blackletter signage. Brats and pretzels aplenty. Leavenworth was struggling in the 1960s, so a group of business people got together and decided to reinvent the town as an Alpine village. This has worked out pretty well, especially around Oktoberfest. I’d never been and had always assumed there was some sort of cultural heritage here but nope: just a commercial idea that did really, really well. This was my first time to Leavenworth, and while I somehow managed not to eat a single Bavarian good, I was enamored by the mountains looming large behind the town.</p> <p>And: I also learned the pretty yellow flowers that popped up a week ago on I-90 medians is an invasive weed called <a href="https://www.nwcb.wa.gov/weeds/scotch-broom">Scottish broom</a>.</p> <h2 id="email-magic-%E2%9C%A8">Email magic ✨</h2> <p>That lovely thing where you think your MX record is borked and then a message comes through! I broke said record when I moved my site to deployment on Netlify, attempted to fix it, and thought that didn’t do the trick. I’m very glad that it was an issue of particularly long propagation times because I was dragging my heels on debugging that (to the point of temporarily putting a different contact email up on my site).</p> <h2 id="reading">Reading</h2> <h3 id="design-and-development">Design and development</h3> <ul> <li><a href="https://www.deque.com/blog/the-state-of-accessibility-gaad-2019/">The State of Accessibility: GAAD 2019</a>: I’m…pleasantly surprised that this U.S. administration did something good for accessibility?</li> <li><a href="https://www.zachleat.com/web/google-fonts-display/">Google Fonts is Adding font-display</a></li> <li><a href="https://css-tricks.com/a-few-functional-uses-for-intersection-observer-to-know-when-an-element-is-in-view/">A Few Functional Uses for Intersection Observer to Know When an Element is in View</a></li> <li><a href="https://matthiasott.com/articles/into-the-personal-website-verse">Into the Personal-Website-Verse</a></li> <li><a href="https://addyosmani.com/blog/lazy-loading/">Native image lazy-loading for the web!</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.cnet.com/news/for-people-with-disabilities-accessibility-techs-still-not-all-it-could-be/">Accessibility tech has a lot of unfinished business to get right</a></li> <li><a href="https://www.fastcompany.com/90344669/google-just-added-closed-captioning-to-everything-on-your-phone">Google just added closed captioning to everything on your phone</a></li> </ul> Weeknotes #4: lots o’ links 2019-05-13T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-4/ <p>Without further ado, lots o’ links!</p> <h2 id="on-the-internet">On the internet</h2> <ul> <li><a href="https://github.com/koddsson/coworking-with">coworking-with</a>, a neat little utility to add coworking attribution to a commit</li> <li>A <a href="https://mymodernmet.com/free-vintage-sewing-patterns/">huge repository of vintage sewing patterns</a></li> <li>This <a href="https://dribbble.com/shots/6454763-Color-Composition-Testing-Temp-late">color composition testing template</a>, a clever little AI file to determine how well colors <em>actually</em> play with each other, aesthetically.</li> </ul> <h2 id="reading-%2F-watching">Reading / watching</h2> <h3 id="design-and-development">Design and development</h3> <ul> <li>Lots of fun stuff at <a href="https://www.microsoft.com/en-us/build">Build 2019</a>! Here’s <a href="https://blogs.windows.com/msedgedev/2019/05/06/edge-chromium-build-2019-pwa-ie-mode-devtools/#8TlixqGMlijJQ22X.97">a lightweight overview of all our MS Edge news</a>.</li> <li><a href="https://www.theguardian.com/info/2019/apr/04/revisiting-the-rendering-tier">Revisiting the Rendering Tier</a></li> <li><a href="https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/">Revisiting prefers-reduced-motion, the reduced motion media query</a></li> <li><a href="https://adactio.com/journal/15050/">Split</a></li> <li><a href="https://www.rachelandrew.co.uk/archives/2019/05/07/getting-involved-with-the-web-platform/">Getting involved with the web platform</a></li> <li><a href="https://www.lflegal.com/2019/05/wcag-birthday/">Happy Birthday WCAG — Now You Are Twenty!</a></li> <li><a href="https://www.scottohara.me/note/2019/05/07/resources.html">Accessibility Resources</a>: if you want to get started with web accessibility, this is a good list covering the what, why, and how.</li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.cnn.com/2019/04/30/business/impossible-meat-shortage/index.html">America is running out of Impossible Burgers</a></li> <li><a href="https://kottke.org/19/04/why-everyone-is-watching-tv-with-closed-captioning-on-these-days">Why Everyone Is Watching TV with Closed Captioning On These Days</a></li> </ul> Weeknotes #3: the pile-up 2019-05-06T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-3/ <p>The first rule of weeknotes is that you write them every week. 😅</p> <p>Work and (positive) family stuff has kept me busy lately, but here’s been what’s up over the few couple weeks.</p> <h2 id="starting-accessibility-remediation-on-an-old-project">Starting accessibility remediation on an old project</h2> <p><a href="https://baladycreatives.com/">Badass Lady Creatives</a>, a blog and directory I used to run, is a classic example of the accessibility issues that are rampant across the web. I don’t update the site anymore, but judging from emails I get every few weeks, people still visit it. I’m going to try to change the design the least amount as I can in order to scope the project (directory pages will probably need to change a fair amount…), but I will be fixing the issues.</p> <p>First, I started by logging a bunch of issues found via quick validator scans and known here-be-dragons. I’m starting to fix issues that are present across the site, so I: added a missing landmark; fixed a bunch of heading levels where I was using various h-levels for their styling; and added a visible text label to the menu button. There’s a lot more to do—lots of text contrast issues as an example—so I’m just getting started.</p> <h2 id="insert-egg-jokes-here">Insert egg jokes here</h2> <picture class="u-limit-width"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-egg-weaving-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-egg-weaving-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-egg-weaving-s.jpg" alt="A tapestry weaving with fried eggs on a dark navy background, roughly 85% finished and still on the loom" /> </picture> <p>After taking a couple months’ hiatus from weaving for unknown reasons, I’m very close to finishing my egg tapestry! I’ve churned through those last two eggs over the past couple weeks, and after this I never want to weave loops again. Perhaps it’s the way I’m doing it, but the yarn for the loops feels very slippy and prone to falling out if not locked in immediately and with great care.</p> <p>Why eggs? Why NOT eggs, my friend?</p> <h2 id="on-the-internet">On the internet</h2> <p>Learned the term <a href="https://en.m.wikipedia.org/wiki/Gold_master_(disambiguation)">“gold master”</a>, admired <a href="https://twitter.com/41Strange/status/1114647973109960705">pigeons with fantastic feather collars</a>, and giggled at <a href="https://twitter.com/jarrydhuntley/status/1116935952302333952?s=21">this video of tigers drinking, set to Yoshi noises</a>.</p> <h2 id="reading">Reading</h2> <p>Some of the articles I’ve read lately.</p> <h3 id="design-and-development">Design and development</h3> <ul> <li><a href="https://alistapart.com/article/accessibility-for-vestibular">Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective</a></li> <li><a href="https://css-tricks.com/accessibility-events/">Accessibility Events</a></li> <li><a href="https://developer.paciellogroup.com/blog/2019/04/think-like-an-accessible-ux-researcher-part-3/">Think like an accessible UX researcher part 3: five common mistakes in usability testing and how to avoid them</a></li> <li><a href="https://www.gatsbyjs.org/blog/2019-04-18-gatsby-commitment-to-accessibility/">Our Commitment to Accessibility in Gatsby</a></li> <li><a href="https://medium.com/@sheribyrnehaber/the-perilous-pitfalls-of-accessibility-maturity-a5cdba1bfec7">The “perilous pitfalls” of Accessibility Maturity</a>: organizational considerations in creating accessible experiences</li> <li><a href="https://justin.stach.uk/how_we_built_the_most_accessible_grocery_app">How we made the country’s most accessible grocery shopping app (without anyone noticing)</a></li> </ul> <h3 id="work-and-productivity">Work and productivity</h3> <ul> <li><a href="http://greatergood.berkeley.edu/article/item/why_you_never_seem_to_have_enough_time">Why You Never Seem to Have Enough Time</a></li> <li><a href="http://greatergood.berkeley.edu/article/item/how_to_only_do_things_you_actually_want_to_do">How to Only Do Things You Actually Want to Do</a></li> <li><a href="https://www.theguardian.com/science/2017/dec/04/would-you-be-willing-words-turn-conversation-around">'Would you be willing?': words to turn a conversation around (and those to avoid)</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://alistapart.com/article/nothing-fails-like-success/">Nothing Fails Like Success</a></li> <li><a href="https://blogs.microsoft.com/on-the-issues/2019/04/15/were-increasing-our-carbon-fee-as-we-double-down-on-sustainability/">We’re increasing our carbon fee as we double down on sustainability</a> (disclaimer: I work for Microsoft and applaud any sustainability efforts!)</li> <li><a href="https://www.propublica.org/article/tsa-not-discriminating-against-black-women-but-their-body-scanners-might-be">TSA Agents Say They’re Not Discriminating Against Black Women, But Their Body Scanners Might Be</a></li> <li><a href="https://www.theatlantic.com/technology/archive/2019/04/influencers-are-abandoning-instagram-look/587803/">The Instagram Aesthetic Is Over</a>: a striking reminder that authenticity can be its own performance.</li> <li><a href="https://junkee.com/sekiro-game-difficulty/200666">Video Game Difficulty Is An Accessibility Issue</a></li> </ul> Weeknotes #2: on not doing things 2019-04-08T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-2/ <p>Between overtime and coming down with a cold (again) (possibly connected), this was a quiet week for side projects.</p> <p><a href="https://www.the100dayproject.org/">The 100 Day Project</a> kicked off this week, and I gave serious thought to participating, and mulled over a couple different project ideas. I ended up deciding that though I’d really like to feel part of the collective effort to reclaim creative time, the parameters (do the same action for 100 days) don’t particularly suit the things I want to invest time in right now. Even fun things can feel like a chore if they’re not serving your values.</p> <h2 id="always-learning">Always learning</h2> <p>Rachel Andrew’s <a href="https://rachelandrew.co.uk/css/">CSS page</a> bears this preamble:</p> <blockquote> <p>I have been figuring out CSS for 20 years. Every time I figure something out, I write it down.</p> </blockquote> <p>I love the way Rachel phrased this. Learning never stops. It is easy to imagine that someone who is very knowledgeable on a topic Knows Everything and Never Struggles but we are all, always figuring it out as we go.</p> <h2 id="reading">Reading</h2> <h3 id="design-and-development">Design and development</h3> <ul> <li><a href="https://css-tricks.com/differential-serving/">Differential Serving</a></li> <li><a href="https://css-tricks.com/css-houdini-could-change-the-way-we-write-and-manage-css/">CSS Houdini Could Change the Way We Write and Manage CSS</a></li> <li><a href="https://css-tricks.com/yet-another-javascript-framework/">Yet Another JavaScript Framework</a></li> <li><a href="https://girliemac.com/blog/2019/04/02/javascript-i18n-reiwa-era/">Reiwa - JavaScript International Date Format and Japan's New Imperial Era</a></li> <li><a href="https://alastairc.uk/2019/04/oddities-in-color-perception/">Oddities in color perception</a></li> </ul> <h3 id="stuff-about-sleep-i-need-to-internalize">Stuff about sleep I need to internalize</h3> <ul> <li><a href="https://zapier.com/blog/sleep-and-productivity/">The Science of Sleep and Productivity</a></li> <li><a href="https://twitter.com/codermeow/status/1114910728190697472">This tweet from Crystal Martin’s abundance/scarcity talk</a> (I hope the slides/video will be online somewhere, seems like it was a great talk!)</li> </ul> Weeknotes #1: in which we begin again 2019-04-02T00:00:00.000Z https://melanie-richards.com/blog/weeknotes-1/ <p>Inspired by <a href="https://medium.com/job-garden/a-pre-history-of-weeknotes-plus-why-i-write-them-and-perhaps-why-you-should-too-week-16-31a4a5cbf7b0">this post on weeknotes</a> (h/t <a href="https://twitter.com/justinmduke/status/1110709291357343744">Justin Duke</a>), I’ve decided to try the concept out myself. I’ve been doing something similar for awhile in one fashion or another: a monthly learning log or reading log. But I like the idea of a faster-cadence, lo-fi update on what I’m working on, thinking through, reading, etc. Work-work will probably be covered here in generalities, but heck, let’s try this out.</p> <p>Here's my weeknotes for the week of March 24, 2019.</p> <h2 id="project-of-the-day">Project of the Day</h2> <p>I've been experimenting with different ways of trying to deal with all the bajillion irons in the fire at work, and one idea I'm testing out right now is a project of the day. Instead of having a laundry list of things to do on a particular day spread out across various different efforts (which are invariably more than a day's worth and just contribute to a feeling of chaos), I'm trying to focus on just ONE main thing that needs to happen each day, for a total of 5 main projects each week. If I'm done early, cool—start the next project on the list.</p> <p>I do also need time to deal with the more reactionary items on the list, so along with the daily project I'm reserving set time in my daily schedule for:</p> <ul> <li>Answering emails</li> <li>Triaging bugs</li> <li>&quot;Quick&quot; items (whatever fits in the timebox: so I'm not randomized, but also not dragging small items along day after day and losing context / eating up more time in the long run)</li> </ul> <p>Meetings still pose a challenge to focused time.</p> <h2 id="new-moon-ide-theme">New Moon IDE theme</h2> <p><img src="https://melanie-richards.com/assets/images/content/new-moon.png" alt="A code editor with a middle-dark grey background, and pastel-ish primary colors for the foreground" /></p> <p>I recently started using Tania Rascia’s <a href="https://taniarascia.github.io/new-moon/">New Moon theme</a> in VS Code, and I have to say it’s the <em>perfect</em> contrast level for me. I’d suggest checking it out if you like dark IDE themes but find pure-black backgrounds a bit wearing on the eyes!</p> <h2 id="imposter-syndrome">Imposter syndrome</h2> <p>Having completely changed my career/role a year ago, I can confirm that no matter what I’m doing, I’ll probably always have imposter syndrome and/or feelings of inadequacy. This is freeing in its own way: running from it will not help. You can only do your best to work through it and focus on meeting what the project needs.</p> <h2 id="reading">Reading</h2> <p>Technically these articles were read across March, rolling the (non-exhaustive) March reading log into these first weeknotes.</p> <h3 id="web-design-and-dev-articles">Web design and dev articles</h3> <ul> <li><a href="https://webaim.org/projects/million/">The WebAIM Million</a>: the top million home pages have an average of 59.6 detectable errors.</li> <li><a href="https://ericwbailey.design/writing/2019-03-05-fighting-uphill.html">Fighting Uphill</a></li> <li><a href="https://webaim.org/projects/practitionersurvey2/">Survey of Web Accessibility Practitioners #2 Results</a>: fascinating to note how the survey participant demographics compare to the general web profession population.</li> <li><a href="https://equalentry.com/qa-with-leonie-watson-accessibility-engineer-and-director-tetralogical/">Q&amp;A With Léonie Watson, Accessibility Engineer and Director, TetraLogical</a></li> <li><a href="https://csswizardry.com/2019/03/cache-control-for-civilians/">Cache-Control for Civilians</a></li> <li><a href="https://alistapart.com/article/canary-in-a-coal-mine-how-tech-provides-platforms-for-hate">Canary in a Coal Mine: How Tech Provides Platforms for Hate</a></li> <li><a href="https://alistapart.com/article/responsible-javascript-part-1">Responsible JavaScript: Part I</a></li> <li><a href="https://axesslab.com/skip-links/">Your skip links are broken</a></li> </ul> <h3 id="other-interesting-articles">Other interesting articles</h3> <ul> <li><a href="https://www.forbes.com/sites/alicegwalton/2017/10/05/different-types-of-meditation-change-the-brain-in-different-ways-study-finds/">Different Types Of Meditation Change Different Areas Of The Brain, Study Finds</a></li> <li><a href="https://www.theatlantic.com/technology/archive/2019/03/hottest-chat-app-teens-google-docs/584857/">The Hottest Chat App for Teens Is … Google Docs</a></li> <li><a href="https://medium.com/@ccgraves/im-disabled-and-not-some-other-word-ab70e54aefd5">I’m Disabled (And Not Some Other Word)</a></li> <li><a href="https://nymag.com/intelligencer/2018/12/how-much-of-the-internet-is-fake.html">How Much of the Internet Is Fake? Turns Out, a Lot of It, Actually.</a></li> <li><a href="https://docs.microsoft.com/en-us/windows/desktop/uxguide/inter-keyboard">Keyboard [interaction design docs]</a>: casually reading about keyboard patterns on Windows</li> </ul> <h2 id="accessibility-camp-seattle">Accessibility Camp Seattle</h2> <p>If you’re local to the Pacific NW, consider attending <a href="https://accessibilitycampseattle.org/">Accessibility Camp Seattle</a>! Last year’s <a href="https://accessibilitycampseattle.org/event-info/#whats-an-unconference">unconference</a> felt like new friends coming together to share their experiences, learnings, and explorations in a low-pressure environment. This would be a great event whether you’re newly curious about accessibility, or if you’re always open to learning more. Thinking of what I might suggest for a session… 🤔</p> “Semantics to Screen Readers” on A List Apart 2019-03-21T00:00:00.000Z https://alistapart.com/article/semantics-to-screen-readers

An in-depth walkthrough on the role of accessibility APIs in making web content accessible to assistive technologies.

Read the article on A List Apart Hobbies and Hustles: Reading Log, Feb 2019 2019-03-21T00:00:00.000Z https://melanie-richards.com/blog/reading-log-1902/ <p>Short list this month and a few weeks late 😅</p> <ul> <li><a href="https://bradfrost.com/blog/post/dont-get-clever-with-login-forms/">Don’t Get Clever with Login Forms</a></li> <li><a href="https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/">Solid Vs. Outline Icons: Which Are Faster to Recognize?</a>: further underlines how squishy it is to understand icon recognizability and usability. Not sure I quite agree with the “button selection” section: a mute button that goes from outlines to solid fills when activated feels right to me. Side note, I would like the design industry to standardize on mute button stylistic treatment, because “does the line through the mic mean I'm muted or not?” introduces a fair amount of paranoia into calls where I don’t want to add noise.</li> <li><a href="http://sophieshepherd.com/2017/06/14/learning-to-be-chill.html">The Road to Burnout is Paved With Context Switching</a></li> <li><a href="https://www.glamour.com/story/how-to-care-less-about-work-stress">Here’s Why You Should Care Less About Your Work</a>: a bit click-baity of a title, but worth a read.</li> <li><a href="https://www.manrepeller.com/2019/02/trap-of-turning-hobbies-into-hustles.html">The Modern Trap of Turning Hobbies Into Hustles</a></li> <li><a href="https://www.theatlantic.com/technology/archive/2019/02/when-kids-realize-their-whole-life-already-online/582916/">When Kids Realize Their Whole Life Is Already Online</a></li> </ul> Tea and GTD: Learning Log, Jan 2019 2019-02-03T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1901/ <h2 id="react">React</h2> <p>My secret web dev shame is that I haven’t really used any modern JS UI frameworks and libraries, never having worked on a project that I felt truly called for using something like React or Vue. That being said, I’ve wanted to build side projects using a couple different tools, so I can appreciate <em>firsthand</em> how other web developers are working today. In January I just started reading the <a href="https://reactjs.org/docs/getting-started.html">React docs</a> and such, and will have to think about what to build…</p> <h2 id="(not)-microwaving-tea">(Not) microwaving tea</h2> <p>For some reason, “Brits upset about microwaved tea” has been popping up on my radar lately. I use an electric kettle to heat water for coffee and tea, but was not sure why microwaving is such a cardinal sin. It’s just…one other way to get hot water, right? Assuming the tea bag is added <em>after</em> the water is microwaved and yet this is still egregious.</p> <p>There are a couple different competing ideas and pseudo-science around this topic, but the best explanation I can find is that: different teas are best heated to particular temperatures; you can’t control the temperature of hot water in the microwave as you can with an electric kettle; and thus heating your tea to the wrong temperature can make it taste bitter and gross.</p> <p>The more you know… 🌈☕️</p> <h2 id="getting-things-done">Getting Things Done</h2> <p>Late last year I thought I’d finally find out with the fuss was with the “Getting Things Done” method. Supposedly you want the *original* edition of David Allen’s book, and instead of ordering it through a third-party Amazon seller, lazy me just decided to look up articles with distilled versions of GTD:</p> <ul> <li><a href="https://lifehacker.com/335269/practicing-simplified-gtd">Practicing Simplified GTD</a></li> <li><a href="https://lifehacker.com/182318/empty-your-inbox-with-the-trusted-trio">Empty Your Inbox with the Trusted Trio</a></li> <li><a href="https://lifehacker.com/270404/how-to-make-your-to-do-list-doable">How to Make Your To-Do List Doable</a></li> <li><a href="https://hamberg.no/gtd/">GTD in 15 minutes – A Pragmatic Guide to Getting Things Done</a></li> <li><a href="https://zapier.com/blog/gtd-getting-things-done/">Easy GTD®: How to Get Things Done or Get Back on the GTD Wagon</a></li> <li><a href="https://www.macworld.com/article/1044327/web-apps/tipsinbox.html">The inbox makeover</a></li> </ul> <p>Too soon to tell how well simplified GTD is working out, though I can say greatly reducing my email folder filing system has been really nice…</p> <h2 id="a-few-articles">A few articles</h2> <ul> <li><a href="https://designobserver.com/feature/26-years-85-notebooks/6067">26 Years, 85 Notebooks</a></li> <li><a href="https://daverupert.com/2019/01/accessible-page-navigations-in-single-page-apps/">Accessible Page Navigation in Single Page Apps</a></li> <li><a href="https://daverupert.com/2018/09/color-cycling-image-pixels-with-workers/">Color Cycling with Workers</a></li> <li><a href="https://www.rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanishing-industry-entry-points/">HTML, CSS and our vanishing industry entry points</a></li> <li><a href="https://austinkleon.com/2018/09/14/paper-monuments-to-human-effort/">Paper monuments to human effort</a></li> <li><a href="https://www.raptitude.com/2018/12/why-the-depth-year-was-my-best-year/">Why the Depth Year Was My Best Year</a></li> </ul> <p>What have you learned this month?</p> 2018 in Review 2019-01-15T00:00:00.000Z https://melanie-richards.com/blog/2018-review/ <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2018-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2018-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-2018-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-2018-s.jpg" alt="Three images: a small cabin near a creek, a moody horizon on the Puget Sound, and the sun nearly set across the bay" /> </picture> <p class="caption">Some local adventures near water this year: walking the Denny Creek trail and dreaming of a cabin in the woods by a stream; drifting near Deception Pass to spot whales; a truly excellent weekend with friends at Birch Bay.</p> <p>This blog hasn’t been updated since March, which coincides perfectly with a period of tremendous, though quiet, growth for me. I was hired onto the Microsoft Edge team in 2015 as a designer/developer, and over the past couple years have been picking up other activities on the web platform team. I was interested in having more direct impact on the web platform, and so in 2018, I started a new role as a feature program manager for Microsoft Edge. PMing is about identifying the next impactful work for a particular feature space (for me, accessibility); engaging in web standards discussions; helping facilitate new work internally; and partnering with other teams and the community so that the web platform meets their needs (reeeally oversimplifying here for brevity).</p> <p>It is fascinating to be surrounded by people who are familiar and dear to you, but essentially embark on a new career. PMing has meant further calling and building upon existing skills; picking up new ones; getting familiar with processes; and rapidly gaining deeper domain knowledge. Add to this some <a href="https://github.com/MicrosoftEdge/MSEdge/blob/master/README.md">big changes for the web platform</a>, and you have a very interesting year.</p> <p>In all things, I can’t help but focus on everything I could be doing better. I could be faster, more deeply technical, more connected, more vocal, more insightful. No matter how much we can reasonably accomplish in a period of time, I always wish it were more. But as I reflect on day zero vs. now, I’m thinking maybe there is in fact a lot to be proud of.</p> <h2 id="highlights">Highlights</h2> <p>Again, a quiet year for tangible and specific highlights to mention here, but here’s a few:</p> <ul> <li>I ran my first (half-day) workshop on CSS Grid at <a href="https://beyondtellerrand.com/blog/wrap-up-munich-2018">beyond tellerrand in Munich</a>, and gave a lunch-track talk on grid layout.</li> <li>My <a href="https://twitter.com/csswg/status/988551628172083201">first direct spec contribution</a> was <a href="https://www.w3.org/blog/CSS/2018/04/23/css-align-3-pre-cr-update/">published in the CSS alignment spec</a>!</li> <li>I joined the <a href="https://www.w3.org/WAI/ARIA/">ARIA Working Group</a> at the W3C, and have really enjoyed getting to know and work with the folks in the group. In general, I’ve met a lot of really awesome people this year working in accessibility.</li> <li>One of my sisters moved out to Seattle (near me) in the spring, and the other is expecting a baby. In 2019, I’m going to be a first-time aunt!</li> <li>Of my bucket list items, I: ate dumplings at Din Tai Fung, went whale watching, and took an archery lesson. The lesson was like…five minutes long, as there’s not much to the basics. Archery is fun.</li> </ul> <h2 id="family">Family</h2> <p>I don’t tend to talk about heavier life moments in my year-in-review, but I did lose one of my grandmothers this year; she passed away while I was on a business trip, and that was tough. My family held her memorial closer to her birthday (she’s a 4th of July baby), and it was really special to gather with her friends and hear so many people say such wonderful things about her. It didn’t occur to me until someone mentioned it, but I have never heard her speak an ill or impatient or judgemental word against anyone. Ever. That’s kindness goals. Love you, Mom Mom.</p> <h2 id="books">Books</h2> <p>I accidentally read 72 books out of a goal of 52. Incidentally, 72 is my goal for 2019, so probably a year from now I'll be writing &quot;I read 90 books!&quot;. This is the silver lining of a long commute.</p> <p>Here are a few I particularly enjoyed, in alphabetical order:</p> <ul> <li><a href="https://www.goodreads.com/book/show/30971707-all-grown-up">All Grown Up</a> by Jami Attenberg</li> <li><a href="https://www.goodreads.com/book/show/33846708-the-black-tides-of-heaven">The Black Tides of Heaven</a> by J.Y. Yang</li> <li><a href="https://www.goodreads.com/series/221766-borne">Borne series</a> by Jeff VanDerMeer. I liked &quot;The Strange Bird&quot; best of the two stories, but I'd say it would be best to read &quot;Borne&quot; first.</li> <li><a href="https://www.goodreads.com/book/show/31147267-the-changeling">The Changeling</a> by Victor LaValle had me like &quot;WHAT DID I JUST READ&quot;</li> <li><a href="https://www.goodreads.com/book/show/13623785-the-cutting-season">The Cutting Season</a> by Attica Locke</li> <li><a href="https://www.goodreads.com/book/show/7093952-faithful-place">Faithful Place</a> by Tana French</li> <li><a href="https://www.goodreads.com/book/show/27746288-goodbye-vitamin">Goodbye, Vitamin</a> by Rachel Khong</li> <li><a href="https://www.goodreads.com/book/show/35068432-i-ll-be-gone-in-the-dark">I'll Be Gone in the Dark: One Woman's Obsessive Search for the Golden State Killer</a> by Michelle McNamara, RIP.</li> <li><a href="https://www.goodreads.com/book/show/6424171-jurassic-park">Jurassic Park</a> by Michael Crichton</li> <li><a href="https://www.goodreads.com/book/show/26118005-my-best-friend-s-exorcism">My Best Friend's Exorcism</a> by Grady Hendrix. Sweetest book you'll ever read about an exorcism.</li> <li><a href="https://www.goodreads.com/book/show/22600836-sakana-vol-1">Sakana</a> by Mad Rupert, extremely adorable.</li> <li><a href="https://www.goodreads.com/series/120477-villains">Villians series</a> by V.E. Schwab</li> </ul> <p>I swear I read non-fiction and enjoyed some of it, but realistically it was a pretty fiction-heavy year.</p> <h2 id="2019-theme">2019 theme</h2> <p>My theme for 2019 is <strong>curiosity</strong>. In every area of life, I’d like to pursue goals from a spirit of learning instead of a pressure to achieve. I’d like to ask more questions and generate more options. Instead of feeling discouraged by setbacks, I’d like to be curious about what other solutions I might find.</p> <p>Here’s to the new year!</p> Pigments and poetry: Learning Log, Feb 2018 2018-03-09T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1802/ <ul> <li>Rethinking my relationship to &quot;wasted&quot; work: those tasks you spend a good chunk of time on, but the results go unused. It’s not a “waste” of time, it’s effort you had to put in to better see where you were going and what the best outcome should be. False starts = building up to something.</li> <li><a href="https://twitter.com/anatudor/status/965838510765862913">This Twitter thread on documentFragment</a> goes to show that the perf gains of this approach, as with most things, depends on context.</li> <li>Lemon seems like too bright a flavor to pair with chocolate, but I actually quite liked <a href="https://www.theochocolate.com/product/lemon/">this bar by Theo</a>.</li> </ul> <h2 id="nice-bits-of-internet">Nice bits of internet</h2> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/heidi-gustafson-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/heidi-gustafson-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/heidi-gustafson-s.jpg" alt="A grid of powder pigments from natural sourcecs" /> </picture> <p class="caption">I'm such a sucker for <a href="https://www.instagram.com/heidilynnheidilynn/">found pigments</a>; these are <a href="http://earlyfutures.com/about-ochre-pigments/">ochre pigments collected by Heidi Gustafson</a></p> <ul> <li><a href="https://www.microsoft.com/en-us/research/project/project-torino/">Project Torino</a> is a physical programming language for children with visual impairments. It seems there’s always some cool venture at my company that I hadn’t yet heard about (this one via Rob Whiting in the <a href="https://a11ywins.tumblr.com/post/125378431293/a11y-slackers">web-a11y</a> Slack).</li> <li><a href="https://github.com/andrew--r/frontend-case-studies">Frontend Case Studies</a></li> <li>Discovered <a href="https://kimabeles.com/portfolio/smog-collectors/">Kim Abeles's smog plates</a> through the Good Food podcast. Abeles puts a stencil on a dinner plate, leaves it out on the roof in LA, and lets smog sediment settle on the open spaces of the plate. She's done these for the U.S. presidents, where she leaves a plate out for a longer or shorter time depending on the president's environmental record (longer for subjectively worse records).</li> <li><a href="https://jisho.org/">Jisho</a> is a super useful Japanese &lt;=&gt; English dictionary that even shows the stroke order for various kanji.</li> </ul> <h2 id="interesting-reads">Interesting reads</h2> <ul> <li><a href="https://www.atlasobscura.com/articles/shadows-from-the-walls-of-death-book">How a Library Handles a Rare and Deadly Book of Wallpaper Samples</a></li> <li><a href="https://www.theatlantic.com/science/archive/2018/01/what-was-this-article-about-again/551603/">Why We Forget Most of the Books We Read</a></li> <li><a href="https://alistapart.com/article/my-accessibility-journey-what-ive-learned-so-far">My Accessibility Journey: What I’ve Learned So Far</a></li> <li><a href="https://www.buzzfeed.com/charliewarzel/the-terrifying-future-of-fake-news">He Predicted The 2016 Fake News Crisis. Now He's Worried About An Information Apocalypse.</a> This one is good, but it’s rough. Save to read when you’re in a good state of mind.</li> <li><a href="https://www.nytimes.com/2017/04/06/opinion/why-authoritarians-attack-the-arts.html">Why Authoritarians Attack the Arts</a></li> <li><a href="https://www.nytimes.com/2018/02/16/opinion/sunday/tyranny-convenience.html">The Tyranny of Convenience</a></li> <li><a href="https://ourdataourselves.tacticaltech.org/posts/30-on-weaponised-design/">On Weaponised Design</a></li> </ul> <p>Some gloom and doom in the reads list this month, so to bolster you in these trying times:</p> <blockquote> <p>If equal affection cannot be, <br /><br /> Let the more loving one be me.</p> </blockquote> <p>—From <a href="https://www.poets.org/poetsorg/poem/more-loving-one">&quot;The More Loving One&quot;</a> by W. H. Auden (via <a href="https://www.rosieleizrowice.com/blog/damn-giving">Rosie L.</a>)</p> Calligraphy and camouflage: Learning Log, Jan 2018 2018-02-13T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1801/ <div class="video-embed-wrap"> <div class="video-embed"> <iframe title="Sho Ha Hito Nari: Brushes, strokes and a reflection of self - Aoi Yamaguchi" src="https://player.vimeo.com/video/251433669?title=0&byline=0&portrait=0" width="640" height="360" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> </div> <ul> <li>I went to <a href="https://overcast.fm/+J1L8Aty4U">beyond tellerrand Munich</a> to give a workshop and a lunchtime presentation on CSS Grid. Though I spent most of the conference talking to folks at the Microsoft Edge booth (always awesome to meet a new community of designers/devs), I did catch <a href="https://vimeo.com/251433669">Aoi Yamaguchi’s fascinating presentation</a>. Aoi is classically-trained in Japanese calligraphy, and has extended that practice to conceptually reinterpret characters and incorporate calligraphy into performance art. Really compelling and <a href="https://vimeo.com/251433669">worth a watch</a>.</li> <li><strong>~Honesty time~</strong> One of my intentions for the year was to be more patient with myself. I’ve realized this month that, for myself, I’ve created a false binary: “person who makes mistakes” vs “good / talented / kind / knowledgeable / capable person”. Being more aware of that mental trap seems like a good thing.</li> <li>New-to-me organization: <a href="https://collegefund.org/">American Indian College Fund</a></li> </ul> <h2 id="nice-bits-of-internet">Nice bits of internet</h2> <ul> <li>The <a href="https://lovetosewpodcast.com/">Love to Sew podcast</a> is making me want to sew all the things! I’ve also been enjoying <a href="https://helenscloset.ca/">Helen’s Closet</a>, a blog written by one of the cohosts. Helen does a weekly round-up of others’ projects, and always seems to include great diversity of style, body types, and backgrounds.</li> <li><a href="https://overcast.fm/+J1L8Aty4U">This Hurry Slowly episode on nature</a></li> <li><a href="https://www.theguardian.com/uk-news/gallery/2018/jan/24/camouflage-knitting-in-pictures">Camouflage knitting</a></li> </ul> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/camo-knit-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/camo-knit-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/camo-knit-s.jpg" alt="A man in a gridded sweater that matches the gridded wall behind him" /> </picture> <p :.caption="">Very Garden State. Knitwear by Nina Dodd, photo by Joseph Ford</p> <h2 id="interesting-reads">Interesting reads</h2> <ul> <li><a href="https://www.textileartist.org/maker-excuse-maker/">Are you a maker or an excuse maker?</a> Not excited about the title of this one, but this article has great advice for cultivating a creative practice.</li> <li><a href="https://motherboard.vice.com/en_us/article/kz3xyz/detroit-mesh-network">Ignored By Big Telecom, Detroit's Marginalized Communities Are Building Their Own Internet</a></li> <li><a href="https://qz.com/1176962/map-how-the-word-tea-spread-over-land-and-sea-to-conquer-the-world/">Tea if by sea, cha if by land: Why the world only has two words for tea</a></li> <li><a href="https://jacobinmag.com/2018/01/under-neoliberalism-you-can-be-your-own-tyrannical-boss">Under Neoliberalism, You Can Be Your Own Tyrannical Boss</a></li> <li><a href="https://www.ted.com/talks/zeynep_tufekci_we_re_building_a_dystopia_just_to_make_people_click_on_ads">We're building a dystopia just to make people click on ads</a></li> <li><a href="https://www.npr.org/sections/thesalt/2018/01/15/577675950/meet-the-fearless-cook-who-secretly-fed-and-funded-the-civil-rights-movement">Meet The Fearless Cook Who Secretly Fed—And Funded—The Civil Rights Movement</a></li> <li><a href="https://medium.com/samsung-internet-dev/perfectionism-anxiety-and-learning-to-be-kind-to-yourself-e3c23710704">Perfectionism, anxiety and learning to be kind to yourself</a></li> <li><a href="https://www.raptitude.com/2017/12/go-deeper-not-wider/">Go Deeper, Not Wider</a></li> </ul> Intentions for 2018 2017-12-30T00:00:00.000Z https://melanie-richards.com/blog/2018-intentions/ <p>This year I’d honestly just like to enjoy being a person. I’m always so focused on feeling like I’m not doing enough professionally, or developing enough creatively, that the rest of my life takes the back burner. Which feels weird for me to say, because I’ve seen some of your annual review posts, and I’d like to know where y’all are getting your Timeturners.</p> <h2 id="themes">Themes</h2> <p>How I’d like to be in 2018:</p> <ul> <li><strong>Present:</strong> savoring the present moment, letting the future worry about itself</li> <li><strong>Patient:</strong> this in the context of not being so hard on myself, of giving myself the space to explore instead of immediately demanding perfection</li> <li><strong>Process-oriented:</strong> knowing that we do our best and perhaps most efficient work when we’re having fun, anyway</li> </ul> <p>I didn’t initially mean to go with the alliteration at first, but when you have two words naturally starting with “p”, you can’t <em>not</em> make the third one also start with “p”. In order to better stay on track with my themes this year, I’ll do some journaling every week or two to check in and see how I’m doing.</p> <h2 id="intentions">Intentions</h2> <ul> <li>As I mentioned in my <a href="https://melanie-richards.com/blog/2017-review/">year in review post</a>, I’m going for 52 books again. This year, though, 35 of them will be books I owned at the beginning of the year. Working on that backlog!</li> <li>Cooking more again, and improving my skills/trying new things in the kitchen. At the very least, getting back into the habit of cooking for the week every Sunday night.</li> <li>Making progress on a <a href="https://bucketlist.melanie-richards.com/">bucket list item</a> once a month (progress on the reading goal doesn’t count, as that’s just my natural state 😉). The Pacific Northwest items are heavy on spring/summer activities, but there’s a few things I can do before then. In support of this, I’m making a routine of alternating “adventure” weekends with “rest” or “project” weekends.</li> <li>Finding community in the effort to effect positive change.</li> <li>I’m bad at keeping in touch long distance—aren’t we all? I’ll video chat with a friend once a month.</li> <li>Getting in creative time daily before work. I started doing this later on in 2017, and find a lot of value and joy in it, despite not being super consistent. Would like to show up more consistently this year, which also supports the effort to get to bed on time!</li> <li>This one is more clearly work-related: looking at my process monthly and seeing if there is anything I can do to make it more efficient, no matter how seemingly small.</li> </ul> <p>What are your goals or intentions for 2018?</p> 2017 in Review 2017-12-30T00:00:00.000Z https://melanie-richards.com/blog/2017-review/ <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/2017-review-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/2017-review-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/2017-review-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/2017-review-s.jpg" alt="A collage of scenes from Mexico City, Paris, a wedding, and New York City" /> </picture> <p class="caption">Street art in Mexico City; Musée D’Orsay in Paris; my sister’s wedding; NYC architecture.</p> <p>Someday the world will be at peace and won’t feel like a three-ring circus of horror and I can write about the positive personal stuff that happened and not feel weird about it. A girl can dream.</p> <h2 id="highlights">Highlights</h2> <ul> <li>Joined the W3C <a href="https://www.w3.org/Style/CSS/current-work">CSS Working Group</a> as a part of my role on Microsoft Edge. I’ve met a lot of wonderful people and while I feel like I’m just getting started there, I hope to contribute more in the future.</li> <li>Made a couple minisites: <a href="https://melanie-richards.com/blog/highlights-minisite/">a collection of book highlights</a> and <a href="https://bucketlist.melanie-richards.com/">my bucketlist</a>.</li> <li>Gave my first real tech talk at the <a href="https://channel9.msdn.com/Events/WebPlatformSummit/Microsoft-Edge-Web-Summit-2017/ES08">Microsoft Edge Web Summit</a> on CSS Grid.</li> <li>Spent quite a bit of time with family this year, despite the long distance: one of my sisters got married in the fall.</li> <li>Traveled to a couple new-to-me-places: Mexico City for a wedding, and Paris for work. Really enjoyed the vibes of both cities, and still daydreaming about a couple meals…</li> <li>Attended the reboot of <a href="https://accessibilitycampseattle.org/">A11y Camp Seattle</a>. Met great new people, learned new things, and all around had a really lovely time.</li> <li>Had the pleasure of meeting a couple internet buddies IRL on a trip to New York.</li> <li>Built a(n appropriately visually-conservative) pro bono site for <a href="https://courthousedogs.org/">Courthouse Dogs Foundation</a>. They help set up programs where dogs comfort children and other vulnerable victims of crime while testifying in court or in a similiarly-stressful situation.</li> <li>Got to do some freelance dev work on the side for a talented design shop here in Seattle. I love the chance to switch things up and work on a client site again.</li> </ul> <h2 id="bye%2C-bye-birdy">Bye, bye birdy</h2> <p>A few weeks ago I quit using Twitter cold-turkey and started hanging out a bit on <a href="https://toot.cafe/@somelaniesaid">Mastodon</a>. Leaving Twitter was something I’d kind of been mulling over for a bit, despite having made many friends on the platform and getting quite a lot out of it in the past. One more stupid T— scandal made me throw up my hands and say, “yup, I’m out.” It was a combination of reasons for me:</p> <ul> <li>Not agreeing with how they were handling abuse of their platform. Given their track record and corporate imperative to satisfy shareholders, I didn’t have confidence in that changing anytime soon. In a way, I felt that my continued use was akin to tacit acceptance.</li> <li>The firehose of despair was not the best for my mental health. It’s good to be aware of and involved in the world, but do you need everyone’s take round the clock? Do you need to express a take on everything? Or just roll up your sleeves and get to work?</li> </ul> <p>I have to tell you, it feels really really good not being on Twitter anymore. I’m sure there are really good folks working for them and doing the best they can, and there are of course tons of good folks who are still on there and who I’ll need to find other ways to chat with, but it’s just not for me anymore.</p> <p>Mastodon is pretty similar in structure to Twitter, but from the beginning has prioritized safety structures and finer-grained control over your experience. All social media has issues, but thus far it feels like a gentler place to be. Such a simple thing that I really love is the “content warning” feature, where you can type in a warning label, and the main body of your message is hidden behind a toggle. This is really nice because it means I’m not sobbing right before bed at some speculative nightmare that popped up in my feed when I wasn’t prepared for it (yes, this happened). If you’d like to learn more about Mastodon, <a href="https://medium.com/@GinnyMcQueen/toot-how-to-intro-to-mastodon-e5655bfa87d2">check out this guide</a>.</p> <h2 id="books">Books</h2> <p>I read 57 books this year, out of my goal of 52. Among my favorites were, in alphabetical order:</p> <ul> <li><a href="https://www.goodreads.com/book/show/29496076-killers-of-the-flower-moon"><em>Killers of the Flower Moon</em> by David Grann</a></li> <li><a href="https://www.goodreads.com/book/show/22318578-the-life-changing-magic-of-tidying-up"><em>The Life-Changing Magic of Tidying Up</em> by Mari Kondo</a></li> <li><a href="https://www.goodreads.com/book/show/28815371-the-mothers"><em>The Mothers</em> by Brit Bennett</a></li> <li><a href="https://www.goodreads.com/book/show/32478499-our-cats-are-more-famous-than-us"><em>Our Cats Are More Famous Than Us</em> by Ananth Hirsh and Yuko Ota</a></li> <li><a href="https://www.goodreads.com/book/show/25566675-piecing-me-together"><em>Piecing Me Together</em> by Renée Watson</a></li> <li><a href="https://www.goodreads.com/book/show/18223762-ranma-1-2-2-in-1-edition-vol-1"><em>Ranma 1/2</em> by Rumiko Takahashi</a></li> <li><a href="https://www.goodreads.com/book/show/30780283-white-tears"><em>White Tears</em> by Hari Kunzru</a></li> <li><a href="https://www.goodreads.com/book/show/25251757-you-will-know-me"><em>You Will Know Me</em> by Megan Abbott</a></li> </ul> <p>(<a href="https://www.goodreads.com/user_challenges/6877688">Full list of 2017 books</a>)</p> <p>My raw reading goal for next year is also 52 books. Of these, I’m aiming to read 35 books that I owned at the <em>beginning</em> of the year. I have an embarrassingly large backlog of books I own but haven’t yet read…time to make a dent in that backlog.</p> <h2 id="2017-themes">2017 Themes</h2> <p><strong>1. Do the most good.</strong> Definitely stepped up my game when it comes to contributing time, money, expertise, and other resources to the common good. Of course, “the most good” always means there is more to do. One thing I’m working on right now is being better at participating on the local level. A lot of the local actions tend to be along the lines of, “omg attend this meeting tomorrow at 2pm on a workday over an hour away from the office!!” So it can be challenging, but there are activities where it is possible to plan ahead.</p> <p>I hope to <em>keep</em> this level of contribution in times of greater “peace”, not just when it feels like the whole world is particularly on fire (acknowledging here the privilege that allowed me to not feel that way my entire life).</p> <p><strong>2. Connection.</strong> I said that I wanted to “deepen my connection to people, planet, and time”. I suppose I would characterize the outcome here as a lot of stopping and starting. There was a blog I was setting up and decided felt weird. I’d do something to pursue connection and then get distracted. This focus would benefit from supporting routines, as well as journaling to check in every week or so. For theme #1, I was doing a monthly “what did I do for the world?” and something similar would probably work well here.</p> <p><strong>3. Focus.</strong> I think this will always be a struggle. I’ve been better about not working on 600 personal projects at once, but there’s still a lot of room for improvement in other areas where multiplicity doesn’t necessarily serve me or others well.</p> <p>2018 themes forthcoming in another post!</p> Murmurations and living lights: Learning Log, Dec 2017 2017-12-29T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1712/ <p>As I compile this month’s learning log, I’ve got the new(ish) Fleet Foxes album going on vinyl, while the trees rustle in the wind outside. It’s both a bit twee and a lovely synchronicity.</p> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-blanket-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-blanket-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-blanket-s.jpg" alt="A striped knitted blanket" /> </picture> <p class="caption">More details of the blanket <a href="https://www.instagram.com/p/BdK8gtpn-Pm/">on Instagram</a></p> <p>I finally finished the <a href="https://www.purlsoho.com/create/2015/09/04/rectangular-colorblock-bias-blanket/">blanket I was knitting</a> as a wedding present to my sister and her new husband! The tassels were a fun little finishing touch, I want to make 100 tassels now…this was my second knitting project (#2.5 if you count a partially-finished scarf), I think I’ll go for a smaller project next time around. 😅</p> <ul> <li>Reading <a href="https://www.amazon.com/Art-Fear-Observations-Rewards-Artmaking/dp/0961454733">&quot;Art and Fear&quot;</a> and thinking about art-making got me in the mood to observe process. ALL episodes of Art:21 are happily <a href="https://art21.org/watch/">available free to watch online</a>.</li> <li>I find it fascinating that <a href="https://linkinprofile.com/">Link in Profile</a> is a business that exists simply because of one decision on a massive social media site, i.e. no linked URLs in Instagram posts.</li> <li>Discovering that even a half hour’s difference in sleep time has a huge effect on how well I’ll wake up and deal with the nonsense of the day.</li> <li>The Xmas decorations from the original Home Alone movie were gifted to the Chicago O’Hare airport, and are hung in the airport each year. (I learned this while half-asleep waiting for my flight to board)</li> <li>In Danish, candles are called <em>levende lys</em>, or “living lights” (<a href="https://www.amazon.com/dp/B01GONJFZ2">Source</a>)</li> <li>This month in extremely specific internet searches: <a href="https://www.bing.com/search?q=when+does+the+jasmine+bloom+in+new+orleans&amp;qs=n&amp;form=QBRE&amp;sp=-1&amp;pq=when+does+the+jasmine+bloom+in+new+orleans&amp;sc=0-42&amp;sk=&amp;cvid=56CCA86FA9114A7DA85DEAC174E841AD">“when does the jasmine bloom in New Orleans”</a></li> </ul> <h2 id="nice-bits-of-internet">Nice bits of internet</h2> <ul> <li><a href="https://www.youtube.com/watch?v=V4f_1_r80RY">Starlings flying in a murmuration</a>. As people mentioned in the comments, it sounds like the sea.</li> <li>Pixel art by Tumblr accounts <a href="https://1041uuu.tumblr.com/">1041uuu</a> and <a href="https://merrigo.tumblr.com/">merrigo</a></li> <li><a href="http://blog.presentandcorrect.com/calciyummy">Calciyummy</a>, a collection of Japanese milk boxes</li> <li><a href="https://www.facebook.com/curbedny/videos/10155910955649598/?hc_ref=ARSLwGSa_ErsChUzxcu4lfYP41N5Fng9mHOtxbSxxwpkUi2OyQKSKico390OCtVOeV4">This video about Weeksville, Brooklyn</a>, a fascinating piece of new-to-me history</li> </ul> <h2 id="worthy-reads">Worthy reads</h2> <ul> <li><a href="https://www.rosieleizrowice.com/blog/problemwithroutines">Monotony Collapses Time; Novelty Unfolds It</a></li> <li><a href="https://medium.com/@maybekatz/on-the-design-of-womens-spaces-72bf8f396dc0">On the Design of Women’s Spaces</a></li> <li><a href="https://lithub.com/the-food-writer-who-lost-her-sense-of-smell/">The Food Writer Who Lost Her Sense of Smell</a></li> <li><a href="https://medium.com/facebook-design/designing-against-misinformation-e5846b3aa1e2">Designing Against Misinformation</a>. A bit late to take back the implications of Facebook on U.S. politics in the recent past, but glad to see they’re at least trying to solve these tough problems.</li> <li><a href="https://subfictional.com/my-theory-patreon-doesnt-want-to-be-a-money-services-business/">My theory: Patreon doesn’t want to be a money services business</a></li> <li>“Your short-term actions must align with your long-term values.” TRUTH. (<a href="https://nosidebar.com/live-fearlessly/">Source</a>)</li> <li>More truth: “Everyone is too busy worrying about their own shortcomings to penalize you for yours.” (<a href="https://blog.safia.rocks/post/169078729720/things-i-learned-in-2017">Source</a>)</li> </ul> <p>As a heavy year closes out, this passage from <a href="https://onewillowapothecaries.com/a-hymn-for-optimism/">A Hymn for Optimism</a> is really resonating with me:</p> <blockquote> <p>I believe in peace on earth—even if it was never supposed to arrive all at once, but meant to cycle like a constellation, sometimes hidden, sometimes obscured, and sometimes appearing over the horizon just as you thought to look up.</p> </blockquote> <p>Here’s to learning many more new things in 2018!</p> Petrichor and migraine auras: Learning Log, Nov 2017 2017-12-10T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1711/ <ul> <li><a href="https://www.goodreads.com/book/show/34128219-la-belle-sauvage">La Belle Sauvage (The Book of Dust #1)</a> mentioned <a href="https://www.google.com/search?tbm=isch&amp;source=hp&amp;biw=1440&amp;bih=747&amp;ei=pXX7WYg2j7CPA_HQrfAL&amp;q=migraine+aura&amp;oq=migraine+aura&amp;gs_l=img.3..0l10.415.415.0.748.2.2.0.0.0.0.57.57.1.1.0....0...1.1.64.img..1.1.56.0...0.Q8htyYTRvko">migraine auras</a> and I thought for sure they existed only in the book, but no, apparently some people experience them. Also, <a href="https://en.wikipedia.org/wiki/Espalier">espaliers</a>.</li> <li>Using <code>git rebase</code> still feels like “cut the blue wire! Not the red wire!”, but the more I have to use it, the more I can see myself making it a part of my workflow.</li> <li><a href="https://en.m.wikipedia.org/wiki/Petrichor">Petrichor</a> is the term for that earthy post-rain smell.</li> </ul> <h2 id="nice-bits-of-internet">Nice bits of internet</h2> <ul> <li><a href="https://twitter.com/HappyHooker1157/status/926118634975629312">This barnacled basketball</a></li> <li><a href="https://magpiekingdom.com/">Magpie Kingdom</a>, an email newsletter covering Chinese current events in a accessible style</li> <li>The categories experience on the <a href="https://here.awaytravel.com/">“Here” blog by Away Travel</a>, where hovering on a category points all the arrows on the page towards your cursor. Click on the pin icon in the upper-left to activate that view, as there’s no permalink to it. I also like how the titles are different typefaces, depending on the category the post is in.</li> <li>Podcast I’ve been enjoying: <a href="https://thirstaidkitpodcast.tumblr.com/">Thirst Aid Kit</a></li> <li><a href="https://demos.littleworkshop.fr/infinitown">Infinitown</a>, a cute little/infinite WebGL experiment</li> <li>The accordion hover effect on my friend Anna’s <a href="https://www.annaniess.biz/">site</a></li> </ul> <h2 id="worthy-reads">Worthy reads</h2> <p>Mulling over this revelation from <a href="https://here.awaytravel.com/articles/have-paint-brush-will-travel-artist-allison-kunath-on-trading-art-for-rent">Have Paint Brush, Will Travel: Artist Allison Kunath On Trading Art for Rent </a>:</p> <blockquote> <p>I did a cool performance a couple years ago where I painted blindfolded and I was talking to a performance artist after the event and mentioned it was the first time I’ve like done anything experimental like this and he was dumbfounded. He was like “What do you mean? Everything I do is an experiment!” And that just struck me. It’s such the polar opposite of the way I was approaching my work.</p> </blockquote> <ul> <li><a href="https://www.newyorker.com/magazine/2017/11/06/is-bigfoot-likelier-than-the-loch-ness-monster/">Fantastic Beasts and How to Rank Them</a></li> <li><a href="https://www.oreilly.com/ideas/ethics-at-scale">Ethics at scale</a>, via <a href="https://twitter.com/hj_chen">HJ Chen</a></li> </ul> Vectors and mittens: Learning Log, Oct 2017 2017-11-02T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1710/ <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-macey-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-macey-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-macey-s.jpg" alt="An illustration of my friend's dog's face, surrounded by you're a good girl, Miss Macey" /> </picture> <p class="caption">Some encouragement for my friend’s pit bull ^_^</p> <ul> <li>I did a couple days of #vectober, and then abandoned it. This is the third time this year I’ve abandoned a do-one-particular-thing-every-day project. I’m learning they’re just not the type of projects that I respond well to. If I’m trying to get better at something, that means I probably need more time to complete said thing, which means I’m not going to be happy with what I can make in an hour or two (not that I even have that much time daily).</li> <li>Took a class on <a href="https://nordicmuseum.org/knitting/138685">Sámi knitting techniques</a> at the Nordic Museum and learned about some of the distinguishing elements of their mittens. We learned how to make a special twisted purl stitch, how to add a thumb and the top shape of the mitten, and how to make the little tassel that's attached to non-fishing mittens. The Sámi are a group indigenous to Scandinavia that I know almost nothing about, so I really appreciated hearing from classmates with Sámi heritage and getting a long list of resources from <a href="https://www.ravelry.com/designers/laura-ricketts">the instructor</a>.</li> </ul> <h2 id="good-design-and-dev-articles">Good design-and-dev articles</h2> <ul> <li><a href="https://medium.com/ueno/dear-ueno-how-do-i-learn-illustration-34b179a71385">Dear Ueno: How do I learn illustration?</a></li> <li><a href="https://css-tricks.com/the-art-of-comments/">The Art of Comments</a></li> <li><a href="https://medium.com/the-guardian-mobile-innovation-lab/introducing-a-new-format-for-evolving-stories-281d2724b416">Introducing a New Format for Evolving Stories</a></li> <li><a href="https://qz.com/522079/the-long-incredibly-tortuous-and-fascinating-process-of-creating-a-chinese-font/">The long, incredibly tortuous, and fascinating process of creating a Chinese font</a></li> </ul> <h2 id="nice-bits-of-internet">Nice bits of internet</h2> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/dianara-kasko-algorithmic-cakes-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/dianara-kasko-algorithmic-cakes-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/dianara-kasko-algorithmic-cakes-s.jpg" alt="A cake made out of frosted abstract pieces" /> </picture> <p class="caption">This algorithmic cake inspired by <a href="https://www.mattshlian.com/">Matthew Shlian’s art</a> is one of Dianara Kasko’s many fascinating forays into creative baking.</p> <ul> <li>Dinara Kasko’s <a href="https://www.dinarakasko.com/algorithmic-modeling-cakes/">algorithmic cakes</a></li> <li><a href="https://dropbox.design/">Evolving the Dropbox brand</a>: divisive, but I’m glad to see a tech startup do something that's not blue and Open Sans.</li> <li>Jennifer Brook’s <a href="http://jenniferbrook.com/work/what-color-is-the-earth">What Color is the Earth?</a> project</li> <li><a href="https://www.instagram.com/p/BZ31xRPATdZ/">This animated Grecian vase</a></li> </ul> <h2 id="worthy-reads">Worthy reads</h2> <ul> <li><a href="https://www.seriouseats.com/2015/03/spice-cabinet-spring-cleaning.html">How to Clean Out Your Spice Cabinet and Organize it—for Good</a></li> <li><a href="https://www.rosieleizrowice.com/blog/journal-for-anxiety">3 Morning Journaling Techniques I Use To Tackle Anxiety</a></li> </ul> <p><a href="https://medium.com/@the_jennitaur/how-to-do-nothing-57e100f59bbb">“How to Do Nothing”</a> is a long read, but it is absolutely worth your time. I’ve read plenty of mindfulness-adjacent articles, but <a href="https://www.jennyodell.com/">Jenny Odell</a> approached this subject in a fresh and illuminating way. This snippet about a rose garden threatened by commercial development really got my wheels turning:</p> <blockquote> <p>...those [public] spaces which are not seen as commercially productive are always under threat, since what they “produce” can’t be measured or exploited or even easily identified — despite the fact that anyone in the neighborhood can tell you what an immense value the garden provides.</p> <p>Currently, I see a similar battle playing out for our time, a colonization of the self by capitalist ideas of productivity and efficiency. One might say the parks and libraries of the self are always about to be turned into condos.</p> </blockquote> <p>And this quote by writer John Steinbeck is lovely:</p> <blockquote> <p>When you collect marine animals there are certain flat worms so delicate that they are almost impossible to capture whole, for they break and tatter under the touch. You must let them ooze and crawl of their own will onto a knife blade and then lift them gently into your bottle of sea water. And perhaps that might be the way to write this book — to open the page and let the stories crawl in by themselves.</p> </blockquote> CSS Grid talk at Microsoft Edge Web Summit 2017-10-03T00:00:00.000Z https://melanie-richards.com/blog/css-grid-summit/ <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-summit-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-summit-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-summit-s.jpg" alt="Me smiling on stage at the Microsoft Edge summit" /> </picture> <p>A couple weeks ago I gave <a href="https://channel9.msdn.com/Events/WebPlatformSummit/Microsoft-Edge-Web-Summit-2017/ES08">my first recorded talk</a> at the <a href="https://summit.microsoftedge.com/">Microsoft Edge Web Summit</a>! I spoke about CSS Grid, which our team is bringing to public builds in October 2017. The talk is introductory-level, basically going through how we got to Grid, how the bulk of the properties and property values work, and how you might consider integrating it into your workflow. <a href="https://channel9.msdn.com/Events/WebPlatformSummit/Microsoft-Edge-Web-Summit-2017/ES08">You can watch it here</a>.</p> <p>My coworker Greg Whitworth touches more on the history of Grid <a href="https://channel9.msdn.com/Events/WebPlatformSummit/Microsoft-Edge-Web-Summit-2017/ES11">in his talk</a> where he explains how we figure out what to build on the browser platform team, so that’ll be a great companion talk to watch!</p> Learning Log: Sep 2017 2017-10-02T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1709/ <h2 id="things-i-learned">Things I learned</h2> <ul> <li>The projects I find most interesting are ones where their founders aren’t following the usual “shapes”, but have come up with their own way forward. By those shapes I mean familiar formats like a blog, a book, a shop, a conference, a freelance practice, etc. I’m fascinated by people who have found new ways to make money / pursue meaning / explore their interests and that inspires me to think a little more creatively about how to do the same.</li> <li>Typefaces with cut-off corners are said to be “chamfered” (via <a href="https://fontreviewjournal.com/timmons-ny/">Font Review Journal</a>)</li> </ul> <h2 id="journal-fodder">Journal fodder</h2> <p>Inspired by this quote in <a href="https://dianaberlin.com/">Diana Kimball Berlin's</a> email newsletter from Sarah J. Bray’s book, <a href="https://gumroad.com/l/sarahjbray">Gather the People</a>:</p> <blockquote> <p>“What is the most true for me right now?” Every day, once a day, I sit down with my pen and notebook and answer this question. The answer will eventually become either an email to my community, or a blog post, or it could be fodder for a tweet or a Facebook post. But first and foremost, it is an attempt to reflect on my work, to document it, and to make it better.</p> </blockquote> <p>There are some follow-up questions to that as well:</p> <ul> <li>What is the truest thing I learned today?</li> <li>What moved me today?</li> <li>What progress did I make today?</li> <li>What problem am I trying to solve right now?</li> </ul> <h2 id="nice-bits-of-internet">Nice bits of internet</h2> <ul> <li>The beautiful and thoughtful <a href="https://fontreviewjournal.com/">Font Review Journal</a></li> <li>Katie Suskin’s <a href="https://ktsuskin.com/">stop-motion portfolio site</a></li> <li>A huge collection of work by the <a href="https://www.hillaryforamericadesign.com/">Hillary for America design team</a>. Just thinking about how much work this is and how much of a crunch period a political campaign necessitates kind of boggles the mind a little bit.</li> </ul> <h2 id="interesting-reads">Interesting reads</h2> <ul> <li><a href="https://www.zachleat.com/web/fout-foit-history/">A Historical Look at FOUT and FOIT</a></li> <li><a href="https://www.nytimes.com/2017/09/17/dining/cake-mix-alaska.html">In Alaska’s Far-Flung Villages, Happiness Is a Cake Mix</a></li> <li><a href="https://larahogan.me/blog/inclusion-math/">Tracking compensation and promotion inequity</a></li> <li><a href="https://qz.com/1039331/mlms-like-avon-and-lularoe-are-sending-people-into-debt-and-psychological-crisis/">Multilevel-marketing companies like LuLaRoe are forcing people into debt and psychological crisis</a></li> <li><a href="https://www.slate.com/blogs/browbeat/2015/07/06/from_the_big_bang_theory_to_roseanne_to_jane_the_virgin_why_do_tv_characters.html">Why Do TV Characters All Own the Same Weird Old Blanket?</a></li> </ul> Learning Log: Aug 2017 2017-09-05T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1708/ <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanie-richards-august-pp-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanie-richards-august-pp-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanie-richards-august-pp-s.jpg" alt="A collage and vector line art illustration" /> </picture> <p class="caption">My contribution for <a href="https://www.are.na/peaches/august-palette-party">August’s Palette Party</a>, a little project where some internet friends and I make a something based on a particular color palette. I started messing around with collage for this one and it just ended up in this creepy science-fictiony place.</p> <p>Subject-matter notes I updated this month: <a href="https://somelaniesaid.dropmark.com/426434/10783711">accessibility</a>, <a href="https://somelaniesaid.dropmark.com/426434/11413611">animation/motion</a></p> <h2 id="week-of-july-30">Week of July 30</h2> <ul> <li>I meet with the rest of the <a href="https://twitter.com/csswg">CSSWG</a> for a face-to-face meeting in Paris. The group wraps up open issues on existing specs, discusses process, and presents a few new proposals, like <a href="https://github.com/w3c/csswg-drafts/issues/1594">additive CSS</a>, a new approach to <a href="https://tabatkins.github.io/specs/css-shadow-parts/">styling Shadow DOM components</a>, and <a href="https://github.com/w3c/csswg-drafts/issues/1693">UA properties/variables</a>.</li> <li>My first PR for <a href="https://github.com/w3c/web-platform-tests">web-platform-tests</a> is merged in!</li> <li>Nice bits of internet: <a href="https://twitter.com/nailpolishbot">Nail polish bot</a>, <a href="https://twitter.com/tinycarebot">tiny care bot</a>, <a href="https://www.bonappetit.com/healthyish">Bon Appetit Healthyish</a></li> <li>Good reads: <a href="https://www.webdesignerdepot.com/2017/05/4-ways-use-functional-animation-in-ui-design/">4 ways to use functional animation in UI design</a>, <a href="https://fulcrum.lever.co/monitoring-jank-how-we-found-the-slowest-parts-of-our-ui-b6ffd7386896">Monitoring Jank: How we found the slowest parts of our UI</a></li> </ul> <h2 id="week-of-august-14">Week of August 14</h2> <ul> <li>It's hard not to start off many of these logs with “this week feels so heavy”…Relevant read: <a href="https://theestablishment.co/so-you-want-to-fight-white-supremacy-2b5735f22f9">So You Want To Fight White Supremacy</a>. The work will never be done. But whatever we can do to relieve iniquity is worth doing.</li> <li>I finish reading <a href="https://abookapart.com/products/demystifying-public-speaking">Demystifying Public Speaking</a> by Lara Hogan. One thought that particularly struck a chord during the section on soliciting feedback from trusted sources: “When you get constructive criticism, recognize that that person thinks it’s important enough to share despite the discomfort in delivering it.” I know this to be true when giving feedback, so it’s important to remember while receiving it.</li> <li>Good read: <a href="https://bradfrost.com/blog/post/things-you-could-be-doing-instead-of-designing-building-that-card-component-for-the-umpteenth-time/">Things you could be doing instead of designing &amp; building that card component for the umpteenth time</a></li> </ul> <h2 id="week-of-august-21">Week of August 21</h2> <ul> <li>Loving the concept and art style of <a href="https://brooklyn-gamery.itch.io/breakup-squad">Breakup Squad</a></li> <li>Nice bits of internet: <a href="http://meowza.org/#drawllow">Meowza’s #DrawllowFriday project</a>, <a href="https://funicular-freak.tumblr.com/">funicular freak</a></li> </ul> <h2 id="week-of-august-28">Week of August 28</h2> <ul> <li>I’m so struck by this quote from an <a href="http://girlsnightinclub.com/posts/interview-brit-bennett-the-mothers/">interview with Brit Bennett</a>: “Toni Morrison said that writers aren’t blocked, they’re just empty.”</li> <li>Nice bits of internet: <a href="https://www.behance.net/gallery/47711707/The-Stealing-Project">The Stealing Project</a> (<a href="https://zine.3dfordesigners.com/primitive/the-stealing-project">via Primitive</a>)</li> </ul> <p>This is the week of reminders for truths that are occasionally challenging to internalize:</p> <ol> <li>The only thing you can’t improve upon is a blank page. Instead of continually deleting, restarting, rinse, repeat, just get something, anything down. It’ll save time in the long run, even if you end up scrapping most of it.</li> <li>This distinction <a href="https://medium.com/the-year-of-the-looking-glass/taking-feedback-impersonally-7c0f3a8199d9">Julie Zhuo mentions</a> between a fixed and growth mindset. Buzzwords, but a worthy application:</li> </ol> <blockquote> <p>I feel like I mention mindset pretty much every week, but I’ve found it to be completely transformative in my thinking. Really, go and read <a href="https://www.amazon.com/Mindset-Psychology-Carol-S-Dweck/dp/0345472322">Mindset by Carol Dweck</a> if you haven’t already. A fixed mindset presumes that what you are capable of today is how capable you really are, which means every time you get critical feedback, you read it as a judgement on your person. <em>Hey, this thing you did isn’t great</em> gets translated to <em>I’m</em> not great. A growth mindset presumes that no matter where you are now, you can improve. If you believe that, then whenever someone tells you, <em>Hey, this thing you did isn’t great</em>, you think, <em>Okay, that feedback was useful and it’ll help me do better next time</em>. With a growth mindset, you start to crave feedback from as many people as possible, even critical feedback, because you realize it’s the fastest way for you to learn and improve.</p> </blockquote> <p><a href="https://medium.com/etsy-design/ready-when-you-are-3f6d3bfa1ee8">(via Kate Matsumoto’s article)</a></p> Learning Log: Jul 2017 2017-07-27T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1707/ <p>Subject-matter notes I updated this month: <a href="https://somelaniesaid.dropmark.com/426434/11024188">designing for small screens</a></p> <h2 id="week-of-july-9">Week of July 9</h2> <ul> <li>This is my first time using <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid</a> in a production site, and it’s magical! Edit: it's the <a href="https://summit.microsoftedge.com/">Microsoft Edge web summit site!</a></li> <li>Reading in <a href="https://drafts.csswg.org/css2/ui.html">CSS 2.2: User Interface</a>. <ul> <li>I remember the days when people would pick cursors for aesthetic reasons. I was a particular fan of <code>crosshair</code>…now that I’m not 13 and I know better, yikes…</li> <li><code>The outline created with the outline properties is drawn &quot;over&quot; a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.</code> I’ve started using outlines in cases where one state has a border and another does not—in order to prevent layout wobbles—but I hadn’t thought of it in the context of perf. Interesting.</li> <li>I guess I didn’t know about the <code>invert</code> color keyword? Which would ensure that an outline color (or other property accepting this value) would get an inverted color from the pixels it lies on top of. So, one could cascade that across the whole site design instead of having to manage focus ring colors on top of light and dark backgrounds. Need to see what support is like for this because the very next spec paragraph allows UAs (user agents) to not support <code>invert</code>.</li> </ul> </li> <li>I’m now done with reading through <a href="https://drafts.csswg.org/css2/">CSS 2.2</a>! Skipped over reading the appendices because eh. If I need ’em I’ll read ’em. Now figuring out which specs to read next, based on interest level and timeliness.</li> </ul> <h2 id="week-of-july-16">Week of July 16</h2> <ul> <li>Working on my first PWA (Progressive Web App)! It’s probably the simplest incarnation possible, because it’s a static HTML page that I’ve enabled a service worker on so it can be loaded offline. Just because it's the &quot;simplest&quot; use case doesn’t make it &quot;simple&quot;; can’t thank my coworker Patrick Kettner enough for walking me through some concepts. Some resources that were also helpful: <a href="https://developers.google.com/web/fundamentals/getting-started/primers/service-workers">Service Workers: an Introduction</a>, <a href="https://serviceworke.rs/">Service Worker Cookbook</a>, <a href="https://webmanife.st/">Manifestation</a>, <a href="https://www.w3.org/TR/appmanifest/#manifest-and-its-members">Web App Manifest spec</a>.</li> <li>CSS spec readings: <a href="https://drafts.csswg.org/css-sizing/">Sizing</a></li> </ul> <h2 id="week-of-july-23">Week of July 23</h2> <ul> <li>Reading various CSS specifications and Github issues to prepare for the CSSWG face-to-face meeting next week!</li> </ul> Learning Log: Jun 2017 2017-06-30T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1706/ <p>Subject-matter notes I updated this month: <a href="https://somelaniesaid.dropmark.com/426434/10697984">logo design</a>, <a href="https://somelaniesaid.dropmark.com/426434/10698235">Illustrator</a>, <a href="https://somelaniesaid.dropmark.com/426434/10783711">accessibility</a></p> <h2 id="week-of-may-28-(second-half)">Week of May 28 (second half)</h2> <ul> <li>Recently I was reading <a href="https://www.goodreads.com/book/show/15843166-you-are-a-badass">You Are a Badass</a>, but decided I wasn't really in a self help-y mood (partially the state of affairs makes it harder to care about that sort of thing) and abandoned it. I remember one point the author made though, this week: that the stories we tell ourselves have an impact on how our lives actually pan out. I'm realizing I've told myself &quot;I'm not very good at logos&quot;, and while that might have and might still be true, things might have played out a little differently if I had really dug into identity design. Never too late to try!</li> <li>In this vein, I watch another (see May write-up) video about logo design, this time about <a href="https://skl.sh/2stNUC5">the use of grids to structure logos</a>.</li> <li>In CSS specs, I finish reading about <a href="https://drafts.csswg.org/css2/page.html">paged media</a> and start <a href="https://drafts.csswg.org/css2/colors.html">colors and backgrounds</a>.</li> <li>Picking back up on the Yeoman <a href="https://github.com/melanierichards/generator-party-parrot">generator</a> I'm building to scaffold web projects. I read the <a href="https://yeoman.io/authoring/index.html">create-your-own-generator docs</a>, write a couple command line prompts for the generator, and add some basic project files. The built files are the same for each project &quot;type&quot;, so next I'll work on differentiating Jekyll, Wordpress, and HTML/other projects.</li> </ul> <h2 id="week-of-june-4">Week of June 4</h2> <ul> <li>I decide that the adjustments I'm making to my website don't feel genuine to me, so I smoosh together some of the old stuff and some of the new stuff and call it a day. And then ask a friend to yell at me if I try to make changes other than bug fixes and a11y improvements before the end of summer.</li> <li>CSS spec readings: <a href="https://drafts.csswg.org/css2/colors.html">colors and backgrounds</a>, <a href="https://drafts.csswg.org/css2/fonts.html">fonts</a> <ul> <li>Apparently <code>cursive</code> and <code>fantasy</code> are appropriate values for the generic family names at the end of a font stack! <code>cursive</code> sounds like it would end up with a pretty ok default font from the user agent (browser, etc), but not so sure how <code>fantasy</code> would play out because that could be so many different decorative font families. Note to self: find out what the different UAs use for these fallbacks!</li> </ul> </li> <li>I bounce out of the CSS 2.2 specs to read about <a href="https://www.w3.org/TR/css-flexbox-1/">flexbox</a> for some test-reviewing tasks.</li> <li>Learning about <a href="https://www.udemy.com/learn-to-create-pixel-art-for-your-game/learn/v4/content">pixel art</a>. I'm introduced to <a href="https://www.piskelapp.com/">this neat free pixel art editor</a>, which has some nice tools for pixel art that Adobe software doesn't have.</li> <li>Neat stuff about <a href="https://www.facebook.com/Vox/videos/703968476457424/">photo colorization</a></li> </ul> <h2 id="week-of-june-11">Week of June 11</h2> <ul> <li>CSS spec readings: <a href="https://drafts.csswg.org/css2/fonts.html">fonts</a>, <a href="https://drafts.csswg.org/css2/text.html">text</a>, <a href="https://drafts.csswg.org/css2/tables.html">tables</a> <ul> <li>You can access system fonts for various use cases from the <code>font</code> property; <a href="https://drafts.csswg.org/css2/fonts.html#font-shorthand">see details</a>. That brings over not just font family, but also size, weight, etc. That kind of takes &quot;use system fonts&quot; to its logical extreme.</li> </ul> </li> <li>Making improvements for <a href="https://dev.to/_bigblind/how-to-make-your-website-accessible-to-people-who-use-a-screen-magnifier">users of screen magnifiers</a> seems like it would help UX all-around.</li> <li>I spend an hour or two watching a <a href="https://www.udemy.com/learn-to-create-pixel-art-for-your-game/learn/v4/overview">video tutorial on pixel art</a></li> <li>Good reads: <a href="https://www.motherjones.com/politics/2016/09/black-teachers-public-schools-education-system-philadelphia/">Black teachers matter</a>, <a href="http://sophieshepherd.com/2017/06/14/learning-to-be-chill.html">The Road to Burnout is Paved With Context Switching</a></li> </ul> <h2 id="weeks-of-june-18%2C-25">Weeks of June 18, 25</h2> <ul> <li>These past couple weeks have been a bit all over the place, with sad thing and busy things (picked up some moonlighting work). I'm hoping to reboot my morning &quot;creative habit&quot; in July because it has pretty much fallen by the wayside.</li> <li>CSS specs: <a href="https://drafts.csswg.org/css2/tables.html">tables</a></li> <li>Good reads: <a href="https://www.nrdc.org/stories/forests-just-ones-mother-nature-used-make">Forests, Just Like the Ones Mother Nature Used to Make</a>, <a href="https://axesslab.com/accessibility-according-to-pwd/">Accessibility according to actual people with disabilities</a>, <a href="http://m.nautil.us/issue/46/balance/darwin-was-a-slacker-and-you-should-be-too">creativity and rest</a>, <a href="https://medium.com/hard-work/the-80-20-rule-6a11c0bd6e43">The 80/20 rule</a></li> <li>Thanks to <a href="https://qz.com/1007400/the-botanists-last-stand-the-daring-work-of-saving-the-last-samples-of-dying-species/">The botanists’ last stand: The daring work of saving the last samples of dying species</a> I, of course, now want to be a botanist.</li> </ul> Learning Log: May 2017 2017-06-05T00:00:00.000Z https://melanie-richards.com/blog/learning-log-1705/ <p>Subject-matter notes I updated this month: <a href="https://somelaniesaid.dropmark.com/426434/10687476">generative art</a>, <a href="https://somelaniesaid.dropmark.com/426434/10697984">logo design</a>, <a href="https://somelaniesaid.dropmark.com/426434/10699817">identity design</a>, <a href="https://somelaniesaid.dropmark.com/426434/10698235">Illustrator</a></p> <h2 id="week-of-apr-30">Week of Apr 30</h2> <ul> <li>I’m currently learning Blender for the 100 Day project (do one thing for 100 days). I had taken a quick Skillshare class and tried to jump in independently, but found the learning curve for Blender steep. Decided to go for a <a href="https://www.udemy.com/blendertutorial/learn/v4/overview">Udemy class</a> during one of their super-sales, and I’m currently working through that.</li> <li>I keep trying to jump the gun and learn things that the Udemy course hasn’t covered yet, which leads me to run into the high learning curve of Blender and causes more frustration. I give up on what I was doing and decide to stick with the current “task”, which is to make an object out of basic shapes. I start in on a side table in my apartment, where my record player lives (yes I am a hopeless hipster).</li> <li>I decide that there’s somewhat of a mismatch between the idea of focusing on just one thing and how many different things I’d like to dabble in. I open up my 100 day project to creating a morning practice habit, just getting in some time for creative pursuits before work. I’ll probably spend quite a bit of it on 3D, though.</li> </ul> <h2 id="week-of-may-7">Week of May 7</h2> <ul> <li>Continuing to work on rendering my side table. I’ve found out <a href="https://blender.stackexchange.com/questions/63794/how-to-round-corners-of-plane/63815#63815">how to round corners</a> for the record player sitting on top of the table.</li> <li>I learn through <a href="https://twitter.com/3dfordesigners/status/861980541935128576">3D for designers</a> that C4D Lite comes free with After Effects CC. I’ll have to look into that after my trip.</li> <li>Trip to Mexico City for a wedding and general merriment!</li> </ul> <h2 id="week-of-may-14">Week of May 14</h2> <ul> <li>Back from my trip and back at my creative morning practice by midweek!</li> <li>I watch Kate Bingaman-Burt’s Skillshare class, <a href="https://www.skillshare.com/classes/Drawing-Collections-Illustrating-Stories-through-Taxonomies/">Drawing Collections: Illustrating Stories through Taxonomies</a>. Kate mentions that if she uses a color once on a composition, she tries to use it again elsewhere so it feels more intentional and less random. Hadn’t really thought about it like that, and suppose it would work the opposite way, too.</li> <li>I’m working my way through the CSS 2.2 specification. This week I read <a href="https://drafts.csswg.org/css2/visufx.html">11 Visual effects</a> and <a href="https://drafts.csswg.org/css2/generate.html">12 Generated content, automatic numbering, and lists</a>. <ul> <li>It occurs to me that I don’t really use the <code>clip</code> property other than <a href="https://webaim.org/techniques/css/invisiblecontent/">accessibly, visually hiding something</a>.</li> <li>I was not aware that <code>open-quote</code> and <code>close-quote</code> are valid values for the <code>content</code> property; I’d always used the curly quote-mark characters themselves. Using these values is <a href="https://drafts.csswg.org/css2/generate.html#propdef-quotes">better for internationalization</a> than hard-coding characters in the <code>:before</code> and <code>:after</code> pseudo elements.</li> </ul> </li> </ul> <h3 id="spec-questions-to-investigate">Spec questions to investigate</h3> <ul> <li>When would the value of <code>list-style-image</code> not have an intrinsic height and width?</li> </ul> <h2 id="week-of-may-21">Week of May 21</h2> <ul> <li>I decide as my &quot;class project&quot; for the Skillshare course I watched last week, I'll do a little gouache painting of some bugs and such that I've Instagrammed. I just have a sketch composition thus far.</li> <li>Through <a href="https://magenta.as/what-makes-a-great-book-cover-38001511325d">this post on book covers</a> I learn that <a href="https://www.theguardian.com/books/2017/feb/17/dick-bruna-obituary">Dick Bruna</a> created the Miffy character, and that <strong>insouciant</strong> means &quot;free from concern, worry, or anxiety; carefree; nonchalant&quot; (<a href="https://www.dictionary.com/browse/insouciant">dictionary.com</a>).</li> <li>As I do pretty much every other month, I hate how my website looks and decide to make some adjustments. I'd also like to do some generative art as part of this update.</li> <li><a href="https://www.npr.org/sections/goatsandsoda/2017/05/20/526573826/worms-land-a-great-job-working-with-gorgeous-indian-textiles">Worms in the textile industry</a>!</li> </ul> <h2 id="week-of-may-28">Week of May 28</h2> <ul> <li>Via friends in the <a href="http://morgane.com/pixel-lab">Pixel Lab</a> <a href="http://learning-gardens.co/">Learning Garden</a>, I'm reading <a href="https://galaxykate0.tumblr.com/post/139774965871/so-you-want-to-build-a-generator">this essay</a> on generative art. I have a more solid idea of what I'll do for my site.</li> <li>Early this week in CSS specifications, I read CSS 2.2: <a href="https://drafts.csswg.org/css2/page.html">Section 13, Paged media</a></li> <li>To prep for a couple work projects, I watch a couple Skillshare videos on logo design. I have to say there's a lot about <a href="https://skl.sh/2rURzfB">Draplin's process</a> that I'm attracted to and decide to incorporate in the projects I'm working on.</li> </ul> New side project: highlights minisite, and checking for interaction feature support 2017-03-20T00:00:00.000Z https://melanie-richards.com/blog/highlights-minisite/ <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/highlights-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/highlights-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/highlights-m.png" /> <img src="https://melanie-richards.com/assets/images/content/highlights-s.png" alt="Screenshot of the highlights minisite" /> </picture> <p>I read quite a bit, and wanted somewhere to keep highlights from books and articles. That “somewhere” is <a href="http://highlights.melanie-richards.com/">highlights.melanie-richards.com</a>, a simple Jekyll site <a href="https://github.com/melanierichards/highlights">hosted on Github Pages</a>. I’m not doing anything fancy to get the highlights into the project (for various reasons I won’t bore you with), just using some YAML data files.</p> <p>I did, however, come across a couple neat little use cases for interaction feature queries.</p> <h2 id="handling-a-hover-dependent-interaction">Handling a hover-dependent interaction</h2> <p><img src="https://melanie-richards.com/assets/images/content/highlights-hover.gif" alt="Screenshot of the fade effect" /></p> <p>On the index of the highlights site, there’s an interaction where the base imagery of each book/collection cover is this rough cut-paper style digital illustration, and when you hover over the image it fades to a high-fidelity version of the cover. It’s a fun reveal, but not very useful when you don’t have hover capabilities on your current device. Enter <a href="https://drafts.csswg.org/mediaqueries-4">level 4 media queries</a>.</p> <p>Among the media query types introduced in this level of the specification is the ability to detect whether or not <a href="https://drafts.csswg.org/mediaqueries-4/#hover">the hover feature</a> is available to the user. Two things to note here: 1) a mouse is not the only device input that can “hover” (some game console controllers have this capability, for example) and 2) this media query looks at the device’s “primary” inputs, so there’s some cases where hover is technically available, but this query would be falsey.</p> <p>On my site, I have the rough illustration in an SVG sitting in a link with the background image set to the high-fidelity cover. This SVG by default has an opacity of <code>0</code>. If hover is available, the SVG has full opacity, and is animated to <code>0</code> opacity on hover. The entire link has an opacity transition of <code>.75</code> =&gt; <code>1</code>, so that even if the hover feature query is false or unsupported, there’s still visual feedback on the element. Here’s what that looks like:</p> <pre><code class="language-CSS">/* Using tag in the selector because .source__image is not a link on individual book pages and should not get these styles */ a.source__image { opacity: .75; transition: opacity 400ms; } a.source__image:hover { opacity: 1; } a.source__image svg { opacity: 0; } @media (hover) { a.source__image svg { opacity: 1; transition: opacity 400ms; } a.source__image:hover svg { opacity: 0; } } </code></pre> <p>You can also check for the inverse, i.e. <code>@media (hover: none)</code>, but I think this direction usually yields a better experience.</p> <p>At time of writing, interaction media queries are supported in Microsoft Edge, Chrome, Safari, Opera, and Android browser (<a href="https://caniuse.com/#feat=css-media-interaction">Can I Use link for posterity</a>). I hope that Firefox supports them soon so that this feature can light up over there too!</p> <h2 id="adding-a-non-intrusive-fade">Adding a non-intrusive fade</h2> <p><img src="https://melanie-richards.com/assets/images/content/highlights-fade.jpg" alt="Screenshot of the fade effect" /></p> <p>At the bottom of the highlights minisite, I have a fade effect. This is simply an <code>::after</code> pseudo element with a gradient background applied, like so:</p> <pre><code class="language-CSS">.page-wrap::after { display: block; content: ''; position: fixed; bottom: 0; left: 0; width: 100%; height: 10em; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); } </code></pre> <p>But wait! Any content that falls underneath this shadow will not be selectable or otherwise available for interaction. Here is where we use <code>pointer-events</code>. What this property does is tells the browser when a particular element should be available for interaction; <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events">read more on MDN</a>. For this little fade here, we don’t want any user interaction, and we don’t want to block interactivity of elements falling beneath the fade pseudo element.</p> <p>So let’s remove all pointer events from the pseudo element:</p> <pre><code><strong>@supports(pointer-events: none) {</strong> .page-wrap::after { display: block; content: ''; position: fixed; bottom: 0; left: 0; width: 100%; height: 10em; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); <strong>pointer-events: none;</strong> } } </code></pre> <p>In addition to the <code>pointer-events</code> property, I’m also wrapping this entire declaration block within an <code>@supports</code> rule, so that the fade pseudo element is only rendered on browsers that support both <code>@supports</code> and <code>pointer-events</code>. This way, more modern browsers have an enhanced design, and users in other browsers don’t get a broken experience. <a href="https://caniuse.com/#feat=pointer-events">pointer-events CSS</a> has better support than <a href="https://caniuse.com/#search=%40supports"><code>@supports</code></a>, but again, this is an enhancement.</p> <p>That’s about it for this post, but feel free to <a href="https://github.com/melanierichards/highlights/">poke around in the code</a> or <a href="http://highlights.melanie-richards.com/">visit the minisite</a>!</p> 2016 in review 2016-12-26T00:00:00.000Z https://melanie-richards.com/blog/2016-review/ <p>So. It feels a tad inappropriate to do a personal yearly review when the world feels a little messy and chaotic, but I’m a completionist and would like to have one of these reviews each year to look back on. So. Here we are, navel-gazing.</p> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/2016-review-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/2016-review-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/2016-review-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/2016-review-s.jpg" alt="Photo collage of Japan trip and Seattle-area explorations" /> </picture> <p class="caption">Photos from my Japan trip and explorations closer to home</p> <h2 id="highlights">Highlights</h2> <ul> <li>Had my <a href="https://melanie-richards.com/blog/recap-of-talk-in-tulsa/">first true speaking engagement</a> in Tulsa, Oklahoma and talked about blogging as a part of career- and creativity-development.</li> <li>Went to Japan with friends and family! This was actually the first time I’ve been able to travel to a country where I needed to learn a new language to get around. I’d like to go back some day, so I’m doing some studying with Genki, Memrise, and looking into <a href="https://www.wanikani.com/">WaniKani</a> for learning kanji.</li> <li>Accepted a PR into a public project I started, a first for me.</li> <li><a href="https://www.instagram.com/p/BHSCsfGhweI/?taken-by=somelaniesaid">Flew on a trapeze!</a> Despite a life-long fear of heights.</li> <li>Made a collage-y illustration for my <a href="https://blog.intercom.com/good-products-bad-businesses/">friends at Intercom</a>.</li> <li>Spoke at the first PNW (Pacific Northwest) Web meetup <a href="https://melanie-richards.com/blog/animating-gradients/">about animating gradients</a>.</li> <li>Discovered <a href="https://www.womenoncall.org/">Women on Call</a> through a coworker and am working on a site redesign with an awesome nonprofit!</li> <li>Read a LOT of books. <a href="https://www.goodreads.com/user/year_in_books/2016/2236850">Like, a lot</a> (64). A few favorites: <a href="https://www.goodreads.com/book/show/15811545-a-tale-for-the-time-being">A Tale for the Time Being</a>, <a href="https://www.goodreads.com/book/show/23299512-this-savage-song">This Savage Song</a>, <a href="https://www.goodreads.com/book/show/60931.Kindred">Kindred</a>, <a href="https://www.goodreads.com/book/show/29340182-shrill">Shrill</a>, <a href="https://www.goodreads.com/book/show/11486.The_Color_Purple">The Color Purple</a>, and <a href="https://www.goodreads.com/book/show/25614525-while-the-city-slept">While the City Slept</a>.</li> <li>Started <a href="https://somelaniesaid.dropmark.com/347183">logging articles I’ve read</a>. Top 10 used tags: CSS, browsers / design / ux, a11y (accessibility), tutorial, dev / ethics / standards, race.</li> </ul> <h2 id="on-goal-setting%3A-a-pluralistic-approach-seems-best">On goal setting: a pluralistic approach seems best</h2> <p>I’ve experimented with several different means of setting and tracking goals this year, including a public repo that I have since taken down. The conclusion I’ve come to is this: different goals want different formats. Here’s some examples:</p> <h3 id="some-goals-need-precise-totals">Some goals need precise totals</h3> <p>I’m not super into exercising, mostly because I’d rather be doing 20 other things at the time. So I’ve found it most helpful to have a set number of times in a month that I need to exercise. The number has to be reasonable, but I can't slack very much week to week and still hit the total. Wiping the slate clean at the end of a week instead of the end of the month is too easy on me. :P</p> <h3 id="others-do-better-as-habits">Others do better as habits</h3> <p>I had a goal this year to hike a certain number of trails. I realized I was really just trying to take advantage of what my area has to offer, and perhaps going after a number of trails was actually too prohibitive. So I created a cadence for my weekends: one weekend is chill weekend, the next is adventure weekend. Repeat.</p> <p>Supposedly willpower is a finite resource we run out of, and so making something a habit (“I do x every Monday night at 8”) is more sustainable. I’m going to apply this in the new year to 1) fix my sleep schedule and 2) become a more consistently engaged and communicative citizen. <a href="https://tinyletter.com/lookingtohelp">This newsletter</a> has been great for that, thus far.</p> <h3 id="some-goals-are-just-suggestions">Some goals are just suggestions</h3> <p>For the first half of the year, I was setting down a list of monthly goals, and tried to attack each of those goals. The result is you never get as much done as you want to, and end up feeling like you failed. So I now write my goals for the month on an index card, and divide them into 2 sections:</p> <ol> <li>Priorities. These are things that really have to get done.</li> <li>&quot;Maybe work on&quot;. These are things that I’d like to get around to but not getting them done within the timeframe has no negative impact on my health or the promises I’ve made.</li> </ol> <h2 id="themes-for-2017">Themes for 2017</h2> <ol> <li> <p><strong>Do the most good.</strong> This one is ripped straight from my friend Krista’s <a href="http://www.kristaengler.com/do-the-most-good">stickers</a>, one of which is affixed to my laptop. It’s a reminder to me to replace reactionary support with diligent citizenship. And for the moments when I get overwhelmed by all that is broken: “I cannot do all the good the world needs. But the world needs all the good I can do.” —Jana Stanfield</p> </li> <li> <p><strong>Connection.</strong> This theme is for my personal life. I want to deepen my connection to people, planet, and time.</p> </li> <li> <p><strong>Focus.</strong> I am a dabbler who will never be happy doing just one thing (hello, my <a href="https://astrostyle.com/sagittarius-horoscope/">Sagittarius friends</a>). But I also want to finish things and pursue depth. I have a few ideas on how to practice focus in my creativity, but if anyone has any tips or resources, I would really really appreciate that.</p> </li> </ol> <p>What are your goals or themes for 2017?</p> Fun with animated gradients 2016-12-04T00:00:00.000Z https://melanie-richards.com/blog/animating-gradients/ <p class="popper-bg" role="presentation"> <span class="popper">🎉</span> </p> <p><em>This post is an adaptation of a presentation I gave at the first <a href="https://www.eventbrite.com/e/pnw-web-codepen-meetup-tickets-27661043927">PNW Web Codepen Meetup</a>. Disclaimer: I work on the Microsoft Edge browser platform team but represent my own opinions, yadda yadda.</em></p> <p>I find it kind of funny that, now that we no longer need to 9-slice images to get a button with a gradient on it, CSS gradients are possibly somewhat underutilized. I am thankful we are no longer in an era of web design where everything needs to be mega glossed, but gradients are a little more versatile than you might think—especially when we add animation into the equation.</p> <p>Let's have fun with gradients!</p> <h2 id="but-first%2C-let's-be-responsible-%3E%3A%5B">But first, let's be responsible &gt;:[</h2> <p>Some considerations to keep in mind when it comes to animating gradients:</p> <h3 id="prefixing-tools">Prefixing tools</h3> <p>Code generators can spit out some nasty stuff; Ana Tudor <a href="https://codepen.io/thebabydino/full/pjxVWp">explained some key problems</a> with using gradient generators. If you choose to use pre- or post-processing tools, be sure to vet those for efficiency and accuracy—both prefixes and property values.</p> <p>Note: for simplicity's sake, my demos will be shown unprefixed.</p> <h3 id="performance">Performance</h3> <p>This is a complicated space because there are so many different factors that can differ page to page, but a good place to start is by consulting <a href="https://csstriggers.com/">CSS triggers</a>. The site shows what CSS properties will cause the browser to do more rendering work on first load (the &quot;change from default&quot; column) and on subsequent changes to elements' properties. &quot;Layout&quot; is when the browser calculates how elements are positioned and sized on the screen. &quot;Paint&quot; is when it draws pixels to the screen. Sometimes repaints are done in layers; &quot;composite&quot; refers to the step in the rendering process where the browser combines these layers.</p> <p>A CSS property can be said to be &quot;expensive&quot; when it triggers more of these rendering events, and so it might make sense to avoid applying it to a large number of elements or in quick succession. One thing to note, however, is that the information on CSS Triggers refers to changing CSS properties via JavaScript events. So some of these properties may be less expensive when modified via CSS animation @keyframes, as we will be doing in most of the following experiments. For example, Microsoft Edge tries to render these animated changes on the composite step wherever possible.</p> <p>This is all to say: test your code for performance, especially if you are making changes to properties that would change the dimensions or placement of an element within a page.</p> <h3 id="accessibility">Accessibility</h3> <p>Animation should be used to enhance an experience, not hinder it. The Web Content Accessibility Guidelines (WCAG) 2.0 document says that if an animation starts automatically, lasts more than 5 seconds, and is &quot;presented in parallel&quot; with other content, the user should be provided with the means to pause or stop that animation. Elements also should not flash more than 3 times per second; in Level AA compliance (legal compliance ranges between levels A–AAA), those flashes can be below <a href="https://www.w3.org/TR/WCAG20/#general-thresholddef">&quot;general flash and red flash guidelines&quot;</a>.</p> <p>Thsese guidelines can help improve experiences for those with seizures, cognitive disabilities, and motion sensitives, but can be beneficial to anyone trying to focus on a task or read some content. I've paraphrased WCAG here, so I would suggest checking out <a href="https://www.w3.org/TR/WCAG20/">the official document</a> in order to correctly follow compliance guidelines (see guidelines 2.2 and 2.3 in the link).</p> <h2 id="related-properties">Related properties</h2> <p>The experiments below make use of most of these properties related to background images, transitions, and animations:</p> <pre><code>background-image background-size background-position transition-property transition-duration transition-timing-function transition-delay animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-play-state animation-delay animation-fill-mode </code></pre> <p>There are shorthands for these properties (<code>background</code>, <code>transition</code>, <code>animation</code>), but for clarity, I'll be using the non-shorthand versions.</p> <p>The experiments focus more on different effects you can achieve using these properties. For more in-depth information and available property values, you can refer to these CSS specifications: <a href="https://www.w3.org/TR/css3-images/#gradients">CSS images (gradients)</a>, <a href="https://www.w3.org/TR/css3-background/">backgrounds and borders</a>, <a href="https://www.w3.org/TR/css3-transitions/">transitions</a>, <a href="https://www.w3.org/TR/css3-animations/">animations</a>.</p> <p>Now, onto the experiments!</p> <h2 id="experiment-%231%3A-instagram-link">Experiment #1: Instagram link</h2> <p>What prompted me to explore animated/transitioned gradients is a little quirk I ran into while trying to style an instagram link on my personal site. Basically, I wanted to fade the background of the link from the Instagram brand gradient to the main color on my site.</p> <p data-height="300" data-theme-id="dark" data-slug-hash="QKaVdA" data-default-tab="css,result" data-user="somelaniesaid" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/somelaniesaid/pen/QKaVdA/">Gradient presentation: example 1</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</p> <script async="" src="https://assets.codepen.io/assets/embed/ei.js"></script> <p>The result is that the background gradient just flips to the solid color, rather than fading. I thought this might be because a linear gradient and a background color are two different property types, namely, a CSS image and a color. Sidenote: the <code>background</code> shorthand property is not actually animatable, per the <a href="https://www.w3.org/TR/css3-transitions/#animatable-properties">CSS transitions specification</a>.</p> <p>So next I tried faking a solid color with a gradient:</p> <p data-height="300" data-theme-id="dark" data-slug-hash="EgodGw" data-default-tab="css,result" data-user="somelaniesaid" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/somelaniesaid/pen/EgodGw/">Gradient pres: 1.b</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</p> <p>The fake solid color is a little messy, but the transitions spec requires an equal number of stops:</p> <blockquote> <p>gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated.</p> </blockquote> <p>Woo hoo! That works...in Microsoft Edge. No transitions in Chrome, Firefox, or Safari. I didn't want this to be the only social media icon in the batch without a transition, so I had to do some pseudo element trickery:</p> <p data-height="300" data-theme-id="dark" data-slug-hash="YGYJmd" data-default-tab="css,result" data-user="somelaniesaid" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/somelaniesaid/pen/YGYJmd/">Gradient pres: 1.c</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</p> <p>The gradient is applied to the <code>::before</code> pseudo element, whose opacity is changed on hover. One bonus from this approach is that <code>opacity</code> is a less costly CSS change, perf-wise, per the CSS Triggers site.</p> <h2 id="experiment-%232%3A-ripple-button">Experiment #2: Ripple button</h2> <p>In this experiment, submitting a form (represented in the JavaScript pseudo-code as a click event) triggers a &quot;ripple&quot; animation effect on the submit button.</p> <p data-height="300" data-theme-id="dark" data-slug-hash="bwaQow" data-default-tab="css,result" data-user="somelaniesaid" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/somelaniesaid/pen/bwaQow/">Gradient pres: 3</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</p> <p>A pseudo element on the button has a repeating radial gradient backround. When the <code>submitted</code> class is added to the button via click, a CSS animation changes the padding on the button, thereby revealing more rings and creating a &quot;ripple&quot;. The animation of <code>padding</code> here is one we would have to pay attention to, perf-wise, as we are we are forcing the engine to have to do relayout through to composite for the duration of the animation. I initially considered changing the <code>background-size</code> property to achieve this effect, but that has undesirable effects cross-browser, such as tiling the ellipses, or stretching them.</p> <h2 id="experiment-%233%3A-gradient-as-marketing">Experiment #3: gradient-as-marketing</h2> <p>Animated gradients can appeal to emotions in more obvious ways. An AC company could speak to frazzled, overheated customers by transitioning a splash area from a hot red to a cool blue:</p> <p data-height="600" data-theme-id="dark" data-slug-hash="XjEdjW" data-default-tab="css,result" data-user="somelaniesaid" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/somelaniesaid/pen/XjEdjW/">Gradient pres: 4</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</p> <p>In this example, the gradient background is divided into thirds: the first third is red, the middle transitions from red to blue, and the last third is blue. The background size is set to 300%, and its position is animated vertically. This way, we end on a completely &quot;cool&quot; background.</p> <p>The <code>transition-fill-mode</code> property tells the browser how to apply the styles from the animation; by setting <code>forwards</code> as the property value, we are saying that we want the browser to keep/apply the styles from the last frame of the animation (otherwise, the background would jump back to red).</p> <h2 id="experiment-%234%3A-shiny-callout">Experiment #4: shiny callout</h2> <p>Motion draws the eye. If you have a callout that you want to draw the user's attention to that is outside the flow of the main content, you could do a &quot;shiny&quot; effect:</p> <p data-height="365" data-theme-id="dark" data-slug-hash="qaobLE" data-default-tab="css,result" data-user="somelaniesaid" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/somelaniesaid/pen/qaobLE/">Gradient pres: 5</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</p> <p>This effect employs the same general principles as #4, except this time we're animating at a 135deg angle, and the background is scaled to 400% so that the last quarter of the gradient covers the box when the animation ends.</p> <p>The example assumes the callout is at the top of the page. There's a 2 second delay but in production a longer delay (perhaps 5 seconds) would be better to allow the user time to cognitively process the page layout. If your callout is not at the top of a page, you may want hook this animation into a Javascript scroll event (in that case, you could instead use a CSS transition instead of an animation).</p> <h2 id="experiment-%235%3A-%22plaid%22-loading-spinner">Experiment #5: &quot;plaid&quot; loading spinner</h2> <p>Sometimes accidents can create interesting effects. This gradient is displayed at 200% background-size, and its position is set to 150%. This glitches out to create a somewhat &quot;plaid&quot; effect:</p> <p data-height="300" data-theme-id="dark" data-slug-hash="PGRKmG" data-default-tab="css,result" data-user="somelaniesaid" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/somelaniesaid/pen/PGRKmG/">'Plaid' loading spinner</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</p> <p>The spinner only runs 4 times to account for accessibility benchmarks (if it were longer than 5s we'd need to provide a way to turn the animation off). I do hope your content loads in less than 5 seconds.</p> <h2 id="experiment-%236%3A-animated-intrinsic-placeholder">Experiment #6: animated intrinsic placeholder</h2> <p>This experiment builds on the <a href="https://daverupert.com/2015/12/intrinsic-placeholders-with-picture/">intrinsic placeholder</a> approach to prevent page jumping when images load. A <code>picture</code> element has a top padding equal to the image ratio of the asset inside it, which will be positioned absolutely when it loads. You may need to throttle your connection to see this one.</p> <p data-height="600" data-theme-id="dark" data-slug-hash="ORvjdj" data-default-tab="css,result" data-user="somelaniesaid" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/somelaniesaid/pen/ORvjdj/">Instric placeholder animation</a> by Melanie Richards (<a href="https://codepen.io/somelaniesaid">@somelaniesaid</a>) on <a href="https://codepen.io/">CodePen</a>.</p> <p>We can use some background sizing trickery on a radial gradient to produce a &quot;breathing dots&quot; effect. Sadly, this one doesn't perform super well in Chrome; the dots feel a bit shaky as the background size animates. This might be one where we choose to drop animation and just use gradients for their ability to provide a little repeat pattern without having to load an image asset.</p> <p>Those are my micro-experiments with animating gradients! Feel free to share your own in the comments.</p> <h2 id="further-reading-and-referenced-links">Further reading and referenced links</h2> <ul> <li><a href="https://www.w3.org/TR/css3-images/#gradients">W3C specification: CSS images</a></li> <li><a href="https://www.w3.org/TR/css3-background/">W3C specification: backgrounds and borders</a></li> <li><a href="https://www.w3.org/TR/css3-transitions/">W3C specification: transitions</a></li> <li><a href="https://www.w3.org/TR/css3-animations/">W3C specification: animations</a></li> <li><a href="https://codepen.io/thebabydino/full/pjxVWp">PSA: don't use gradient generators</a></li> <li><a href="https://csstriggers.com/">CSS Triggers</a></li> <li><a href="https://www.hongkiat.com/blog/writing-better-css/">How to Write Better CSS with Performance in Mind</a></li> <li><a href="https://www.w3.org/TR/WCAG20/">WCAG 2.0</a></li> <li><a href="https://cubic-bezier.com/">Cubic Bezier</a></li> </ul> Moved the reading journal 2016-09-22T00:00:00.000Z https://melanie-richards.com/blog/reading-journal/ <p>Quick heads up if you happen to be one of the handful of people that was following my reading journal on Github and want to find it again: <a href="https://somelaniesaid.dropmark.com/347183">I've moved it to Dropmark</a>.</p> <p>I wanted to be able to tag items and explore them via tag, as well as get a quick glimpse of what kinds of things I was reading at particular time. I toyed with the idea of rolling my own solution for this, but decided to spend my side-project energy elsewhere. Besides, a service I use and love already has the functionality built in.</p> <p>What is this reading journal anyway? Basically a log of articles I've been reading across design, development, liberal arts, etc. I started logging this at the beginning of the year because I thought it would be fun to look back on, especially as web standards and design practices morph over the years.</p> <p>Ending on a shameless plug: if you sign up for a Dropmark account with <a href="https://dropmark.com/?ref=somelaniesaid">my referral link</a> and end up getting the paid version, we both get more storage! Whee!</p> HTML5 Accessibility redesign 2016-09-15T00:00:00.000Z https://melanie-richards.com/blog/html5-a11y/ <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-s.jpg" alt="Screenshot of the HTML5 Accessibility website" /> </picture> <p>This redesign went up a couple months ago, but finally getting around to sharing here. David Storey and I (as Microsoft Edge team members) worked on a structural and aesthetic update to the HTML5 Accessibility website, a project created by The Paciello Group, an accessibility consultancy.</p> <p>The site shows whether or not browsers have implemented HTML5 features accessibly, such that users of assitive technology can interact with web content successfully. This of course helps inform web developers of potential issues to look out for, but the test pages also allow browsers to verify that they've implemented features correctly.</p> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-testpg-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-testpg-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-testpg-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-testpg-s.jpg" alt="Screenshot of an article test page on HTML5 Accessibility" /> </picture> <p>We started the redesign of the HTML5 Accessibility site in an unconventional place: on the structurally simplest pages. The test pages are what browser vendors use to verify if they've implemented a feature accessibly. That means that while they should look nice and be a pleasant experience, it was important to us to restrict the markup only to what was absolutely necessary to render the information and tests—no extra HTML crufting up the screen reader or tabbing experience. We chose to start the design here where the code style was more restrictive to ensure that our design styles worked in this reduced form.</p> <picture class=""> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-logo-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-logo-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-logo-s.png" alt="Orange-and-cream colored HTML5 accessibility logo." /> </picture> <p class="caption">The large numeral 5 is made up of 5 lines.</p> <p>It is difficult to capture just how many ways people interact with web content. Instead of trying to jam all these accessibility concepts into one small mark, I opted for a more graphical representation of a unified effort.</p> <p>The orange color of this project's logo is a nod to the W3C's <a href="https://www.w3.org/html/logo/">branding for HTML5</a>.</p> <picture class="c-web-preview"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/html5a11y-before-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/html5a11y-before-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/html5a11y-before-s.jpg" alt="Screenshot of the previous HTML5 Accessibility version" /> </picture> <picture class="c-web-preview"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-table-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-table-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-table-s.jpg" alt="Screenshot of HTML5 Accessibility support table" /> </picture> <p>Our redesign of the main site was more than a re-skin. We restructured content so that:</p> <ul> <li>It was quicker to understand the purpose of the site</li> <li>The user could see inline in the table where accessibility support failed (expanded table row gives extra detail)</li> <li>The user could look at the set of elements they are interested in, instead of looking at one giant table</li> </ul> <picture class=""> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-icons-xl.png" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-icons-l.png" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-icons-m.png" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-icons-s.png" alt="Screenshot of HTML5 Accessibility support table" /> </picture> <picture class="c-web-preview"> <source media="(min-width: 1201px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-bottom-xl.jpg" /><source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-bottom-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-bottom-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-html5a11y-bottom-s.jpg" alt="Screenshot of the more information section of HTML5 Accessibility" /> </picture> <p>This was a fun site to work on, and I'm glad Steve Faulkner (of The Paciello Group) was interested in having us pitch in! You can see the live site at <a href="https://html5accessibility.com/">html5accessibility.com</a>.</p> New illustration on the Intercom blog 2016-08-16T00:00:00.000Z https://melanie-richards.com/blog/intercom-illo/ <picture class="c-web-preview"> <source media="(min-width: 801px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-intercom-illo-l.jpg" /><source media="(min-width: 501px)" srcset="https://melanie-richards.com/assets/images/content/melanierichards-intercom-illo-m.jpg" /> <img src="https://melanie-richards.com/assets/images/content/melanierichards-intercom-illo-s.jpg" alt="Screenshot of my illustration on the Intercom blog" /> </picture> <p>My first freelance illustration project is up on the Intercom blog! Stewart Scott-Curran asked me for an editorial illustration in my collage style for <a href="https://blog.intercom.io/good-products-bad-businesses/">“Not all good products make good businesses”</a>. The post describes what’s needed to scale a good idea into a profitable business, so one of the concepts I sketched for Stew was an abstract exploration in scale. We ended up going with that one, and I snuck in some awesome images of goofy inventions, like an old-school VR concept drawing.</p> <p>As I mentioned, this is actually the first time I’ve been hired to do a purely illustrative freelance project—as opposed to client work with a more holistic design and/or development task. It was a nice change of pace and assignment from my day-to-day, and I hope to work on more projects like this in the future! Thanks for the opportunity, Stew!</p> Just! Build! Websites! 2016-07-18T00:00:00.000Z https://melanie-richards.com/blog/just-build-websites/ <p>The hosts of <a href="https://shoptalkshow.com/">Shop Talk show</a> podcast (Chris Coyier and Dave Rupert) get asked a lot of questions about how to learn web development. Their mantra is &quot;just build websites&quot;; <a href="https://shoptalkshow.com/mantra/">there’s even a soundbite for it</a>. As a person who learns by doing, I agree that getting your hands dirty with some web projects and filling in the gaps in your knowledge along the way is a beautiful way of doing things.</p> <p>What if you don’t know what kind of website to &quot;just build&quot;? To unblock people who want to improve their web design and development chops, I started a <a href="https://github.com/melanierichards/just-build-websites">list of side project ideas</a> on Github. Feel free to check those out and submit a PR if you have an idea to add, and please do let me know if you come up with something inspired by the list, I’d love to see it!</p> Visual site update 2016-05-31T00:00:00.000Z https://melanie-richards.com/blog/new-site/ <p>Visual update on the site today! There's some new projects in the works that I'm looking forward to sharing, but in the meantime, mostly just a fresh coat of paint around here. Chiefly because I got so sick of looking at the <a href="https://dribbble.com/shots/1720056-Minor-Redesign">bright orangey-pink bar</a>, with its less-than-accessible color contrast. If you'd like to test your color combos for legibility, <a href="https://leaverou.github.io/contrast-ratio/">Lea Verou's contrast checker</a> is a good tool that can help check flat color pairs.</p> <p>Random notes about this update:</p> <ul> <li>I switched from <a href="https://getkirby.com/">Kirby CMS</a> to <a href="https://jekyllrb.com/">Jekyll</a>. If I'm choosing a CMS/templating engine for performance, I might as well go all-in on a static site generator (Kirby does some magic with PHP and text/image files in directories). So far enjoying it, though there's some features that I would consider &quot;core&quot; functionality that aren't quite there yet (pagination needs to be added via a plugin, for example).</li> <li>Left-aligning the page content?! Who have I become?</li> <li>I'll let you guess what the squares in the header are ;]</li> <li>In less fun news, I seem to have lost my Disqus comments. Looking to see if there's a way to restore. So if your previous comment is gone...we're still good.</li> <li>In the process of building the site, I tinkered around with my first experiments with client-side API requests. I ended up scrapping the idea I was working on, though I might do a post on it later. I've actually removed a couple working bells-and-whistles from the site; the honest truth is I prefer a simple portfolio site.</li> </ul> <p>Forever making little tweaks, so if you find something weird, feel free to <a href="https://github.com/melanierichards/melanie-richards.com">file an issue</a>. Unless you're a current/former co-worker who likes to troll me for the lulz—take your funny business elsewhere, good sirs.</p> A note on productive perseverance from Rebecca Mezoff 2016-03-21T00:00:00.000Z https://melanie-richards.com/blog/perserverance-rebecca-mezoff/ <p>Came across a great idea from weaver <a href="https://rebeccamezoff.blogspot.com/2016/03/when-what-you-make-doesnt-feel-so-great.html">Rebecca Mezoff</a> in my RSS feeds today:</p> <blockquote> <p>So if you're weaving your first set of tapestries and you aren't all that happy with what is coming off your loom, keep trying! Give yourself some credit for working at it. The practice will pay off. Notice what you love about the piece even if it is something as small as a specific color or yarn choice. Notice that thing you like and write it down. Use that bit of information in the next iteration.</p> </blockquote> <p>I'd never thought of doing this before, but like all great ideas, it seems so obvious in hindsight. Instead of considering our lousiest projects as “failures” to be stored in a little box of shame and thus forgotten, we can make them work for us. No experience, then, is a loss.</p> Blogging about talking about blogging in Tulsa, Oklahoma 2016-01-27T00:00:00.000Z https://melanie-richards.com/blog/recap-of-talk-in-tulsa/ <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-tulsa.jpg" alt="Picture of downtown Tulsa next to a picture of me giggling in front of an illustrated background" /> </picture><figcaption>Downtown Tulsa; me with the giggles at Hogan Assessments. Both photos by Crystal Walters.</figcaption></figure> <p>Last week I spoke about blogging as part of the creative career/process, and now I’m blogging about it! How meta. A milestone that I was quite nervous about—my first time speaking publicly—turned out to be an incredibly fun and rewarding experience.</p> <p>I’d never been to Tulsa before, or anywhere near Oklahoma for that matter, and was excited to see a new city. I couldn’t have had better guides (<a href="http://www.artdirectorsoftulsa.org/">Art Directors Club of Tulsa</a>) to show me all the good stuff.</p> <p>We toured the studios and met members of <a href="https://vimeo.com/firethief">Fire Thief</a>, <a href="https://looseleafco.tumblr.com/">Loose Leaf</a>, and <a href="http://roughhousecreative.com/">Rough House</a>; popped into <a href="http://www.circlecinema.com/">Circle Cinema</a>; heard about the amazing things <a href="https://www.tulsaglassblowing.org/">Tulsa Glassblowing School</a> is doing for local youth; browsed locally-made and vintage curiosities at <a href="http://www.dwellingspaces.net/">Dwelling Spaces</a>; gawked at shmancy stonework downtown; shot a quick interview video at <a href="https://www.hoganassessments.com/">Hogan Assessments</a>; and contemplated art at <a href="https://ahhatulsa.org/">AHHA</a> and <a href="https://108contemporary.org/">108 Contemporary</a>.</p> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/weavings.jpg" alt="Circular tapestry by Analise Stukenborg and weaving by Sarah Sullivan that looks vaguely like an American flag" /> </picture><figcaption>Left: “Grace” by Analise Stukenborg, right: “New Country” by Sarah Sullivan</figcaption></figure> <p>There was so much good art in both those galleries, but I was especially excited to see fiber art alive and well in the heartland. The show at 108 Contemporary included excellent weavings by <a href="https://sarahesullivan.tumblr.com/">Sarah Sullivan</a> and <a href="https://www.instagram.com/analiseface/">Analise Stukenborg</a>, and a giant knit mural by <a href="https://www.romyowens.com/">Romy Owens</a>. Romy mocked up the mural digitally and then divvied up the panels for people to knit. It’s an impressive piece, both in concept and in scale. I feel fired up to start some new weaving ideas!</p> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/romyowens-knitmural.jpg" alt="Romy Owens’s knit mural landscape, from outside and inside the gallery" /> </picture><figcaption>Romy Owens's knit mural landscape, from outside and inside the gallery</figcaption></figure> <p>Everything I ate in Tulsa was so delicious I’m still dreaming about it: coffee and breakfast tacos at <a href="http://www.chimeracafe.com/">Chimera</a>; muffuletta and gumbo at <a href="https://lassallesneworleansdeli.com/">Lassalle’s</a>; chips, salsa, and guac at <a href="https://www.therustycranetulsa.com/">Rusty Crane</a> (the kind I've been missing while living in Seattle); local sausage pie at <a href="http://www.eastvillagebohemian.com/">East Village Bohemian Pizza</a> that makes me kinda glad I’m no longer strictly vegetarian; and an excellent drink called “Wake up call” at <a href="https://www.hodges-bend.com/">Hodges Bend</a>.</p> <p>Oh yeah, and there was the speaking bit. Everyone I met from the ADC was so kind and friendly that by the end of the day the presentation felt a bit more like talking to friends. I shared my experiences with blogging and how that has unintentionally, surprisingly, shaped my entire design career thus far. I went over some of the many benefits of blogging as a part of the creative process, and talked about some of the more practical concerns too: pros and cons of different blogging services, scheduling, blog post topics, and $ opportunities. Everyone asked insightful questions that taught me a lot about what might not be apparent about my process from the outside.</p> <p>If you went to the show and need a refresher on links, these are for you:</p> <ul> <li><a href="https://melanie-richards.com/content/03-blog/recap-of-talk-in-tulsa/tulsaadct-melanierichards-poster.jpg">Image of the show poster</a> w/ post topic ideas in the background</li> <li><a href="https://coryetzkorn.com/blog/choosing-the-best-cms/">Cory Etzkorn’s write-up</a> of different content management systems, if you choose to use one of these in lieu of/alongside Tumblr or Medium</li> <li><a href="https://careers.microsoft.com/jobdetails.aspx?ss=&amp;pg=0&amp;so=&amp;rw=1&amp;jid=214601&amp;jlang=en&amp;pp=ss">Front-end designer job listing at Microsoft Edge</a></li> </ul> <p>All in all, great experience. I’m so thankful to Paul Woodard, Crystal Walters, Robbie Edwards, Dan Van Buskirk, and the rest of ADC Tulsa for bringing me out to meet a new-to-me design scene. Yours is clearly a talented, tight-knit, supportive community, and I am so happy to have met you all! Please say hi if you are ever in Seattle, I know some of you will be!</p> Upcoming talk in Tulsa 2016-01-11T00:00:00.000Z https://melanie-richards.com/blog/upcoming-talk-in-tulsa/ <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-adctulsa-line-m.png" alt="Drawings of blogs surrounding the words From Blerghing to Blogging: How to accidentally build a creative 'career' by rambling on the internet" /> </picture> <p>Quick announcement that I'll be giving my first talk next week! It's hosted by the Art Directors Club of Tulsa at Living Arts Center, Tulsa, OK, on January 21 (doors at 6:30, presentation at 7:30). In true weirdo-Melanie style, the talk is called &quot;From Blerghing to Blogging: How to accidentally build a creative 'career' by rambling on the internet&quot;. I'll be discussing how a few simple posts have unexpectedly shaped my entire path thus far. I'll also share ideas on how and why you might approach your own blogging practice.</p> <p>I have to admit I'm a bit nervous, but honored to have asked to come out to Oklahoma and excited to meet everyone! If you'd like to join in, up-to-date details for location, etc. can be found on the <a href="http://www.artdirectorsoftulsa.org/homepage/melanie-richards">ADC Tulsa website</a>.</p> 2015 in Review 2016-01-01T00:00:00.000Z https://melanie-richards.com/blog/my-2015-in-review/ <picture class=""> <img src="https://melanie-richards.com/assets/images/content/2015-year-review.jpg" alt="A grid of photos, including a foggy mountain top, cherry blossoms on trees, knitting, a hand holding up wool roving, and Toronto skyline" /> </picture> <p>2015 is a strange one to summarize. As a member of the collective, global community it felt like a particularly painful year. I hope that 2016 brings more peace, justice, and fairness, and less (well, none) of the violence and bigotry we've had to endure, marathon-style, this year. I don't often get too #realtalk on here, but I hope that along with our personal resolutions we can all commit to treating people better within our small spheres of influence. Here's to learning more ways to become a kinder, gentler human!</p> <p>Back to 2015. On an individual scope, this felt like more of a quiet transitional year for me. In the 4.5 years since college graduation, I've always balanced design and development, but this year it feels that I'm shifting more towards the technical side of things. I have gotten to a point where I'm pretty much exclusively interested in making things for screens, barring the occasional make-it-because-it-sounds-fun project.</p> <h2 id="highlights">Highlights</h2> <ul> <li>Joined the Microsoft Edge platform team at the beginning of the year. I'm designing and writing code there, a couple end-user projects, but mostly working on resources for external web developers. It has been extremely fascinating working on a browser team, and I'm excited that we are working hard to be more transparent than IE has been known for in the past. People are very passionate about the web, and it's been quite fun learning from them.</li> <li>I <a href="https://melanie-richards.com/blog/100-day-project">read the HTML spec</a> for 100 days and learned a ton of minute details! I enjoyed taking a deeper dive into something so familiar, even though it often felt like a slog. I was proud to have finished the full 100 days, and a co-worker or two owe me a dollar, methinks...</li> <li>I didn't travel too much, but I did get out to Toronto for TCAF (comics arts festival)! Funny that my first visit to Canada is across the country, and not a 3-hour drive away to Vancouver. Toronto is a chill city, and I loved the festival: I got to meet so many comic artists that I've admired for quite some time. My version of ~*~ starstruck ~*~.</li> <li>Got to see the cherry blossoms in full bloom at UW in the spring.</li> <li>I visited Golden Gardens at super low tide. It was EVERYTHING I HAD DREAMED OF in my fantasies of tide pools with lots of critters in them. Starfish, urchins, geoducks, crabs, barnacles, all manner of shellfish...</li> <li>Didn't hike as much as I wanted to, but my favorite outing was Mt. Ellinor, on the Olympic peninsula. The trail had a lot of variation, great pine smells in the older growth areas, and mountain goats! I did enjoy the super-dense fog when I hiked Bechler's Peak, though.</li> <li>I started learning Node, and I've been beefing up on my library-less JavaScript!</li> <li>I've started <a href="https://github.com/melanierichards/reading-journal">keeping track</a> of all the interesting articles I read.</li> </ul> <h2 id="recapping-2015-goals">Recapping 2015 goals</h2> <p>I...don't want to talk about it. My overall goal was to <a href="https://melanie-richards.com/blog/goals-for-2015">focus and pare down my interests</a>. I do think I've spent time on a narrower set of interests, but I haven't always been good about focusing on personal projects long enough to complete them.</p> <p>Individual breakdown:</p> <ul> <li><strong>Illustration:</strong> Ha. I did barely any personal illustration this year. You can hear crickets on my Dribbble account.</li> <li><strong>JavaScript:</strong> I've actually been pretty decent about working on my library-less JS skills! I have so, so much to learn, but I feel already that I have a much deeper understanding of web APIs, and how my scripting actually interacts with objects in the DOM. With jQuery, it was more like magic and a drawn curtain.</li> <li><strong>Writing:</strong> I wrote almost no fiction or poetry this year. I tried a little bit for Nanowrimo, but wasn't feeling it. In the back of my mind I sense that maybe I should be concerned about this, as writing had been a permanent fixture in my life and a valuable outlet. But it may also be that we change over the course of our lives and can enjoy different modes of expression along the way.</li> <li><strong>Weaving and knitting:</strong> It's been great! Still doing basic stuff, but working with fibers has really clicked with me. Drawing has become an activity that feels too aggressive and intimidating to be relaxing, so it's been truly wonderful to find a hobby off the computer that allows me to do some restorative creative play.</li> </ul> <h2 id="goals-for-2016">Goals for 2016</h2> <p>What I'd like to do this year is set some themes and then make monthly goals addressing those themes (<a href="https://github.com/melanierichards/goals">I ended up opening a GitHub repo for this</a>). They are:</p> <ul> <li>Work towards better health habits. I've picked up some bad habits due to changes in routine and schedules, and need to retool my habits to work with that schedule.</li> <li>Have more adventures!</li> <li>SHIP IT. It's ok to have personal projects that you never finish (it's all about learning), but I'm really craving the posivibes of finishing things.</li> <li>Have a healthier emotional relationship to my work. I have no idea how to make measureable goals or habits around this one, so if you have any suggestions, I'm all ears.</li> </ul> <p>I do have a couple goals that are more cumulative for the entire year:</p> <ul> <li>Read 40 books. I have a huge backlog of unread books that I own, so I'm instituting a rule that I can only buy a new book after I've read 5 I already own. The exception is book club books, and I may check out a book from the library at any time.</li> <li>Hike 10 new trails. I didn't do nearly as much hiking as I wanted to do in 2015, so I'd like to fix that in 2016. I'd like to get back to the Olympic Peninsula at least once.</li> <li>Go camping 3 times (with or without hiking). Gotta break in my new tent!</li> </ul> <p>Happy New Year! Best of luck to everyone and their resolutions.</p> More form factors, please! 2015-10-06T00:00:00.000Z https://melanie-richards.com/blog/more-form-factors-please/ <p>Designing UI icon sets today can feel somewhat anachronistic: why does a floppy disk still connote save? Why does your TV have antennae? The struggle here is that if we made every icon match the technology it represents, we’d have a lovely bunch of rectangles.</p> <p>This is changing. Apple just released their Watch, which has a circular, albeit small, interface. The W3C is working on a <a href="https://www.w3.org/TR/2015/WD-css-round-display-1-20150922/">CSS spec for round displays</a>. The draft proposes a border radius detection approach, which covers rectangles, rounded rectangles, ellipses, and perfect circles; it does not yet propose a solution for more complex display shapes: we’ll cross that bridge when we get to it.</p> <p>As I read the working draft, 5% of me thought, “oh, great. More complexity.” But the other 95% is SO JAZZED.</p> <p>First off, it will be interesting to see how web aesthetics change once again to meet the greater variety of screen shapes. With the mobile web we first served up different sites for “mobile” and “desktop”, then moved to responsive (fluid) strategies, and with that, simplified the mainstream aesthetic–not without pushback, off course. Will we see the same pattern with non-rectangular displays? Will we relax the death-grip aesthetics has on traditional design and give more thoughtful attention to UX and content strategy?</p> <p>Second, with greater support in the web community for non-rectangular displays, we will see a rise in new, more interesting form factors. Which means maybe someday I can use THIS:</p> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/it-follows-shell-device.jpg" alt="Screenshots from the film It Follows showing a character using a phone or e-reader shaped like a seashell" /> </picture> <p>That’s a dual-screen e-reader (phone?) in a bivalve-shell casing, used by the character Yara in the indie horror film <em>It Follows</em>. It appears in all its quirky glory because the director <a href="https://www.avclub.com/article/david-robert-mitchell-his-striking-new-horror-film-216215">didn’t want to date the film</a> with a specific piece of technology. I want that e-reader badly. And I think someday it could exist.</p> <p>And this led me down a frenzied wormhole of “what-ifs”:</p> <ul> <li>What if everyone could express their taste and personality not just in the color of their hardware or protective <a href="https://www.amazon.com/Happy-Totoro-Phone-Shell-Iphone5/dp/B00K452P0Y">possibly-Totoro-shaped</a> cases, but in more complex form factors?</li> <li>What if you could apply fully-functional screens to other surfaces, like a film? Would we see an explosion of DIY culture around this, much like IKEA hacks?</li> <li>What if originality in devices became extremely important to fashion? Would we see a flood of new entrants in the industry from people who feel kind of “whatever” about the slightly-different-rectangle-of-the-year (me)? Would we have more diverse STEM fields?</li> <li>What if we had inexpensive devices that look like everyday objects, for at-risk people who need inconspicuous access to help?</li> <li>What if a device’s form factor could be designed to meet the specific needs of differently-abled people?</li> <li>What if the work already being done in these efforts could be available at accessible prices?</li> <li>What if devices could be designed to interlock with other devices, and act as a single computer when brought together (like a patchwork quilt)?</li> <li>What if we had industrial/product design college courses devote to designing non-standard devices? What would curious minds come up with, free of the pressure to sell x units?</li> </ul> <p>I can’t wait to see what we’ll come up with.</p> Post Mortem, 100DaysOfSpec 2015-09-02T00:00:00.000Z https://melanie-richards.com/blog/post-mortem-100daysofspec/ <p>Monday marked the end of my hundred day project, which was to read and take notes on the HTML specifications for 100 days. For those who aren’t familiar, that’s the technical documentation that tells how user agents (browsers, etc.) how to implement HTML interfaces, and tells HTML authors (web developers, etc.) how to use those features. It should be noted there’s wiggle room and areas for interpretation within both those spheres. You can see all my posts in the [100DaysOfSpec tag](<a href="https://melanie-richards.com/blog/tag:100DaysOfSpec">https://melanie-richards.com/blog/tag:100DaysOfSpec</a> text: ).</p> <p>Because it took so much of my time—roughly an hour for 100 days—I thought it appropriate to do a quick post mortem on the reading.</p> <h2 id="overall-impressions">Overall impressions</h2> <p>Even though at times I felt I would rather be doing <em>literally anything else</em>, I’m glad I chose this as my project for the 100 days challenge. It seems odd to have worked with HTML for years and never have read the closest thing HTML authors would have to a “holy text” (though just-build-websites and supplemental, nicely-packaged documentation are nice teachers…), and to attempt to read a text that is mostly dry cover-to-cover takes a bit of discipline.</p> <p>I learned a lot over the course of this reading, both about things work “under the hood”, and small authoring details that may not sync with how most people might use tags, attributes, etc. I can now obnoxiously retort “that’s not what the spec says”. Most importantly, when I am unsure of something, I now go straight to the HTML spec rather than chasing the best answer around in search results (or hoping that the sites I trust are up to date). I love that, because it’s a much more straightforward approach.</p> <p>The one thing that bothers me is the chasm between what the spec says user agents <em>should</em> do, and what they <em>actually</em> do. In a way this means that even our most basic text can’t be trusted. In most cases this should not be a problem, though, because we should be rigorously testing our work in each of the browser versions within our support agreements.</p> <h2 id="process">Process</h2> <p>When I started out reading, my goal was to write down only the most interesting factoids; as time went on, I ended up writing more and more down per post. Part of this is truly the presentation of more unknown material, but I’m a little bummed that the notes became summaries by the end.</p> <p>If I were to read the spec again—and I plan to tackle shorter chunks in the future—I think I would turn on the “developer styles” on offer. It’s nice to see how user agents should be implementing the features of HTML, but I could have covered a lot more ground if I were reading the bits catering towards HTML authors.</p> <p>I will say I’m very happy with how well it worked out to dedicate my commute home from working to continued learning. I’ll be reusing that process for other endeavors.</p> <h2 id="should-i-read-the-spec%3F">Should I read the spec?</h2> <p>Midway through the project, a beginner asked me if they should be reading the HTML spec, too. My first thought was “oh no please, save yourselves!” A more rational response is “later”. I don’t think it makes much sense for a beginner to read this document. Unless you crave this kind of technical reading, the spec will bore you to tears before you even get much of anything built. For beginners, if you like slow step-by-step guidance, there’s sites for that ([Codecademy](<a href="https://codecademy.com/">https://codecademy.com</a> text: ), [Treehouse](<a href="https://teamtreehouse.com/">https://teamtreehouse.com/</a> text: )), or there’s messing around with code and filling in the details from sites like the [Mozilla Developer Network](<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">https://developer.mozilla.org/en-US/docs/Web/HTML</a> text: ).</p> <p>Once you get the basics down, the HTML spec is something you can refer back to in order to deepen your knowledge, or get an answer on a question “straight from the source”.</p> <h2 id="what-might-be-a-good-way-to-read-the-spec%3F">What might be a good way to read the spec?</h2> <p>If you’re working with HTML to build websites, here’s a few suggestions.</p> <ul> <li>Click the button that says “Add developer styles”. This will hide any information that is meant more for browsers and other implementors of HTML interfaces. You can always turn this feature off if you’re curious about how something in particular works.</li> <li>If you’re the type of person who likes to read The Whole Thing, set aside a particular amount of time on a predictable schedule to read segments.</li> <li>If you’re not looking to read cover-to-cover, skim the table of contents to see if any sections jump out at you and read those. Browsing is an excellent method for drawing to our attention topics we might be overlooking. For example, images may seem old hat, but do you know the particulars of crafting a good <code>alt</code> attribute for accessibility, in each of the many use cases?</li> <li>It may also benefit you to brush up on familiar areas, too. Working with a lot of forms on a current project? Maybe check out the form elements sections of the HTML spec to see what you might be missing.</li> <li>To reiterate, checking first with the spec is a great way to answer a question you might have about your HTML authoring. For example, when to use which sectioning element (section, article, main) and which of those elements can nest each other can be confusing. Instead of reading articles on people’s personal blogs which all claim to do things The Best Way, maybe check with the spec<sup><a href="https://melanie-richards.com/blog/post-mortem-100daysofspec/#fn-1">1</a></sup> first.</li> </ul> <p>Happy reading!</p> <section class="footnotes"> <p id="fn-1">1. If I were a different kind of person this could be an excellent catchphrase.</p> </section> Day 100 of 100DaysOfSpec, 4.7.10.6 Offsets into the media 2015-08-31T00:00:00.000Z https://melanie-richards.com/blog/day-100-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>UAs = user agents = browsers, etc.</p> <p>Omg! It’s here! I did it! All 100 (work)days. Planning to do a little recap post of the experience, so this one might feel a little anti-climatic as a last post.</p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#offsets-into-the-media-resource">4.7.10.6 Offsets into the media resource</a></p> <p><strong>media</strong><code>.duration</code> returns the length of the media resource in seconds, assuming a zero start time. Can also return “NaN” (missing duration metadata) or “Infinity” (our case again of the ever-streaming radio station, for example).</p> <p><strong>media</strong><code>.currentTime</code> returns the playback position in seconds. You can also use this to jump the user to a particular point on the video or audio.</p> <p>A media resource has a media timeline, spanning from its “earliest defined position” to the duration as final position point. A start point can include an explicit time and date—I suppose this is involved in scheduled live streaming video/audio—and that info can be accessed using the <code>getStartDate()</code> method. The start needs to be &gt;= 0.</p> <p>The media timeline is always linear, even if the data it spans is discontinuous, out of order, or overlaps original timestamps. The example they give is two clips that have been combined into one video; they lose their old timelines and instead get the new combined one.</p> <p>The UA has been given the power to make a reasonable determination about timelines in the rare cases that a media resource has no explicit timelines or any timings at all (such as frame durations). Examples include animated GIFs and JPEG-push format.</p> <p>Media elements have a:</p> <ul> <li><em>current playback position</em></li> <li><em>official playback position</em> (which is approximately the current, but “is kept stable while scripts are running”)</li> <li><em>default playback start position</em>: originally set to zero sec, allows the element to be “seeked” before it’s done loading, which would come in handy, I think, if you want to jump the user to a particular point along the video/audio.</li> <li><em>show poster flag</em>: set to true when the media element is created</li> <li><em>initial playback position</em>: initially zero seconds, updated when a media resource is loaded</li> </ul> <p>The <code>currentTime</code> attribute returns the default playback start position; if zero, it returns the official playback position instead.</p> <p>There’s plenty more to this section and I thought I’d summon the strength to read the whole thing today, but nope nope nope nope. Way to finish strong! 🎉🎉🎉</p> Day 99 of 100DaysOfSpec, loading the media resource, contd. 2015-08-28T00:00:00.000Z https://melanie-richards.com/blog/day-99-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>UAs = user agents = browsers, etc.</p> <p>Continuing to read in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#loading-the-media-resource">4.7.10.5 Loading the media resource</a></p> <p>Some extra info after the algorithms from the previous days’ notes.</p> <p>The <code>preload</code> attribute takes one of the following keywords, which can be changed while the media resourced is being buffered or played:</p> <ul> <li><code>none</code>: hint that the user might not need this resource, or that the server can save on traffic.</li> <li><code>metadata</code>: hint that the user might not need the resource, but it might be a good idea to fetch metadata and possibly the first few frames. Metadata includes dimensions, duration, etc, and fetching that will put the <code>readyState</code> attribute at <code>HAVE_METADATA</code>. If some frames are fetched, that attribute will likely be <code>HAVE_CURRENT_DATA</code> or <code>HAVE_FUTURE_DATA</code>. I’m curious as to what the use case might be for setting the <code>preload</code> attribute to <code>metadata</code>…maybe some perf black magic?</li> <li><code>auto</code>: Hint that the UA can load as much as it sees fit for the user.</li> <li>The empty string value for <code>preload</code>, like the <code>auto</code> keyword, has an Automatic state.</li> </ul> <p>HTML authors can dynamically switch this <code>preload</code> attribute value once playback begins (i.e. don’t download the video unless the user clicks play, in which case ZOMG DOWNLOAD NOW).</p> <p>The UA can choose to ignore the settings in this attribute, as it is just a hint. This is supposed to be in service of UX though: taking user settings or being smart about connectivity health. The <code>autoplay</code> attribute can also override <code>preload</code>. It’s okay, validation-wise, if those two attributes don’t agree.</p> <p>There’s a <code>buffered</code> attribute that returns an object representing how much of the media resource the UA has buffered.</p> Day 98 of 100DaysOfSpec, media elements, contd. 2015-08-27T00:00:00.000Z https://melanie-richards.com/blog/day-98-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>UAs = user agents = browsers, etc.</p> <p>Continuing to read in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#loading-the-media-resource">4.7.10.5 Loading the media resource</a></p> <h2 id="the-resource-fetch-algorithm%2C-contd.">The resource fetch algorithm, contd.</h2> <p>Headings below are my own.</p> <h2 id="algorithm-when-resource-is-available">Algorithm when resource is available</h2> <ul> <li>When the algorithm is able to determine the media resource’s duration, dimensions, and “other metadata”, that means the resource is usable. This is when the UA can start doing timeline (playback positions, etc) and duration work. This is also when the height and width attributes are set, and a <code>resize</code> event is fired. At the end of this work, the <code>readyState</code> attribute is set to <code>HAVE_METADATA</code> (+ <code>loadedmetadata</code> DOM event, for you scripting folks).</li> <li>After this work, the UA enables relevant audio/video tracks specified on the media resource in the <code>audioTracks</code>/<code>videoTracks</code> object. The first one listed in <code>videoTracks</code> is the selected video track, and all the others are disabled. This step can be triggered again by other events.</li> <li>“Once the readyState attribute reaches HAVE_CURRENT_DATA, after the loadeddata event has been fired, set the element's delaying-the-load-event flag to false. This stops delaying the load event.” The UA would also stop any buffering at this point.</li> <li>A UA is required to determine a media resource’s duration before playing the file.</li> </ul> <h2 id="algorithm-after-the-media-resource-has-been-fetched-(possibly-before-decoded)">Algorithm after the media resource has been fetched (possibly before decoded)</h2> <ul> <li>UAs fire <code>progress</code> event, set <code>networkState</code> to <code>NETWORK_IDLE</code>, fire <code>suspend</code> event.</li> <li>Can reset <code>networkState</code> to <code>NETWORK_LOADING</code> if the UA ever needs to get more data.</li> </ul> <h2 id="algorithm-after-a-connection-interruption-forces-the-ua-to-give-up-fetching-(some-data-has-been-received)">Algorithm after a connection interruption forces the UA to give up fetching (some data has been received)</h2> <ul> <li>Fetching process gets canceled.</li> <li>The UA reports an error—and fires an <code>error</code> event—and then the <code>networkState</code> is at <code>NETWORK_IDLE</code>.</li> <li>UA has to stop delaying the load event.</li> <li>The whole resource selection algorithm is aborted.</li> </ul> <h2 id="algorithm-if-the-media-data-is-corrupted">Algorithm if the media data is corrupted</h2> <ul> <li>Like above, fetching gets cancelled, error stuff gets set/fired.</li> <li>If the <code>readyState</code> attribute’s value is “equal to” <code>HAVE_NOTHING</code>, the element’s poster frame is shown. Some conditional outcomes here for <code>networkState</code>.</li> <li>Like above, stop delaying load and abort the algorithm.</li> </ul> <h2 id="algorithm-if-the-user-aborted-the-fetching-process">Algorithm if the user aborted the fetching process</h2> <p>(For example, pressing a “stop” button). This part of the process is not triggered by the <code>load</code> method itself being invoked during the algorithm.</p> <ul> <li>The steps are pretty much the same as the last case, except that the error code is <code>MEDIA_ERR_ABORTED</code>, and an <code>abort</code> event is fired instead of an <code>error</code> event.</li> </ul> <h2 id="algorithm-if-the-media-data-has-%E2%80%9Cnon-fatal-errors-or-uses%2C-in-part%2C-codecs-that-are-unsupported%E2%80%9D">Algorithm if the media data has “non-fatal errors or uses, in part, codecs that are unsupported”</h2> <p>The server has to cause the UA to render what it can handle. All other data is ignored.</p> <h2 id="algorithm-when-the-media-resource-declares-a-ua-supported-media-resource-specific-text-track">Algorithm when the media resource declares a UA-supported media-resource-specific text track</h2> <p>The algorithm has to go through the steps to expose that text track if the media data is set to CORS-same-origin. There’s a security issue with sending possibly sensitive info in subtitles across domains.</p> <p> </p> <p>One final note is that it’s quite possible that a media element would never reach the final step of the algorithm, which is aborting the algorithm itself. An example is a live-streaming infinite audio file for an online radio station.</p> Day 97 of 100DaysOfSpec, media elements, contd. 2015-08-26T00:00:00.000Z https://melanie-richards.com/blog/day-97-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>UAs = user agents = browsers, etc.</p> <p>Continuing to read in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#media-elements">4.7.10</a> Media elements</p> <h2 id="the-resource-fetch-algorithm">The resource fetch algorithm</h2> <p>Assumes an absolute URL has been provided by the resource selection algorithm.</p> <p>Like the resource selection algorithm, this is also a long one, so here’s just some brief hmm-interesting notes:</p> <ul> <li>There’s a set of substeps to the algorithm to allow UAs to implement <code>preload=“none”</code> (wait until user explicitly requests media resource).</li> <li>UAs can throttle data downloads, as well as allow users to block or slow those downloads. If the user blocks the download, the UA has to treat it as <code>stalled</code>, as opposed to a scorched-earth closed connection.</li> <li>UAs can choose whether or not to download more content at any given time. Use cases include long buffering times, waiting on user input, or when the user navigates away from the page containing the media element. If the UA chooses to suspend the download they fire an event called, well, <code>suspend</code>. The spec reminds us that the <code>preload</code> attribute the author set on the media element is a hint as to what might be an appropriate buffering time for the file; that can help inform the UA’s decision.</li> <li>“The user agent may use whatever means necessary to fetch the resource”. Now THERE’S a thrilling action flick.</li> <li>“This specification does not currently say whether or how to check the MIME types of the media resources, or whether or how to perform file type sniffing using the actual file data.” It’s interesting to see a spot in the spec where no guidance is given because everyone is doing it differently and can’t agree on how to proceed. I assume there’s more areas like this than are called out, but this one is a big one.</li> </ul> <p>More on this algorithm tomorrow.</p> Day 96 of 100DaysOfSpec, media elements, contd. 2015-08-25T00:00:00.000Z https://melanie-richards.com/blog/day-96-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>UAs = user agents = browsers, etc.</p> <p>Continuing to read in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#media-elements">4.7.10</a> Media elements</p> <h2 id="4.7.10.5-loading-the-media-resource">4.7.10.5 Loading the media resource</h2> <p>(Further headings in this post are my own)</p> <p>The <code>media .load()</code> method “causes the element to reset and start selecting and loading a new media resource from scratch”. This means any “pending events and callbacks” the media element may have are scrapped.</p> <h2 id="the-media-element-load-algorithm">The media element load algorithm</h2> <p>“All media elements have an autoplaying flag, which must begin in the true state.” I wonder why?</p> <p>Interesting that the media element load algorithm directs UAs to initially set particular attributes to Not-a-Number (NaN). I would have assumed that unset attributes would just be…empty.</p> <h2 id="the-resource-selection-algorithm">The resource selection algorithm</h2> <p>This algorithm is <em>invoked</em> synchronously, but after a couple steps runs asynchronously (at the same time as other scripts and tasks). Suppose this is why there’s some setting and unsetting of the delaying-the-load-event to true.</p> <p>These media algorithms are pretty involved. I want to find the person(s) at work who implemented them and shake their hand(s).</p> Day 95 of 100DaysOfSpec, media elements, contd. 2015-08-24T00:00:00.000Z https://melanie-richards.com/blog/day-95-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>UAs = user agents = browsers, etc.</p> <h2 id="4.7.10-media-elements"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#media-elements">4.7.10</a> Media elements</h2> <h3 id="4.7.10.3-mime-types">4.7.10.3 MIME types</h3> <p>With some MIME types, you can describe the media resource with a <code>codecs</code> parameters (<code>video/mp4; codecs=“stuffgoeshere”</code>).</p> <p>MIME types are not necessarily a silver bullet, a guarantee that the UA can definitely play a media element with that resource. They’re merely suggestions that a resource is playable, and they can help <strong>rule out</strong> the usability of some files (like if a resource’s MIME type is specified as “pineapple”, and I can’t play a pineapple file, that is helpful).</p> <p>Accordingly, the <code>canPlayType()</code> method returns very non-committal messages: an empty string (can’t play), <code>maybe</code>, or <code>probably</code>.</p> <p>“The MIME type <code>application/octet-stream</code> with no parameters is never a type that the user agent knows it cannot render.” It has to treat this type as if there’s not really any type information at all. The “no parameters” bit is important; if of a resource of this type has parameters, then it can be treated as a specific MIME type.</p> <h3 id="4.7.10.4-network-states">4.7.10.4 Network states</h3> <p>The <code>networkState</code> attribute stores the media element’s current network activity. Values:</p> <ul> <li><code>NETWORK_EMPTY</code>: nothing has happened yet</li> <li><code>NETWORK_IDLE</code>: resource has been selected by the algorithm, but nothing currently happening</li> <li><code>NETWORK_LOADING</code>: UA actively trying to download the resource’s data</li> <li><code>NETWORK_NO_SOURCE</code>: algorithm is active, but hasn’t found a resource to use yet</li> </ul> Day 94 of 100DaysOfSpec, media elements 2015-08-21T00:00:00.000Z https://melanie-richards.com/blog/day-94-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>UAs = user agents = browsers, etc.</p> <h2 id="4.7.10-media-elements"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#media-elements">4.7.10</a> Media elements</h2> <p>This section presents the media elements’ (<code>audio</code> and <code>video</code>) IDL interface and goes more into depth about commonalities across media elements. Those shared attributes include <code>src</code>, <code>crossorigin</code>, <code>preload</code>, <code>autoplay</code>, <code>mediagroup</code>, <code>loop</code>, <code>muted</code>, and <code>controls</code>.</p> <h2 id="4.7.10.1-error-codes">4.7.10.1 Error codes</h2> <p>Media elements have an error status associated with them: a <code>MediaError</code> object stored in the <code>error</code> attribute. It would appear that this status only tracks one most recent error at a time. You can return such an error code by getting <code>media .error.code</code>.</p> <p>Error codes:</p> <ul> <li><code>MEDIA_ERR_ABORTED</code>: fetching stopped at user’s request (stop loading a slow web page, I think might be an example)</li> <li><code>MEDIA_ERR_NETWORK</code>: a network error stopped the fetch. This error would be thrown only if the UA already determined that the media resource was a usable file; same with <code>MEDIA_ERR_DECODE</code>.</li> <li><code>MEDIA_ERR_DECODE</code>: now here’s the BS-y error! “An error of some description occurred”. Ok?</li> <li><code>MEDIA_ERR_SRC_NOT_SUPPORTED</code>: “The media resource indicated by the src attribute was not suitable.”</li> </ul> <h2 id="4.7.10.2-location-of-the-media-resource">4.7.10.2 Location of the media resource</h2> <p>The only info I think might be new here since a previous section is that there’s a <code>currentSrc</code> IDL attribute on the media element that gives…the current source. It starts out as an empty string, and could be accessed in scripting languages via <code>media .currentSrc</code>.</p> Day 93 of 100DaysOfSpec, the track element 2015-08-20T00:00:00.000Z https://melanie-richards.com/blog/day-93-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>UAs = user agents = browsers, etc.</p> <h2 id="4.7.9-the-track-element"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-track-element">4.7.9</a> The track element</h2> <p>“The <code>track</code> element allows authors to specify explicit external timed text tracks for media elements.”</p> <ul> <li><code>kind</code>: lol why is this not called “type”</li> <li><code>src</code>: required</li> <li><code>srclang</code>: BCP 47 language tag</li> <li><code>label</code>: user-visible title for track</li> <li><code>default</code>: enable this track in absence of user preference overrides</li> </ul> <p>Keywords that can be used for the <code>kind</code> attribute include:</p> <ul> <li><code>subtitles</code>: overlaid on video when it’s hard to understand the audio</li> <li><code>captions</code>: overlaid on video; more complete transcription of dialog and sounds, that could be considered complete enough for the hard-of-hearing to rely on</li> <li><code>descriptions</code>: “synthesized as audio”; descriptions of the visual video portion, for when those visuals are unavailable or unusable for whatever reason.</li> <li><code>chapters</code>: chapter titles for navigating through the video, which the UA interface displays as an interactive list.</li> <li><code>metadata</code>: not displayed; “tracks intended for use from script”</li> </ul> <p>Default value, if the <code>kind</code> attribute is missing, is <code>subtitles</code>.</p> <p>Other notes:</p> <ul> <li>Doesn’t have an end tag or ARIA roles.</li> <li>A media element (<code>video</code> or <code>audio</code>) can only have one each of a track element with: <code>kind</code> attribute determined to be <code>subtitles</code> or <code>captions</code>, and with <code>default</code> attribute true; <code>kind</code> attribute as <code>description</code>, <code>default</code>; <code>kind</code> attribute as <code>chapters</code>, default. I interpret the spec to mean that these conditions can be met when the <code>kind</code> attribute defaults to <code>subtitles</code>, instead of having to be explicitly set, but that is just an interpretation.</li> <li>Can have as many <code>track</code> elements with <code>metadata</code> in the <code>kind</code> attribute as you want!</li> <li>One use case for multiple track elements is the option to have subtitles/captions in different languages.</li> </ul> Day 92 of 100DaysOfSpec, the source element 2015-08-19T00:00:00.000Z https://melanie-richards.com/blog/day-92-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>UAs = user agents = browsers, etc.</p> <h2 id="4.7.8-the-source-element"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-source-element">4.7.8</a> The source element</h2> <p>“The <code>source</code> element allows authors to specify multiple alternative media resources for media elements.” That is, <code>audio</code> and <code>video</code> elements.</p> <ul> <li>Can’t stuff any content inside this element.</li> <li>Attributes besides globals are <code>src</code> and <code>type</code> (of resource). <code>src</code> is required.</li> <li>No end tag or ARIA roles.</li> <li>Probably relevant to some folks: “Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect.” You want to instead mess with the <code>src</code> attribute on the <code>video</code> or <code>audio</code> element.</li> <li>Hey, this area of the spec actually gives some example MIME types for the <code>type</code> attribute! *celebratory trumpet sound*</li> <li>That type attribute can help the UA determine if the file is a useful media type worth fetching.</li> </ul> Day 91 of 100DaysOfSpec, the video element, contd. and the audio element 2015-08-18T00:00:00.000Z https://melanie-richards.com/blog/day-91-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-video-element">4.7.6 The video element</a></p> <p>UAs = user agents = browsers, etc.</p> <h2 id="4.7.6-the-video-element%2C-contd."><a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-video-element">4.7.6</a> The video element, contd.</h2> <ul> <li>UAs have to provide controls for closed captions, audio description tracks, etc. without “interfering” with the way a page would usually render. So, no thinking outside the box. ;]</li> <li>Can display the video content fullscreen or in a new window. Controls to enable alternate views also can’t mess with expected page rendering, but the UA can be freer with control placement when the video is in these independent views.</li> <li>The UA can “allow video playback to affect system features that could interfere with the user's experience”. The example they give is disabling screensaver that otherwise would have popped up while watching a longish video.</li> </ul> <h2 id="4.7.7-the-audio-element"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-audio-element">4.7.7</a> The audio element</h2> <p>“An audio element represents a sound or audio stream.”</p> <p>Attributes, besides globals:</p> <ul> <li><code>src</code></li> <li><code>cross origin</code>: how these requests are handled</li> <li><code>preload</code>: hint at how much buffering needed</li> <li><code>autoplay</code>: hint that the UA can autoplay the audio</li> <li><code>media group</code>: “Groups media elements together with an implicit MediaController”</li> <li><code>loop</code></li> <li><code>muted</code></li> <li><code>controls</code>: show the UA controls</li> </ul> <p>More notes:</p> <ul> <li>If it has a <code>src</code> attribute set, can contain 0+ <code>track</code> elements.</li> <li>If no <code>src</code> attribute, 0+ <code>source</code> elements, then 0+ <code>track</code> elements.</li> <li>After these elements, the <code>audio</code> element’s content model is transparent, which means whatever you can put in the element’s parent (or closest ancestor that isn’t also transparent…), you can put inside the element. In this case there is an exception against media elements.</li> <li>Also this element’s content is not exposed to the user, it’s fallback content for older browsers, not meant for accessibility (just like the fallback content in <code>video</code>).</li> <li>Only allowed ARIA role is <code>application</code>.</li> </ul> Day 90 of 100DaysOfSpec, the video element, contd. 2015-08-17T00:00:00.000Z https://melanie-richards.com/blog/day-90-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-video-element">4.7.6 The video element</a></p> <p>UAs = user agents = browsers, etc.</p> <p>These notes extend the <a href="https://melanie-richards.com/blog/day-89-of-100">previous day’s post</a>.</p> <ul> <li>If the UA can’t fetch a poster image by the URL stored in the <code>poster</code> attribute on <code>video</code>, there is no poster image. I assume the first frame of the video just gets used for preview?</li> <li>The video’s format has an impact on which frame is associated with a playback position.</li> <li>In UA’s implementation, the audio has to be synced up with video, “at the element's effective media volume”.</li> <li>The UA can choose to give visual cues on the <code>video</code> element as to the element’s status.</li> <li>If the UA can’t render the <code>video</code>, it can link out to another method of playback or the raw video data.</li> <li>Unless overridden by styling, the UA is beholden to rendering video content at its original aspect ratio, centered in the playback area, as large as possible without getting clipped in one direction or another.</li> <li>Intrinsic height and width of the playback area are determined from the poster frame, or the video resource as a backup, if available. Default “object size” is 300px x 150px (CSS pixels, since a device’s “effective” pixels is not a fixed value).</li> </ul> <p>Didn’t get too far in today’s reading because somedays you just. aren’t. feelin’ it.</p> Day 89 of 100DaysOfSpec, param and video elements 2015-08-13T00:00:00.000Z https://melanie-richards.com/blog/day-89-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#embedded-content-0">4.7 Embedded content</a></p> <p>UAs = user agents = browsers, etc.</p> <h2 id="4.7.5-the-param-element"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-param-element">4.7.5</a> The param element</h2> <p>“The <code>param</code> element defines parameters for plugins invoked by object elements. It does not represent anything on its own.”</p> <ul> <li>Is a child of an <code>object</code> element, before flow content.</li> <li>Both possible attributes (<code>name</code> and <code>value</code>) need to be applied. Either one can have any value! When this condition is met, the <code>param</code> defines a parameter for its parent <code>object</code> element.</li> <li>You can have any number of <code>param</code> elements as children of <code>object</code> elements (0+).</li> </ul> <h2 id="4.7.6-the-video-element"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-video-element">4.7.6</a> The video element</h2> <p>“A <code>video</code> element is used for playing videos or movies, and audio files with captions.”</p> <p>Attributes besides globals:</p> <ul> <li><code>src</code></li> <li><code>crossorigin</code>: how it handles requests from other origins</li> <li><code>poster</code>: frame to show before the video plays. Pretty neat. Value is a URL.</li> <li><code>preload</code>: “hints how much buffering the media resource will likely need”</li> <li><code>autoplay</code>: whether the video can be played on page load. The word used in the spec is “hint”. Which means that the UA has flexibility in whether or not to honor the autoplay…</li> <li><code>mediagroup</code> “groups media elements together with an implicit MediaController”</li> <li><code>loop</code>: boolean</li> <li><code>muted</code>: also a boolean</li> <li><code>controls</code>: show UA controls</li> <li><code>width</code></li> <li><code>height</code></li> <li>Only one ARIA role available: <code>application</code>.</li> <li>Fallback content is allowed for old browsers. Specifically not meant to fix accessibility (a11y) problems.</li> </ul> <h3 id="strategies-for-a11y">Strategies for a11y</h3> <ul> <li>Captions embedded in the video or in external files using the <code>track element</code></li> <li>Sign-language tracks embedded or provided in additional synced-up <code>video</code> elements</li> <li>Audio descriptions, embedded in video, or in an <code>audio</code> element “slaved” to the video element. And here we have bias baked into technical jargon. <code>-__-</code></li> <li>Text in a WebVTT file referenced by a <code>track</code> element, “synthesized” into speech by the UA. This tech can also provide chapter titles.</li> <li>Can also link to or display text transcripts close to the <code>video</code> element.</li> </ul> Day 88 of 100DaysOfSpec, the object element 2015-08-12T00:00:00.000Z https://melanie-richards.com/blog/day-88-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-object-element">4.7.4 The object element</a></p> <p>“The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.”</p> <p>Attributes besides globals:</p> <ul> <li> <p><code>data</code>: resource address</p> </li> <li> <p><code>type</code>: of resource (MIME type)</p> </li> <li> <p><code>typemustmatch</code>: boolean for whether or not <code>type</code> and Content-Type value are required to be in sync for the resource to be used. A good idea to use when the <code>data</code> value comes from untrusted origins to prevent malicious attacks. Need to have both <code>data</code> and <code>type</code> attributes to use this.</p> </li> <li> <p><code>name</code>: of nested browsing context</p> </li> <li> <p><code>usemap</code>: name of (optional) image map</p> </li> <li> <p><code>form</code>: can use to tie <code>object</code> to a <code>form</code> element</p> </li> <li> <p><code>width</code></p> </li> <li> <p><code>height</code>.</p> </li> <li> <p>ALL the element categories! (Well, almost).</p> </li> <li> <p>Can use <code>application</code>, <code>document</code>, <code>img</code>, or <code>presentation</code> ARIA roles.</p> </li> <li> <p><code>object</code> element must have <code>data</code> or/and a <code>type</code> attribute.</p> </li> <li> <p>There are a lot of events that trigger a task determining what the <code>object</code> element represents. Could be good to look at in the future when trying to keep a page performant?</p> </li> <li> <p>“The task source for this task is the DOM manipulation task source.” Ahhh I haven’t gotten to this section of the spec yet! I’m sure this has some sort of interesting implication for perf or something.</p> </li> <li> <p>Attributes on the <code>object</code> element, when determined to be a plugin, are passed to said plugin in the order they were added.</p> </li> <li> <p>Contents of <code>object</code> elements are used as fallback content if and only if the referenced resource isn’t available (404 error, etc).</p> </li> <li> <p>Plugins aren’t a nested browsing context.</p> </li> </ul> Day 87 of 100DaysOfSpec, the embed element 2015-08-11T00:00:00.000Z https://melanie-richards.com/blog/day-87-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element">4.7.3 The embed element</a></p> <p>“The embed element provides an integration point for an external (typically non-HTML) application or interactive content.”</p> <ul> <li>Considered flow, phrasing, embedded, interactive, and palpable content. ALL the categories! Well, almost.</li> <li>Can’t contain descendants.</li> <li>No end tag.</li> <li>Can have these ARIA roles: <code>application</code>, <code>document</code>, <code>img</code>, or <code>presentation</code>.</li> </ul> <p>Attributes, besides the globals:</p> <ul> <li> <p><code>src</code></p> </li> <li> <p><code>type</code>: a valid MIME type. I can’t seem to find the list they reference, but <a href="https://www.freeformatter.com/mime-types-list.html">here’s a mega list</a>!</p> </li> <li> <p><code>width</code></p> </li> <li> <p><code>height</code></p> </li> <li> <p>“Any other attribute that has no namespace” More on this later.</p> </li> <li> <p>Lots of requirements on the <code>embed</code> to be considered “potentially active”. Of note, the element is not a descendent of a media element, nor of an <code>object element that is not showing its fallback content</code>.</p> </li> <li> <p>No fallback content on the <code>embed</code> element.</p> </li> <li> <p>“If the user agent can’t find a suitable plugin when attempting to find and instantiate one for the algorithm above, then the user agent must use a default plugin. This default could be as simple as saying ‘Unsupported Format’.”</p> </li> <li> <p>That plugin has to be unloaded when the <code>embed</code> element can no longer be considered potentially active.</p> </li> <li> <p>If said plugin can’t be secured and “the sandboxed plugin’s browsing context flag is set on the embed element’s Document’s active sandboxing flag set”, the user agent should not load the plugin, and should show the <code>embed</code> as a disabled plugin message (you’ve seen this for Flash, surely).</p> </li> <li> <p>“Plugins that cannot be secured are disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by the sandbox”.</p> </li> <li> <p>“Any <a href="https://en.wikipedia.org/wiki/Namespace">namespace</a>-less attribute other than <code>name</code>, <code>align</code>, <code>hspace</code>, and <code>vspace</code> may be specified on the embed element, so long as its name is XML-compatible and contains no uppercase ASCII letters.” Those exceptions are for legacy embed stuff.</p> </li> </ul> Day 86 of 100DaysOfSpec, the iframe element 2015-08-10T00:00:00.000Z https://melanie-richards.com/blog/day-86-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading <a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element">4.7.2 the iframe element</a></p> <p>“The <code>iframe</code> element represents a nested browsing context.”</p> <ul> <li>Considered flow, phrasing, embedded, interactive, and palpable content. Dang.</li> <li>Can set ARIA roles of <code>application</code>, <code>document</code>, <code>img</code>, or <code>presentation</code>.</li> </ul> <p>Attributes, besides global:</p> <ul> <li> <p><code>src</code>: address of a page to contain</p> </li> <li> <p><code>srcdoc</code>: content of a page to contain. “The value of the attribute is the source of an iframe srcdoc document.” Quote marks, ampersands, left angle brackets, and some XML whitespace characters within the <code>srcdoc</code> attribute have to be escaped. Check out <a href="https://developers.whatwg.org/the-iframe-element.html#the-iframe-element">this spec companion site</a> for an example. The spec seems to suggest that these attributes should have an <code>html</code> root element, but none of the examples I’ve seen elsewhere include it. If you’re looking for cross-browser support, however, <a href="https://caniuse.com/#search=srcdoc">you may be disappointed</a>.</p> </li> <li> <p><code>name</code>: a <a href="https://www.w3.org/TR/html5/browsers.html#valid-browsing-context-name">browsing context name</a></p> </li> <li> <p><code>sandbox</code>: extra security rules. Written as case-insensitive space-separated “tokens”, like how multiple class names are set on an element. “When the attribute is set, the content is treated as being from a unique origin, forms, scripts, and various potentially annoying APIs are disabled, links are prevented from targeting other browsing contexts, and plugins are secured.” You use the tokens in this attribute value to override some of these restrictions: <code>allow-forms</code>, <code>allow-pointer-lock</code>, <code>allow-popups</code>, <code>allow-same-origin</code>, <code>allow-scripts</code>, and <code>allow-top-navigation</code>. Would suggest reading the warnings in the spec as you can open up some security and/or embedding issues.</p> </li> <li> <p><code>width</code></p> </li> <li> <p><code>height</code></p> </li> <li> <p>When an <code>iframe</code> is removed from a document: “this happens without any unload events firing (the nested browsing context and its Document are discarded, not unloaded).” Good to noted if you’re trying to write a script listening for this event.</p> </li> <li> <p>The <code>iframe</code> attributes get re-processed whenever the <code>srcdoc</code> or <code>src</code> (if no <code>srcdoc</code>) attribute is manipulated.</p> </li> <li> <p>“When a Document in an <code>iframe</code> is marked as completely loaded, the user agent must synchronously run the <code>iframe</code> load event steps.”</p> </li> <li> <p>“A load event is also fired at the <code>iframe</code> element when it is created if no other data is loaded in it.”</p> </li> <li> <p>The <code>iframe</code> loading steps open up some vulnerabilities. “User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content.” :/</p> </li> <li> <p>The spec says that there is no fallback content for an <code>iframe</code> as a nested browsing context is always created, but then immediately follows this with “In legacy user agents that do not support iframe elements, the contents would be parsed as markup that could act as fallback content.” Uh?</p> </li> <li> <p>In XML, the <code>iframe</code> has to be empty. In HTML, the content model is “text”, where the parsing algorithm returns only error-free phrasing content, and there are no <code>script</code> element descendants. I’m a little unclear as to whether “text” refers to loose text or if phrasing content elements going into said algorithm are ok. Especially because the the markup is “treated” as text.</p> </li> </ul> Day 85 of 100DaysOfSpec, alt text for images, contd. 2015-08-07T00:00:00.000Z https://melanie-richards.com/blog/day-85-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading <a href="https://www.w3.org/TR/html5/embedded-content-0.html#alt">4.7.1.1 Requirements for providing text to act as an alternative for images</a></p> <h2 id="4.7.1.1.16-when-a-text-alternative-is-not-available-at-the-time-of-publication"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#when-a-text-alternative-is-not-available-at-the-time-of-publication">4.7.1.1.16</a> When a text alternative is not available at the time of publication</h2> <p>The uses cases here generally seem to revolve around automated processes in which the end user didn’t supply any specific information about the image, or the point of the interface on which the image appears is so that the end user supplies the info.</p> <p>Direction here is to do this:</p> <pre><code class="language-HTML">&lt;figure&gt; &lt;img src=“DSC82349082734.jpg”&gt; &lt;figcaption&gt;Whatever info a machine can glean, such as file name or timestamp attached to the image file.&lt;/figcaption&gt; &lt;/figure&gt; </code></pre> <p>Notably, this is a last-ditch effort.</p> <p>I actually think it’s weird that the spec includes this as a use case: “She has provided a caption for the image but not a text alternative. This may be because the site does not provide users with the ability to add a text alternative in the alt attribute.” It would be odd to ask non-technical, untrained users for a text alternative, and if such a user enters a description for an image (as in a photo gallery site) there’s a high chance that it’s a workable value for the alternative text. If the direction really is to to avoid this situation where you have a caption but no alt, I personally think it would be better to use the customer’s value than none at all (and now I’m wondering how many fights a working group had about this).</p> <h2 id="4.7.1.1.17-an-image-not-intended-for-the-user"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#an-image-not-intended-for-the-user">4.7.1.1.17</a> An image not intended for the user</h2> <p>If you’re using an image as a spacing hack or for web statistics, the <code>alt</code> attribute is an empty string. Set <code>width</code>/<code>height</code> to <code>0</code> where possible, in the latter or similar cases.</p> <h2 id="4.7.1.1.18-icon-images"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#icon-images">4.7.1.1.18</a> Icon Images</h2> <p>“Use an empty <code>alt</code> attribute when an icon is supplemental to text conveying the same meaning.”</p> <p>If the icon image adds more meaning to the surrounding text, though, you should add its text equivalent to the <code>alt</code> attribute value.</p> <h2 id="4.7.1.1.19-logos%2C-insignia%2C-flags%2C-or-emblems"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#logos,-insignia,-flags,-or-emblems">4.7.1.1.19</a> Logos, insignia, flags, or emblems</h2> <p>How you use the <code>alt</code> text here depends on context:</p> <ul> <li>If the icon is the only content in a link, the <code>alt</code> text describes where the link leads.</li> <li>If it’s a logo representing an “entity”, with no surrounding text to support it—as in a grid of “our customers” logos—set the <code>alt</code> text to the name of said entity. Can also do <code>alt=“[logo] SuperCoolCompany”</code>.</li> <li>If that logo is accompanied by said entity name, set an empty <code>alt</code> attribute on the <code>img</code> element.</li> <li>“If the logo is used alongside text discussing the subject or entity the logo represents, then provide a text alternative which describes the logo.” In the example, they don’t just give the name of the entity represented, they describe the general aesthetics of the logo.</li> </ul> <h2 id="4.7.1.1.20-captcha-images"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#captcha-images">4.7.1.1.20</a> CAPTCHA Images</h2> <p>I actually never knew what “CAPTCHA” stood for and it’s kind of BS: “Completely Automated Public Turing test to tell Computers and Humans Apart”.</p> <ul> <li>If you must use CAPTCHA images, an audio alternative must immediately precede or follow the image version.</li> <li>“To improve the accessibility of CAPTCHA provide text alternatives that identify and describe the purpose of the image, and provide alternative forms of the CAPTCHA using output modes for different types of sensory perception”</li> <li>The spec discourage CAPTCHA, as it is not even completely accessible when an audio alternative is included (what about people who can’t use the visual version nor the audio version?).</li> </ul> <h2 id="4.7.1.1.21-guidance-for-markup-generators"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#guidance-for-markup-generators">4.7.1.1.21</a> Guidance for markup generators</h2> <p>Talkin’ about automated markup here. Dreeeeamweaver</p> <ul> <li>Get <code>alt</code> text from users AT ALL COSTS!!!! (jk but ya rly)</li> <li>Can use a link’s <code>href</code> attribute to determine a reasonable <code>alt</code> value for an <code>img</code> that is the link’s only child.</li> <li>Use <code>figure</code> and <code>figcaption</code> to mark up image captions.</li> <li>For last resort situations, set the <code>alt</code> attribute to empty if assuming a decorative image, or no <code>alt</code> attribute if assuming the image is “a key part of the content”. Not sure how the automated service would make these assumptions, but I guess it’s a case-by-case, best judgement thing.</li> <li>You can set an empty <code>generator-unable-to-provide-required-alt</code> attribute on the <code>img</code>, which is non-conforming but shouldn’t trigger an error in conformance scanners. This is to prevent bogus <code>alt</code> values for the sake of <code>alt</code> text from markup generators.</li> <li>“Markup generators should generally avoid using the image's own file name as the text alternative.”</li> </ul> <h2 id="4.7.1.1.22-guidance-for-conformance-checkers">4.7.1.1.22 Guidance for conformance checkers</h2> <p>Code quality scanners have to flag a missing <code>alt</code> attribute unless:</p> <ul> <li>The <code>img</code> element is in a <code>figure</code> element w/ a <code>figcaption</code>, <a href="https://www.w3.org/TR/html5/embedded-content-0.html#figcaption-as-alt-condition">like so</a>.</li> <li>The <code>img</code> element has an empty <code>generator-unable-to-provide-required-alt</code> attribute.</li> </ul> <p>As these conformance checkers are required to report these missing attributes, I think it would be a good idea for said checker to also share with the markup author that there are some cases in which the spec suggests an empty or missing <code>alt</code> attribute, and to link out to this area of the spec. By the way, not sure if “missing” in the context of this subsection includes empty <code>alt</code> attributes.</p> Day 84 of 100DaysOfSpec, alt text for images, contd. 2015-08-06T00:00:00.000Z https://melanie-richards.com/blog/day-84-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading <a href="https://www.w3.org/TR/html5/embedded-content-0.html#alt">4.7.1.1 Requirements for providing text to act as an alternative for images</a></p> <h2 id="4.7.1.1.9-a-purely-decorative-image-that-doesn't-add-any-information"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#a-purely-decorative-image-that-doesn't-add-any-information">4.7.1.1.9</a> A purely decorative image that doesn't add any information</h2> <p>I actually looked this up today. For images that are purely decorative, use an empty alt attribute (<code>alt=“”</code>) on the img element. The spec encourages authors to try to include these images using CSS instead of through the markup, I think there are situations to demand use of the img tag instead.</p> <h2 id="4.7.1.1.10-inline-images"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#inline">4.7.1.1.10</a> Inline images</h2> <p>“When images are used inline as part of the flow of text in a sentence, provide a word or phrase as a text alternative which makes sense in the context of the sentence it is apart of.”</p> <p>Section. Over.</p> <h2 id="4.7.1.1.11-a-group-of-images-that-form-a-single-larger-picture-with-no-links"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#a-group-of-images-that-form-a-single-larger-picture-with-no-links">4.7.1.1.11</a> A group of images that form a single larger picture with no links</h2> <p>I’m just thinking right now that the people who put together this spec are really covering their bases. This whole section is a pretty awesome cheatsheet when you’re unsure of how to proceed w/ a particular <code>alt</code> attribute.</p> <p>In this case of a group of images that create a whole, you would put descriptive text on ONE of the images, and then set the others to an empty alt attribute (<code>alt=“”</code>).</p> <h2 id="4.7.1.1.12-image-maps"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#image-maps-0">4.7.1.1.12</a> Image maps</h2> <p>If the image meets <a href="https://www.w3.org/TR/html5/embedded-content-0.html#image-maps-0">certain criteria</a> such that it can be considered an image map, you HAVE to add meaningful <code>alt</code> attributes, as it’s interactive content and needs to be accessible. You’d add said <code>alt</code> attributes to the <code>img</code> elements itself, and to the <code>area</code> elements nested inside the <code>map</code> element associated with the image.</p> <h2 id="4.7.1.1.13-a-group-of-images-that-form-a-single-larger-picture-with-links"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#a-group-of-images-that-form-a-single-larger-picture-with-links">4.7.1.1.13</a> A group of images that form a single larger picture with links</h2> <p>In this case, each linked <code>img</code> within the composite whole needs an <code>alt</code> attribute.</p> <h2 id="4.7.1.1.14-images-of-pictures"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#images-of-pictures">4.7.1.1.14</a> Images of Pictures</h2> <p>They’re referring here to photos, paintings, drawings, artwork, illustrations, etc. that “can convey a significant amount of information visually or provide a specific sensory experience, to a sighted person”.</p> <p>In these cases, you would write a brief description, a task in which “best judgement” is needed. I still think a good test would be to read the alt text and surrounding text out loud to someone (keeping in mind that a screen reader would typically announce presence of an image before or after the alt text).</p> <h2 id="4.7.1.1.15-webcam-images"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#webcam-images">4.7.1.1.15</a> Webcam images</h2> <p>“Webcam images are static images that are automatically updated periodically.” Puppy cam!</p> <p>The idea with these is that the vantage point of the camera is pretty fixed. The alt text is the title and time stamp (preferred to be in surrounding text, but alas…?), and there would be a caption for the photo via the <code>figure</code> and <code>figcaption</code> elements. The way this section is written is a little confusing because it’s hard to tell what the spec authors are advising and what they are saying gets returned by your typical webcam program.</p> Day 83 of 100DaysOfSpec, alt text for images, contd. 2015-08-05T00:00:00.000Z https://melanie-richards.com/blog/day-83-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading <a href="https://www.w3.org/TR/html5/embedded-content-0.html#alt">4.7.1.1 Requirements for providing text to act as an alternative for images</a></p> <h2 id="4.7.1.1.5-images-of-text"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#images-of-text">4.7.1.1.5</a> Images of text</h2> <p>Remember way back in the day when, in order to use a custom font, you had to display text as an image? And whole content or navigation areas of websites were totally inaccessible? Aww.</p> <p>Please don’t do that anymore.</p> <p>The spec also discourages this practice, but if you absolutely must use an image that’s only text—or you’re trying to un-suck a super old site without sinking too much time into it—the <code>alt</code> text simply matches the text shown on the image.</p> <p>Other tips in this section:</p> <ul> <li>If the same text is repeated for visual impact, it’s not necessary to repeat it in the <code>alt</code> text. Only put stuff there that would make sense if you read it out loud to somebody.</li> <li>If there’s other graphical info in the image besides just text, it may make sense to describe that in the <code>alt</code> text as well: only if it adds value or meaning.</li> <li>For symbols that can’t be shown in Unicode, use the phonetic spelling of said symbol in the <code>alt</code> attribute. But use Web fonts with character support instead wherever possible.</li> </ul> <h2 id="4.7.1.1.6-images-that-include-text"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#images-that-include-text">4.7.1.1.6</a> Images that include text</h2> <p>Examples given are images that include both a chart and text. Simple direction is to make sure that the text in the image is also in the <code>alt</code> text. You could alternatively do a short description in the <code>alt</code> attribute and a longer version in other text in the markup, as we saw with the section on <code>alt</code> text for charts.</p> <p><a href="https://www.w3.org/TR/html5/embedded-content-0.html#images-that-enhance-the-themes-or-subject-matter-of-the-page-content">4.7.1.1.7</a> Images that enhance the themes or subject matter of the page content</p> <p>These are images that the surrounding content doesn’t reference directly, but would add more information, context, or meaning.</p> <p>The big takeaway here is that you SHOULD have <code>alt</code> text for such an image. How that is implemented is something you need to think through: it should be a description that allows the end user to understand why it was relevant to surrounding text, or what info/meaning can be gleaned from the image that can’t be from the text.</p> <h2 id="4.7.1.1.8-a-graphical-representation-of-some-of-the-surrounding-text"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#a-graphical-representation-of-some-of-the-surrounding-text">4.7.1.1.8</a> A graphical representation of some of the surrounding text</h2> <p>“In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.”</p> <p>These are cases where no meaning is lost by removing the image, but it’s a nicer experience to have it included. Like if your text talks about how oranges are round fruits with bumpy/dimpled skins, and you have a photo of an orange to supplement that description.</p> <p>For images in this particular category, you could consider have a learn-more link in the image caption instead.</p> Day 82 of 100DaysOfSpec, alt text for images 2015-08-04T00:00:00.000Z https://melanie-richards.com/blog/day-82-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading <a href="https://www.w3.org/TR/html5/embedded-content-0.html#alt">4.7.1.1 Requirements for providing text to act as an alternative for images</a></p> <p>Heads up: there are many topics in this new subsection about alt text on images. Get ready!</p> <ul> <li><code>alt</code> attributes “are a primary way of making visual information accessible”. Concerning for accessibility (a11y) is when images are uploaded via WYSIWYG editors: many clients will need training on the value of adding good descriptors for images in whichever field controls the alt attribute content.</li> <li>Screen reader a11y is not the only reason why you’d want good alt attributes. See <a href="https://www.w3.org/TR/html5/embedded-content-0.html#alt">this section of the spec</a> for more scenarios in which this attribute would be helpful.</li> </ul> <h2 id="4.7.1.1.2-general-guidelines"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#general-guidelines">4.7.1.1.2</a> General guidelines</h2> <p>“Except where otherwise specified, the alt attribute must be specified and its value must not be empty”. Purpose of the image determines how best to use the <code>alt</code> attribute in its context.</p> <h2 id="4.7.1.1.3-a-link-or-button-containing-nothing-but-an-image"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#a-link-or-button-containing-nothing-but-an-image">4.7.1.1.3</a> A link or button containing nothing but an image</h2> <p>The <code>alt</code> attribute should describe the purpose of said link/button. For example, if my link is just a Twitter icon, it might say something like “Follow us on Twitter”, “@somelaniesaid on Twitter”, or “Twitter”. The surrounding text will likely have an impact on what reads out the best.</p> <h2 id="4.7.1.1.4-graphical-representations%3A-charts%2C-diagrams%2C-graphs%2C-maps%2C-illustrations"><a href="https://www.w3.org/TR/html5/embedded-content-0.html#graphical-representations:-charts,-diagrams,-graphs,-maps,-illustrations">4.7.1.1.4</a> Graphical Representations: Charts, diagrams, graphs, maps, illustrations</h2> <p>Two different things you can do here:</p> <ul> <li><code>alt</code> content is exactly descriptive of the chart or what have you: reads out all axis labels, titles, values, etc. Should be able to understand all the data without looking at the image.</li> <li>There is other accessible text in the markup (like a caption for the chart) that writes out this exact description, and then the <code>alt</code> content is more generally descriptive: “A pie graph representing this breakdown of most popular pies”). This is the recommendation if the <code>alt</code> text would be very long or could benefit from more semantic structure (list, table, etc) than a dump of text.</li> </ul> Day 81 of 100DaysOfSpec, the img element, contd. 2015-08-03T00:00:00.000Z https://melanie-richards.com/blog/day-81-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading <a href="https://www.w3.org/TR/html5/embedded-content-0.html#embedded-content-0">4.7 Embedded content</a></p> <p>UAs = User agents = Browsers, etc.</p> <h2 id="img-element%2C-contd.">img element, contd.</h2> <p>Semantics of an <code>img</code> element, as determined by how <code>src</code> and <code>alt</code> attributes are set:</p> <ul> <li> <p><code>src</code> is set, <code>alt</code> is an empty string: image is decorative or redundant with its surrounding contents. If the UA does a request and finds the image source is not available, it can choose not to render this image (and can give the user notice that it didn’t render). I suppose that would be a “broken image” icon.</p> </li> <li> <p><code>src</code> is set, <code>alt</code> is a non-empty string: this image is an important part of content. The <code>alt</code> value should be a descriptor useful enough that the user would know what should have displayed there, if the image didn’t load—or if a user was browsing with a screen reader.</p> </li> <li> <p><code>src</code> is set, <code>alt</code> is not: “no textual equivalent of the image available.” If the image isn’t available in this case, the UA can choose to show that there’s an image here not being rendered. It can also try and grab caption information for the end user: if the <code>img</code> is a descendent of a <code>figure</code> and the only text info in that <code>figure</code> is the contents of <code>figcaption</code>, the UA can use the <code>figcaption</code> contents as this image’s caption.</p> </li> <li> <p>If neither <code>src</code> nor <code>alt</code> are set, the <code>img</code> element doesn’t represent anything.</p> </li> <li> <p>If the <code>src</code> is not set, but <code>alt</code> is, the elements represents the <code>alt</code> attribute’s text.</p> </li> <li> <p><code>alt</code> attribute doesn’t store “advisory information”, as you might with the <code>title</code> attribute.</p> </li> <li> <p>If you try to add any content to an <code>img</code> element, it will be ignored.</p> </li> <li> <p>Setting <code>usemap</code> on the element shows that the image has an image map.</p> </li> <li> <p><code>ismap</code> set on a descendent of an <code>a</code> element (which in turn has its <code>href</code> attribute set), shows that the “element provides access to a server-side image map.” Is boolean and should only be used on elements that match this context.</p> </li> </ul> <p>IDL dimension attributes:</p> <ul> <li><code>width</code> and <code>height</code> return as rendered dimensions if the image is being rendered visually; intrinsic width and height if it’s not be rendered to a “visual medium”; 0 if the image is unavailable.</li> <li><code>naturalWidth</code> and <code>naturalHeight</code> return the intrinsic dimensions if the image is available, otherwise 0. I’m a bit shaky on what intrinsic actually means. Where is this grabbed from? Attributes set directly on the element? Something else?</li> </ul> <p>Some conditions here for when the <code>complete</code> attribute would return true.</p> Day 80 of 100DaysOfSpec, img element, contd. 2015-07-31T00:00:00.000Z https://melanie-richards.com/blog/day-80-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading <a href="https://www.w3.org/TR/html5/embedded-content-0.html#embedded-content-0">4.7 Embedded content</a></p> <p>UAs = User agents = Browsers, etc.</p> <h2 id="img-element%2C-contd.">img element, contd.</h2> <p>Current pixel density:</p> <ul> <li>Initially undefined.</li> <li>“When an img element has a current pixel density that is not 1.0, the element's image data must be treated as if its resolution, in device pixels per CSS pixels, was the current pixel density.” So a 200px square image on a 2x screen is interpreted to be a 100px square image (hence, a blurry image if you choose to show it scaled to 200px square).</li> </ul> <p>Didn’t know that the Document object stores a list of available images. UAs can copy these listed images to other documents (or remove). This would effectively be image caching so that an image doesn’t need to be fetched every time you encounter it.</p> <p>There’s a looooong algorithm for update an <code>image</code> element’s image data. Interestingly, everything gets reset when you do this: the <code>img</code> element gets put back in the unavailable state, and all its data is wiped. So switching out the <code>src</code> may not be as performant as you might think (anecdotally, it can feel noticeable to the end user that “work” is being done, a flash or something similar).</p> <ul> <li>UAs can’t support non-image files in the <code>img</code> element. But…the spec doesn’t define what image types are. Alright, cool. As an aside there’s definitely some proprietary stuff going on with image file types.</li> <li>They also can’t run executable code in an image resource. Security!</li> <li>If the <code>src</code> file is multi-page, like a PDF, only the first page is shown. I didn’t know you could use a PDF file in an <code>img</code> element…but depending on how big the file is that seems wasteful from a weight perspective.</li> </ul> Day 79 of 100DaysOfSpec, 4.7 Embedded content (img element) 2015-07-30T00:00:00.000Z https://melanie-richards.com/blog/day-79-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading <a href="https://www.w3.org/TR/html5/embedded-content-0.html#embedded-content-0">4.7 Embedded content</a></p> <h2 id="4.7.1-the-img-element">4.7.1 The img element</h2> <p>This section is going to take me daaaaays to read.</p> <p>“An img element represents an image.”</p> <p>Besides global attributes, can have these attributes set:</p> <ul> <li> <p><code>alt</code></p> </li> <li> <p><code>src</code></p> </li> <li> <p><code>cross origin</code> (handling of cross origin src requests; <a href="https://www.w3.org/TR/html5/infrastructure.html#cors-settings-attribute">CORS attribute</a>)</p> </li> <li> <p><code>usemap</code> (for image maps, remember those?)</p> </li> <li> <p><code>ismap</code> (is it a server-side image map?)</p> </li> <li> <p><code>width</code></p> </li> <li> <p><code>height</code></p> </li> <li> <p>Self-closing tag.</p> </li> <li> <p>Can be considered interactive content if has <code>usemap</code> attribute</p> </li> <li> <p>Can’t be used for layout or transparency hacks (<em>cough</em> IE6).</p> </li> <li> <p>The <code>img</code> element has these states:</p> <ul> <li>Unavailable</li> <li>Partially available</li> <li>Completely available: “at least the image dimensions are available”</li> <li>Broken: can’t even decode to get image dimensions</li> </ul> </li> <li> <p>Even an <code>img</code> element that is partially available is “said to be” available, which I presume has implications for scripts that check whether the image loaded. Which could be not what you want if you’re doing dimension work with JS. This is just me wondering out loud, I may not be interpreting something correctly.</p> </li> <li> <p>If scripting is turned on / available in the browsing context, the user agent (browser, etc) HAS to retrieve images immediately. Otherwise the UA could choose when to obtain the image, immediately or on demand.</p> </li> <li> <p>On-demand-loaders can only make changes to the image when it’s in the “unavailable state” and has a <code>src</code> attribute.</p> </li> </ul> Day 78 of 100DaysOfSpec, 4.6 Edits, contd. 2015-07-29T00:00:00.000Z https://melanie-richards.com/blog/day-78-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/edits.html#edits">4.6 Edits</a></p> <p>All the sections I read today were non-normative and apply to <a href="https://melanie-richards.com/blog/day-77-of-100">yesterday’s reading</a>.</p> <h2 id="4.6.4-edits-and-paragraphs"><a href="https://www.w3.org/TR/html5/edits.html#edits-and-paragraphs">4.6.4</a> Edits and paragraphs</h2> <p>This is sort of a refresher from yesterday’s reading, but because having <code>ins</code> and <code>del</code> elements cross paragraphs (marked up with <code>p</code> tags or implied) is hella confusing, you shouldn’t do that. Mark up each paragraph with <code>p</code> tags, and apply <code>ins</code> and <code>del</code> elements as they make sense. Whole paragraph was added or deleted? Put the <code>p</code> tag inside the edit element. Just a part of the paragraph? Put the edit element inside the <code>p</code> element.</p> <h2 id="4.6.5-edits-and-lists"><a href="https://www.w3.org/TR/html5/edits.html#edits-and-lists">4.6.5</a> Edits and lists</h2> <p>You can’t wrap a list item (<code>li</code>) with an edit element because only list items are allowed as direct elemental children of <code>ul</code> and <code>ol</code> elements.</p> <p>You can, however, wrap the <strong>contents</strong> of an <code>li</code> with an <code>ins</code> or <code>del</code> element.</p> <p>If you wanted to show than a list item had been delete and replaced by another, you can use one <code>li</code>, with its direct descendants being a <code>del</code> tag followed by an <code>ins</code> tag. You COULD also use two <code>li</code> elements, with an <code>ins</code> and <code>del</code> child respectively, but note that they’ll still count as 2 list items instead of one, which might have unwanted effects on scripts that spit out the number of list items, or numbering on <code>ol</code> elements. You could always use attributes to change the number on a list item, but this could become unmanageable.</p> <h2 id="4.6.6-edits-and-tables"><a href="https://www.w3.org/TR/html5/edits.html#edits-and-tables">4.6.6</a> Edits and tables</h2> <p>Content models for table elements can be tricky. There’s actually quite a lot under the hood for something that seems so antiquated as tables (they are obviously still relevant for tabular content, mostly speaking to their previous use as hacks for layout, and the stigma that carries).</p> <p>So if you want to use <code>ins</code> and <code>del</code> in tables, you have to do some things that might seem a bit annoying. To show that a whole row or column has been added or removed, you have to wrap the contents of each cell in a <code>ins</code> or <code>del</code> element. You can’t really show history of how cells have been shuffled around the table. Styling these entire rows/columns additions and deletions the way you want might require the use of classes, depending on the design.</p> <p>And that’s the end of Chapter 4.6, a shorter chunk of the HTML spec.</p> Day 77 of 100DaysOfSpec, 4.6 Edits (ins, del elements) 2015-07-28T00:00:00.000Z https://melanie-richards.com/blog/day-77-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/edits.html#edits">4.6 Edits</a></p> <h2 id="4.6.1-the-ins-element"><a href="https://www.w3.org/TR/html5/edits.html#the-ins-element">4.6.1</a> The ins element</h2> <p>“The <code>ins</code> element represents an addition to the document.”</p> <ul> <li><code>cite</code> attribute links to the edit source and/or more information.</li> <li><code>datetime</code> attribute gives the date and optional time for when the change was made.</li> <li>Code examples given in the spec show an <code>ins</code> element wrapped around <code>p</code>. It would be a good idea to mark up an addition like this when there is no other in content in the <code>p</code> tag besides an addition. You wouldn’t (or shouldn’t) add an empty <code>p</code> tag to a document, so it also wouldn’t make semantic sense to have an addition to an otherwise empty paragraph.</li> <li>“<code>ins</code> elements should not cross implied paragraph boundaries.” (See spec for an example)</li> </ul> <h2 id="4.6.2-the-del-element"><a href="https://www.w3.org/TR/html5/edits.html#the-del-element">4.6.2</a> The del element</h2> <p>“The <code>del</code> element represents a removal from the document.”</p> <ul> <li>Same <code>cite</code> and <code>datetime</code> attributes as the <code>ins</code> element.</li> <li>Same rule about not crossing implied paragraphs.</li> </ul> <h2 id="4.6.3-attributes-common-to-ins-and-del-elements"><a href="https://www.w3.org/TR/html5/edits.html#attributes-common-to-ins-and-del-elements">4.6.3</a> Attributes common to ins and del elements</h2> <p><code>cite</code>:</p> <ul> <li>When the <code>cite</code> attribute points to a really long document, you’re encourage to use a “fragment identifier” (<code>https://example.com/documentation#relevant-section</code> for example) for the relevant portion of the cited document.</li> <li>The <code>cite</code> value can be surfaced in a user agent’s UI so that they can follow the link to more info/context, but machines are the main benefactors of the attribute.</li> </ul> <p><code>datetime</code>:</p> <ul> <li>If set, has to be a <a href="https://www.w3.org/TR/html5/infrastructure.html#valid-date-string-with-optional-time">valid date string</a>.</li> <li>If the algorithm that parses this attribute doesn’t return a valid date, there is none associated with the edit element.</li> <li>This is also a “private use” attribute can be shown to the user if the user agent (browser, etc.) wishes.</li> </ul> Day 76 of 100DaysOfSpec, bdi, bdo, span, br, wbr elements 2015-07-27T00:00:00.000Z https://melanie-richards.com/blog/day-76-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics">4.5 Text-level semantics</a>.</p> <h2 id="4.5.26-the-bdi-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-bdi-element">4.5.26</a> The bdi element</h2> <p>“The <code>bdi</code> element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.”</p> <ul> <li>Essentially to prevent confusing the algorithm that handles direction of text when you have right-to-left text inside left-to-right text (or vice-versa).</li> <li>The <code>dir</code> attribute doesn’t inherit from its parent.</li> <li>Default value for <code>dir</code> is <code>auto</code>.</li> </ul> <h2 id="4.5.27-the-bdo-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-bdo-element">4.5.27</a> The bdo element</h2> <p>“The <code>bdo</code> element represents explicit text directionality formatting control for its children.”</p> <ul> <li>Essentially allows you to override the algorithm mentioned in the <code>bid</code> notes.</li> <li>Obviously, you need to supply the element with directionality information. The <code>dir</code> attribute can be set to <code>ltr</code> or <code>rtl</code> only. You can’t use auto because…that wouldn’t be an override.</li> </ul> <h2 id="4.5.28-the-span-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-span-element">4.5.28</a> The span element</h2> <p>“The <code>span</code> element doesn't mean anything on its own…”</p> <p>Basically just a hook for styling or global attributes. Probably of greatest interest to web devs is how this element relates to others, e.g. what you can put inside it. That would be [](<a href="https://www.w3.org/TR/html5/dom.html#phrasing-content-1%E2%80%9Cphrasing">https://www.w3.org/TR/html5/dom.html#phrasing-content-1“phrasing</a> content”) elements.</p> <h2 id="4.5.29-the-br-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-br-element">4.5.29</a> The br element</h2> <p>“The br element represents a line break.”</p> <ul> <li>Self-closing tag (<code>&lt;br&gt;</code>).</li> <li>Can’t have children: elements or text.</li> <li>Could style fancily if you wanted to.</li> <li>Should only be used for semantically-necessary breaks in text (poetry, new lines in a physical address), as opposed to what a lot of people use them for: a hack for vertical spacing or for “thematic” breaks in text where two <code>p</code> tags would be more appropriate.</li> </ul> <h2 id="4.5.30-the-wbr-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-wbr-element">4.5.30</a> The wbr element</h2> <p>“The <code>wbr</code> element represents a line break opportunity.”</p> <p>Never heard of this one before! You use it to tell the user agent that it’s okay to wrap a really long chunk of text that would otherwise be parsed as a single word and possibly overflow its container. You could use CSS to achieve something similar, but this would give you greater control and make the distinction on a semantic level, vs. just visual.</p> <p>Self-closing tag.</p> <h2 id="4.5.31-usage-summary"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#usage-summary">4.5.31</a> Usage summary</h2> <p>I think it is nice that this section exists, as the “Text-level semantics” chapter is a long one.</p> Day 75 of 100DaysOfSpec, mark, ruby, rb, rt, rtc, and rp elements 2015-07-24T00:00:00.000Z https://melanie-richards.com/blog/day-75-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics">4.5 Text-level semantics</a>.</p> <p>Fun fact: I have never used any of the elements in today’s reading.</p> <h2 id="4.5.20-the-mark-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-mark-element">4.5.20</a> The mark element</h2> <p>“The <code>mark</code> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.”</p> <ul> <li>Semantics inside a quotation: the HTML author is highlighting some text to give it more attention than the original source (“emphasis my own” type of deal).</li> <li>Semantics in main body content: highlighted text is relevant to the “user’s current activity”. I figured this would probably be text that changes given some interaction, and similarly the example in the spec is highlighting on text that matches an in-page search term.</li> <li>The <code>strong</code> element is for emphasis; the <code>mark</code> element is for relevance. A subtle difference.</li> </ul> <h2 id="4.5.21-the-ruby-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element">4.5.21</a> The ruby element</h2> <p>“The <code>ruby</code> element allows one or more spans of phrasing content to be marked with ruby annotations.”</p> <p>So…I was a bit confused at first because I thought this was referring to Ruby the programming language. Huh? Why does this particular programming language get its own element? But, oh:</p> <p>“Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations. In Japanese, this form of typography is also known as <em>furigana</em>.”</p> <p>Got it.</p> <p>Which is fun because the programming language was created by Japanese developer Yukihiro &quot;Matz&quot; Matsumoto. I suppose one could imply this is where the name comes from, but it doesn’t necessarily seem that way from a quick Wikipedia peek.</p> <p>Anyway. This whole section is completely new to me and I’m not sure how to share notes without just rewriting the spec, so I’m going to take the cop-out method here and <a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element">link back to this section of the spec</a>.</p> <h2 id="4.5.22-the-rb-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-rb-element">4.5.22</a> The rb element</h2> <p>One of the things that melted my brain in that last section on <code>ruby</code> was the omission of closing tags. It is ok to omit the end tag of <code>rb</code> if the element is “immediately followed by an <code>rb</code>, <code>rt</code>, <code>rtc</code> or <code>rp</code> element, or if there is no more content in the parent element.” Same general concept applies to <code>rt</code>, <code>rtc</code> or <code>rp</code> elements.</p> <p>As for the definition: “the <code>rb</code> element marks the base text component of a ruby annotation.”</p> <p>This element doesn’t have any semantic meaning on its own: it helps a parent <code>ruby</code> element decide what said <code>ruby</code> element represents. If that parent doesn’t exist, the <code>rb</code>’s representation is the same as its contents. Same general concept applies to <code>rt</code>, <code>rtc</code> or <code>rp</code> elements.</p> <h2 id="4.5.23-the-rt-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-rt-element">4.5.23</a> The rt element</h2> <p>“The <code>rt</code> element marks the ruby text component of a ruby annotation.” The bits that give notation about the main <code>rb</code> text.</p> <h2 id="4.5.24-the-rtc-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-rtc-element">4.5.24</a> The rtc element</h2> <p>“The <code>rtc</code> element marks a ruby text container for ruby text components in a ruby annotation.”</p> <p>The <code>rtc</code> element can be used for processing categorization of a <code>ruby</code> element’s content.</p> <h2 id="4.5.25-the-rp-element">4.5.25 The rp element</h2> <p>“The <code>rp</code> element is used to provide fallback text to be shown by user agents that don't support ruby annotations.”</p> <ul> <li>Has to come immediately before or after an <code>rt</code> or <code>rtc</code>, but can’t be jammed between two <code>rt</code> elements.</li> <li>People often use the content of this element to put parentheses around the ruby text (<code>rt</code> elements), that bit which gives notation to the main text of the <code>ruby</code> element.</li> </ul> Day 74 of 100DaysOfSpec, sup, sub, i, b, and u elements 2015-07-23T00:00:00.000Z https://melanie-richards.com/blog/day-74-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics">4.5 Text-level semantics</a>.</p> <p>This whole section of elements has such unsatisfyingly short names, ha.</p> <h2 id="4.5.16-the-sub-and-sup-elements"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-sub-and-sup-elements">4.5.16</a> The sub and sup elements</h2> <p>“The <code>sup</code> element represents a superscript and the <code>sub</code> element represents a subscript.”</p> <p>To be used semantically, not stylistically. Examples are abbreviations in some languages, or mathematical expressions (exponents are what jumps to mind). Not mentioned by the spec, but labels corresponding to footnotes are a common and seemingly-appropriate use of <code>sup</code>.</p> <h2 id="4.5.17-the-i-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-i-element">4.5.17</a> The i element</h2> <p>“The <code>i</code> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text…”</p> <p>Examples they give of “different” text:</p> <ul> <li> <p>Taxonomic designation (“the majestic otter, <em>lutra lutra</em>”)</p> </li> <li> <p>Technical term</p> </li> <li> <p>Idiom from another language</p> </li> <li> <p>Transliteration</p> </li> <li> <p>Internal thought (as in a novel)</p> </li> <li> <p>Ship name in “Western” text</p> </li> <li> <p>If the <code>i</code> element contains text in another language, you should mark that language using the <code>lang</code> attribute.</p> </li> <li> <p>There are some overlaps with element eligibility where you might want to go with another element: <code>em</code> for stressing emphasis, <code>dfn</code> for defining a term.</p> </li> <li> <p>It’s curious that the spec just assumes you know that the <code>i</code> element is associated with italics. It’s not until the end of this section that it mentions the <code>i</code> element can be italicized but doesn’t necessarily need to be. And it doesn’t mention in non-normative text that browsers will typically apply italics.</p> </li> </ul> <h2 id="4.5.18-the-b-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-b-element">4.5.18</a> The b element</h2> <p>“The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood…”</p> <ul> <li>As the <code>b</code> element is so semantically vague and basically just a shortcut to styling, the spec encourages authors to find a more appropriately-semantic element where possible.</li> <li>Same note as <code>i</code>, that <code>b</code> is not necessarily bold.</li> </ul> <h2 id="4.5.19-the-u-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-u-element">4.5.19</a> The u element</h2> <p>“The <code>u</code> element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.”</p> <p>That was not really the description I was expecting. The spec suggests different elements you can use in lieu of the <code>u</code> element in different cases because “authors are encouraged to avoid using the u element where it could be confused for a hyperlink”.</p> Day 73 of 100DaysOfSpec, code, var, samp, and kbd elements 2015-07-22T00:00:00.000Z https://melanie-richards.com/blog/day-73-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics">4.5 Text-level semantics</a>.</p> <h2 id="4.5.12-the-code-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-code-element">4.5.12</a> The code element</h2> <p>“The <code>code</code> element represents a fragment of computer code.”</p> <ul> <li>There’s no semantic way to designate the coding language. Classes are okay to use for syntax highlighting.</li> <li>You don’t HAVE to use <code>code</code> inside <code>pre</code>, just if you want to display this as a block of pre-formatted text. Throughout these posts I’ve been using the <code>code</code> element inline.</li> </ul> <h2 id="4.5.13-the-var-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-var-element">4.5.13</a> The var element</h2> <p>“The <code>var</code> element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or just be a term used as a placeholder in prose.”</p> <p>There are many use cases where MathML would be a better choice for your markup (math equations more complex than your second-grade stuff). But <a href="https://caniuse.com/#search=MathML">MathML support</a> is pretty much worthless, so.</p> <h2 id="4.5.14-the-samp-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-samp-element">4.5.14</a> The samp element</h2> <p>“The <code>samp</code> element represents (sample) output from a program or computing system.”</p> <p>Wait, so…could this be used to show output from web languages? Probably not, as the element is only allowed to contain <a href="https://www.w3.org/TR/html5/dom.html#phrasing-content-1">phrasing content</a>. BUT THAT WOULD HAVE BEEN COOL.</p> <h2 id="4.5.15-the-kbd-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element">4.5.15</a> The kbd element</h2> <p>“The <code>kbd</code> element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).”</p> <p>Where you place the <code>kbd</code> element changes its semantic meaning, which I don’t think I’ve come across yet. I don’t think I can adequately explain that without re-stating the spec, so maybe just <a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element">read the original</a>.</p> Day 72 of 100DaysOfSpec, abbr, data, and time elements 2015-07-21T00:00:00.000Z https://melanie-richards.com/blog/day-72-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics">4.5 Text-level semantics</a>.</p> <h2 id="4.5.9-the-abbr-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-abbr-element">4.5.9</a> The abbr element</h2> <p>Probably I should have tried to get through this section <a href="https://melanie-richards.com/blog/day-71-of-100">yesterday</a>, as it can be tied in semantic meaning to the <code>dfn</code> element.</p> <p>“The <code>abbr</code> element represents an abbreviation or acronym, optionally with its expansion.”</p> <ul> <li>The <code>title</code> attribute on <code>abbr</code> includes only its expansion: <code>&lt;abbr title=“World Wide Web Consortium”&gt;W3C&lt;/abbr&gt;</code>.</li> <li>It’s okay to use the element w/o a <code>title</code> attribute to hook into some CSS styles. Only if it makes semantic sense (is actually an abbreviation/acronym), of course.</li> <li>A <code>title</code> attribute on one <code>abbr</code> element does not cascade to other <code>attr</code> elements in the document containing the same text value.</li> </ul> <h2 id="4.5.10-the-data-element">4.5.10 The data element</h2> <p>“The <code>data</code> element represents its contents, along with a machine-readable form of those contents in the value attribute.”</p> <ul> <li>The <code>value</code> attribute is required.</li> <li>Use cases: <ul> <li>Provide both a human-readable and a machine-readable format for information in one element. To be honest the only thing I could think of is a date with the ISO format on a <code>value</code> attribute, but in that case you’d be better off using the <code>time</code> element. Can anyone else think of an example?</li> <li>As another way to provide info to scripts, similar to how developers use <code>data-*</code> attributes (those attributes feel more natural to me than using a <code>data</code> element, but ya never know, this could be more semantic in some contexts).</li> </ul> </li> </ul> <h2 id="4.5.11-the-time-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-time-element">4.5.11</a> The time element</h2> <p>“The <code>time</code> element represents its contents, along with a machine-readable form of those contents in the datetime attribute.”</p> <ul> <li>If you don’t set a <code>datetime</code> attribute, the <code>time</code> element can’t have any element descendents (loosey-goosey text ok).</li> <li>The <code>datetime</code> value has to match one of the syntaxes <a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-time-element">listed in the spec</a>.</li> </ul> Day 71 of 100DaysOfSpec, cite, q, and dfn elements 2015-07-20T00:00:00.000Z https://melanie-richards.com/blog/day-71-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics">4.5 Text-level semantics</a>.</p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h2 id="4.5.6-the-cite-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element">4.5.6</a> The cite element</h2> <p>“The <code>cite</code> element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference…”</p> <ul> <li>No need to take such a literal tack with “creative”: pretty much any body of text created by a human being will do.</li> <li>What might be unclear from the definition of <code>cite</code> is that it doesn’t contain the text content of the reference itself, just the title/name of where you got it from.</li> </ul> <h2 id="4.5.7-the-q-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">4.5.7</a> The q element</h2> <p>“The <code>q</code> element represents some phrasing content quoted from another source.”</p> <ul> <li>The UA inserts the quotation marks, so you shouldn’t add them yourself.</li> <li>Attributes include your standard global attributes, as well as <code>cite</code>, which is a link out (valid URL) to the original source or more information.</li> <li>The <code>q</code> element and plain text contained in quotations are equally semantic/valid ways of marking up a quotation from another source.</li> </ul> <h2 id="4.5.8-the-dfn-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-dfn-element">4.5.8</a> The dfn element</h2> <p>“The <code>dfn</code> element represents the defining instance of a term.”</p> <ul> <li>The definition that matches the term in the <code>dfn</code> needs to be included in the nearest paragraph / description list group / section ancestor.</li> <li>What term exactly is being defined: <ol> <li><code>title</code> attribute, if set on the <code>dfn</code> element, otherwise…</li> <li>…if there is only one child element (including loose text), that is, an <code>abbr</code> with a <code>title</code> attribute, the term is that <code>abbr</code>’s <code>title</code>, otherwise…</li> <li>…it’s the <code>text</code> content of the <code>dfn</code> element.</li> </ol> </li> <li>The <code>title</code> attribute on the <code>dfn</code> contains ONLY the term being defined.</li> <li><code>dfn</code> does not inherit <code>title</code> for use in this way.</li> <li>“An <code>a</code> element that links to a <code>dfn</code> element represents an instance of the term defined by the <code>dfn</code> element.”</li> </ul> Day 70 of 100DaysOfSpec, strong, small, and s elements 2015-07-17T00:00:00.000Z https://melanie-richards.com/blog/day-70-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics">4.5 Text-level semantics</a>.</p> <h2 id="4.5.3-the-strong-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element">4.5.3</a> The strong element</h2> <p>“The <code>strong</code> element represents strong importance, seriousness, or urgency for its contents.”</p> <ul> <li>Nested <code>strong</code> elements increases “importance”.</li> <li>Using <code>strong</code> does not change a sentence’s meaning.</li> </ul> <h2 id="4.5.4-the-small-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-small-element">4.5.4</a> The small element</h2> <p>“The <code>small</code> element represents side comments such as small print.”</p> <ul> <li>Use cases: “disclaimers, caveats, legal restrictions, or copyrights”, also licensing requirements or attribution</li> <li>Not to be used just to “de-emphasize” something: a very common mistake, I’d think.</li> <li>Only for short amounts of text.</li> <li>It could make semantic sense to wrap a <code>small</code> element in a <code>strong</code> element, which would be important fine print (“read the fine print!”).</li> </ul> <h2 id="4.5.5-the-s-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-s-element">4.5.5</a> The s element</h2> <p>“The <code>s</code> element represents contents that are no longer accurate or no longer relevant.”</p> <p>If you wanted to mark up a document edit that is a deletion, you’d use the <code>del</code> element instead.</p> Day 69 of 100DaysOfSpec, a, em elements 2015-07-16T00:00:00.000Z https://melanie-richards.com/blog/day-69-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics">4.5 Text-level semantics</a>, a new section!</p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h2 id="4.5.1-the-a-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element">4.5.1</a> The <code>a</code> element</h2> <ul> <li>Whoa: the <code>a</code> element is categorized as 4 different types of content: flow, phrasing, interactive, and palpable.</li> <li>The content model is “Transparent, but there must be no <a href="https://www.w3.org/TR/html5/dom.html#interactive-content-0">interactive content</a> descendant.” It makes sense that an anchor link can’t contain actionable elements, as its default behavior is to trigger a click event. “Transparent” is a little confusing: it means that the elements required/allowed inside an <code>a</code> element are the same ones as allowed in its parent element—specifically, from the <a href="https://www.w3.org/TR/html5/dom.html#kinds-of-content">category of content</a> that allowed the <code>a</code> tag to be in the parent in the first place.</li> <li>Besides the default ARIA role (<code>link</code>), you can set <code>button</code>, <code>checkbox</code>, <code>menuitem</code>, <code>menuitemcheckbox</code>, <code>menuitemradio</code>, <code>tab</code> or <code>treeitem</code></li> <li>If an <code>a</code> element doesn’t have an <code>href</code> attribute, it’s no longer considered a hyperlink, but a placeholder for a hyperlink. In this case, all the other attributes need to be removed.</li> <li>Dang, an <code>a</code> element could contain a <code>section</code> element and, obeying the “transparent” content model rules, still conform to the spec.</li> </ul> <p>Available attributes:</p> <ul> <li><code>href</code></li> <li><code>target</code>: spec mentions this is the browsing context for “hyperlink navigation and form submission”. Funny, because the general wisdom currently is that “buttons should be buttons”, i.e. don’t use an anchor link for a form submission.</li> <li><code>download</code>: “Whether to download the resource instead of navigating to it, and its file name if so”</li> <li><code>rel</code>: relationship between the document and linked resource</li> <li><code>hreflang</code>: language of the link resource</li> <li><code>type</code>: Hint for the type of the referenced resource. Intentionally en-vagueing with “hint for”. I believe I remember in a different section there being complicated instructions for parsing link type and this attribute being non-binding in some way…</li> </ul> <h2 id="4.5.2-the-em-element"><a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-em-element">4.5.2</a> The em element</h2> <p>“The <code>em</code> element represents stress emphasis of its contents.”</p> <ul> <li>Having nested <code>em</code> elements increase “level of stress”.</li> <li>Stress is not stylistic, it changes semantic meaning of a sentence.</li> </ul> <p>Some splitting-hairs stuff:</p> <blockquote> <p>The em element isn't a generic &quot;italics&quot; element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.</p> <p>The <code>em</code> element also isn't intended to convey importance; for that purpose, the <code>strong</code> element is more appropriate.</p> </blockquote> <p>See, this is a bit weird to me. Semantically changing the stress on a sentence more often does imply a different mood or voice. Stress can also convey importance. I think this is a judgement call situation.</p> Day 68 of 100DaysOfSpec, figure, figcaption, div, and main elements 2015-07-15T00:00:00.000Z https://melanie-richards.com/blog/day-68-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/grouping-content.html#grouping-content">4.4 Grouping content</a></p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h2 id="4.4.11-the-figure-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-figure-element">4.4.11</a> The figure element</h2> <p>“The <code>figure</code> element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.”</p> <ul> <li>Self-contained in this context simply means a complete thought, as opposed to an <code>article</code> that can be published independently, outside of the original content.</li> <li>Can contain <a href="https://www.w3.org/TR/html5/dom.html#flow-content-1">flow content</a>, followed or proceeded by <em>one</em> optional <code>fig caption</code> element.</li> <li>Use cases: marking up illustrations, diagrams, photos, code listings, etc.</li> <li>When writing content for the <code>figcaption</code>, provide identifying info that would allow you to move the <code>figure</code> element to any position or order in the document, rather than using relative labelling (“below”, for ex).</li> <li>“A <code>figure</code> element's contents are part of the surrounding flow.” So if the contents of the <code>figure</code> are only “tangentially related” to the content around it, you’d want to use an <code>aside</code> element, which could <em>in turn</em> wrap a <code>figure</code>.</li> </ul> <h2 id="4.4.12-the-figcaption-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-figcaption-element">4.4.12</a> The figcaption element</h2> <p>No additional comments here.</p> <h2 id="4.4.13-the-div-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-div-element">4.4.13</a> The div element</h2> <p>Funny that one of the most common HTML elements has such a short stub of an writeup. I suppose that matches its semantic vagueness: “The <code>div</code> element has no special meaning at all.”</p> <ul> <li>“Authors are strongly encouraged to view the <code>div</code> element as an element of last resort, for when no other element is suitable.”</li> <li>Where <code>div</code>s can come in handy, is by using <code>class</code>, <code>lang</code>, and <code>title</code> attributes to lend common styles and semantics to groupings of elements.</li> </ul> <h2 id="4.4.14-the-main-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-main-element">4.4.14</a> The main element</h2> <p>“The <code>main</code> element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.”</p> <ul> <li>No <code>article</code>, <code>aside</code>, <code>footer</code>, <code>header</code> or <code>nav</code> element ancestors allowed!</li> <li>Has no effect on document outline (which is not implemented in browsers anyway).</li> <li>Doesn’t contain content that appears site-wide; should just be content unique to this page.</li> <li>Only one <code>main</code> per page.</li> <li>UAs are encouraged: <ul> <li>to support keyboard nav to the <code>main</code> element.</li> <li>Make the <code>main</code>’s first child element the next element to gain focus.</li> </ul> </li> <li>Not intended to denote the main section of a subsection in the document.</li> <li>Should use ARIA <code>role=“main”</code> attribute on the <code>main</code> while we wait on UAs to implement the default role.</li> </ul> <p>And that’s the end of 4.4 Grouping content!</p> Day 67 of 100DaysOfSpec, ul, dl, dt, and dd elements 2015-07-14T00:00:00.000Z https://melanie-richards.com/blog/day-67-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/grouping-content.html#grouping-content">4.4 Grouping content</a></p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h2 id="4.4.6-the-ul-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-ul-element">4.4.6</a> The ul element</h2> <p>“The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.”</p> <p>Principles below are repeated from yesterday’s reading about the <code>ol</code> element.</p> <ul> <li>Considered palpable content if the element has at least one <code>li</code> child element.</li> <li>Can contain as direct children <code>li</code> and script-supporting elements.</li> <li>Quite a few ARIA role attributes available besides the default <code>list</code>: <code>directory</code>, <code>listbox</code>, <code>menu</code>, <code>menubar</code>, <code>presentation</code>, <code>tablist</code>, <code>toolbar</code>, or <code>tree</code>. Get specific with your list semantics!</li> </ul> <h2 id="4.4.7-the-li-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-li-element">4.4.7</a> The li element</h2> <p>“The li element represents a list item. If its parent element is an ol, or ul, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.”</p> <ul> <li>Restricted to use within an <code>ol</code> or <code>ul</code> element.</li> <li>Besides global HTML attributes, has ordinal <code>value</code> attribute if it’s a child of an <code>ol</code>.</li> <li>It is valid HTML to omit the closing tag if the list item is immediately followed by another <code>li</code> or has no following siblings in the <code>ol</code>/<code>ul</code>.</li> <li>The default ARIA role is <code>listitem</code>. You could instead set it to <code>menuitem</code>, <code>menuitemcheckbox</code>, <code>menuitemradio</code>, <code>option</code>, <code>tab</code>, <code>treeitem</code> or <code>presentation</code>.</li> <li>“While it is conforming to include heading elements (e.g. h1) inside li elements, it likely does not convey the semantics that the author intended. A heading starts a new section, so a heading in a list implicitly splits the list into spanning multiple sections.”</li> </ul> <h2 id="4.4.8-the-dl-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-dl-element">4.4.8</a> The dl element</h2> <p>The dl element represents an association list consisting of zero or more name-value groups (a description list). “Names” are marked up with <code>dt</code> elements, values with <code>dd</code> elements. You could use this markup structure to include a list of vocabulary words and definitions before a highly technical article.</p> <p>Example:</p> <pre><code class="language-HTML">&lt;dl&gt; &lt;dt&gt;Gold Level Sponsors&lt;/dt&gt; &lt;dd&gt;$1000+&lt;/dd&gt; &lt;dt&gt;Platinum Level Sponsors&lt;/dt&gt; &lt;dd&gt;$3000+&lt;/dd&gt; &lt;dt&gt;Double-Platinum Level Sponsors&lt;/dt&gt; &lt;dd&gt;$10,000+&lt;/dd&gt; &lt;/dl&gt; </code></pre> <ul> <li> <p>Considered palpable content if the element contains at least one name-value group.</p> </li> <li> <p>You don’t necessarily need to have a one-to-one ratio of <code>dt</code> and <code>dd</code> elements; you could have several <code>dd</code> (definitions) for one <code>dt</code> (term), or use the same <code>dfn</code> in 2+ <code>dt</code> (terms) to link them to one <code>dd</code> (definition).</p> </li> <li> <p>For that reason, if there are multiple paragraphs in a value, those all need to go inside the same <code>dd</code> element.</p> </li> <li> <p>The spec notes to UAs that ordering of name-value groups could be significant. Unsure what they’re seeking to prevent there, maybe a UA might want to surface these definitions in a UI somehow?</p> </li> <li> <p>Not to be used to mark up dialog.</p> </li> </ul> <h2 id="4.4.9-the-dt-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-dt-element">4.4.9</a> The dt element</h2> <ul> <li>Can be used before <code>dd</code> or <code>dt</code> elements inside <code>dl</code> elements</li> <li>Can’t have <code>header</code>, <code>footer</code>, <a href="https://www.w3.org/TR/html5/dom.html#sectioning-content-0">sectioning content</a>, or <a href="https://www.w3.org/TR/html5/dom.html#heading-content-0">heading content</a> descendants.</li> <li>A dt element's end tag may be omitted if the dt element is immediately followed by another dt element or a dd element.</li> <li>“The <code>dt</code> element itself, when used in a <code>dl</code> element, does not indicate that its contents are a term being defined, but this can be indicated using the <code>dfn</code> element,” where <code>dfn</code> is a child of the <code>dt</code>. Unsure why it would be so, but I’m guessing whoever was in this working group wanted 2 different levels of semantic specificity.</li> </ul> <h2 id="4.4.10-the-dd-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-dd-element">4.4.10</a> The dd element</h2> <ul> <li>Can be used after <code>dt</code> or <code>dd</code> elements inside <code>dl</code> elements.</li> <li>A dd element's end tag may be omitted if the dd element is immediately followed by another dd element or a dt element, or if there is no more content in the parent element.</li> </ul> Day 66 of 100DaysOfSpec, blockquote and ol elements 2015-07-13T00:00:00.000Z https://melanie-richards.com/blog/day-66-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/grouping-content.html#grouping-content">4.4 Grouping content</a></p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h2 id="4.4.4-the-blockquote-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-blockquote-element">4.4.4</a> The blockquote element</h2> <p>“The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.”</p> <p>How that ends up looking, in code:</p> <figure> <blockquote> Hello yes I am a blockquote filled with many wonderous things culled probably from Ira Glass or a TED Talk full of wisdom and wonder and you should absolutely pay attention to my sage words. </blockquote> <footer> —<cite>Mr. Fancypants</cite> </footer> </figure> <p>or</p> <blockquote> Hello yes I am a blockquote filled with many wonderous things culled probably from Ira Glass or a TED Talk full of wisdom and wonder and you should absolutely pay attention to my sage words. <footer> —<cite>Mr. Fancypants</cite> </footer> </blockquote> <p>There’s some more examples you should consider perusing, but those are some super basic cases.</p> <ul> <li>“Another source” can be text from the same page by another person. For example, when you’re snarkily responding to someone else’s comment and would like to refrence their opinions directly in your comment.</li> <li>The optional <code>cite</code> attribute is a valid URL to the original source, and is mainly for “private use”, though it can be surfaced by UAs if they desire.</li> <li>You can abbreviate, annotate, etc. but all notes about how you’ve changed the quote (“emphasis mine”, for example) go INSIDE the blockquote element. I suppose this helps keep the notations attached to the content if it gets parsed in interesting ways.</li> </ul> <h2 id="4.4.5-the-ol-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-ol-element">4.4.5</a> The ol element</h2> <ul> <li>Considered palpable content if the element has at least one <code>li</code> child element.</li> <li>Can contain as direct children <code>li</code> and script-supporting elements.</li> <li>Besides global HTML attributes, you can set <code>reversed</code> (boolean value), <code>start</code> (what value to start counting items at, default is &quot;1&quot;), <code>type</code> (list style).</li> <li>Quite a few ARIA role attributes available besides the default <code>list</code>: <code>directory</code>, <code>listbox</code>, <code>menu</code>, <code>menubar</code>, <code>presentation</code>, <code>tablist</code>, <code>toolbar</code>, or <code>tree</code>. Get specific with your list semantics!</li> <li>Should note for those that don’t know: you can set a value attribute on a list item inside an <code>ol</code> element and disrupt the natural (ordinal) counting value. (1,2,3,4,500 or 10, 9, 8, 7.5…)</li> <li>The values for the type attribute are very shorthand: <code>type=&quot;1&quot;</code> for decimal numbering (1., 2., 3.) or <code>type=&quot;a&quot;</code> for lowercase alphabetical (a., b., c.), for example.</li> </ul> Day 65 of 100DaysOfSpec, hr and pre elements 2015-07-10T00:00:00.000Z https://melanie-richards.com/blog/day-65-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/grouping-content.html#grouping-content">4.4</a> Grouping content.</p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h2 id="4.4.2-the-hr-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-hr-element">4.4.2</a> The hr element</h2> <p>“The hr element represents a paragraph-level thematic break”, as opposed to the old use for it as a decorative separator line.</p> <ul> <li>Doesn’t take any child elements/nodes (including text); is a self-closing tag.</li> <li>Default ARIA role is <code>separator</code>, but can set <code>presentation</code>.</li> <li>Doesn’t affect the <a href="https://melanie-richards.com/blog/day-63-of-100">document outline</a>.</li> </ul> <h2 id="4.4.3-the-pre-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-pre-element">4.4.3</a> The pre element</h2> <p>“ The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.”</p> <ul> <li>Takes any global ARIA role.</li> <li>I’ve pretty much exclusively used <code>&lt;pre&gt;</code> for code, but can also be used for ASCII art or including an email and retaining hard break paragraphs and bullets.</li> <li>“…a leading newline character immediately following the pre element start tag is stripped.”</li> <li>Need to consider how placing something in a <code>&lt;pre&gt;</code> might strip away understanding that comes from semantic elements: an accessibility issue for users of screen readers, etc.</li> </ul> <p>Short one today. Spent much of my commute ogling the beauty of the PNW and daydreaming!</p> Day 64 of 100DaysOfSpec, document outlines and the p element 2015-07-09T00:00:00.000Z https://melanie-richards.com/blog/day-64-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/sections.html#sections">4.3 Sections</a> and <a href="https://www.w3.org/TR/html5/grouping-content.html#grouping-content">4.4</a> Grouping content. Some of this post extends <a href="https://melanie-richards.com/blog/day-63-of-100">yesterday’s reading</a>.</p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h3 id="4.3.10.2-sample-outlines"><a href="https://www.w3.org/TR/html5/sections.html#sample-outlines">4.3.10.2</a> Sample outlines</h3> <p>The only comment I have here is it would be good to look at this set of code samples, which illustrate principles from <a href="https://melanie-richards.com/blog/day-63-of-100">yesterday’s reading</a> on document outlines. As with any good set of examples, the first couple are pretty straightforward, and then they get into a little more weirdness.</p> <p>Okay I guess what I could say is: if no graphical UAs are implementing document outlines yet, does it make sense obsessing over how more unique markup structures will be parsed by this algorithm? Meh, maybe not.</p> <h3 id="4.3.11-usage-summary"><a href="https://www.w3.org/TR/html5/sections.html#usage-summary-0">4.3.11</a> Usage summary</h3> <p>Examples on how sectioning elements, etc. should be used. What I think would've gotten the message across better is if they combined all these examples into one longer chunk of markup, and then you could click on an element name (<code>article</code>, etc) and that would highlight the tags of the element in question inside the cumulative code example.</p> <h3 id="4.3.11.1-article-or-section%3F"><a href="https://www.w3.org/TR/html5/sections.html#article-or-section?">4.3.11.1</a> Article or section?</h3> <p>“A section forms part of something else. An article is its own thing.” L O L funny how the formality of your content changes when you’re writing up a non-normative section.</p> <p>…Okay, this section makes NO SENSE. Who wrote this? Actually laughing at the spec…sorry whoever, but this needs to be revisited.</p> <h2 id="4.4-grouping-content"><a href="https://www.w3.org/TR/html5/grouping-content.html#grouping-content">4.4</a> Grouping content</h2> <p>New section! Woo hoo.</p> <h3 id="4.4.1-the-p-element"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-p-element">4.4.1</a> The p element</h3> <p>A paragraph!</p> <ul> <li>Categories: flow and palpable content. Notably, palpable content needs to contain at least one node, which includes simple text that is not inter-element whitespace.</li> <li>You can omit the end tag if a <code>p</code> element is immediately followed by one among a laundry list of elements (or if the parent element has no other content and is not an <code>a</code> element), but again, if that’s somehow necessary there might be something else broken with your process or tools…</li> <li>There are other ways to acceptably create typographical paragraph breaks than using the <code>p</code> tag: “ for instance using inline pilcrows (¶)”</li> <li>Should not be used when something more semantically specific is available.</li> <li>Can’t actually contain <code>ul</code> or <code>ol</code> elements. That’s not something I’ve wanted to do, because it doesn’t make sense to me semantically, but I had no idea it actually wasn’t allowed. I bet this stuff is all over the internet because fun with WYSIWYG!</li> </ul> Day 63 of 100DaysOfSpec, the address element and document outlines 2015-07-08T00:00:00.000Z https://melanie-richards.com/blog/day-63-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/sections.html#sections">4.3 Sections</a></p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h2 id="4.3.9-the-address-element"><a href="https://www.w3.org/TR/html5/sections.html#the-address-element">4.3.9</a> The address element</h2> <p>“The <code>address</code> element represents the contact information for its nearest <code>article</code> or <code>body</code> element ancestor.”</p> <ul> <li>You can’t just use this element willy-nilly for anything that resembles an address (here’s all our offices blah blah), it has to be relevant contact information for the content on the page/in the article.</li> <li>You can’t stuff other content into an <code>address</code> that otherwise contains proper contact info (like a “last modified” date).</li> <li>The reason why you have those content restrictions is that the UA is permitted to expose this info to the user somewhere in the UI besides where your HTML document has been rendered. For example, right-clicking on a page and seeing contact info in a “more info” pane.</li> <li>“Typically, the address element would be included along with other information in a footer element.”</li> <li>Lots of restrictions for this element’s content model: “Flow content, but with no heading content descendants, no sectioning content descendants, and no header, footer, or address element descendants.”</li> <li>Only allowed ARIA role is <code>contentinfo</code>. That’s not the default value, which is sort of odd and the first time I’ve seen that so far (only one available, no default).</li> </ul> <h2 id="4.3.10-headings-and-sections"><a href="https://www.w3.org/TR/html5/sections.html#headings-and-sections">4.3.10</a> Headings and sections</h2> <p>This section goes a little more into the semantics of headings and sections and how those are used to create page outlines.</p> <p>Makes sense to just paste the first bit on semantics: “The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one.”</p> <p><code>blockquote</code>, <code>body</code>, <code>fieldset</code>, <code>figure</code>, <code>td</code>:</p> <ul> <li>are considered sectioning roots</li> <li>can have their own outlines</li> <li>their outlines do not contribute to their ancestors’ outlines</li> </ul> <p>“Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content…” Sigh, I’m just copy-pasting everything today…I would also take a look at the code example they have there in the spec to demonstrate the principles listed above.</p> <p>For all this talk of semantics, the spec encourages devs to wrap sections with sectioning content elements, rather than rely on heading elements’ creation of implicit sections. Wonder if this is simply a coding style preference or seated in some real-world problem that comes with not using sectioning content elements.</p> <h3 id="4.3.10.1-creating-an-outline"><a href="https://www.w3.org/TR/html5/sections.html#outlines">4.3.10.1</a> Creating an outline</h3> <p>We can’t rely on the outline algorithm yet for expressing document structure to the users. Conformance checkers have implemented this algorithm, but no “graphical browsers or assistive technology user agents”.</p> <p>Anyway, this algorithm creates an outline for a sectioning content or <a href="https://www.w3.org/TR/html5/sections.html#sectioning-root">sectioning root</a> element by looking through nodes in a DOM tree.</p> <ul> <li>An outline has 1+ nested <em>sections</em> that correspond to DOM tree nodes. Each of these can have a heading and its own nested subsections.</li> <li>This algorithm is the correct one to use when creating document outlines, like a ToC. If that ToC is interactive, the user should be jumped to whichever element node was used to create the <em>section</em> in the outline. However, navigating to the first outline <em>section</em> should always just take the user to the top of the document, even if there’s content preceding the first heading.</li> <li>The <code>body</code> element outline == the document’s outline.</li> </ul> Day 62 of 100DaysOfSpec, h1–h6, header, footer elements 2015-07-07T00:00:00.000Z https://melanie-richards.com/blog/day-62-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/sections.html#sections">4.3 Sections</a></p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h2 id="4.3.6-the-h1%2C-h2%2C-h3%2C-h4%2C-h5%2C-and-h6-elements"><a href="https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">4.3.6</a> The h1, h2, h3, h4, h5, and h6 elements</h2> <p>“These elements represent headings for their sections.”</p> <ul> <li>Besides default ARIA role (<code>heading</code>), allowed to set <code>tab</code> and <code>presentation</code>.</li> <li>BIG THING: “h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.” Which, according to the code sample, does not necessarily mean that you need to pair heading elements with <code>section</code> elements in one-to-one pairs, but that semantically you are telling whatever parses your HTML document that this element signifies a new segment of info. So. Don’t use for stylistic reasons only.</li> </ul> <h2 id="4.3.7-the-header-element"><a href="https://www.w3.org/TR/html5/sections.html#the-header-element">4.3.7</a> The header element</h2> <p>“The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.”</p> <ul> <li>Sectioning element could mean the document <code>body</code>: probably the most familiar usage to many people: <code>header</code> element as universal site header.</li> <li>Can’t contain <code>header</code>, <code>footer</code>, or <code>main</code>.</li> <li>Besides default ARIA role (<code>banner</code>), only allowed to set <code>presentation</code>. Which is interesting because according to ARIA docs, the <code>banner</code> role is reserved for site-wide info, whereas <code>header</code> doesn’t necessarily need to be used in that context.</li> <li>Sample content for a <code>header</code>: the usual heading elements (<code>h1–h6</code>), table of contents, search, associated logos.</li> <li><code>header</code> != sectioning content. If you wanted content immediately following the closing tag (<code>&lt;/header&gt;</code>) to be considered by parsers another section of content, you’d want to open up a sectioning element: <code>article</code>, <code>aside</code>, <code>nav</code>, or <code>section</code>. And/or MAYBE a heading element? Unclear, <code>h1–h6</code> are not considered sectioning elements but seem to essentially signify similar hierarchy according to the spec.</li> </ul> <h2 id="4.3.8-the-footer-element"><a href="https://www.w3.org/TR/html5/sections.html#the-footer-element">4.3.8</a> The footer element</h2> <p>“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.”</p> <ul> <li>Can’t contain <code>header</code>, <code>footer</code>, or <code>main</code>.</li> <li>Besides default ARIA role (<code>contentinfo</code>), only allowed to set <code>presentation</code>.</li> <li>Don’t actually HAVE to appear at the end of a <code>section</code>.</li> <li>Same as with <code>header</code>, <code>footer</code> != sectioning content.</li> </ul> Day 61 of 100DaysOfSpec, 4.3.3 The section element 2015-07-06T00:00:00.000Z https://melanie-richards.com/blog/day-61-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/sections.html#sections">4.3 Sections</a></p> <p>UAs = user agents = browsers and other HTML document parsers/renderers</p> <h2 id="4.3.4-the-nav-element"><a href="https://www.w3.org/TR/html5/sections.html#the-nav-element">4.3.4</a> The nav element</h2> <p>“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.”</p> <ul> <li>No <code>main</code> element descendants</li> <li>The only ARIA role you can set besides the default (<code>navigation</code>) is <code>presentation</code>. A presentational, non-semantic <code>nav</code>? Sounds like someone’s doing responsive menu garbage.</li> <li>It’s chill to use list markup (<code>ul</code>/<code>ol</code>) where the nav = list(s) of links.</li> <li>This is for major lists of links, so no need to use <code>nav</code> everywhere a link list appears (for example, in the <code>footer</code>, which already stores info about the site/content).</li> <li>UAs can do different things with <code>nav</code>, including skip over this content or provide it upon request instead of presenting it as content information. I don’t think I’ve run into that in default OS screen readers, but it’s worth noting if you’re deciding whether or not a link list inside page content should be in a <code>nav</code>. This would encourage me to limit to site-wide nav and maybe a sidebar nav if it gets repeated from page to page (like documentation wikis) and isn’t integral to understanding the current page content.</li> <li>A <code>nav</code> doesn’t always have to contain a list, which means you can also use this markup for navigation areas verbose (as in the example) and/or clever.</li> </ul> <h2 id="4.3.5-the-aside-element"><a href="https://www.w3.org/TR/html5/sections.html#the-aside-element">4.3.5</a> The aside element</h2> <p>“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”</p> <ul> <li>No <code>main</code> element descendants</li> <li>Default ARIA role is <code>complementary</code>; also allowed are <code>note</code>, <code>search</code>, or <code>presentation</code>.</li> <li>Good uses, according to spec: pull quotes, sidebars, advertising, groups of <code>nav</code> elements</li> <li>Not for “parentheticals”</li> </ul> <p>I would have liked to see whether aside is specifically meant for use outside of <code>main</code> element. I think the implication is “yes”, but it’s unclear from the code examples, which do not contain a <code>main</code>.</p> Day 60 of 100DaysOfSpec, 4.3.3 The section element 2015-07-03T00:00:00.000Z https://melanie-richards.com/blog/day-60-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/sections.html#the-section-element">The section element</a></p> <p>Semantics with <code>section</code> are a bit tricky. The spec says that they are thematic groupings of content, rather than a shortcut for styling large chunks of the page that need to be visually separated in some way (how most people have ended up using them). The idea is that “the theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.” This seems a LITTLE fuzzy to me because I think it’s possible to have thematic groupings of content that don’t necessarily need an introductory <code>h1-h6</code> tag. I’m thinking when this element was designed, the authors imagined applications for screen readers, feed readers, and other UAs that would parse web pages for consumption separate from their original styling.</p> <p>With the examples they give, though (especially the one with the fruit), the <code>section</code> element by design can be almost as vague as the <code>div</code> but OMG DON’T JUST USE IT FOR STYLING.</p> <p>By default, the <code>section</code> element’s ARIA role is “region” and shouldn’t be explicitly set (redundant).</p> Day 59 of 100DaysOfSpec, 4.3 Sections 2015-07-01T00:00:00.000Z https://melanie-richards.com/blog/day-59-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/sections.html#sections">4.3 Sections</a></p> <p>Hooray! Finally starting on elements outside the <code>&lt;head&gt;</code>.</p> <h2 id="4.3.1-the-body-element"><a href="https://www.w3.org/TR/html5/sections.html#the-body-element">4.3.1</a> The body element</h2> <p><code>body</code> == document content. You need to have only one in your document to conform to HTML standards. To review a previous section—forget which—you can actually can drop an opening or closing tag under special conditions (see spec, because why bother doing this?).</p> <p>There’s…some craziness about event handler bubbling. For the <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onresize</code>, and <code>onscroll</code> event handlers: the event handler content attributes would get triggered first on whatever element (child of <code>body</code>) the handler is set on, then on <code>html</code>, and THEN on <code>body</code>, rather than triggering directly up the chain. “A regular event listener attached to the body using addEventListener(), however, would be run when the event bubbled through the body and not when it reaches the Window object.”</p> <p>I need to learn more about Javascript, because I feel like if I did, this would make more sense to me / leave a more impactful impression / explain some problems I might have while writing code.</p> <h2 id="4.3.2-the-article-element"><a href="https://www.w3.org/TR/html5/sections.html#the-article-element">4.3.2</a> The article element</h2> <p>The <code>article</code> “represents a complete, or self-contained, composition” that could stand on its own for, say, syndication. Examples they give are: “a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget…” To me forum post/comment doesn’t match the definition of an article’s semantic value: yes, you can subscribe to comments, etc, via an RSS feed, but it doesn’t really make sense (to me) to independently distribute a comment without the original post.</p> <p>Interesting bits:</p> <ul> <li>Can’t contain <code>main</code> elements as descendants.</li> <li>Nesting <code>article</code>s can be semantically sound.</li> <li>Nested <code>article</code> elements should not be associated with author info that applies to the ancestral <code>article</code> element.</li> </ul> <p>And I’m just going to leave this here because I feel like it would come up for a lot of people in “when to use what”:</p> <p>“When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, the content should be marked up with a main element and the content may also be marked with an article, but it is technically redundant in this case (since it's self-evident that the page is a single composition, as it is a single document).”</p> Day 58 of 100DaysOfSpec, 4.2.6 Styling 2015-06-29T00:00:00.000Z https://melanie-richards.com/blog/day-58-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/document-metadata.html#styling">4.2.6 Styling</a></p> <p>“The <code>style</code> and <code>link</code> elements implement the LinkStyle interface.” When either is successfully processed (see spec for conditions), a <code>StyleSheet</code> object is returned with:</p> <ul> <li><strong>type</strong>: actual type of the contents must match the type specified</li> <li><strong>location</strong>: No location for <code>style</code> elements.</li> <li><strong>media</strong>: Same as the <code>media</code> content attribute. An empty string if the attribute wasn’t specified.</li> <li><strong>title</strong>: matches the <code>title</code> attribute, if given.</li> <li><strong>alternate flag</strong>: for <code>link</code> elements. Boolean value for whether or not the <code>link</code> is an alternate stylesheet.</li> </ul> <p>A stylesheet (<code>link</code>, <code>style</code>, or otherwise) can be considered script-blocking if they meet a few cumulative conditions, which appears to be the standard case. The UA gets to choose when to stop attempting to load a stylesheet.</p> Day 57 of 100DaysOfSpec, 4.2.5 The meta element, contd. 2015-06-26T00:00:00.000Z https://melanie-richards.com/blog/day-57-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/document-metadata.html#the-style-element">4.2.6 The style element</a>. UA = user agent = browsers and other applications that process HTML documents.</p> <p>For embedding CSS—well, styles in general, CSS implementation is not actually required by the spec—directly into a document (as opposed to linking to stylesheets or stuffing styles in an element’s <code>style</code> attribute).</p> <p>Attributes on the <code>style</code> element:</p> <ul> <li><code>type</code>: The default value is <code>&quot;text/css&quot;</code>. An unknown value in <code>type</code> should be ignored by the UA as if it’s unsupported.</li> <li><code>media</code>: tells what types of media the styles apply to. <code>Screen</code>, <code>all</code>, <code>print</code>, etc. Default is <code>all</code>.</li> <li><code>title</code>: sets alternate style sheet sets. This attribute doesn’t inherit from ancestors.</li> <li>You shouldn’t set <code>charset</code> on <code>style</code>.</li> </ul> <p>The <code>style</code> element’s descendants and subresources get processed before <code>style</code> itself. I suppose that’s something like an <code>@import</code> rule. <strong>Note:</strong> time spent fetching “critical subresources” blocks page load.</p> Day 56 of 100DaysOfSpec, 4.2.5 The meta element, contd. 2015-06-25T00:00:00.000Z https://melanie-richards.com/blog/day-56-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/document-metadata.html#the-meta-element">4.2.5 The meta element</a></p> <h2 id="4.2.5.3-pragma-directives"><a href="https://www.w3.org/TR/html5/document-metadata.html#pragma-directives">4.2.5.3</a> Pragma directives</h2> <p>“When the http-equiv attribute is specified on a meta element, the element is a pragma directive.”</p> <p><code>http-equiv</code> takes one of a defined set of values:</p> <ul> <li><code>content-language</code> (non-conforming)</li> <li><code>content-type</code></li> <li><code>default-style</code></li> <li><code>refresh</code></li> <li><code>set-cookie</code> (non-conforming)</li> </ul> <h3 id="content-language">content-language</h3> <p>“This pragma is almost, but not quite, entirely unlike the HTTP Content-Language header of the same name.” Uh, ok? How? <em>shrug</em></p> <h3 id="content-type">content-type</h3> <p>This character encoding declaration is an alternative means of setting the <code>charset</code> attribute, which means your document shouldn’t have both a meta element with this <code>http-equiv</code> attribute value, and a meta with the <code>charset</code> set. It’s formatted like: <code>text/html; charset=</code> with a <a href="https://www.w3.org/TR/encoding/">character encoding label</a> at the end. The character encoding name is case-insensitive.</p> <h3 id="default-style">default-style</h3> <p>“This pragma sets the name of the default alternative style sheet set.” Curious who’s using this and why.</p> <h3 id="refresh">refresh</h3> <p>A timed redirect. Only the first meta element with <code>http-equiv=&quot;refresh&quot;</code> will be run. The algorithm to parse this attribute value is the longest of the pragmas. Still, some aspects of the design of this interface are up to the UA: how they want to surface the time left to redirect, whether they want to show the URL the user will be directed to, how (and maybe if? not quite sure) they want to allow the user to cancel the redirect, etc.</p> <p>The formatting of this pragma: <code>content=&quot;300; URL=nextpage.html&quot;</code>, where 300 is any positive integer, denoting seconds. You can drop off the URL bit and the page will simply refresh; if you include a new URL, the page will, after first loading, redirect to that new page.</p> <h3 id="set-cookie">set-cookie</h3> <p>“It is non-conforming. Real HTTP headers should be used instead.”</p> <h2 id="4.2.5.4-other-pragma-directives"><a href="https://www.w3.org/TR/html5/document-metadata.html#other-pragma-directives">4.2.5.4</a> Other pragma directives</h2> <p>Like the default metadata names, pragma directives can be extended; that is, added to the <a href="https://wiki.whatwg.org/wiki/PragmaExtensions">WHATWG Wiki PragmaExtensions page</a>. Where metadata names can be used to accomplish the same goal as a potential new pragma...you should do that.</p> <p>Anyone can update the page, and each new entry needs:</p> <ul> <li>keyword</li> <li>brief description</li> <li>specification</li> </ul> <p>There is less direction about this process than the metadata names, and when you look at the extensions page, you see why: between allowed and proposed extensions, there’s a grand total of 3 pragma directives.</p> <h2 id="4.2.5.5-specifying-the-document's-character-encoding"><a href="https://www.w3.org/TR/html5/document-metadata.html#charset">4.2.5.5</a> Specifying the document's character encoding</h2> <p>There’s a whole of bunch of rules here. I’m not going to lie to you, I’m feeling too lazy to read this right now when I don’t need it. If I ever need anything besides utf-8, I’ll give this section a glance. #lifelonglearning</p> Day 55 of 100DaysOfSpec, 4.2.5 The meta element, contd. 2015-06-23T00:00:00.000Z https://melanie-richards.com/blog/day-55-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/document-metadata.html#the-meta-element">4.2.5 The meta element</a></p> <h2 id="4.2.5.2-other-metadata-names"><a href="https://www.w3.org/TR/html5/document-metadata.html#other-metadata-names">4.2.5.2</a> Other metadata names</h2> <p>There’s a page (<a href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a>) listing “extensions to the predefined set of metadata names”, and the cool thing is that anyone is free to add new names that must pass certain requirements (and surely if you put anything inappropriate up it will be, uh, pruned).</p> <p>There’s also a table on that page for “Proposals that don't meet the requirements for a registration”, and you might be surprised to find Facebook’s widely-used Open Graph metadata names in there. The reason? “The spec specifies this to be a value of the property attribute—not a meta keyword”</p> <p>The new metadata name entries must include:</p> <ul> <li><em>Keyword</em>: should feel unique among existing entries</li> <li><em>Brief description</em>: non-normative (not spec-binding)</li> <li><em>Specification</em>: a link out to further details about semantics and requirements. Doesn’t have to live in W3C land.</li> <li><em>Synonyms</em>: “A list of other names that have exactly the same processing requirements” The synonyms shouldn’t be used interchangeably, this is just an informational list for UAs who may want to support legacy content.</li> <li><em>Status</em>: proposed/ratified/discontinued. See the spec for a specific definition, but should be a bit self-explanatory. Maybe note that “discontinued” means that the metadata name is probably still in use somewhere in the wild. Anyone can change the status as long as their change makes sense. The open web, yay.</li> </ul> <p>A metadata name can be removed if it:</p> <ul> <li>Is redundant with existing values. Added as a synonym those values if it is benign, marked as “discontinued” if it has been identified as “harmful”.</li> <li>Has been languishing in the “proposed” state for 1+ months</li> </ul> <p>Conformance checkers can use the WHATWG Wiki MetaExtensions page (cached or not) to show a metadata name as valid (proposed or ratified) or invalid (discontinued or not listed). More curiously, a conformance checker should offer to add a proposed metadata name value to the page whenever they come across a new one.</p> <p>Any name that would get a URL as the value should be “represented using the link element, not the meta element” and should’t be proposed or ratified.</p> Day 54 of 100DaysOfSpec, 4.2.5 The meta element 2015-06-22T00:00:00.000Z https://melanie-richards.com/blog/day-54-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/document-metadata.html#the-meta-element">4.2.5 The meta element</a></p> <p>The <code>meta</code> element is the catchall for any document-wide metadata you can’t provide using <code>title</code>, <code>base</code>, <code>link</code>, or <code>script</code>.</p> <h3 id="attributes">Attributes</h3> <p>The available attributes are <code>name</code>, <code>http-equiv</code>, <code>content</code>, and <code>charset</code>. You have to set <code>content</code> if and only if one of the first two attributes are set.</p> <ul> <li><code>charset</code>: specifies the document’s character encoding. Some rules in the spec about using in XML docs. Only one <code>meta</code> element with <code>charset</code> per document (HTML page).</li> <li><code>content</code>: “gives the value of the document metadata or pragma directive” (the pragma directive defines how the document should be processed).</li> <li><code>name</code>: part of an attribute pair that specifies document metadata. <code>name</code> tells what kind of metadata is being set, and <code>content</code> gives the value for that piece of metadata.</li> </ul> <h2 id="4.2.5.1-standard-metadata-names">4.2.5.1 Standard metadata names</h2> <p>Used for the <code>name</code> attribute.</p> <ul> <li><code>application name</code>: “a short free-form string giving the name of the Web application that the page represents”. Can only be one metadata element in the document with this set, and only if it’s a Web application.</li> <li><code>author</code>: “a free-form string giving the name of one of the page's authors”.</li> <li><code>description</code>: “a free-form string that describes the page”. You should write this to be human-readable (as it will be used in places like search engine results), not stick a bunch of SEO garbage or machine-only details in it. Can only be one metadata element in the document with this set.</li> <li><code>generator</code>: “must be a free-form string that identifies one of the software packages used to generate the document”. I suppose this would be useful when you open up an HTML file and think “who the hell wrote this CSS?!” and then see that this was generated by a desktop publishing app and feel totally fine about yanking out all the bad. Funny that they used “Frontweaver” as an example software package, obviously a nod to “Dreamweaver”.</li> <li><code>keywords</code>: “a set of comma-separated tokens, each of which is a keyword relevant to the page”. People have abused the keywords so much that search engines for the most part no longer take this list into account in their algorithms.</li> </ul> Day 53 of 100DaysOfSpec, 4.2.4 The link element, contd. 2015-06-16T00:00:00.000Z https://melanie-richards.com/blog/day-53-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/document-metadata.html#the-link-element">4.2.4 The link element</a></p> <h2 id="link-element-as-hyperlink">link element as hyperlink</h2> <p>UAs (User Agents, for ex, browsers) can surface the link element as a clickable/tappable hyperlink somewhere in the UI; not too much strict guidance on how to do that. I didn’t realize that; I previously thought the link element was pretty much only for loading resources or creating relationships between pages for the sake of machines.</p> <p>Still uncertain of a living use case.</p> <h2 id="media-attribute-on-the-link-element">media attribute on the link element</h2> <p>The <code>media</code> attribute—which describes what kind of media the document was made for, all, handheld, etc—is handled a little bit differently based on what type of link the element is. If it’s a hyperlink, it’s just sort of nice-to-have information.</p> <p>If the link is actually loading a resource, that resource has to be applied if and only if the “environment” the document is in matches the value of the media attribute (so you could conceivably load a resource only on handheld devices, for example).</p> <p>If you don’t set the media attribute, the default value is <code>all</code>.</p> <h2 id="hreflang-attribute">hreflang attribute</h2> <p>Gives the language (human language in ISO values, not a coding language) the linked resource is in, but that’s “purely advisory”.</p> <h2 id="type-attribute">type attribute</h2> <p>Also purely advistory, containing a MIME type of the linked resource (likely you’ve seen <code>text/html</code>). <a href="https://www.freeformatter.com/mime-types-list.html">Here’s a giant list of MIME types</a>, can’t personally speak to how accurate or up to date that is.</p> <p>The <code>type</code> attribute can help the UA/browser avoid trying to load a resource it doesn’t support, as UAs are supposed to assume—only when fetching—that the resource type matches the value given. No <code>type</code> attribute present falls back to a default type. Lack of detail there suggests this may change given certain contexts.</p> <p>HOWEVER, UAs are not to trust the <code>type</code> attribute to determine the resource’s type after it has been fetched. There’s a process for using the resource’s Content-Type metadata, and/or applying type sniffing rules.</p> <p>Only after determining the resource’s true type is the resource applied or not applied, according to UA support and some other rules about relationships between <code>rel</code> and <code>type</code> (for example, the UA should not apply a link with <code>rel=&quot;stylesheet&quot;</code> and <code>type=&quot;text/plain&quot;</code>).</p> <h2 id="title-attribute">title attribute</h2> <p>Advisory unless it defines “alternative style sheet sets” on a stylesheet link. This attribute doesn’t inherit from the document <code>title</code>, which makes sense because you’re linking up an external resource or document.</p> <h2 id="sizes-attribute">sizes attribute</h2> <p>Only used on link elements with <code>rel=&quot;icon&quot;</code>.</p> Day 52 of 100DaysOfSpec, 4.2.4 The link element 2015-06-15T00:00:00.000Z https://melanie-richards.com/blog/day-52-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/document-metadata.html#the-link-element">4.2.4 The link element</a></p> <p>Continuing on with document metadata today, and boy, the <code>link</code> element section is dense.</p> <p><code>link</code> elements <em>must</em> have an <code>href</code> (value is the URL of the resource) and a <code>rel</code> attribute: “Relationship between the document containing the hyperlink and the destination resource”. Dropping either of these attributes renders the element useless, or is supposed to, at any rate.</p> <p>There are two basic types of <code>link</code> elements: references to external resources and hyperlinks.</p> <p>One <code>link</code> element can actually yield more than one “link” itself, depending on information stored in the <code>rel</code> attribute. Which is a little unusual, as you think of most elements as having a 1:1 tag to semantic “item” ratio. The example they give:</p> <pre><code>&lt;link rel=&quot;author license&quot; href=&quot;/about&quot;&gt; </code></pre> <p>That one element creates two different hyperlinks that point to the same page.</p> <h2 id="links-to-external-resources">Links to external resources</h2> <p>For stylesheets and other resources that can be applied to the DOM,</p> <ul> <li>“User agents may opt to only try to obtain such resources when they are needed, instead of pro-actively fetching all the external resources that are not applied.”</li> <li>When applying these resources, the UA needs to allow 404s and redirects. A redirecting fetched resource seems like an unsavory idea for performance, but there you go.</li> <li>While the browser/UA tries to obtain the resource stored in the <code>link</code> element, the webpage/document has to be blocked from loading. Which is (partially) why we limit the number of external resources we use and attempt to keep their file sizes as small as possible.</li> </ul> <p>More about the <code>link</code> element in tomorrow’s spec reading.</p> Day 51 of 100DaysOfSpec, the base element 2015-06-12T00:00:00.000Z https://melanie-richards.com/blog/day-51-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/document-metadata.html#document-metadata">4.2 Document metadata</a></p> <h2 id="4.2.3-the-base-element"><a href="https://www.w3.org/TR/html5/document-metadata.html#the-base-element">4.2.3</a> The base element</h2> <p>“The base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks.”</p> <p>There should only be one <code>base</code> element (all but the first will be ignored), which has no content, but rather an <code>href</code> and/or a <code>target</code> attribute.</p> <pre><code>&lt;base href=&quot;https://example.com&quot;&gt; </code></pre> <p>This element should precede all others that have URL attributes, as you’re basically setting the default domain for URL resolution. The only exception is the <code>html</code> element; whatever is set in the <code>base</code> element doesn’t bubble up to the root element.</p> <p>Here’s where you can kind of be evil with HTML alone: you could set the <a href="https://www.w3.org/TR/html5/browsers.html#valid-browsing-context-name-or-keyword">browsing context</a> to be <code>_blank</code>, which would be an absolute nightmare for sites with a lot of internal URLs.</p> <p>I’m trying to think of a case in which you’d want to set the base URL in this manner. Most of the time it would be redundant; you probably want relative URLs to resolve on the same domain that you’re already on. Ideas:</p> <ul> <li>If all your relative URLs will have/a/really/long/standard/structure and you want to save yourself some writing/bytes in the markup.</li> <li>You have both v1.0 and v2.0 of a website live and are incrementally bringing people over to the new site. You want to preserve the old version of a particular page (for now) but want the relative links off this page to resolve to the new version without requiring a redirect (which are not fun for perceived performance).</li> <li>You want to point relative links to a localhost URL when the site is opened from a file navigator.</li> </ul> <p>I don’t know, this element seems like it would help you be lazy—er, efficient—but it seems it could easily be more trouble than it’s worth. It’s easy to forget what you can’t see, and so if you’re not diligent is checking links, you might direct traffic to broken pages or outdated destinations.</p> Day 50 of 100DaysOfSpec, html, head, and title elements 2015-06-11T00:00:00.000Z https://melanie-richards.com/blog/day-50-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/semantics.html#semantics">4 The elements of HTML</a></p> <p>Awww yea, I’m halfway through the 100 day challenge and have made it to possibly the most exciting section: the documentation on HTML elements!</p> <h2 id="4.1-the-root-element"><a href="https://www.w3.org/TR/html5/semantics.html#the-root-element">4.1</a> The root element</h2> <p>root element === <code>html</code> element</p> <p>Apparently there are some cases in which you can omit the <code>html</code>element's start or end tag (when the first thing inside <code>html</code> is not a comment, when the <code>html</code> element is not immediately followed by a comment, respectively). Seems bizarre and messy to do so, especially when you’re encouraged to set the <code>lang</code> attribute on the element.</p> <p><a href="https://www.w3.org/TR/html5/dom.html#index-aria-global">Global aria- attributes</a> are allowed on the <code>html</code> element.</p> <h2 id="4.2.1-document-metadata%3A-the-head-element"><a href="https://www.w3.org/TR/html5/document-metadata.html#the-head-element">4.2.1</a> Document metadata: The <code>head</code> element</h2> <p>The head element is <em>the</em> first child of an <code>html</code> element, and it contains metadata about the page.</p> <p>A single <code>title</code> element HAS to be used inside of the <code>head</code>, unless “the document is an iframe srcdoc document or if title information is available from a higher-level protocol”. The example they give for such a protocol is the subject line of an HTML email.</p> <p>You can only have one <code>base</code> element in the <code>head</code>.</p> <p>Like the <code>html</code> element, there are also some special cases in which you can omit start/end tags for the <code>head</code> element. But why would you do that? Keep your code clean and logical to humans.</p> <h2 id="4.2.2-the-title-element"><a href="https://www.w3.org/TR/html5/document-metadata.html#the-title-element">4.2.2</a> The title element</h2> <p>There can only be one!</p> <p>When writing your title text, you should think about how it reads divorced from the context of the page, like in a bookmark list. “Dinner Menu” =&gt; “Dinner Menu at Cafe Richards”, for example. I most commonly see a pipe <code>|</code> separating the name of the page and the name of the site the page is on. Which is great, but it kind of reads out funny in a screen reader, like VoiceOver. Possibly this is something you just get used to when you’re a screen reader user, but bonus points for human-readable titles never hurt.</p> <p>If you try to jam non-text child elements into a <code>title</code> element, they will be ignored when the title is parsed.</p> <p>You can dynamically set the <code>document.text</code> value with a scripting language.</p> <p>When the UA uses the <code>title</code> value in their interface, like on a tab, the directionality of the title text has to match the directionality of the <code>title</code> element within the webpage. So the tab for an R-to-L document will have text displayed R-to-L.</p> Day 49 of 100DaysOfSpec, 3.2.7 WAI-ARIA, contd. 2015-06-10T00:00:00.000Z https://melanie-richards.com/blog/day-49-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#wai-aria">3.2.7 WAI-ARIA</a></p> <h2 id="3.2.7.4-implicit-aria-semantics"><a href="https://www.w3.org/TR/html5/dom.html#sec-implicit-aria-semantics">3.2.7.4</a> Implicit ARIA Semantics</h2> <p>This handy table shows what ARIA semantics are implied on particular elements. Unlike the table in <a href="https://melanie-richards.com/blog/day-48-of-100">yesterday’s reading</a>, these semantics can be overridden, with some restrictions.</p> <p>Interesting tidbits:</p> <ul> <li>You can have the “button” role on a hyperlink (<code>a</code> tag), even though common wisdom is “buttons should be buttons”. Live update: the spec actually points out this specific weirdness following the <em>Implicit ARIA Semantics</em> table.</li> <li>Likewise, you can put the “main” role on an <code>article</code>, even though there is a <code>main</code> element.</li> </ul> <p>These first two bullets I’ve listed here underline the impression to me that—like web dev as a whole—accessibility can be a muddy endeavor, a practice of choosing the most sensible-seeming option among all possible solutions that arise. I also wonder if this ability to role-swap between elements is around to help devs who may be locked into using particular elements for whatever reason, but who want to report those elements as something semantically different to screen readers, etc.</p> <ul> <li>There are no restrictions as to which role you can put on an <code>img</code> tag, as long as it doesn’t have an empty alt tag. W I L D.</li> <li>Pretty cool how you can get granular about an element’s semantics with ARIA. For example, you can set an <code>ol</code> or <code>ul</code> element’s role to “radiogroup”, for a list of radios (a pretty common way of marking up that pattern). Though, the <a href="https://www.w3.org/WAI/tutorials/forms/grouping/">W3C accessibility tutorials</a> mark up radio lists using a fieldset/legend pattern with semantically-beige divs wrapping input-label pairs.</li> </ul> <h2 id="3.2.7.5-allowed-aria-roles%2C-states-and-properties"><a href="https://www.w3.org/TR/html5/dom.html#allowed-aria-roles,-states-and-properties">3.2.7.5</a> Allowed ARIA roles, states and properties</h2> <p>This non-normative (UAs are not beholden to conform to this section, at least not in this spec) table lists ARIA properties you are required to and able to use with elements of a particular ARIA role. It includes some global states and properties that can be used in conjunction with any ARIA role.</p> <p>This table would be great to scan for someone just learning what the different roles are, as it has short descriptions of each ARIA role. There’s some interesting stuff in here you might be inclined to misuse if you just looked for an ARIA role with the correct-sounding name (been there, done that). For example, the description of the <code>complementary</code> role: “A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.”</p> <p>Also interesting:</p> <ul> <li>The <code>grid</code> role allows you to tell screen readers that a set of ambiguous divs is laid out like a table and contains tabular information. “Why not just use a table?” is a whole other, angsty conversation.</li> <li>The <code>group</code> role seems like a curious little thing I’d like to research more. Definition: “A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.”</li> </ul> Day 48 of 100DaysOfSpec, 3.2.7 WAI-ARIA 2015-06-09T00:00:00.000Z https://melanie-richards.com/blog/day-48-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#wai-aria">3.2.7 WAI-ARIA</a></p> <p>I didn’t have any thoughts on <em>3.2.6 Requirements relating to the bidirectional algorithm</em>, so I'm skipping ahead to <em>3.2.7 WAI-ARIA</em>.</p> <p>ARIA stands for “Accessible Rich Internet Applications”.</p> <p>External resources referenced in this section:</p> <ul> <li><a href="https://rawgit.com/w3c/aria-in-html/master/index.html">Using WAI-ARIA in HTML</a></li> <li><a href="https://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA 1.0 Authoring Practices</a></li> <li><a href="https://www.w3.org/TR/wai-aria/roles#role_definitions">ARIA role definitions</a></li> <li><a href="https://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def">ARIA state and property definitions</a></li> </ul> <p>You can use ARIA roles and attributes on HTML elements (in fact, user agents are required to support ARIA semantics on all HTML elements), but you shouldn’t use them in a way that contradicts the elements’ <a href="https://www.w3.org/TR/html5/dom.html#sec-strong-native-semantics">innate semantics</a>. Browsers’ implementation of ARIA includes <a href="https://www.w3.org/TR/html5/dom.html#sec-implicit-aria-semantics">“default implicit ARIA semantics”</a>.</p> <h2 id="3.2.7.1-aria-role-attribute"><a href="https://www.w3.org/TR/html5/dom.html#aria-role-attribute">3.2.7.1</a> ARIA Role Attribute</h2> <p>Any HTML element can have an ARIA role attribute. The value is structured just like a class attribute’s value: space-separated “tokens”. The role that’s actually used is the first “token” that is <a href="https://www.w3.org/TR/wai-aria/roles#isAbstract">non-abstract</a>.</p> <h2 id="3.2.7.2-state-and-property-attributes"><a href="https://www.w3.org/TR/html5/dom.html#state-and-property-attributes">3.2.7.2</a> State and Property Attributes</h2> <p>Among these are some <a href="https://www.w3.org/TR/wai-aria/states_and_properties#global_states">global ARIA states and properties</a>.</p> <p>ARIA states and properties are not always meaningful, and you might set one that doesn’t actually get processed at all. The spec suggests reading in the <a href="https://www.w3.org/TR/html5/dom.html#sec-strong-native-semantics">“Strong Native Semantics”</a> and <a href="https://www.w3.org/TR/html5/dom.html#sec-implicit-aria-semantics">“Implicit ARIA Semantics”</a> subsections.</p> <h2 id="3.2.7.3-strong-native-semantics"><a href="https://www.w3.org/TR/html5/dom.html#sec-strong-native-semantics">3.2.7.3</a> Strong Native Semantics</h2> <p>There’s a really great table in this section you should check out because for the elements in the table, web devs should not use any roles that are not listed. Furthermore, setting the roles listed in the table would actually in theory be REDUNDANT, since they’re implicitly processed as having these roles by the browser. I say in theory because the spec is not always implemented correctly or completely, cross-browser, so in 2015 it would be wise to set these explicitly where it makes sense to you.</p> <p>Learning in real-time here: I see some roles I have explicitly set in a project that are already implied by the browser.</p> <p>More about ARIA semantics coming up in the next post.</p> Day 47 of 100DaysOfSpec, data-* attributes 2015-06-04T00:00:00.000Z https://melanie-richards.com/blog/day-47-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">3.2.5.9 Embedding custom non-visible data with the data-* attributes</a></p> <p>“ A custom data attribute is an attribute in no namespace whose name starts with the string ‘data-’, has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.”</p> <p>To review, these custom attributes allow you to store data that you might use in Javascript, for example, and you can guarantee that user agents won’t—at least, aren’t allowed to—add any future attributes starting in “data-”.</p> <p>There is an <code>element.dataset</code> object that contains an element’s data- attributes (name-value pairs). Hyphenated data attributes become camelCase in the returned object.</p> <p>The algorithms that manipulate the data attributes or their content basically undo all the work that the user agent does in creating the dataset object (insert &quot;data-&quot; back in, convert back to hyphenation from camelCase).</p> <p>These data- attributes are super useful and powerful, but web devs are supposed to build their pages to be functional without the attributes (which, in a way, in practice is sort of like saying “without Javascript” since you’re probably adding data- attributes for use with a scripting language).</p> Day 46 of 100DaysOfSpec, The dir attribute 2015-06-02T00:00:00.000Z https://melanie-richards.com/blog/day-46-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#global-attributes">3.2.5 Global attributes</a></p> <h2 id="%5B3.2.5.7%5D(link%3A-https%3A%2F%2Fwww.w3.org%2Ftr%2Fhtml5%2Fdom.html%23classes)-the-class-attribute">[3.2.5.7](link: <a href="https://www.w3.org/TR/html5/dom.html#classes">https://www.w3.org/TR/html5/dom.html#classes</a>) The class attribute</h2> <p>Ah, finally the meaning of “tokens” is clarified! The class attribute is a “set of space-separated tokens”, making each “class” a token. So in my very professional definition, an individual nugget (“word”) of text instead a string. ;]</p> <p>Duplicates are ignored when returning individual classes from the attribute.</p> <p>The spec states “there are no additional restrictions on the tokens authors can use in the class attribute” other than being space-separated. I still can’t apply styles using CSS to classes led with an integer (1, 2, 3, 4), at least in Chrome. So either that’s missing from the documentation, a requirement in the CSS specs (there’s no one document anymore), or a bug/design decision on the part of one or more browsers. Gotta get my giant spy magnifying glass out.</p> <p>Like many/most leading front-end devs, the spec urges semantic class naming (.button--primary), as opposed to presentational (.blue).</p> Day 45 of 100DaysOfSpec, The dir attribute 2015-06-01T00:00:00.000Z https://melanie-richards.com/blog/day-45-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#the-dir-attribute">3.2.5.6 The dir attribute</a></p> <h2 id="3.2.5.6-the-dir-attribute">3.2.5.6 The dir attribute</h2> <p>This is a global attribute describing the direction of text. The value can be ltr (left-to-right), rtl, or auto.</p> <p>In the case of auto, the direction will be determined automagically using the contents of the element. The spec says, “the heuristic used by this state is very crude (it just looks at the first character with a strong directionality...)”, so “auto” is basically a hail-Mary pass for when you really don’t know the direction of the language.</p> <p>It also says “For textarea and pre elements, the heuristic is applied on a per-paragraph level.” I suppose this is because the spec’s authors thought there was a fairer chance of these longer-form elements having mixed language contents.</p> <p>No missing/invalid value defaults on the <code>dir</code> attribute. But…the algorithm requires a particular value when certain conditions are met. I suppose that’s a little different: setting a default value (probably easier) vs. actually following the spec and implementing the full algorithm as directed.</p> <p>“...elements from other namespaces always just inherit their directionality from their parent element, or, if they don't have one, default to ‘ltr’.”</p> <p>The HTML element’s other attributes can have directionality. <a href="https://www.w3.org/TR/html5/dom.html#directionality-capable-attribute">Certain attributes</a> can have a different direction than the element itself; this direction is measured using the same “crude” look-at-the-first-character algorithm. Otherwise, attributes get the same direction as the element's <code>dir</code> attribute.</p> <p>And finally, the spec urges people to denote the text direction in HTML rather than CSS, so that the designation is always tied to the <em>content</em>.</p> Day 44 of 100DaysOfSpec, The translate attribute 2015-05-27T00:00:00.000Z https://melanie-richards.com/blog/day-44-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#global-attributes">3.2.5 Global Attributes</a></p> <h2 id="3.2.4.5-the-translate-attribute"><a href="https://www.w3.org/TR/html5/dom.html#the-translate-attribute">3.2.4.5</a> The translate attribute</h2> <p>The translate attribute defines whether or not to translate the element's text when the page is localized. Values are easy: “yes” or “no”. If not set, the element inherits this attribute.</p> <p>What this attribute’s value does in practice is set a translation mode on the element (“no-translate” or “translate-enabled”). If the element doesn’t have the attribute set, it also inherits translation mode. If the element is the root element, its translation mode is “translate-enabled”.</p> <p>There is a list of an element’s attributes that can and should be translated, if the translate attribute was set to “yes”. Good to know it’s not just the text contents of the element; this is actually something I was wondering the other day, for practical application on a project.</p> Day 43 of 100DaysOfSpec, 3.2.5 Global Attributes, contd. 2015-05-22T00:00:00.000Z https://melanie-richards.com/blog/day-43-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#global-attributes">3.2.5 Global Attributes</a></p> <h2 id="3.2.5.3-the-lang-and-xml%3Alang-attributes"><a href="https://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes">3.2.5.3</a> The lang and xml:lang attributes</h2> <p>The <code>lang</code> attribute sets the “primary” language of an element (in a <a href="https://tools.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a> value). I don't know that I've ever noticed it on a tag other than <code>html</code>. Child elements inherit <code>lang</code>.</p> <p><code>lang</code> is used on any HTML element, <code>xml:lang</code> is used on an HTML element in an XML document, and can also be used within other namespaces if specifically allowed (like in MathGL or SVG).</p> <p>To return the language of a node, the UA needs to find the closest ancestor with a <code>lang</code> attribute. If this goes bottom up instead of top down, that would be pretty inefficient if the html element is the only one with a language set.</p> <p><code>xml:lang</code> takes precedence over <code>lang</code> in this parsing, if both are set on the same element.</p> <p>If the attribute is nowhere to be found, the UA looks at the “pragma-set default language”, which appears to be the language set by a meta tag in the head of the HTML file. If that's not found, it looks to HTTP to find any language info.</p> <p>The language never defaults to a particular language (that would be biased and very easily incorrect); if there is no information that matches known values, the language of the document will be treated as “unknown”.</p> <p>“User agents may use the element's language to determine proper processing or rendering (e.g. in the selection of appropriate fonts or pronunciations, for dictionary selection, or for the user interfaces of form controls such as date pickers).”</p> Day 42 of 100DaysOfSpec, 3.2.5 Global Attributes, contd. 2015-05-21T00:00:00.000Z https://melanie-richards.com/blog/day-42-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#global-attributes">3.2.5 Global Attributes</a></p> <h2 id="3.2.5.1-the-id-attribute"><a href="https://www.w3.org/TR/html5/dom.html#the-id-attribute">3.2.5.1</a> The id attribute</h2> <p>Other than being unique, at least one character, and devoid of spaces, &quot;there are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.&quot; A couple of surprises there. I've had a couple of cases in which I've had to prefix a classname with text so that styling wouldn't choke on a classname starting with a digit. Bless the poor souls who have to inherit IDs made entirely of punctuation.</p> <p>&quot;Particular meanings should not be derived from the value of the id attribute.&quot; Unsure what is meant here.</p> <h2 id="3.2.5.2-the-title-attribute"><a href="https://www.w3.org/TR/html5/dom.html#the-title-attribute">3.2.5.2</a> The title attribute</h2> <p>To be honest, I don't think I've ever used a title attribute on anything other than an image or anchor link. But as mentioned in the last post, it's chill to use it on any HTML element.</p> <p>The spec warns not to rely on the title for anything important, due to accessibility problems. Chiefly not being able to trigger the title when interacting with keyboard or touch. But if we don't have finger-hover technology on consumer mobile devices within the next 5 years, I'll be shocked.</p> <p>If an element doesn't have a title attribute set, the implication is that the nearest ancestral title also applies to this element. You would need to override with a title attribute on the item itself, even an empty string, in order to clear that implication. The title algorithm should actually return this, not just someone on an HTML working group being fussy about ~<em>~meaning~</em>~</p> <p>You can force line breaks in titles, but &quot;caution is advised&quot;. Well...why? Mileage may vary or it will actually break something? Who knows!</p> Day 41 of 100DaysOfSpec, 3.2.5 Global Attributes 2015-05-20T00:00:00.000Z https://melanie-richards.com/blog/day-41-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#global-attributes">3.2.5 Global Attributes</a></p> <p>These attributes can be added to any HTML* element:</p> <ul> <li>accesskey</li> <li>class</li> <li>contenteditable</li> <li>dir</li> <li>hidden</li> <li>id</li> <li>lang</li> <li>spellcheck</li> <li>style</li> <li>tabindex</li> <li>title</li> <li>translate</li> </ul> <p>*Specifically HTML. An element in another namespace, like XML, doesn't get these attributes, but inherits from an ancestral HTML element.</p> <p>There's also a long list of event handler content attributes that can be set on any HTML element. Spans things like events from user input, changes to the document, changes to audio/video status, etc. The list is interesting because you could call <code>onvolumechange</code> on a div, but that would be ineffectual.</p> <p>As mentioned earlier in the spec, you can also place a custom data attribute (&quot;data-[whateveryouwantgurl]&quot;) on any HTML element.</p> Day 40 of 100DaysOfSpec, 3.2.4.3 Paragraphs, in Content Models 2015-05-19T00:00:00.000Z https://melanie-richards.com/blog/day-40-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#paragraphs">3.2.4.3 Paragraphs</a>.</p> <h2 id="3.2.4.3-paragraphs">3.2.4.3 Paragraphs</h2> <p>A &quot;paragraph&quot; in the spec connotes more than the <code>&lt;p&gt;</code> tag. In fewer words, it is a chunk of text (phrasing content) discussing a discreet idea. A paragraph could also be, for the spec's purposes, an address, a part of a form, a byline, or a poem stanza.</p> <p>Some elements (a, ins, del, map) can &quot;straddle&quot; paragraphs, and so the UA needs to ignore these elements when interpreting which portions of phrasing content are individual &quot;paragraphs&quot;. Judging from the first example given, this seems like a protection against messy markup.</p> <p>Reading the other examples starts to get like one of those puzzles where you have to guess how many triangles there are in an abstract design. Bananas!</p> Day 39 of 100DaysOfSpec, 3.2.4 Content Models, contd. 2015-05-19T00:00:00.000Z https://melanie-richards.com/blog/day-39-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#content-models">3.2.4 Content Models</a>.</p> <h2 id="3.2.4.1.8-palpable-content"><a href="https://www.w3.org/TR/html5/dom.html#palpable-content">3.2.4.1.8</a> Palpable content</h2> <p>Elements with a content model that allows flow or phrasing content should contain at least one &quot;node&quot; of palpable content. Possibly how you've heard this manifest is &quot;you shouldn't have an empty <code>&lt;p&gt;</code> tag&quot;. Likely the most common use case of people neglecting to include palpable content is when they add an empty container to a page, to be filled in with Javascript.</p> <p>The spec &quot;encourages&quot; conformance checkers to flag an error/warning/notice when they find elements empty of palpable content.</p> <p><a href="https://www.w3.org/TR/html5/dom.html#palpable-content">Check out the spec</a> for the full list of palpable content elements, which also includes non-inter-element-whitespace text. Some of these elements have conditions on them; for example, a <code>&lt;ul&gt;</code> counts as palpable content if it has at least one <code>&lt;li&gt;</code> child.</p> <h2 id="3.2.4.1.9-script-supporting-elements"><a href="https://www.w3.org/TR/html5/dom.html#script-supporting-elements">3.2.4.1.9</a> Script-supporting elements</h2> <p>script, template.</p> <h2 id="3.2.4.2-transparent-content-models"><a href="https://www.w3.org/TR/html5/dom.html#transparent-content-models">3.2.4.2</a> Transparent content models</h2> <p>Elements with a &quot;transparent&quot; content model inherit the content model of the parent, and have the same descendent requirements as this parent.</p> <p>If a transparent element doesn't have a parent, its content model is treated as flow content.</p> Day 38 of 100DaysOfSpec, 3.2.4 Content Models, contd. 2015-05-18T00:00:00.000Z https://melanie-richards.com/blog/day-38-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#content-models">3.2.4 Content Models</a>.</p> <h2 id="3.2.4.1.6-embedded-content"><a href="https://www.w3.org/TR/html5/dom.html#embedded-content">3.2.4.1.6</a> Embedded content</h2> <p>&quot;Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.&quot;</p> <p>Includes audio, canvas, embed, iframe, img, math, object, svg, and video. On occasion (spoiler alert!) the spec will define fallback content for these elements.</p> <h2 id="3.2.4.1.7-interactive-content"><a href="https://www.w3.org/TR/html5/dom.html#interactive-content">3.2.4.1.7</a> Interactive content</h2> <p>These elements have an activation behavior, &quot;normally culminating in a click event&quot;. The user can trigger a synthetic &quot;click&quot; by other means, such as voice input or keyboard navigation.</p> <p>If a click() method triggered the synthetic click, &quot;the isTrusted attribute must be initialized to false&quot;. Seems like a security measure.</p> <p>If you ever wondered how fussy this stuff is, here's a good example: &quot;Click-focusing behavior (e.g. the focusing of a text field when user clicks in one) typically happens before the click, when the mouse button is first depressed, and is therefore not discussed here.&quot;</p> Day 37 of 100DaysOfSpec, 3.2.4 Content Models, contd. 2015-05-16T00:00:00.000Z https://melanie-richards.com/blog/day-37-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#content-models">3.2.4 Content models</a>.</p> <h2 id="3.2.4.1.3-sectioning-content">3.2.4.1.3 Sectioning content</h2> <p>Defines &quot;scope of headings and footers&quot;. A lot of people only use <code>header</code> and <code>footer</code> elements for the universal, presentational header and footer of a website. However, these elements add meaning to sectioning content.</p> <p>Elements in this category:</p> <ul> <li>article</li> <li>aside</li> <li>nav</li> <li>section</li> </ul> <p>Each of these might have a heading and an outline.</p> <p>There are other elements that are &quot;sectioning roots&quot;—<em>not</em> sectioning content—but they can have an outline, as well.</p> <h2 id="3.2.4.1.4-heading-content">3.2.4.1.4 Heading content</h2> <p>Heading elements: <code>h1</code>, <code>h2</code>, … <code>h6</code>. These are headers of sections that can be marked up inside a <code>section</code> or stand alone.</p> <h2 id="3.2.4.1.5-phrasing-content">3.2.4.1.5 Phrasing content</h2> <p>Text of the document, and elements that mark up text within the &quot;intra-paragraph level&quot;.</p> <p>Check out the full list in the spec, because there are a lot of surprises there (to me, at least): form elements, canvas, object, select, video…I was expecting elements that seemed strictly text-oriented.</p> <p>Text can apparently mean anything, re: content models:</p> <ul> <li>nothing</li> <li>Text nodes</li> <li>sometimes its own content model</li> <li>also a phrasing model</li> <li>can be inter-element whitespace (like that moment when you're first starting out when you realize carriage returns in your code are ignored and collapsed).</li> </ul> <p>&quot;Text nodes and attribute values must consist of Unicode characters, must not contain U+0000 characters, must not contain permanently undefined Unicode characters (noncharacters), and must not contain control characters other than space characters.&quot;</p> Day 36 of 100DaysOfSpec, 3.2.4 Content Models 2015-05-15T00:00:00.000Z https://melanie-richards.com/blog/day-36-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#content-models">3.2.4 Content models</a>.</p> <p>Just gonna leave this here: &quot;an HTML element must have contents that match the requirements described in the element's content model. The contents of an element are its children in the DOM, except for template elements, where the children are those in the template contents (a separate DocumentFragment assigned to the element when the element is created).&quot;</p> <p>Space characters are <em>always</em> allowed between elements. This is something that sort of happens naturally when authoring documents, but I feel like I've heard similar questions (&quot;can I/should I put spaces here?&quot;) from beginners. This space is called <strong>inter-element whitespace</strong>.</p> <p>Inter-element whitespace is ignored when processing the document's semantics and whether or not the contents</p> <p>HTML elements can be &quot;orphan&quot; nodes. Interestingly: &quot;creating a td element and storing it in a global variable in a script is conforming, even though td elements are otherwise only supposed to be used inside tr elements&quot;.</p> <h2 id="3.2.4.1-kinds-of-content"><a href="https://www.w3.org/TR/html5/dom.html#kinds-of-content">3.2.4.1</a> Kinds of content</h2> <p>Elements can (and nearly always do) belong to more than one category:</p> <ul> <li>Metadata</li> <li>Flow (encompasses almost all other categories, except for some of &quot;metadata&quot;)</li> <li>Sectioning</li> <li>Heading</li> <li>Phrasing</li> <li>Embedded</li> <li>Interactive</li> </ul> <p>There's a <a href="https://www.w3.org/TR/html5/dom.html#kinds-of-content">nice little chart, too</a>.</p> <h2 id="3.2.4.1.1-metadata-content">3.2.4.1.1 Metadata content</h2> <p><strong>Metadata content:</strong></p> <ul> <li>Defines presentation/behavior of the rest of the content (like CSS styling) or</li> <li>Sets relationship of doc to other documents (like next and previous links) or</li> <li>&quot;Conveys other 'out of band' information.&quot;</li> </ul> <p>Not sure what files under that last misc item, feel like &quot;title&quot; might be a good example unless that falls under the category for whatever reason.</p> <p>Short list of example elements: <em>base, link, meta, noscript, script, style, template, title</em></p> <h2 id="3.2.4.1.2-flow-content">3.2.4.1.2 Flow content</h2> <p>Most elements in the <code>&lt;body&gt;</code>, see spec for full list.</p> Day 35 of 100DaysOfSpec, 3.2 Elements 2015-05-14T00:00:00.000Z https://melanie-richards.com/blog/day-35-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#elements">3.2 Elements</a>.</p> <h2 id="3.2.1-semantics"><a href="https://www.w3.org/TR/html5/dom.html#semantics-0">3.2.1</a> Semantics</h2> <p>Elements, attributes, and attribute values have meaning! Allows browsers, search engines, and other HTML processors to know how to present HTML documents. I like how the example lingers on how semantic markup is meaningful for accessibility (speech-based screen readers).</p> <p>The semantics of a page can change over time (for example, modifications made to the markup via Javascript), so a user agent needs to update the document's presentation according to these changes to the document.</p> <h2 id="3.2.2-elements-in-the-dom"><a href="https://www.w3.org/TR/html5/dom.html#elements-in-the-dom">3.2.2</a> Elements in the DOM</h2> <p>The spec <em>requires</em> implementation of the HTML elements listed in the spec, and all these elements need to be accessible to scripting languages.</p> <p>All element interfaces (I think this is being used as a synonym for API?) inherit from the HTMLElement interface. Some elements don't have any other requirements for implementation outside of this root interface. Not quite sure of an example there, as they are not given, but I wonder if the <code>span</code> element has no further requirements, being a pretty semantically-vague element. This being the spec, though, I wouldn't be surprised if there were another 8 different rules about how to process a span.</p> <p>The HTMLUnknownElement interface is used for non-spec-defined elements.</p> <p>Attributes in the main interface include:</p> <ul> <li>title</li> <li>lang</li> <li>translate (boolean value)</li> <li>dir</li> <li>dataset (read-only)</li> <li>hidden (boolean)</li> <li>tabIndex</li> <li>accessKey</li> <li>accessKeyLabel</li> <li>contentEditable</li> <li>isContentEditable (boolean)</li> <li>spellcheck (boolean)</li> </ul> <h2 id="3.2.3-element-definitions"><a href="https://www.w3.org/TR/html5/dom.html#element-definitions">3.2.3</a> Element definitions</h2> <p>This section details what-to-expect from element definitions, which include:</p> <ul> <li><strong>The element's categories:</strong> used for defining the element's content models.</li> <li><strong>Contexts in which this element can be used:</strong> can be redundant info to content model.</li> <li><strong>Content model</strong>: rules on which elements need to be included as children/descendents.</li> <li><strong>Tag omission in text/html:</strong> defines when an element's tag can be self-closing (like an <code>&lt;img /&gt;</code>).</li> <li><strong>Content attributes:</strong> attributes that can set on the element; some are normative (required by spec, listed first), and some are not.</li> <li><strong>DOM interface</strong></li> </ul> <p>Unless restrictions are listed, attributes can contain any text value.</p> Day 34 of 100DaysOfSpec, 3.1.3 DOM tree accessors 2015-05-13T00:00:00.000Z https://melanie-richards.com/blog/day-34-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#dom-tree-accessors">3.1.3 DOM tree accessors</a></p> <h2 id="3.1.3-dom-tree-accessors">3.1.3 DOM tree accessors</h2> <p>&quot;The html element of a document is the document's root element, if there is one and it's an html element, or null otherwise.&quot; &lt;— LOL stating the obvious but yeah I guess if this is a legally-binding document for UAs in some markets, sure.</p> <p>The <code>head</code> attribute is the first <code>head</code> element. What happens if you're silly and include two <code>heads</code>? I modified a page to include a second head with a CSS file in it and: <a href="https://validator.w3.org/check">the w3c validator</a> throws errors as &quot;stray start tag head&quot;, &quot;link element between head and body&quot;, and &quot;cannot recover after last error. Any further errors will be ignored&quot;. Latest browsers across the board appear ignore the second <code>head</code>without displaying a warning in the console.</p> <p>Hey! You can have a title on an SVG element. Makes sense, it <em>is</em> a document. By the way, the <a href="https://svgwg.org/svg2-draft/">SVG spec</a> was recently updated, that should be interesting and possibly more readable than the HTML spec.</p> <p>The document's <strong>body element</strong> is the first <code>body</code> OR <code>frameset</code> element.</p> <p>The images, embeds, plugins, links, forms, and scripts attributes defined in <a href="https://www.w3.org/TR/html5/dom.html#the-document-object">3.1.1</a> all return an HTMLCollection (ex: <code>document.images</code>).</p> <p>The <strong>getElementsByName()</strong> method returns a NodeList with all the elements in the document that match the name passed to the method; these elements are listed in order of appearance and not by how many Oscars they've won.</p> <p>&quot;Supported property names&quot; comes from the &quot;name&quot; attribute on applet, exposed embed, form, iframe, img, and exposed object elements in the document, as well as from IDs on applet, exposed object, and img elements that do not have empty &quot;name&quot; attributes. Duplicate names are ignored, and if an element has both a &quot;name&quot; and an &quot;ID&quot;, the ID wins. <em>The ID always wins...</em></p> Day 33 of 100DaysOfSpec, Resource metadata management 2015-05-12T00:00:00.000Z https://melanie-richards.com/blog/day-33-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/dom.html#resource-metadata-management">3.1.2 Resource metadata management</a>.</p> <h2 id="3.1.2-resource-metadata-management">3.1.2 Resource metadata management</h2> <p>&quot;In the case of HTTP, the referrer IDL attribute will match the Referer (sic) header that was sent when fetching the current page.&quot; From reading elsewhere, it does indeed seem that the referrer value can't be changed directly in a scripting language, like Javascript. You can modify the user's browsing history, though (history.pushState(), history.replaceState()), basically accomplishing the same thing.</p> <p>Non-normative note on cookies: &quot;If the contents are sandboxed into a unique origin (e.g. in an iframe with the sandbox attribute), a SecurityError exception will be thrown on getting and setting.&quot;</p> <p>Some documents are said to be &quot;cookie averse&quot;: those with no &quot;browsing context&quot; (so that's N/A to a web page you navigate to in a browser) and with an address lacking a &quot;server-based naming authority&quot;. I'm unsure of what would be an example of a document that is inherently cookie averse—can't seem to find a use case other than user-disabled cookies—so probably this is not something to worry about as a web dev, but possibly as a UA.</p> <p>document.lastModified is returned in the user's time zone.</p> Day 32 of 100DaysOfSpec, Semantics, structure, and APIs of HTML documents 2015-05-11T00:00:00.000Z https://melanie-richards.com/blog/day-32-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>YESSSS, starting a new chapter! Reading in <a href="https://www.w3.org/TR/html5/dom.html#documents">3.1 Documents</a></p> <p>Some redundant information on the document's address, feels more in the context of a web developer than a user agent though.</p> <p>A document is immediately available after being created with a script using the createDocument() or createHTMLDocument() DOM methods. If that document is not created with a referrer (absolute URL), the document referrer is an empty string.</p> <h2 id="3.1.1-the-document-object"><a href="https://www.w3.org/TR/html5/dom.html#the-document-object">3.1.1</a> The Document object</h2> <p>Nice little definition of the Document interface. The contents should not be terribly surprisingly for those familiar with HTML. I assume that everything listed in the definition is essentially made accessible to scripting languages.</p> <p>The document's attributes include:</p> <ul> <li>Domain</li> <li>Referrer</li> <li>Cookie(s)</li> <li>lastModified</li> <li>readyState</li> <li>Info you set in the <code>&lt;head&gt;</code> of your document: title, dir, body, head, images, embed, plugins, links, forms, scripts</li> <li>User interaction attributes, like hasFocus()</li> </ul> Days 29–31 of 100DaysOfSpec, 2.7 Common DOM Interfaces, contd. 2015-05-09T00:00:00.000Z https://melanie-richards.com/blog/day-29-31-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Since the past week has been super busy with travel, I'm catching up on a few days. Combining a couple into one post as I don't have much commentary on this algorithm-heavy section.</p> <h2 id="2.7.2-collections"><a href="https://www.w3.org/TR/html5/infrastructure.html#collections">2.7.2 Collections</a></h2> <p>One thing that's sort of frustrating about the HTML spec with regards to how UAs should handle certain things, is that the document will say &quot;x is a y&quot;, but never give a satisfactory definition of what &quot;y&quot; is. A &quot;collection&quot; is an example of this; it seems a bit arbitrary. It seems like this is not entirely accidental in this case...</p> <h2 id="2.7.4-transferable-objects"><a href="https://www.w3.org/TR/html5/infrastructure.html#transferable-objects">2.7.4 Transferable objects</a></h2> <p>&quot;Some objects support being copied and closed in one operation. This is called transferring the object, and is used in particular to transfer ownership of unsharable or expensive resources across worker boundaries.&quot;</p> <p>^ Seems pretty chill to me (great technical insights I have here). One example they give has to do with arrays, and the other with messaging/communication between documents.</p> <p>It appears that doing this &quot;transferring&quot; is a destructive process, like taking a sticker off a sheet and putting it on the cover of a notebook. I'm unsure of the scope of this destruction: whether the transferred object can only be used once on a page load or session or other small scope, or if that's forever-ever.</p> Day 26 of 100DaysOfSpec, 2.7 Common DOM Interfaces 2015-05-01T00:00:00.000Z https://melanie-richards.com/blog/day-26-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/infrastructure.html#cors-settings-attributes">2.7 Common DOM Interfaces</a>.</p> <h2 id="2.7-common-dom-interfaces">2.7 Common DOM Interfaces</h2> <p>IDL = interface definition language</p> <p>&quot;If a reflecting IDL attribute is a DOMString attribute whose content attribute is defined to contain one or more URLs&quot; What attribute would that be? First thing that springs to mind is srcset, but that string also contains commas and size information. Not just space-separated URLs, which is what this section would imply. Add to the list of questions!</p> Day 24 of 100DaysOfSpec, Fetching Resources, contd. 2015-04-29T00:00:00.000Z https://melanie-richards.com/blog/day-24-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/infrastructure.html#fetching-resources">2.6 Fetching Resources</a>.</p> <h2 id="2.6.5-extracting-character-encodings-from-meta-elements">2.6.5 Extracting character encodings from meta elements</h2> <p>No comments on this algorithm.</p> <h2 id="2.6.6-cors-settings-attributes">2.6.6 CORS settings attributes</h2> <p>CORS stands for &quot;Cross-origin resource sharing&quot;, and it allows secure resources (font files, for example) to be requested from one domain to another. That's pretty much the only experience I have with it: setting—very carefully—the CORS configuration for font files in .htaccess.</p> <h2 id="2.6.7-cors-enabled-fetch">2.6.7 CORS-enabled fetch</h2> <p>Pretty much one big algorithm in this section. Notable: the CORS mode can be &quot;NO CORS&quot;, and still a resource might be treated differently. Some resources have a default behavior &quot;taint&quot;; these resources will be fetched, but considered cross-domain requests; the UA can choose to surface this as a cross-site access error in the console. Other resources have a default behavior of &quot;fail&quot;, which will be completely blocked (and may also be reported as an error in the console).</p> Day 23 of 100DaysOfSpec, Fetching Resources, contd. 2015-04-28T00:00:00.000Z https://melanie-richards.com/blog/day-23-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/infrastructure.html#fetching-resources">2.6 Fetching Resources</a>.</p> <h2 id="2.6.3-encrypted-http-and-related-security-concerns">2.6.3 Encrypted HTTP and related security concerns</h2> <p>UAs should warn users of certificate errors (this section also applies to HTTP-over-TLS, shown as &quot;https://&quot; links); they should also either not download the resources that contain certificate errors, or act as though these resources weren't encrypted at all. Notably, a page can't just be whitelisted after a secure visit, the UA has to run this check every time.</p> <p>This section goes through some examples of the above. One fun application of this part of spec that I've run into in real time is styling third-party applications for clients. Often, these applications are served over https, but might not have local storage for fonts, stylesheets, and images. You need to have hosting for these resources that also has a secure certificate; an SSL cert seems to range from a couple bucks to a couple hundred dollars per year.</p> <h2 id="2.6.4-determining-the-type-of-a-resource">2.6.4 Determining the type of a resource</h2> <p>There's a whole other spec for <a href="https://tools.ietf.org/html/draft-ietf-websec-mime-sniff-03">MIME-type sniffing</a>, whee! Essentially, MIME-sniffing is determining what type of file/resource is being requested. User agents have to be careful to follow the spec precisely, because if they return a different MIME type than the server, that could result in security issues.</p> Day 22 of 100DaysOfSpec, 2.6 Fetching Resources 2015-04-27T00:00:00.000Z https://melanie-richards.com/blog/day-22-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/infrastructure.html#fetching-resources">2.6 Fetching Resources</a>.</p> <p>First of all: this is the second week in a row that I've skipped over the whole weekend. That actually had way more to do with a busy work season than laziness, but since we're in the mode of building habits, this trend underlines two things I know subconciously:</p> <ol> <li>If I have work that is not yet finished that can't be done within normal work hours, it is very hard for me to put it down and attend to other important elements of life.</li> <li>It is so much easier to make time for something when you have a specific chunk of time blocked out for it. Using my commute to read the spec has helped me keep consistent on work days.</li> </ol> <p>Now on to today's reading.</p> <h2 id="2.6-fetching-resources">2.6 Fetching resources</h2> <p>The protocol that the spec describes is http, likely the most familiar/obvious to most folks.</p> <h2 id="2.6.2-processing-model">2.6.2 Processing model</h2> <p>I don't think I've ever seen a 204 No Content response code... (described here as when an absolute URL has a scheme the user agent doesn't support, or has a scheme &quot;that does not define a mechanism to obtain the resource&quot;). Their example is a mailto: link, but modern browsers handle those intelligently and never surface an error code to the user. Of course, not all UAs are browsers.</p> <p>There's a step in the algorithm about updating cookies, unless the block cookies flag is enabled. I'm tempted to read more about how flags work—to me, as consumer, they are just checkboxes—but that sounds like going deep in the weeds...</p> Day 18 of 100DaysOfSpec, URLs 2015-04-23T00:00:00.000Z https://melanie-richards.com/blog/day-18-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in [2.4 Common infrastructure, URLS](<a href="https://www.w3.org/TR/html5/infrastructure.html#urls">https://www.w3.org/TR/html5/infrastructure.html#urls</a> text: ).</p> <h2 id="2.5.1-terminology">2.5.1 Terminology</h2> <p>Some familiar stuff in this section, like if you don't specify a valid URL in an href attribute, you'll get a fallback of the document's URL.</p> <h2 id="2.5.2-resolving-urls">2.5.2 Resolving URLs</h2> <p>Describes how to parse a relative URL (another-page.html) to an absolute URL (<code>https://example.com/another-page.html</code>). Though not stated in this section of the spec, it should be mentioned that not every URL needs to start with http:// or https://. These are just examples of protocols, which also include ftp://, file://, the newly proposed HTTP/2, etc.</p> <p>Encoding is UTF-8.</p> <h2 id="2.5.3-dynamic-changes-to-base-urls">2.5.3 Dynamic changes to base URLs</h2> <p>Any changes to the xml:base attribute or a document's base URL logically are applied to all descendants, elements in the document, etc.</p> Day 17 of 100DaysOfSpec, Common Microsyntaxes forevah 2015-04-22T00:00:00.000Z https://melanie-richards.com/blog/day-17-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/infrastructure.html#colors">2.4 Common microsyntaxes, color</a> and down through 2.4.10 Media queries.</p> <h2 id="2.4.6-colors">2.4.6 Colors</h2> <p>A &quot;simple color&quot; has a value 0-255 for the RGB channels of digital color. A &quot;valid simple color&quot; is the hex code for the color, preceded by the &quot;#&quot; symbol. Notably, it's seven characters long—#000000, not #000 shorthand. Serializing simple colors returns lowercase for all the digits (#ffffff vs #FFFFFF).</p> <p>The spec includes an algorithm for parsing legacy color values, like &quot;dodgerblue&quot; (aww, the ol' days of tables and color names). A cool reason not to use these legacy names: it takes nine steps to parse a hex code, and 20 steps—plus five substeps—to parse a legacy color name.</p> <h2 id="2.4.7-space-separated-tokens">2.4.7 Space-separated tokens</h2> <p>&quot;A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more space characters, where words consist of any string of one or more characters, none of which are space characters.&quot;</p> <p>In unordered and ordered sets, none of the tokens are duplicated.</p> <p>Some sets of tokens require certain allowed values, and all handling of case sensitivity is done on a case-by-case (heh) basis.</p> <p>I'm unsure of what is the application/use for tokens. In my experience, &quot;token&quot; has a strong correlation with security and authentication. But it seems token here is a very general term for &quot;misc piece of data we want to store and use&quot;. I'm going to have to put this on the to-ask-my-colleagues list.</p> <h2 id="2.4.8-comma-separated-tokens">2.4.8 Comma-separated tokens</h2> <p>The same as above, but with commas. The space characters are optional, though. Why would the spec have two different syntaxes for sets of tokens? My guess is that both were already in production, so they came up with guidelines that fit both syntaxes.</p> <h2 id="2.4.9-references">2.4.9 References</h2> <p>Just gonna leave this here: &quot;A valid hash-name reference to an element of type type is a string consisting of a &quot;#&quot; (U+0023) character followed by a string which exactly matches the value of the name attribute of an element with type type in the document.&quot;</p> <h2 id="2.4.10-media-queries">2.4.10 Media queries</h2> <p>A media query successfully &quot;matches the environment&quot; if the string is empty or simply has space characters. So...you could use it as a hack for styling things only in a browser that supports media queries.</p> Day 16 of 100DaysOfSpec, Common Microsyntaxes forevah 2015-04-21T00:00:00.000Z https://melanie-richards.com/blog/day-16-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/infrastructure.html#dates-and-times">2.4 Common microsyntaxes, dates and times</a>.</p> <h2 id="2.4.5.9-durations">2.4.5.9 Durations</h2> <p>A duration is a number of seconds. I wrote &quot;quite simply&quot; at first and then backspaced over that right quick because <a href="https://www.w3.org/TR/html5/infrastructure.html#durations">look</a>.</p> <p><a href="https://knowyourmeme.com/memes/one-does-not-simply-walk-into-mordor">One does not simply</a> convert months/years into seconds. BUT you can give a duration in units of weeks, days, hours, minutes, and seconds.</p> <p>The algorithm for parsing the duration string has quite a few steps, including but not limited to FUN WITH LOOPS!</p> <h2 id="2.4.5.10-vaguer-moments-in-time">2.4.5.10 Vaguer moments in time</h2> <p>Heh, I like the title of this subsection. This describes a &quot;valid date string with optional time&quot; and how to parse it. I think in order to understand what that actually means, I'd probably have to go back over the algorithms and compare differences. Seeing as I don't need to know that level of depth to do my work, I'm going to say &quot;meh&quot; and move right along from the &quot;Dates and times&quot; subsection of &quot;Common Microsyntaxes&quot;.</p> Day 15 of 100DaysOfSpec, 2.4 Common Microsyntaxes, contd. 2015-04-20T00:00:00.000Z https://melanie-richards.com/blog/day-15-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>So, I skipped out on spec reading for an entire weekend, Friday–Sunday. Oops. Currently reading in <a href="https://www.w3.org/TR/html5/infrastructure.html#dates-and-times">2.4 Common microsyntaxes, dates and times</a>.</p> <h2 id="2.4.5.7-global-dates-and-times">2.4.5.7 Global dates and times</h2> <p>A global date and time (on the Gregorian calendar) smashes together year, month, date, hour, minute, second, and fraction of a second. Unlike other time microsyntaxes covered on previous readings, this one actually does include the time zone offset.</p> <p>TIL that UTC, the current time zone structure, was created in the &quot;mid-twentieth century&quot;. On times preceding UTC:</p> <blockquote> <p>Time before the formation of time zones must be expressed and interpreted as UT1 times with explicit time zones that approximate the contemporary difference between the appropriate local time and the time observed at the location of Greenwich, London.&quot;</p> </blockquote> <h2 id="2.4.5.8-weeks">2.4.5.8 Weeks</h2> <p>Who ever decided weeks should be seven days? So awkward.</p> <p>A week in HTML-spec land is European: it starts on a Monday (as it does in my heart). Each week in the year gets a consecutive number, starting with 1 (sorry nerds). There's some guidance about when a year has 52 or 53 weeks.</p> <p>The week string is in ISO format, like this: <em>2015-W03</em>, where the two digits at the end are that week number described above.</p> Day 11 of 100DaysOfSpec, 2.4 Common Microsyntaxes, contd. 2015-04-16T00:00:00.000Z https://melanie-richards.com/blog/day-11-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/infrastructure.html#common-microsyntaxes">2.4 Common microsyntaxes</a></p> <h2 id="2.4.5.4-times">2.4.5.4 Times</h2> <p>Like the microformats yesterday, a &quot;time&quot; still doesn't contain a time zone, just hour, minute, second, and fraction of a second.</p> <p>Hours are given in military time (0 &lt;= hour &lt;= 23). By the way, I always find it interesting when I come across an American who has their phone clock set to the 24-hour system.</p> <h2 id="2.4.5.5-floating-dates-and-times">2.4.5.5 Floating dates and times</h2> <p>A &quot;floating date and time&quot; contains both the date and time information.</p> <p>When it becomes a &quot;valid <em>normalized</em> floating date and time string&quot;, it does not contain a U+0020 SPACE character (which a &quot;valid floating date and time string&quot; can have), and the time is &quot;expressed as the shortest possible string for the given time (e.g. omitting the seconds component entirely if the given time is zero seconds past the minute)&quot;.</p> <h2 id="2.4.5.6-time-zones">2.4.5.6 Time zones</h2> <p>Re, time zone offsets: &quot;This format allows for time-zone offsets from -23:59 to +23:59. In practice, however, right now the range of offsets of actual time zones is -12:00 to +14:00, and the minutes component of offsets of actual time zones is always either 00, 30, or 45. There is no guarantee that this will remain so forever, however; time zones are changed by countries at will and do not follow a standard.&quot;</p> Day 10 of 100DaysOfSpec, 2.4 Common Microsyntaxes, contd. 2015-04-15T00:00:00.000Z https://melanie-richards.com/blog/day-10-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Currently reading in <a href="https://www.w3.org/TR/html5/infrastructure.html#common-microsyntaxes">2.4 Common microsyntaxes</a></p> <h2 id="2.4.5-dates-and-times">2.4.5 Dates and times</h2> <p>Surprise, surprise, we're using the Gregorian (standard Western) calendar. The spec actually—accurately—notes that that decision stems from &quot;cultural biases&quot;.</p> <p>Libraries that parse dates have to be reviewed to make sure they conform to the spec, which is more specific than ISO8601 formats, for example.</p> <h2 id="2.4.5.1-months">2.4.5.1 Months</h2> <p>A valid &quot;month&quot; string holds no information about time zones. It does, however, include the year. I would have assumed the browser parsed year, month, and day separately.</p> <p>The spec says that two ASCII digits are used to denote the month portion of the month string (four for the year), but confusingly wherever in the spec it mentions months it does not include leading zeroes.</p> <h2 id="2.4.5.2-dates">2.4.5.2 Dates</h2> <p>A valid &quot;date&quot; string contains the &quot;month&quot; string (which itself includes year and month), and a date string. It also does not hold any time zone information.</p> <p>What's unclear to me is the difference between a &quot;date string&quot; and a &quot;date component&quot;.</p> <h2 id="2.4.5.3-yearless-dates">2.4.5.3 Yearless dates</h2> <p>Here's where things get interesting <em>(non-web-nerds whisper, &quot;you sure?&quot;)</em>! You can have a valid &quot;yearless date&quot; string that contains just the month portion of the month string, and the day string. So a month string itself fails without a year, but a month string, without a year portion, as part of a date string is ok?</p> <p>When you don't specify a year, Leap Day is allowed.</p> Day 9 of 100DaysOfSpec, 2.4 Common Microsyntaxes, contd. 2015-04-14T00:00:00.000Z https://melanie-richards.com/blog/day-9-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>The big takeaway from this section as a whole, for me, is seeing how much is involved in handling numbers.</p> <h2 id="2.4.4.3-floating-point-numbers">2.4.4.3 Floating-point numbers</h2> <p>I had to looking up floating-point numbers because the spec assumes some familiarity with it. I either have never heard the term &quot;significand&quot; or have forgotten it from a math class long ago; there was also no clear-cut example to visualize. Wikipedia (sorry) has <a href="https://en.wikipedia.org/wiki/Floating_point">more info on floating points</a>.</p> <h2 id="2.4.4.4-percentages-and-lengths">2.4.4.4 Percentages and lengths</h2> <p>Confused as to why the algorithm for &quot;parsing dimension values&quot; would return numbers &gt;= 1.0, or an error. For lengths I think that makes sense (for example, a text value has characters or it doesn't), but wouldn't there be a need for %s smaller than 1? I think I'm misunderstanding something about how this algorithm would be used or what it's supposed to measure. Need to start tagging these notes with &quot;TO-ASK&quot; ;]</p> Day 8 of 100DaysOfSpec, 2.4 Common Microsyntaxes 2015-04-13T00:00:00.000Z https://melanie-richards.com/blog/day-8-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Today's reading demonstrates how UAs should handle and format different types of data.</p> <h2 id="2.4.1-common-parser-idioms">2.4.1 Common parser idioms</h2> <p>So many space characters: U+0020 SPACE, &quot;tab&quot; (U+0009), &quot;LF&quot; (U+000A), &quot;FF&quot; (U+000C), and &quot;CR&quot; (U+000D). Having trouble figuring out what these different spaces actually are...</p> <h2 id="2.4.2-boolean-attributes">2.4.2 Boolean attributes</h2> <p>You can't have &quot;true&quot; and &quot;false&quot; on a boolean attribute. It is simply whether the attribute exists or not. If the attribute does exist, its value (when checking for expected/standard values) is case-sensitive and can't have leading or trailing whitespace.</p> <h2 id="2.4.3-keywords-and-enumerated-attributes">2.4.3 Keywords and enumerated attributes</h2> <p>Enumerated attributes can take as their value a keyword from a specified list. Each of those keywords represents a &quot;state&quot;. There can be some overlaps as to which has which state; non-conforming values so old sites don't break; and two default values: an &quot;invalid&quot; default and a &quot;missing value&quot; default.</p> <p>Again, in order to match an expected value, the keyword is case-sensitive and can't have extraneous white spaces.</p> <p>&quot;The empty string can be a valid keyword.&quot;</p> <h2 id="2.4.4-numbers">2.4.4 Numbers</h2> <p>The spec is very specific about what a negative number is.</p> Day 7 of 100DaysOfSpec, 2.3 Case-sensitivity and string comparison 2015-04-12T00:00:00.000Z https://melanie-richards.com/blog/day-7-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>I don't have much to say on today's section (other than I now know the ASCII uppercase letters range from U+0041 to U+005A, and lowercase letters range from U+0061 to U+007A), so I guess I'll comment on progress so far:</p> <ol> <li>I've already skipped a day (last Friday). Oops.</li> <li>At some point last week I was thinking &quot;it's possible I might actually finish before the 100 days are up!&quot; Meh, not feeling that way now. But I did start thinking about what I'd read after finishing the HTML W3C recommendation. My first thought was reading the CSS spec, but apparently CSS3 doesn't exist as a single document (possibly because, as I read in another section of this HTML spec, that CSS support as a whole is not required of browsers). Rather, there appears to be separate documents covering different topics in CSS. I did see Nerd Twitter get excited over a <a href="https://svgwg.org/svg2-draft/">new draft of the SVG spec</a>...</li> <li>I'm somewhat regretting that I did not choose something visual for my 100-day project. It's been really fun seeing everyone else's work come in, and I'm a little jealous that my project isn't as sexy from a designer's perspective. This comes back to the classic problem of web designers (or anyone whose work straddles two disciplines): push to be really great at aesthetics? Work to improve dev skills? Try to be perfect at all the things?!</li> </ol> Day 6 of 100DaysOfSpec, 2.2 Conformance requirements, contd. 2015-04-11T00:00:00.000Z https://melanie-richards.com/blog/day-6-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>The spec discourages writing vendor-specific extensions, because, as we can see from history, the web works better when we work together (I CRINGE from the after-school-special nature of that last sentence, but I stand by the sentiment, dangit).</p> <p>The W3C gives guidelines for when extensions absolutely MUST be used for experimental features: if you just need XML for markup features (and not HTML), you define a custom namespace for that feature.</p> <p>If you want something new in the HTML syntax, &quot;extensions should be limited to new attributes of the form '<code>x-vendor-feature</code>', where vendor is a short string that identifies the vendor responsible for the extension, and feature is the name of the feature.&quot; Browsers and other user agents can't just come up with new HTML elements; that would be a major threat to interoperability (things all working the same, cross-browser). New experimental attributes have to have a &quot;x-vendor&quot; prefix so they don't crash with other browsers' implementations in the future, until there's a new standard (things we see with CSS prefixes). Attributes with &quot;x-&quot; or &quot;_&quot; in the name will never be an official part of the HTML language.</p> <p>DOM extensions, such as methods, need to be vendor prefixed as well.</p> <p>No extension can contradict or be non-conformant to the spec.</p> <p>When an extension is needed cross-browser, UAs can go through the process of getting it added to the official spec or have a new spec written (in practice, becomes an <strong>applicable specification</strong>).</p> <p>&quot;User agents must treat elements and attributes that they do not understand as semantically neutral.&quot;</p> Day 4 of 100DaysOfSpec, 2.2 Conformance requirements, contd. 2015-04-09T00:00:00.000Z https://melanie-richards.com/blog/day-4-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p><a href="https://www.w3.org/TR/html5/infrastructure.html#dependencies">Today's section</a> summarizes all the sub-specifications the HTML spec relies on, and what terms are defined in those specifications.</p> <p>Particularly interesting term lists (to me, anyway) include parts of URLs, CORS (cross-origin resource sharing), DOM features, and DOMException types.</p> <p>&quot;Web IDL&quot; is referenced here. TIL that &quot;IDL&quot; stands for &quot;interface definition language&quot;. According to the W3C recommendation on <a href="https://www.w3.org/TR/WebIDL/">Web IDL</a>, it is &quot;an IDL variant with a number of features that allow the behavior of common script objects in the web platform to be specified more readily.&quot; This is still a bit unclear to me, seems like a library to help user agents wire up functionality more easily and consistently, but I think this is a can of worms to open another time. Unless you, dear hypothetical reader, have some insights. ;]</p> <p>We're not really even getting to the meat of the spec yet but from the list of DOM features you already get a sense of just how much is under the surface of our prettily-packaged elements and properties. The <code>comment</code> interface is listed in these features; I wonder how many lines of code it takes from the UA just to have HTML comments work correctly.</p> <p>&quot;UIEvent&quot; seems as though it would encompass quite a bit.</p> <p>Note to self: figure out what a &quot;Blob&quot; actually is. I hear this word being thrown around and smile and nod to myself. <a href="https://www.w3.org/TR/FileAPI/">W3C says</a> &quot;immutable raw binary data&quot;. Cool, very helpful. <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh453178.aspx">To read later</a>.</p> <p>QUITE CURIOUSLY, user agents are not required to support CSS &quot;as a whole&quot;, but they do have to support the Media Query language.</p> <p>And finally it should be mentioned that user agents aren't actually required to support CSS, Javascript, or HTTP, even within the UA subcategory of web browsers and other interactive UAs. These are simply the most ubiquitous choices for styling, scripting, and network protocols.</p> Day 3 of 100DaysOfSpec, 2.2 Conformance Requirements 2015-04-08T00:00:00.000Z https://melanie-richards.com/blog/day-3-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Today I realized the &quot;Add developer-view styles&quot; not only does some stylistic things, it also hides entire chunks of content. So I guess that's useful, if you want to ignore the information for user agents. For my purposes, I'm reading everything.</p> <h2 id="2.2.1-conformance-classes"><a href="https://www.w3.org/TR/html5/infrastructure.html#conformance-classes">2.2.1</a> Conformance classes</h2> <p>&quot;User agents are not free to handle non-conformant documents as they please&quot;. Sites gotta fail consistently!</p> <p>The spec's list of the categories of user agents:</p> <ul> <li>Web browsers and other interactive user agents</li> <li>Non-interactive presentation user agents <ul> <li>Render HTML/XHTML docs w/o interactive capabilities</li> <li>Same conformance rules as web browsers, etc, except for the interactive bits</li> </ul> </li> <li>Visual user agents that support the suggested default rendering <ul> <li>Can be one of the above two categories, but supporting the default is not required</li> <li>This section talks about overriding some parts of the default rendering to make things more accessible the user. It seems odd that that wouldn't just be baked into the suggested rendering (legacy issue? Political issue?).</li> </ul> </li> <li>User agents with no scripting support</li> <li>Conformance checkers <ul> <li>&quot;Automated conformance checkers are exempt from detecting errors that require interpretation of the author's intent.&quot;</li> </ul> </li> <li>Data mining tools <ul> <li>If you're not rendering a document, your requirements are centered around semantics.</li> </ul> </li> <li>Authoring tools and markup generators <ul> <li>Obviously, these need to spit out conforming documents.</li> <li>WYSIWYGs are included in this category, which is interesting because it is very possible (speaking as a person who has built many Wordpress sites for clients) for an individual to do some bananas stuff in a WYSIWYG editor.</li> </ul> </li> </ul> Day 2 of 100DaysOfSpec, Common Infrastructure 2015-04-07T00:00:00.000Z https://melanie-richards.com/blog/day-2-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <h2 id="2-common-infrastructure"><a href="https://www.w3.org/TR/html5/infrastructure.html#infrastructure">2</a> Common Infrastructure</h2> <p>When writing up documentation, there's a (valid) temptation to write a different version of the document for each distinctive user type. The authors of the HTML spec probably don't have that luxury—i.e. it's trouble enough getting everyone to agree on just one document—so the HTML spec covers the concerns of both web devs working on websites, and browsers that need to adhere to the new standards.</p> <p>It probably does make sense, though, to pay attention to what the other side needs to do. Web browsers can better design for how features are intended to be used; web developers can better grasp how things are working under the hood, and what the responsibilities of the web browser are.</p> <p>All this is to say that this section seems, at the outset, more oriented towards web browsers as audience.</p> <h2 id="2.1-terminology"><a href="https://www.w3.org/TR/html5/infrastructure.html#terminology">2.1</a> Terminology</h2> <p>If you're following along with these notes, it may be useful to read this section in case any specific ~<em>~ vocab terms ~</em>~ are referenced again.</p> <h2 id="2.1.1-resources"><a href="https://www.w3.org/TR/html5/infrastructure.html#resources">2.1.1</a> Resources</h2> <p>A feature cannot be considered &quot;supported&quot; if the browser can handle some but not all of its &quot;critical aspects&quot;. The example they use is a browser that knows the dimensions of an MPEG-4 file but doesn't support the compression format. I mean, makes sense.</p> <h2 id="2.1.3-dom-trees"><a href="https://www.w3.org/TR/html5/infrastructure.html#dom-trees">2.1.3</a> DOM trees</h2> <p>&quot;The root element of a <code>Document</code> object is that <code>Document</code>'s first element child, if any. If it does not have one then the <code>Document</code> has no root element.&quot;</p> <h2 id="2.1.5-plugins"><a href="https://www.w3.org/TR/html5/infrastructure.html#plugins">2.1.5</a> Plugins</h2> <p>Plugins aren't &quot;child browsing contexts of the <code>Document</code>&quot; and don't add any Node objects to the <code>Document</code>; the example they use is a PDF viewer inside the browser.</p> <p>The spec actually doesn't prescribe how user agents (browsers) support and implement plugins, or whether they need to do so at all.</p> Day 1 of 100DaysOfSpec, Introduction 2015-04-06T00:00:00.000Z https://melanie-richards.com/blog/day-1-100/ <p><em>I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. <a href="https://melanie-richards.com/blog/100-day-project">Read the initial intent/backstory</a>. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.</em></p> <p>Everything in today's reading was not part the HTML standard, just background info.</p> <h2 id="1.1-background"><a href="https://www.w3.org/TR/html5/introduction.html#background">1.1</a> Background</h2> <p>I figured most of this first chapter would be fluff I wouldn't need to cover, but waddaya know, something new in the first section: HTML was originally used for &quot;semantically describing scientific documents&quot;.</p> <p>Probably this is something they say when someone sits you down to have &quot;the HTML talk&quot;? I don't know, never had it.</p> <h2 id="1.4-history"><a href="https://www.w3.org/TR/html5/introduction.html#history-0">1.4</a> History</h2> <p>This subsection is not that long but would be worth a complete read. Probably most interesting to me was the gap in HTML's evolution (as HTML) between 1998–2003/2004. This was something I was vaguely aware of but I hadn't realized the gap was quite that long.</p> <h2 id="1.5.3-design-notes-%3E-extensibility"><a href="https://www.w3.org/TR/html5/introduction.html#extensibility1.5.3">1.5.3</a> Design notes &gt; Extensibility</h2> <p>It's interesting that the spec refers to classes as a way devs can &quot;effectively [create] their own elements&quot;. I have simply thought of this attribute as a &quot;hook&quot; I can use to apply styles and interactivity, but I suppose, yea, you're basically creating a new Thing.</p> <p><code>data-*=&quot;&quot;</code> attributes are &quot;guaranteed to never be touched by browsers&quot;.</p> <h2 id="1.7.1-structure-of-this-specification-%3E-how-to-read-this-specification"><a href="https://www.w3.org/TR/html5/introduction.html#how-to-read-this-specification">1.7.1</a> Structure of this specification &gt; How to read this specification</h2> <p>&quot;First, it should be read cover-to-cover, multiple times. Then, it should be read backwards at least once.&quot; Very cute, W3C.</p> <p>Interestingly (though still logical), in the vocabulary of the spec, a &quot;producer&quot; is a developer of websites and a &quot;consumer&quot; is a web browser.</p> <h2 id="1.9-a-quick-introduction-to-html"><a href="https://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html">1.9</a> A quick introduction to HTML</h2> <p>This section contains a diagram that shows how markup gets split up into different nodes in the DOM tree, &quot;an in-memory representation of a document&quot;. Curiously, spaces (except for those at the beginning/end of the HTML file) and line breaks yield &quot;Text&quot; nodes.</p> <h2 id="1.9.1-writing-secure-applications-with-html"><a href="https://www.w3.org/TR/html5/introduction.html#writing-secure-applications-with-html">1.9.1</a> Writing secure applications with HTML</h2> <p>I was aware of cross-site scripting attacks via links and form submissions, but I hadn't thought of a hacker's ability to use <code>img</code> maliciously (using the <code>onload</code> attribute to run scripts is the example they cite).</p> <p><em>Cross-site request forgery</em>: the vocab term for when another site maliciously makes server requests, acting as a user.</p> <h2 id="1.10-conformance-requirements-for-authors"><a href="https://www.w3.org/TR/html5/introduction.html#conformance-requirements-for-authors">1.10</a> Conformance requirements for authors</h2> <p>Explains why &quot;presentational markup&quot; (attributes like color, border) from previous versions of HTML were dropped: bad for accessibility, harder to maintain, larger doc sizes. Aww, the good ol' days of tabular layouts (JUST KIDDING, folks).</p> <p>&quot;It is also worth noting that some elements that were previously presentational have been redefined in this specification to be media-independent: <code>b</code>,<code>i</code>, <code>hr</code>, <code>s</code>, <code>small</code>, and <code>u</code>.&quot;</p> <h2 id="1.11-suggested-reading"><a href="https://www.w3.org/TR/html5/introduction.html#suggested-reading">1.11</a> Suggested reading</h2> <p>A bunch of links for further reading.</p> Reading the spec—The100DayProject 2015-04-06T00:00:00.000Z https://melanie-richards.com/blog/100-day-project/ <p>If it hasn't come up in your feed yet, The Great Discontent / Elle Luna are running a version of a <a href="https://thegreatdiscontent.com/100days">100-day project</a>, wherein you work on the same type of creative task for 100 days straight. It's not a new concept—in fact, this version was inspired by the Yale design program—but I wanted to jump on the chance to explore a theme alongside many other creatives. Collective power of will, focusing the innate need to &quot;make&quot;, etc.</p> <h2 id="i'm-reading-the-html-specification">I'm reading the HTML specification</h2> <p>Before this 100 day project came up, I was thinking it would be cool to read <a href="https://www.w3.org/TR/html5/">the official HTML spec</a> and live-tweet or blog it. I abandoned the idea because reading—actually reading—the whole thing just seemed too daunting, or that I would get bored or distracted by other projects and give up.</p> <p>But reading &quot;as much as I can&quot; in 100 days, that's something I can do.</p> <h2 id="why-read-the-spec%3F">Why read the spec?</h2> <p>Like many other web professionals, all my development skills are self-taught. I've worked to fill in the cracks in my knowledge by reading blog posts, etc., but I'm sure there's a lot to be gained from reading the official HTML specifications. Chiefly, I'm looking to:</p> <ul> <li>Correct misconceptions I might have about HTML or how to use it</li> <li>Learn new things: some quirks or attributes of familiar elements, etc</li> <li>Pick up more knowledge about ARIA roles and other considerations in accessibility</li> <li>Be able to speak more intelligently about why we do x or y</li> </ul> <p>There's also something a bit weird about not having the read (or not regularly consulting) the closest thing front-end developers have to a &quot;holy text&quot;. Blog posts are better packaged for human reading, but I'd like to get information straight from the source more frequently.</p> <h3 id="the-version-i'm-using">The version I'm using</h3> <p>I'm reading <a href="https://www.w3.org/TR/html5/">the official recommendation</a>, rather than <a href="https://www.w3.org/html/wg/drafts/html/master/">the nightly draft</a>. This version is of course not as current, but I wanted to work from something stable, stamped with a seal of approval.</p> <h2 id="how-this-will-work">How this will work</h2> <p>I conveniently have a one-hour commute and a laptop, so I'll be using this daily chunk of time to read the specifications and write up a blog post with my notes and comments. I'll tweet the blog post using #100DaysOfSpec. Some designers will get in a tizzy because they will think I'm doing 100 days of spec work, and I will get a chuckle out of it (maybe).</p> <h3 id="a-disclaimer">A disclaimer</h3> <p>I am an employee of Microsoft, which obviously is active in the web community. Any opinions, comments, etc. in this blog post series are strictly my own. I do not speak on the behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec.</p> Goals for 2015 2014-12-29T00:00:00.000Z https://melanie-richards.com/blog/goals-for-2015/ <p>I've <a href="https://melanie-richards.com/blog/execute">referenced it before</a>, but a classic issue that comes up for me is an interest in too many things. Lack of focus has been helpful in some cases (especially as the role of a designer expands to include All The Things), but I worry that it distracts from achieving real depth in any one thing.</p> <h2 id="resolution">Resolution</h2> <p>For 2015 my main goal is to, you know, chill out and focus on just a couple topics in creativity and life-long learning.</p> <p>And those topics, in order of priority:</p> <h3 id="illustration">Illustration</h3> <p>I tend to work mostly on web projects these days, so improving my illustration chops would be a logical complement to web design and development. My goal is to log 300 hours outside of work to illustration practice (~6 hours a week). The ultimate goal is to be able to execute several styles quickly.</p> <p>6 hrs/wk feels a little light, but given all the other things a human does with their time it's at least realistic and can be adjusted.</p> <h3 id="javascript">Javascript</h3> <p>Dev is an easy place to hear the siren song of exciting new things. For now I'll be focusing on Javascript: filling in the cracks in my prior knowledge, working more in vanilla JS (as opposed to jQuery), learning how to write more efficient scripts. JS is such a huge, huge world now so there's still plenty of room for exploration. 150 hours (~3 hrs/wk).</p> <h3 id="creative-writing">Creative Writing</h3> <p>The older I get, the less I write. I don't feel the need to cultivate creative writing as a Real Skill, but I'd like to not lose touch with this outlet entirely. Once a week should suffice.</p> <h3 id="weaving-%26-knitting">Weaving &amp; Knitting</h3> <p>I've been shopping for indoor activities: something with a creative angle that will keep my hands busy, but not precious enough that I feel the need to be good at it. I recently dabbled in weaving on a simple peg loom, and with a little bit of knitting. I'd like to keep exploring these fiber crafts—maybe take a class?—instead of bouncing around to something else, as I am wont to do.</p> <p>Okay, that's it. Planning to do a quarterly check-in to review how things are going. What is your resolution this year (design-related or otherwise)?</p> I 💖 Internet, Vol II. 2014-12-17T00:00:00.000Z https://melanie-richards.com/blog/i-heart-internet-ii/ <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-iheartnet-ii.gif" alt="I love the internet, rendered in pixel art with floating sparkles" /> </picture> <ul> <li><a href="https://10x2014.tumblr.com/">10x2014</a>, presumably redesigns of <a href="https://www.ericrmortensen.com/">Eric Mortensen</a> and <a href="https://www.skinnyships.com/">Richard Perez</a>'s favorite albums of 2014.</li> <li><a href="https://aerialwallpapers.tumblr.com/">Aerial wallpapers</a>, oooooh.</li> <li>I dig Dribbble profiles that read as a cohesive whole, but don't feel too expected. <a href="https://dribbble.com/BurntToast">BurntToast Creative</a>'s work has a nice noodley quality to it.</li> <li>My mom is <a href="https://www.washingtonpost.com/blogs/style-blog/wp/2014/12/02/no-youre-not-sleeping-enough-and-its-a-big-problem-15-scary-facts-in-new-natgeo-doc/">always right</a>.</li> <li>Obsessed with <a href="http://prizepins.com/collections/all">all these pins</a>. I haven't seen enamel pins with loose linework before, pretty awesome.</li> <li><a href="http://godspeedyoublacknerd.com/post/100072539171/justskippingalong-the-fade-to-black-oh-my-god-i">Meep</a>, via <a href="https://twitter.com/beep">@beep</a></li> <li><a href="https://joyang.ca/artwork/year-of-the-snake/">This little snakey</a>. Joy Ang's work hits some pretty special highs for me.</li> <li>If you ever get to design a flag, you're supposed to draw it in a 1.5 x 1 inch rectangle. I know some people who thumbnail this way with any illustration, but it's <a href="https://99percentinvisible.org/episode/vexillonaire/">particularly handy for flags</a>.</li> <li>I always forget <a href="https://compressor.io/">this lossless image compressor</a> exists. I usually use <a href="https://imageoptim.com/">ImageOptim</a>, a desktop app.</li> </ul> <h2 id="i've-been-sitting-on-these-for-a-few-weeks-but-whatever%2C-still-cool%3A">I've been sitting on these for a few weeks but whatever, still cool:</h2> <ul> <li>Shopify did a great job updating their <a href="https://www.shopify.com/blog/15714308-introducing-responsive-checkout">checkout system</a> for the responsive world. I've always been curious about how third party apps/platforms non-destructively update their product, and I like Shopify's solution: you can &quot;opt-in&quot; to the new responsive checkout (and downgrade if you wish), so if your no-longer-engaged developer wrote custom CSS for the legacy solution, your checkout won't look totally bonkers.</li> <li>This. Keyboard. Gif. App. <a href="http://blippy.com/">THIS KEYBOARD GIF APP!</a></li> <li>Happened to look at <a href="https://muffduff.com/journal/palouse">these photos of Idaho</a> by Tyler Thompson while listening to <a href="http://rd.io/x/QZ6DrDdNGkQ/">The Album Leaf</a>, and I must say, it's a pretty chill mashup.</li> <li><a href="https://vine.co/v/OeAUB3raTlD">Turtle powerrrr</a></li> <li>New-to-me ear candy: <a href="http://www.rdio.com/artist/MisterWives/album/Reflections/">&quot;Reflections&quot; by MisterWives</a></li> <li>The cover of <a href="https://designers.mx/mixes/rpheus">this playlist</a> is so, so satisfying.</li> <li><a href="https://googlewebmastercentral.blogspot.com/2014/11/helping-users-find-mobile-friendly-pages.html">Yet another reason</a> to build mobile-friendly websites.</li> <li>Some nice <a href="https://mrdiv.tumblr.com/">abstract gifs</a>.</li> <li>Been waiting for this: you can now <a href="https://t.co/3ab934VfSg">search your own tweets</a>.</li> <li>Everyone loves the new <a href="https://www.youtube.com/watch?v=k4YRWT_Aldo">Beyoncé video</a>, right? Right. I love that she (or her team?) made something that feels very relatable / down-to-earth.</li> <li>Trying to figure out who built the new <a href="https://www.cinerama.com/">Cinerama</a> site. The ticketing system—a custom job?—feels really smooth.</li> </ul> Short Run Seattle Haul 2014-11-18T00:00:00.000Z https://melanie-richards.com/blog/shortrun-seattle-haul/ <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-shortrun-haul7-m.jpg" alt="A pile of comics in various styles layered on top of a desk" /> </picture> <p>Comics are sort of design-related, and therefore relevant to this blog, right? Right.</p> <p>Last week was <a href="https://www.shortrun.org/">Short Run Seattle</a>, a local festival celebrating comics, art, and small publishing. I've never actually had the privilege of living in a city with a comics fest (not to mention two, as there's also the Emerald City Comic Con, due in spring) so it was a real treat to attend talks and geek out at the book fair with a BUNCH of other people. I want to share the love for some old favorites and new-to-me local talent, so here's my haul:</p> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-shortrun-haul3.jpg" alt="Photo of comics" /> </picture><figcaption>Newest books from two comic artists I've followed for awhile: Yumi Sakugawa and Liz Prince.</figcaption></figure> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-shortrun-haul4.jpg" alt="Photo of comics" /> </picture><figcaption>A few items from John Porcellino's table—he's a distributor for other people's comics as well—Anne Emond, Alabaster, John Porcellino</figcaption></figure> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-shortrun-haul5.jpg" alt="Photo of comics" /> </picture><figcaption>Björn, Pam Wishbow, Kazimir Strzepek</figcaption></figure> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-shortrun-haul6.jpg" alt="Photo of comics" /> </picture><figcaption>A bunch of little guys from James Stanton</figcaption></figure> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-shortrun-haul2.jpg" alt="Photo of comics" /> </picture><figcaption>Issues of the ever-free comics quarterly, The Intruder. Apparently these guys do some cool stuff in the comics community around town, as well.</figcaption></figure> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-shortrun-haul8.jpg" alt="Photo of book" /> </picture><figcaption>The only non-comics book I bought. It's a mix of photos and poems–half of which are in Japanese, which I don't read–and what I suspect is magic. All by Yoshinori Henguchi.</figcaption></figure> <p>If I had 3 wishes:</p> <ol> <li>More $$$ so that I could have bought all the things.</li> <li>There's a certain aesthetic to the stuff I walked away with; wish I had picked up a couple more of the &quot;grotesque&quot;-style stuff I was considering.</li> <li>That the aisles were a little bit wider, as it got a little hard to navigate around popular tables. That being said, this is a fairly new festival so their venue options might be limited. And I've never been to a comics fest before, so, what do I know?</li> </ol> <p>All in all, fantastic group of <a href="https://www.shortrun.org/exhibitors/">exhibitors</a>. So many awesome things to see that I think I even missed a couple (how did I miss <a href="https://mareodomo.com/">Mare Odomo</a>'s table?!). Can't wait until next year!</p> I 💖 Internet, Vol I. 2014-10-31T00:00:00.000Z https://melanie-richards.com/blog/i-heart-internet-i/ <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/gamesquares.png" alt="A grid of pixel art pulled from game imagery" /> </picture><figcaption>Pixels and facades, mmmm.</figcaption></figure> <ul> <li><a href="https://gamesquares.tumblr.com/">Game Squares</a>, a sneaky-peek games Tumblr run by Dom2d.</li> <li>Two favorite things combined: <a href="https://www.behance.net/gallery/14924437/8-bit-Ghibli">8-bit Ghibli</a></li> <li>Seattle converted Columbus Day to <a href="https://time.com/3476651/seattle-indigenous-peoples-day/">Indigenous Peoples' Day</a>!</li> <li><a href="http://toolstools.tools/">toolstools.tools</a>, via <a href="https://twitter.com/kyleturman">Kyle</a>. The sounds match the tools so perfectly.</li> <li>A <a href="https://www.webpagetest.org/">website performance tester</a> with really robust settings and results, via <a href="https://twitter.com/mannieschumpert">Mannie</a>.</li> <li>Sorry #gamergate, you introduced me to Zoe Quinn's <a href="http://www.depressionquest.com/">Depression Quest</a>. Really interesting concept and format.</li> <li><a href="http://www.snacksquarterly.com/">SNAAAAAAAAACKS</a></li> <li>Hard-hitting journalism on the <a href="http://m.theatlantic.com/technology/archive/2014/05/the-best-way-to-type-__/371351/">shrug emoticon</a>.</li> <li>Look what people can do with <a href="https://www.etsy.com/listing/187096459/proper-fry-up-necklace">polymer clay</a>!</li> <li>Draw me like one of your <a href="https://www.frenchgirlsapp.com/">French girls</a>.</li> <li><a href="https://www.thisiscolossal.com/2014/10/tant-de-forets-trailer/">Beautiful trailers</a> for <em>Tant de Forets</em>, an animated short by Burcu Sakur and Geoffrey Godet</li> <li>I'm not a big movie buff but I'm VERY into what <em>Every Frame a Painting</em> is doing. <a href="https://www.youtube.com/watch?v=5V-k-p4wzxg">Example</a>.</li> <li>Text processing in Coda is <a href="https://twitter.com/somelaniesaid/status/528221614304157697">a lovely thing</a>.</li> </ul> And lo, there was a portfolio section 2014-10-07T00:00:00.000Z https://melanie-richards.com/blog/portfolio-update/ <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-portfolio-update.jpg" alt="A grid of preview images comprising a portfolio index page" /> </picture> <p>Finally got around to putting some (albeit older) work up on the site. Though there's some great newer stuff I can't share yet, it's nice to have work on the site again. <a href="https://melanie-richards.com/portfolio">Check it out</a>.</p> fcodampcamp (Fuzzco Retreat, 2014) 2014-09-28T00:00:00.000Z https://melanie-richards.com/blog/fuzzco-retreat/ <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip.jpg" alt="Photo of a waterfall" /> </picture><figcaption>Triple Falls, North Carolina</figcaption></figure> <p>A week ago I joined the rest of my Fuzzco buddies for our second annual company retreat in North Carolina. I've been remote working for the past three months so it was great to check in again with these goofs (and others who expertly scuttled away from the lens):</p> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip2.jpg" alt="Photo of a Fuzzco friend" /> </picture> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip3.jpg" alt="Photo of a Fuzzco friend" /> </picture> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip4.jpg" alt="Photo of a Fuzzco friend" /> </picture> <p class="caption">Most likely to jump in a hole, Cory Etzkorn</p> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip5.jpg" alt="Photo of a Fuzzco friend" /> </picture> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip6.jpg" alt="Photo of a Fuzzco friend" /> </picture> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip7.jpg" alt="Photo of a Fuzzco friend" /> </picture><figcaption>Brandon on the edge of the world.</figcaption></figure> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip9.jpg" alt="Photo of a Fuzzco friend" /> </picture> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip10.jpg" alt="Photo of a Fuzzco friend" /> </picture> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip11.jpg" alt="Photo of a Fuzzco friend" /> </picture><figcaption>Josh and the bear log, which, for the record, I think looks more like a wolf.</figcaption></figure> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip13.jpg" alt="Photo of a Fuzzco friend" /> </picture><figcaption>Totally candid, I swear. The lovely Carly.</figcaption></figure> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzcotrip14-m.jpg" alt="A circular yellow-greenish squishy nature thing in the palm of someone’s hand" /> </picture><figcaption>And of course, Helen found something gross and picked it up. Standard.</figcaption></figure> <p>To save this post from total vacation-slide hell, I should mention that Fuzzco <a href="https://fuzzco.com/jobs/">is hiring</a>, and these really are great people to work with and break pretty much all the forest rules with.</p> That Which Has Happened, Summer 2014 2014-09-10T00:00:00.000Z https://melanie-richards.com/blog/happenings-summer-2014/ <p>So much has happened since I last updated my personal blog that I thought I'd scoop it all into one tidy post. Let's. Dive. In.</p> <h2 id="a-cross-country-move">A cross-country move</h2> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/seattle7-m.jpg" alt="View of downtown Seattle and Puget Sound from on high on the Space Needle" /> </picture><figcaption>From one port city to another.</figcaption></figure> <p>On the last day of June, I packed up all my things and moved nearly 3,000 miles across the country from Charleston, SC to Seattle, WA. I've had one eyeball on the Emerald City for a few years, and it felt like a good time to start a new adventure. I feel quite lucky to continue to work for the amazing people at Fuzzco.</p> <p>Though I miss the guys and gals from back East (and Two Boroughs Larder ramen with shishito peppers), it feels really good to be here. And for those considering cold-moving to a new city, I'm thinking about a blog post detailing everything I've learned in the process.</p> <p>I'm excited to be a part of the creative community in Seattle, so if you'd like to grab coffee/beer/boba tea sometime, let's do it! Email: mr[at]<a href="http://melanie-richards.com/">melanie-richards.com</a>.</p> <h2 id="press-for-badass-lady-creatives">Press for Badass Lady Creatives</h2> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/press.jpg" alt="Press for Badass Lady Creatives" /> </picture> <p>A couple different bits of press for <a href="https://baladycreatives.com/">Badass Lady Creatives</a> all happened to make landfall around the same time: I was interviewed for CHARLIE’s <a href="https://readcharlie.com/2014/05/28/13935/#.VA_fNWRdUu8">50 Most Progressive</a>, the July issue of <a href="https://www.nczeitgeist.com/writing/#/how-melanie-richards/">HOW magazine</a>, and the <a href="https://blog.dribbble.com/post/87213273371/timeout-with-melanie-richards">Dribbble Timeout</a> series. Many thanks to the sweet people who gave me another forum in which to share BALC.</p> <h2 id="weapons-of-mass-creation-fest">Weapons of Mass Creation Fest</h2> <p>Oh my, this was a special conference. <a href="https://wmcfest.com/">WMC Fest</a> is one of the most affordable conferences I've ever heard of, which may contribute to its refreshingly relaxed, friendly atmosphere (and Midwesterners really are that nice). I finally met some COMPLETELY RAD Twitter buds in person, and got to meet some great new people.</p> <p><a href="https://pitchdesignunion.com/">Margot Harrington</a>, <a href="https://onlymoreneverless.com/">Stewart Scott-Curan</a>, <a href="https://www.jefffinley.org/">Jeff Finley</a>, and the rest of the WMC Fest gang did a fantastic job putting this conference together. They prioritized a speaker lineup that better represents all the many perspectives our design community has to offer. Between a thoughtful speaker roster and the panels discussing race, gender, and the validity of “do what you love”, the tone of this conference was “let's look out for each other, let's be good to each other”.</p> <h2 id="working%2C-working%2C-working">Working, working, working</h2> <a class="c-web-preview" href="https://greenheartsc.org/"> <picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-thegreenheartproject.png" alt="A screenshot of The Green Heart Project website" /> </picture></a> <p>Of course, this whole time I've also been working. While I can't show a lot of Fuzzco projects yet, <a href="https://greenheartsc.org/">The Green Heart Project</a> was one of my favorite clients to work with in 2014: Drew and Karalee are such enthusiastic, positive people. And designing for kids (and their parents) is such a fun challenge; I could spend days drawing wee veggies if no one stopped me. <a href="https://greenheartsc.org/">View the live site</a></p> <h2 id="interview-on-the-metis-blog">Interview on the Metis Blog</h2> <a class="c-web-preview" href="https://www.thisismetis.com/blog/interview-designer-melanie-richards"> <picture> <img src="https://melanie-richards.com/assets/images/content/metis.png" alt="Screenshot of Metis interview" /> </picture></a> <p>Semi-recently, the lovely House <a href="https://www.thisismetis.com/blog/interview-designer-melanie-richards">interviewed me</a> for the Metis blog. It was fun to share a little bit about how I got into web design and front-end development, which might be helpful to beginning web creatives taking Metis’s courses.</p> <h2 id="a-new-site%2C-sort-of.">A new site, sort of.</h2> <p>Though I still consider it temporary*, I did a little fussing with the site. For this version, I strayed from Typekit offerings in favor of <a href="https://www.myfonts.com/fonts/hvdfonts/brandon-text/">Brandon Text</a> and Griffin Moore’s <a href="https://okgriffin.com/range/">Range</a>. This is also the first time I’m using <a href="https://getkirby.com/">Kirby</a>, a flat-file CMS. I had previously used Wordpress to power my site, but I felt the simplicity of a designer’s portfolio/blog doesn’t warrant the bloat of WP, or the load time spent making database requests (particularly when my host’s MySQL server gets bogged down).</p> <p><em>* Do as I say and not as I do, eh? Someday I will have a body of work up.</em></p> <p> </p> <p>H’okay, that’s everything in life up to this point. Bring on the autumn!</p> Introducing the UFGD c/o 2014! 2014-05-01T00:00:00.000Z https://melanie-richards.com/blog/22-ufgd-2014/ <p>I’m a big believer in honoring where you came from, and the University of Florida Graphic Design program is like a second family to me. So from now on, I’ll share the portfolios from each new graduating class. Introducing c/o 2014! What a talented bunch:</p> <p><a href="https://percybatalier.com/">Percy Batalier</a>,<br /> <a href="https://www.kellydcarpenter.com/">Kelly Carpenter</a>,<br /> <a href="https://laurencastro.com/">Lauren Castro</a>,<br /> <a href="https://lindseymarie.us/">Lindsey Marie Freeman</a>,<br /> <a href="https://www.clarkeharris.com/">Clarke Harris</a>,<br /> <a href="http://www.kaitlynirvine.com/">Kaitlyn Irvine</a>,<br /> <a href="https://www.juliakarraker.com/">Julia Karraker</a>,<br /> <a href="https://devinelida.com/">Devin Elida Kelly</a>,<br /> <a href="https://www.derrickligon.com/">Derrick Ligon</a>,<br /> <a href="http://www.allanlopez.co/">Allan Lopez</a>,<br /> <a href="https://kellimcadams.com/">Kelli McAdams</a>,<br /> <a href="https://www.jmcdade.com/">Jason McDade</a>,<br /> <a href="https://willmelendez.com/">Will Joel Melendez</a>,<br /> <a href="https://c-nguyen.com/">Crystal Nguyen</a>,<br /> <a href="https://www.nicoleruggiero.com/">Nicole Ruggiero</a>,<br /> <a href="http://www.natysuarez.com/">Natalie Suarez</a>,<br /> <a href="http://janetvargas.com/">Janet Vargas</a>,</p> <p>Congrats to you all, and best of luck in your new adventures! May you make all your upcoming decisions based on what’s right for you—not what you think is expected of you.</p> New Fuzzco Work, The Nickelodeon 2014-04-02T00:00:00.000Z https://melanie-richards.com/blog/the-nickelodeon/ <p class="c-web-preview"><a href="https://nickelodeon.org/"><img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzco-nick.jpg" alt="The Nickelodeon screenshot" /></a></p> <p>I’m so excited to finally share this project: a new identity and website for <a href="https://nickelodeon.org/">The Nickelodeon</a>! The Nick is an alternative/indie theater in Columbia, South Carolina. For an organization that has a huge influence on local culture, it was important to us to make this rebrand feel intelligent, fun, and a bit off-beat.</p> <p class="c-web-preview"><img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzco-nick2.jpg" alt="The Nickelodeon" /></p> <p class="caption">Check back on this page during the Indie Grits festival!</p> <p class="c-web-preview"><img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzco-nick3-m.jpg" alt="The Nickelodeon screenshot" /></p> <p class="caption">The “About” page is actually enormous, and it’s one of my favorites, including the “spine” of staff bios. I’ll spare you, though, and just <a href="https://nickelodeon.org/about">link to the full thing</a>.</p> <p class="c-web-preview"><img src="https://melanie-richards.com/assets/images/content/melanierichards-fuzzco-nick4.jpg" alt="The Nickelodeon screenshot" /></p> <p>The full site is live at <a href="https://nickelodeon.org/">nickelodeon.org</a>. To see more applications of the identity, check out the <a href="https://fuzzco.com/work/the-nickelodeon/">full project case study</a> on the Fuzzco site.</p> Badass Lady Creatives on the Dribbble Blog 2014-03-31T00:00:00.000Z https://melanie-richards.com/blog/balc-dribbble/ <p class="c-web-preview"><a href="https://blog.dribbble.com/post/81308965887/weekly-replay"><img src="https://melanie-richards.com/assets/images/content/baladycreatives-dribbble.jpg" alt="Badass Lady Creatives featured on the Dribbble blog" /></a></p> <p><a href="https://blog.dribbble.com/post/81308965887/weekly-replay">Starting this week</a>, Weekly Replay (a recap feature on the Dribbble blog) will include Dribbble users featured on Badass Lady Creatives. I’m so excited that these talented designers and illustrators will gain exposure on another outlet! Many thanks to <a href="https://susannabaird.blogspot.com/">Susanna Baird</a> and the rest of the Dribbble team.</p> Sedimentary is Responsive 2014-03-10T00:00:00.000Z https://melanie-richards.com/blog/sedimentary-is-responsive/ <p class="c-web-preview"><a href="https://readsedimentary.com/"><img src="https://melanie-richards.com/assets/images/content/melanierichards-sedimentary.jpg" alt="The index of my poetry blog, Sedimentary" /></a></p> <p>My poetry and prose blog, <a href="https://readsedimentary.com/">Sedimentary</a>, is now responsive! It’s actually the most basic layout ever—just post stacked on top of post—but the CSS hasn’t seen any love since four-ish years ago. I’d like to start writing more fiction, so I thought it might help with motivation to do some spring cleaning: changing to wide posts from columns to support longer-format writing, Freight Text’ing it up, and actually buying <a href="https://readsedimentary.com/">a domain name</a>.</p> <p>If you’d like to follow my writing blog in all its melodramatic glory, it’s hosted on <a href="https://readsedimentary.com/">Tumblr</a> and is connected to a Twitter account (<a href="https://readsedimentary.com/">@readsedimentary</a>).</p> Be Cool, Big Blogs 2014-01-30T00:00:00.000Z https://melanie-richards.com/blog/be-cool-big-blogs/ <p>Giant blog machines have come up with some rock-solid ways to increase page views, thereby increasing ad revenue. Occasionally these methods are obnoxious: slideshow posts where each bullet point is a new page, and my least favorite, RSS feeds that only show excerpts (requiring you to read on the site instead of in your preferred reader). But I get it. Gotta make the big bucks.</p> <p>All understanding aside, I want to point out that it is objectively nasty to post about a person’s work and never link to their site. After seeing something awesome on a wildly-popular blog today, I clicked on the designer’s name, expecting to be taken to her portfolio. Instead, the link routed to an internal page containing all posts written about said designer (in this case, just the one). There was no designer-specific data—including portfolio URL—on that page. Out of curiosity, I clicked back to the article, hunted around for a link, and found nothing.</p> <p>So, Big Blog has thousands of followers. The post has been shared (at time of writing) 1,200 times from the post’s share buttons alone. They will surely profit from reader traffic on the blog post, but they couldn’t link directly to the creator? They just had to crank the number of impressions?</p> <p>Obviously, I ended up Googling the designer’s name and found her portfolio. Pretty quick task, sure. But to consciously exclude a link to the original source of the work in favor of an internal link is bad journalism, bad UX, and just plain rude.</p> <p>Big Blogs, you need to find a balance between profitability and respecting the people who essentially create your content. This stuff just feels sleazy and it is not helping your brand.</p> January Refresh CHS, Stitch Design Co. 2014-01-22T00:00:00.000Z https://melanie-richards.com/blog/refresh-stitch/ <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/spoletooffice-m.jpg" alt="Spoleto office" /> </picture><figcaption>The Murray Center in Charleston, aka Spoleto USA's main office.</figcaption></figure> <p>Charleston is one of several cities with a local chapter of <a href="http://refreshingcities.com/">Refresh</a>, a group which seeks to inspire and maintain local creative communities. In <a href="http://refreshcharleston.com/">Charleston</a>, this looks like a somewhat-quarterly event with presentations, munchies, and mingling—lead by the ever-energetic <a href="https://about.me/karlhudsonphillips">Karl Hudson Phillips</a>.</p> <p>Yesterday’s <a href="http://refreshcharleston.com/">RefreshCHS</a> event was held at the beautiful (seriously) Spoleto Festival office, where <a href="https://twitter.com/tami_draws">Tami Boyce</a>’s artwork hung on the walls and the founders of <a href="https://stitchdesignco.com/">Stitch Design Co.</a> gave a great presentation on their client-driven process.</p> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/stitchpresentation.jpg" alt="Stitch's presentation" /> </picture><figcaption>Amy and Courtney talk about how Stitch got started.</figcaption></figure> <p>Stitch was founded by Amy Pastre and Courtney Rowson, who bought a letterpress together and started a side business: Sideshow Press. After much positive feedback on their letterpress work, they decided to pursue design full-time. Thus, Stitch was born five years ago.</p> <p>Throughout their presentation, Amy and Courtney stressed the importance of involving the client in the design process. Their MO is to meet people face to face, ask insightful (and many) questions early, and show a bit more process work than might be the norm.</p> <h2 id="highlights-from-the-presentation">Highlights from the presentation</h2> <ul> <li>It is not uncommon for Stitch to show 10–15 logos in one presentation. The number is pretty high, but the concepts are thoughtfully picked, and the intent is to involve the client.</li> <li>Stitch helps clients see past the bare-minimum deliverable; for <a href="https://www.stitchdesignco.com/work/view/mixson-bath-and-racquet-club">Mixson Racquet Club</a> (at the time a brand new destination sort of in the middle of nowhere), they printed invitations on tennis towels.</li> <li>Taking business risks helps you empathize with clients, who are investing real money into design work.</li> <li>When clients have a hard time articulating their feedback, the designers gently ask questions to guide the conversation to a more specific, meaningful place. They also remind the client that they don’t necessarily have to pick what has already been presented.</li> <li>When convincing clients to go with a larger print budget, usually “the idea sells it”, but a good logical case to make is: “why bother spending the money if you’re not going to do it right?” [paraphrased]</li> <li>As for red flags, the founders are wary of clients who aren’t willing to sit down and talk at the beginning of a project. They seek out partners who would enjoy their design process, rather than be at odds with it.</li> </ul> <p>My favorite moment in the presentation was when Amy and Courtney were describing how they got their hands on their first letterpress. They ordered the machine from Briar Press, a woman who was getting rid of all her things in order to serve as an overseas missionary. Amy and Courtney were expecting a table-top press, and were shocked when the Chandler &amp; Price machine came in on a flatbed truck. The designers said that they blocked Meeting St. (a busy downtown street) for an hour, and ended up having to borrow a forklift from a company across the way. Both said they were glad they didn’t know what they were getting themselves into—they wouldn’t have dared to go for it if they knew the press would be so huge.</p> <p>See more of <a href="https://stitchdesignco.com/">Stitch</a>’s work on their website, and if you’re in Charleston, check out Refresh on <a href="https://twitter.com/refreshchs">Twitter</a> and <a href="https://www.facebook.com/refreshchs">Facebook</a>.</p> Resources for Friends of Design 2014-01-16T00:00:00.000Z https://melanie-richards.com/blog/resources-for-friends-of-design/ <p>A couple of days ago I had the honor and pleasure to Skype with this year’s senior class in the University of Florida Graphic Design program. Next month, these smart and talented students will present <a href="https://www.facebook.com/LigatureDesignSymposium">Ligature 23</a>, this year’s installment of the student-run design symposium. If you find yourself in Gainesville, FL on February 7, you can see <a href="https://frankchimero.com/">Frank Chimero</a> and <a href="https://katebingamanburt.com/">Kate Bingaman-Burt</a> speak for free. Plus a gallery of hand-selected student work!</p> <p>Anyway, the seniors asked me which blogs I read and which development resources I’d recommend. I’m actually working on a longer blog post series for the dev stuff, but here’s a few links to get everyone started:</p> <h2 id="a-sampling-of-the-blogs-i-follow%3A">A sampling of the blogs I follow:</h2> <ul> <li><a href="https://boxesandarrows.com/">Boxes and Arrows</a>: UX</li> <li><a href="https://bpando.org/">BP&amp;O</a>: Branding, Packaging, &amp; Opinion</li> <li><a href="https://csswizardry.com/">CSS Wizardry</a>: CSS best practices</li> <li><a href="https://www.designworklife.com/">Design Work Life</a></li> <li><a href="https://www.featureshoot.com/">Feature Shoot</a>: photography</li> <li><a href="https://www.fastcodesign.com/">Fast Co. Design</a>: there’s so much of this that I usually just swipe through Feedly really fast to see which posts grab my attention</li> <li><a href="https://www.underconsideration.com/fpo/">For Print Only</a></li> <li><a href="https://kottke.org/">Kottke</a>: liberal arts</li> <li><a href="https://alistapart.com/">A List Apart</a>: THE WEB</li> <li><a href="https://manhattan-nest.com/">Manhattan Nest</a>: hilarious home reno blog</li> <li><a href="https://mocoloco.com/">MoCo Loco</a>: industrial/product design</li> <li><a href="http://plentyofcolour.com/">Plenty of Colour</a></li> <li><a href="https://www.remodelista.com/">Remodelista</a>: interior design</li> <li><a href="http://www.septemberindustry.co.uk/">September Industry</a>: doesn’t update much, but it’s always really good stuff</li> <li><a href="https://www.underconsideration.com/quipsologies/">Quipsologies</a>: assorted stuff</li> </ul> <p>Those are the more general blogs; if I’m into someone’s work or the stuff they say on Twitter, I’ll follow their personal blog as well.</p> <h2 id="for-learning-web-development%3A">For learning web development:</h2> <ul> <li><a href="https://24ways.org/">24Ways</a></li> <li><a href="https://www.abookapart.com/">A Book Apart</a></li> <li><a href="https://caniuse.com/">Can I Use</a>: check browser support</li> <li><a href="https://www.codecademy.com/">Codecademy</a>: walkthroughs/exercises for several web languages</li> <li><a href="https://css-tricks.com/the-css-box-model/">CSS Box Model explanation</a></li> <li><a href="https://css-tricks.com/">CSS Tricks</a>: Chris Coyier knows the answer to any CSS question, possibly</li> <li><a href="https://www.fivesimplesteps.com/collections">Five Simple Steps</a>: lots of design manuals in there, too</li> <li><a href="https://www.siteleaf.com/">SiteLeaf</a>: I recently interviewed <a href="https://jessicaharllee.com/">Jessica Harllee</a>, who built her portfolio site using the SiteLeaf CMS, and loved it.</li> <li><a href="https://www.sitepoint.com/">SitePoint</a></li> <li><a href="https://smashingmagazine.com/">Smashing Magazine</a></li> <li><a href="https://www.w3.org/community/webed/wiki/Main_Page">W3C</a>: the guys that lead the internets. Not to be confused with W3Schools, which is <a href="https://www.w3fools.com/">frowned upon</a>.</li> <li><a href="https://docs.webplatform.org/wiki/Main_Page">Web Platform Docs</a>: The “Beginners Guide” has a lot of great info on web fundamentals</li> </ul> <p>Two related tips: always check the date on blog posts with code examples in them. There may be more up-to-date information. And if you’re the book-learning type, I’d recommend eBooks over print books. Development changes so quickly, so it doesn’t make sense to invest more money into something that will at some point be outdated and taking up physical space.</p> <h2 id="additional-resources">Additional Resources</h2> <ul> <li><a href="https://jessicahische.is/heretohelp">Jessica Hische’s resources list</a>. Also check out Jessica's personal projects and blog posts, because she is so incredibly generous with her knowledge. Even with <a href="https://jessicahische.is/thinkingthoughtsaboutpricing">pricing</a>.</li> <li>Update in 2026: <a href="https://www.qualtrics.com/articles/customer-experience/ux-design-glossary/">User Experience (UX) Design Glossary</a>. Thanks for the suggestion, Harper L!</li> </ul> <p>Thanks again, folks! See you at Ligature.</p> Contributor on DWL / Photography by Melissa Toms 2013-12-05T00:00:00.000Z https://melanie-richards.com/blog/contributor-on-dwl-photography-by-melissa-toms/ <p class="c-web-preview"><a href="https://www.designworklife.com/2013/12/04/introducing-melanie/"><img src="https://melanie-richards.com/assets/images/content/melanierichards-ondwl-m.png" alt="The Design Work Life blog announcing my new column" /></a></p> <p>Happy to announce that starting next Wednesday, I’ll be posting weekly on <a href="https://www.designworklife.com/2013/12/04/introducing-melanie/">Design Work Life</a>. My series is essentially an extension of <a href="https://baladycreatives.com/">Badass Lady Creatives</a> (not-so-coincidentally, <a href="https://baladycreatives.com/">that site</a> also launched yesterday), a project that I run which celebrates professional women in the creative industries. On DWL, I’ll be posting interviews, round-ups, badass women in history, and other lady creative news. It’s been interesting working from a social-media-first approach, but I’m so happy to have a permanent home for more robust posting.</p> <p>I needed a landscape portrait for my posts on DWL, but having zilch—I tend to run away from the camera and/or make bizarre faces—<a href="https://www.melissatoms.com/">Melissa Toms</a> and I held a quick portraiture sesh. She did such a great job and has such a warm personality that it was easy to relax.</p> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melissatoms1.jpg" alt="Photo by Melissa Toms" /> </picture> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melissatoms2.jpg" alt="Photo by Melissa Toms" /> </picture> <p>Melissa is really great at event and food photography, often shooting with our mutual friend <a href="https://oliviaraejames.com/">Olivia Rae James</a>.</p> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melissatoms4.jpg" alt="Photo by Melissa Toms" /> </picture><figcaption>Need to eat this, stat; shot at Monza in Charleston, SC</figcaption></figure> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melissatoms3.jpg" alt="Photo by Melissa Toms" /> </picture> <p>Melissa also shoots some really beautiful, moody photos:</p> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melissatoms5.jpg" alt="Photo by Melissa Toms" /> </picture> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melissatoms6.jpg" alt="Photo by Melissa Toms" /> </picture><figcaption>Seriously, that looks like a painting.</figcaption></figure> <p>Melissa’s site is in the works, but you can follow her on <a href="https://www.flickr.com/photos/54800960@N03/">Flickr</a> or <a href="https://instagram.com/mel_toms">Instagram</a>.</p> Advice to Stick to One's Forehead 2013-10-20T00:00:00.000Z https://melanie-richards.com/blog/advice-to-stick-to-ones-forehead/ <p>It’s nice to troll through old computer files. Found a (questionably type-set) image of this A++ advice from Ira Glass:</p> <blockquote> <p>Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you. A lot of people never get past this phase, they quit. Most people I know who do interesting, creative work went through years of this. We know our work doesn’t have this special thing that we want it to have. We all go through this. And if you are just starting out or you are still in this phase, you gotta know its normal and the most important thing you can do is do a lot of work. Put yourself on a deadline so that every week you will finish one story. It is only by going through a volume of work that you will close that gap, and your work will be as good as your ambitions. And I took longer to figure out how to do this than anyone I’ve ever met. It’s gonna take awhile. It’s normal to take awhile. You’ve just gotta fight your way through.</p> </blockquote> <p>Which Jonathan Safran Foer summarizes in three words (from <em>Everything is Illuminated</em>):</p> <p><img src="https://melanie-richards.com/assets/images/content/jsf.jpeg" alt="&quot;We are writing&quot; repeated over and over again to fill a full printed page" /></p> Announcing Badass Lady Creatives 2013-08-06T00:00:00.000Z https://melanie-richards.com/blog/announcing-badass-lady-creatives/ <p class="c-web-preview"><a href="https://pinterest.com/BAladycreatives/boards/"><img src="https://melanie-richards.com/assets/images/content/melanierichards-baladycreatives-screenshot-m.jpg" alt="Badass Lady Creatives on Pinterest" /></a></p> <p>I’m pleased to announce that <a href="https://pinterest.com/BAladycreatives/boards/">Badass Lady Creatives</a> is a thing that exists on the Internet! In the recent past there’s been some drama about lack of female speakers and panelists at conferences in the creative/tech industries. What often goes unnoticed—and which I find more telling—are the small, pervasive ways in which praise, accolades, and respect are unevenly distributed.</p> <p>The aim of <a href="https://twitter.com/baladycreatives">Badass Lady Creatives</a> is to celebrate a wider set of talented individuals. It’s not a fix-all—and there are other worthy topics, re: diversity—but it’s a start. At this moment, there is a <a href="https://pinterest.com/BAladycreatives/boards/">Pinterest</a> account that will serve as a directory of actively-working creative women, and a <a href="https://twitter.com/baladycreatives">Twitter</a> account that will share our favorite pins and news from said ladies. If these networks are not your thing, never fear: I/we are hoping to expand to other media, as well.</p> <p>Speaking of we, I’m so grateful to have some design-comrades curating this directory along with me. Many thanks to <a href="https://pitchdesignunion.com/">Margot Harrington</a>, [Joseph Hughes](text: <a href="http://www.northcoastzeitgeist.com/">http://www.northcoastzeitgeist.com/</a>), <a href="https://unequal-design.com/">Dylan Lathrop</a>, <a href="https://fuzzco.com/">Helen Rice</a>, <a href="https://mariarogal.com/">Maria Rogal</a>, and <a href="https://onlymoreneverless.com/">Stewart Scott-Curran</a> for coming on board with this project!</p> <p>Parting thoughts:</p> <ul> <li>Though the first pins are very US/UK-centric, we plan to feature women on an international scope.</li> <li>Our definition of women is fluid. If you call yourself a lady, you are one.</li> <li>This is a merit-based project. Women will be featured because they are good at what they do.</li> </ul> Launched this week, Off-Work 2013-07-27T00:00:00.000Z https://melanie-richards.com/blog/launched-this-week-off-work/ <p class="c-web-preview"><img src="https://melanie-richards.com/assets/images/content/off-work.png" alt="Off-Work" /></p> <p><a href="http://off-work.com/">Off-Work</a>, a gallery of personal design work, launched this Tuesday. The site is <a href="http://ryanjhubbard.com/">Ryan Hubbard's</a> brain-baby; he wanted to encourage himself and his friends to blow off creative steam on a regular basis. The illustrations also just <em>happen</em> to be sized for desktop backgrounds. We’ve been working on O-W for too many moons than we care to admit, but it’s awesome to see all those coffee-shop sessions come into fruition. I can’t wait until there’s more posts up on the site; with only one post per person, it appears to be a blog-style site, but each person actually has their own horizontal slideshow.</p> <p>Fun observation from <a href="https://twitter.com/eileentjan">Eileen Tjan</a>: “…unintentional color scheme for first posts? ha. :D” Yep, all our illustrations happened to be green, yellow, black, and white.</p> <p><em>This project was designed/conceived by Ryan, built by yours truly.</em></p> Refresh CHS 2013-06-05T00:00:00.000Z https://melanie-richards.com/blog/refresh-chs-june/ <p>Last night was my first event with <a href="http://refreshcharleston.com/">Refresh Charleston</a>, and by “with”, I mean I was sitting in the audience, drinking a beer, and repeatedly dropping my stubby Staedtler 3B. Refresh events are sort of like micro conferences. They’re meant to inspire and connect local creatives, and from what I gather, have somewhat of a digital emphasis (welcome to 2013).</p> <p>The first talk last night at <a href="https://www.blueion.com/">Blue Ion</a> was “Man vs Magnet vs Work: Giving Yourself First Hold”. Matt Smithson (aka <a href="http://www.manvsmagnet.com/">Man vs Magnet</a>) discussed avoiding burnout by managing your work-life balance. The advice was familiar (say no, give yourself first priority, “go outside and elsewhere”), but it’s the sort of message the falls out of my brain weekly and needs to be repeated over and over until I finally start taking multivitamins and walk breaks.</p> <h3 id="yay-things-about-%E2%80%9Cman-vs-magnet-vs-work%E2%80%A6%E2%80%9D">Yay things about “Man vs Magnet vs Work…”</h3> <ul> <li>“I am a human being…not a human doing” — Deepak Chopra. BOOM!</li> <li><a href="http://sheplusplus.stanford.edu/">The She++ project</a>, <a href="http://www.manvsmagnet.com/She">one of Matt’s clients</a>, aims to level out the gender imbalance in the computer science industry. There’s several social reasons why we don’t see as many ladies in tech, and I am excited to see what She++ does.</li> <li><a href="http://manvsmagnet.com/Ford-Foundation-Celebrating-the-International-Fellowships-Program">This entire animation</a> was done in a week, with just ONE long night at the office. The power of work/life balance.</li> <li>Charleston is still a small city, and the creative industry occasionally feels like a small inbred family where everyone knows each other. It was AWESOME seeing work from someone I’ve never met before, and I’m excited that there’s still more talent to discover in my city. And if you do one thing, watch <a href="http://www.manvsmagnet.com/Battle-Of-The-Album-Covers">&quot;Battle of the Album Covers&quot;</a></li> </ul> <p><a href="https://twitter.com/KelJar">Kelsey Jarett</a> (of BlackBaud) and <a href="https://twitter.com/bunmun">Ben Wong</a> (BlueIon, formerly BlackBaud) gave the night’s second presentation, “How Dr Seuss Can Help You Rock Digital Storytelling.” They explored how the familiar fictional story arc can be used as a model for building brands online.</p> <h3 id="in-a-nutshell%3A">In a nutshell:</h3> <ol> <li>Introduction. This sets the scene and defines the status quo. A bit like, “what is life like without the brand?” Using characters (specific names and places!), even if they’re real people, helps.</li> <li>Conflict. Interrupts the status quo. Kelsey and Ben say that a problem correctly introduced “creates doubt about the outcome.” The user will wonder, “if don’t [buy this/support that cause], then maybe [undesirable thing] will happen.” Oh, psychology.</li> <li>Climax. Shows how the brand will change the status quo defined in the introduction. Encourages user action.</li> <li>Conclusion. Results of the action. The audience should feel as though they had a hand in this outcome = customer loyalty</li> </ol> <h3 id="yay-things-about-%E2%80%9Chow-dr-seuss%E2%80%A6%E2%80%9D">Yay Things About “How Dr Seuss…”</h3> <ul> <li><a href="http://www.thesilenthistory.com/">&quot;The Silent History&quot;</a>, a location-based, collaborative novel</li> <li>Introduce new characters when a brand starts to feel stale. They should align with the brand, but add something new (ex: State Farm “Mayhem” character)</li> <li>One audience member mentioned that on a recent project, they individually surveyed each of the client’s team members to see what they though their company story/personality was. In the commonalities lies truth (or at least a collective illusion but wow that’s another conversation).</li> </ul> <p>Looking forward to see what inspiration and camaraderie the next Refresh brings. Check out <a href="http://refreshingcities.com/">this list</a> to see if Refresh is in your city.</p> Synthesize, My Friends 2012-12-04T00:00:00.000Z https://melanie-richards.com/blog/synthesize-my-friends/ <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-justlove.jpg" alt="Poster with a collage of drawn plants that says 'All my best friends eat sunshine'" /> </picture> <p>Way back in September my (18×24 in.) poster design was added to <a href="https://thejustloveproject.com/">The Just Love Project</a>, which looks to raise money for children’s education and other basic needs. <a href="https://www.joshuakrohn.com/">Joshua Krohn</a> charged us all to design something about love, so naturally I decided to go rogue and wax poetic about plants. You can still <a href="https://thejustloveproject.bigcartel.com/product/the-just-love-project-september">buy the poster</a> in all its half-tone glory, or check out all the illustrations <a href="https://thejustloveproject.com/blog/36143058450">at the upcoming show</a>.</p> And Everything Looks Like a Giant Cupcake 2012-08-01T00:00:00.000Z https://melanie-richards.com/blog/giant-cupcake/ <p>This week I’ve sort of been obsessed by M83’s <a href="http://grooveshark.com/s/Raconte+Moi+Une+Histoire/4ehAN7?src=5">Raconte-Moi Une Histoire</a>, a track whose main vocals are a little girl describing a rainforest-frog-induced trip. Googling led me to a <a href="https://pitchfork.com/features/interviews/8680-m83/">Pitchfork interview with Anthony Gonzalez</a>, in which Gonzalez discussed a child-like undercurrent in his synthy music:</p> <blockquote> <p>When I first moved to L.A., I was feeling a bit weird. I was alone, working in my apartment, and suddenly I had these weird memories about being a child. It made me melancholic, crying alone in my apartment, thinking about something I’ll never be able to redo. For me, this album is a tribute to those years of innocence where everything was perfect. I had the perfect childhood. My father was a policeman, and my mother sold fabric in her small store. They were very normal, very simple. When you’re young, you can do anything. And the more I grow up, the less I think that way. Through my music, I’m really trying to convince myself that I can do it. It’s like therapy.</p> </blockquote> <p>What a beautiful, pure way to work. It’s so easy to wrap yourself in a giant stressball of needs and objectives and shouldn’ts when you’re creating in exchange for money. But it’s continually clear: a zen-like state of childlike joy can help us make something much more magnetic.</p> Alvin and the Girl Scouts 2012-07-29T00:00:00.000Z https://melanie-richards.com/blog/alvin-and-the-girl-scouts/ <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-gs-cover-m.jpg" alt="Girl Scout Handbook cover" /> </picture> <p>A few weeks ago I picked up this 1960-edition of the Girl Scout Handbook at an estate sale. I don’t own much ephemera—being in a constant war of thing-like vs. too-much-junk anxieties—but I loved the cover, the illustrations, and I really wanted to spend some time with the content. Not only is the separation of half a century intriguing, I’d always wanted to be a Girl Scout. I think it’s the badges.</p> <p>Yesterday I looked at the credits page for the first time and was surprised to see the designer for the cover was <a href="https://www.alvinlustig.com/">Alvin Lustig</a>. This particular edition was printed 5 years after Lustig passed away, but there’s still something magical about finding a piece by such a prominent designer, which was used and appreciated (?) by its original intended audience.</p> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-gs-singlepages.jpg" alt="Girl Scout Handbook interior" /> </picture><figcaption>That original audience is a little girl named LaBonney Parnell, who gave herself near-perfect scores on all the good citizen quizzes.</figcaption></figure> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-gs-laws.jpg" alt="Girl Scout Handbook interior" /> </picture> <figure class=""><picture> <img src="https://melanie-richards.com/assets/images/content/melanierichards-gs-countries.jpg" alt="Girl Scout Handbook interior" /> </picture><figcaption>Appropriate, as the Olympics are upon us.</figcaption></figure> <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-gs-outdoors.jpg" alt="Girl Scout Handbook interior" /> </picture> <p>Illustrations are by <a href="https://www.google.com/search?num=10&amp;hl=en&amp;site=&amp;tbm=isch&amp;source=hp&amp;biw=1086&amp;bih=989&amp;q=%22eleanor+dart%22+illustraotr&amp;oq=%22eleanor+dart%22+illustraotr&amp;gs_l=img.3...678.4962.0.5105.26.14.0.12.0.0.76.765.14.14.0...0.0...1ac.IB5qFI7Jw0A#num=10&amp;hl=en&amp;tbm=isch&amp;sa=X&amp;ei=gYoVUJDQJoi88AT2jYHoDA&amp;ved=0CEkQvwUoAQ&amp;q=%22eleanor+dart%22+illustrator&amp;spell=1&amp;bav=on.2,or.r_gc.r_pw.r_cp.r_qf.,cf.osb&amp;fp=ecda5c9499c48f68&amp;biw=1086&amp;bih=989">Eleanor Dart</a> and <a href="https://www.google.com/search?num=10&amp;hl=en&amp;site=&amp;tbm=isch&amp;source=hp&amp;biw=1086&amp;bih=989&amp;q=%22eleanor+dart%22+illustraotr&amp;oq=%22eleanor+dart%22+illustraotr&amp;gs_l=img.3...678.4962.0.5105.26.14.0.12.0.0.76.765.14.14.0...0.0...1ac.IB5qFI7Jw0A#hl=en&amp;tbm=isch&amp;sa=1&amp;q=%22alison+cummings%22+illustrator&amp;oq=%22alison+cummings%22+illustrator&amp;gs_l=img.3...37400.41143.1.41221.18.16.1.0.0.6.133.1547.8j8.16.0...0.0...1c.lTms4mfBmw4&amp;pbx=1&amp;bav=on.2,or.r_gc.r_pw.r_cp.r_qf.,cf.osb&amp;fp=ecda5c9499c48f68&amp;biw=1086&amp;bih=989">Alison Cummings</a>, neither of whom I can find much on.</p> Lord Have Mercy, Pre-T33n Design 2012-05-03T00:00:00.000Z https://melanie-richards.com/blog/lord-have-mercy/ <p>I am giddy.</p> <p>I’ve been thinking a lot lately about my discovery of HTML, right around sixth grade, and how that pushed me down a track to becoming a web-focused designer. Thinking about table-based layouts made me nostalgic, and I wished that I had saved some record of my earliest attempts at making sites.</p> <p>Thanks to <a href="https://web.archive.org/">Wayback Machine</a>, I can finally show off the travesty I was making in the early days of user-generated web (and would love to see your tragic firsts too!).</p> <p class="c-web-preview"><img src="https://melanie-richards.com/assets/images/content/melanierichards_homepage.jpg" alt="Expage screenshot" /></p> <p>Here we have <a href="https://web.archive.org/web/20021008041711/http://www.expage.com/glowygirl">expage.com/glowygirl</a>, my very first website. At the time I hadn’t heard of Geocities or Angelfire, so in order to build a site on Expage I had to register one page at a time. I’m guessing the empty box had an image that wasn’t cached. Fruity Raindrops was the successor, the pinnacle of my pre-teen sites, if you could call it that. Sadly the Wayback Machine didn’t save much from there.</p> <p class="c-web-preview"><img src="https://melanie-richards.com/assets/images/content/melanierichards_menu-m.jpg" alt="Expage screenshot" /></p> <p>The content menu. Yes, that background is animated. All girly websites at the time had Me, You, and Fun Stuff sections. If you were “creative,” you named them something interesting. Apparently I deemed myself ~<em>~ The Princess ~</em>~</p> <p class="c-web-preview"><img src="https://melanie-richards.com/assets/images/content/melanierichards_pagenames.jpg" alt="Expage screenshot" /></p> <p>Page name suggestions! If you can read them.</p> <p class="c-web-preview"><img src="https://melanie-richards.com/assets/images/content/melanierichards_award.jpg" alt="Expage screenshot" /></p> <p>Apparently I was cool enough to distribute awards. Yay for circa-2002 marketing tactics.</p> <p>And finally, Melanie’s website tips, 2002, verbatim:</p> <ol> <li>Use a layout to keep it nice and neat.</li> <li>Don’t be a copy-catter off of other sites.</li> <li>Offer to link peeps on ur site.</li> <li>Include graphics on ur site.</li> <li>Have things available for peeps to put on their site.</li> <li>Make ur page bright and colorful.</li> <li>Don’t have a bunch of pop-ups–they get ANNOYING!</li> <li>Have a page rater.</li> <li>Have lots of subpages.</li> <li>Learn tons of html from <a href="http://www.funky-chickens.com/">http://www.funky-chickens.com</a> make sure all linx r correct–broken linx get ANNOYING, 2</li> <li>Get a guestbook from somewhere lyk <a href="http://www.bravenet.com/">http://www.bravenet.com</a>.</li> <li>In fact, get a lot of kewlio things @ Bravenet.</li> <li>Don’t b boring! Here’s boring: your name, shoutouts, thanks 4 goin 2 my site, tell ur friends about it. I’ve seen a lot lyk that and they honestly stink!</li> <li>Have fun and CONSTANTLY expand ur site! Effort will b noticed!</li> </ol> Execute 2012-05-01T00:00:00.000Z https://melanie-richards.com/blog/execute/ <p>I have a theory that everyone’s best assets are also their worst. To remind myself of the dangers of wanting to learn everything, here’s a partial list of the things I’ve wanted to learn—in some cases, to deepen partial knowledge—in the past year:</p> <blockquote> <p>Illustration, bookmaking, history (local, federal, world), human-interest journalism, microfiction, zine crafting, hiking, novel-writing, photography, street hockey, screen-printing, Riso printing, linocut printmaking, cross-stitching, sewing, cooking, Ruby on Rails, Russian language, video art, performance art, dance (hip-hop, modern, ballet), spoken-word poetry, singing, public speaking, short-story-collection writing, starting a new language, saving an old one, gardening, grilling, woodworking (whittling, making furniture), Polish language, the art of cocktail-ery?, stamp collecting, Chinese brush painting, Norse mythology, [deep understanding of] local and federal government, international relations, the science of environmental policy, etymology, Esperanto, Communist wooden language, EVERYTHING ABOUT COLD PLACES EVER, etc, etc, etc…</p> </blockquote> <p>Curiosity is the creative’s life blood. But to attempt to become sufficiently adept at all of the above would be a lifelong struggle with distraction, half-baked attempts, and I’m guessing, a pinch of loneliness. It’s few of us that can be good at everything, so we have to pick: what’s important now? What gives me life? What makes me a better designer, a happier person?</p> <p>Priorities.</p> Creeper Doodles 2012-04-26T00:00:00.000Z https://melanie-richards.com/blog/creeper-doodles/ <picture class=""> <img src="https://melanie-richards.com/assets/images/content/melanierichards-creepy-doodles-m.png" alt="Doodled pattern" /> </picture> <p>Knew I wanted to draw something tonight but couldn’t think of what. Decided to just doodle with an empty mind; somehow <em>Clockwork Orange</em> popped in my head and this creepo doodle pattern spiraled out from there.</p>