Release Notes

1.3.1

10 June 2020

In an effort to take up less space on Twitter, I'm rechanneling my writing efforts back into my blog.

Content

• Added several posts under 'the work' tag
• Added Rooki Design interview, UX Collective takeover, Tech4Humans podcast

Systems

• Added tagging structure and feature to writing page
• Added summary feature with little cute blob

Accessibility

• Fixed incorrect link on about page
• Ensured all pages used h1 tags

1.3.0

11 April 2020

Pandemic isolation post; in full honesty, a lot of this work was done over the past month+; I just got lax about updating this page.

Content

• Added Eleventy tutorial, Dear Developer series.
• Updated Speaking page: Deleted all 2020 events cancelled due to COVID-19. ☹️
• Updated Speaking page with slides, added a few new events!
• Hiding Work page as I assess its future.
• Fixed borken RSS links.

Systems

• Utilised Sass maps to remove some redundant code that could be mapped instead.
• Added improved :focus styles across the site
• Converted some hard-coded elements into njks templates and utilised for loops, such as speaking and writing sections.
• Changed some grid elements into flexbox for better support.
• Honestly broke some systems in an effort to streamline performance.

Accessibility

• Added improved :focus styles across the site

Performance

• Chose new fonts, supporting Klim Foundry, a smaller house than previously. Subsetted fonts.
• Served minified stylesheet inline; still more efficiency work to be done.
• Ongoing: Deleting unused styles as I discover them.
• Served all SVGs in-line.

1.2.8

2 February 2020

I survived 2020—including giving my new talk—update.

Content

• Added Media page for podcasts, articles, and interviews.
• Updated About page, adding more helpful context for my work.
• Updated Speaking page with slides, added a few new events!
• Hiding Sponsors page as I assess its future.

Systems

• Utilised Sass lists to condense and to clarify some verbose code, particularly around generating background colours for front-matter content.
• Fixed some broken zigzag components, which were affected by above editing.
• Included shop link in header, learning how to include a static link in with generated nav.
• Updated footer year lmao.
• Deleted some unused code. WOOP!

Version 1.2.7

23 November 2019

I finished all my 2019 speaking engagements update.

Content

• Wrote The Shitpost Showdown.
• Updated Speaking page with slides for a few conferences.

Version 1.2.6

3 November 2019

Post-October conference gauntlet update.

Content

• Updated speaking events: Moved Concatenate, Thought at Work, and a11yTO to past.
• Added JS Heroes.

Version 1.2.5

7 September 2019

First post-Reactgate updates. I'm now perpetually exhausted.

Content

• Updated speaking events: moving Write/Speak/Code, Clarity, and Joint Futures to past.
• Added Concatenate, New Adventures, and UX in the City.
• Updated blog posts to writing section.
• Removed Patreon from sponsors page.

Systems

• Utilised nunjucks templating better, using includes for replicated sections. Excited to continue to expand upon the power of Eleventy to write less markdown manually and allow the SSG to take care of it.
• Emphasised use of dark and light within templating system.

17 July 2019

Version 1.2.4

Post-CSSCamp updates. Feeling a lot of different feels, from complete highs of finishing my first keynote to complete exhaustion. A longer reflection is in order; for now, a quickie update.

Content

• Changed CSSCamp to past event type, added slides.
• Fixed incorrect link for STL Design Week slides.

5 July 2019

Version 1.2.3

I am tired as all get out bc fireworks kept me up all night and I kicked off a new streaming collab called The Diff with the incredible Henry Desroches (aka @xdesro). But I'm determined to get myself disciplined again and release small things every Friday. Help hold me accountable? Today's release was focused around minor content updates.

Content

• Added The Diff to the abridged work section.
• Added NEJS Conf, Design+Diversity, Write/Speak/Code to my 2019 conference lineup.
• Fixed a few fudged conference links thanks to an issue someone filed on my GitHub!
• Added Erik Riedel as Lovers level sponsor. Thank you, Erik!
• Added Amberley Romo, Debs, Henry Desroches, Oscar Braunert, Yura as Star sponsors! Thank you!
• Added my Codepen (freshly minted PRO user, woop!) to the footer.
• Added RSS feed (technically a few weeks ago). I hope I'm doing this right.

Systems

• Broke out _zigzag into its own partial. Before, I kept it only in my _home partial, but as I start to create additional pages, feels like this allows it to be universally accessed and managed. It could use some @mixin usage to make it leaner and DRYer.

DesOps

• To improve my own workflow, I've started filing issues for myself on GitHub. My hope is this will hold me accountable.

17 May 2019

Version 1.2.2

Accepted a few conference gigs (!), broke my MBP2017 keyboard (after months of frustration with the hardware spacebar issue), and migrated to Netlify!

Content

• Added JSConfEU, Mozilla, CSSCamp, and #a11yTO to my conference lineup. Cue upside-down-face emoji.
• Upgraded Webflow to Empress sponsorship (thanks, y'all!), which meant adding an Empress area. Not feeling resolved about the design solution here.
• Added Amanda Johnson, Heidi Olsen, and Vanessa Wang as Star sponsors! Thank you!

Systems

• Found that using a super-condensed font was hard to read for longer talk titles. Instead opted to use serif for my speaking section; feels cleaner and less dense.
• Took new linking strategy for talks, so I can share both videos and slides as separate links. Triggered by PerfMatters talk being added!
• Added a span-row-three for use at larger screen sizes (triggered by the Empress addition to sponsors section), though this time I remembered to write it for my full screen-size range, bc I will need it later.
• When validating my HTML, I realised a few SVG textPaths had duplicate ids and hrefs. Whoops.

Performance

• Installed Speedcurve. I'm still very new to this whole performance bit, but I like the way it visualises the filmstrips and ties performance to user-engagement.

Accessibility

• Changed a few divs to more meaningful semantic tags here and there.

Backend

• Migrated to Netlify, which feels like it spoils developers compared to what we had to go through before. I'm still very new to it, but I love that SSL certificates are built in, that there's a compiler/minifier, and RIP FTP! All performance and developer experience wins all around.

26 April 2019

Version 1.2.1

Launched my Patreon, so this update was fueled by adding a sponsorship section to reflect that. Adding a section visually impacted flow, which gave me a chance to explore the extended colour palette.

Content

• Added section for sponsorship to both encourage new patronage and to thank current ones.

Systems

• In some CSS explorations, I learned that filter can't be compounded. But, because it has overlap qualities with box-shadow, I doubled them up for this fun 8-bit effect to highlight top-level sponsors. It's a progressive enhancement, so I'm less concerned about the fact that its browser support isn't across the board.
• A friendly reminder to myself that I should always just write my full @mixins. Because I structured my CSS to media-query at the component level (in markup), I always end up needing that flexibility. I get lazy sometimes and always regret it. I really enjoyed refactoring my CSS this way.

Performance

• Broke up with Typekit. It was too heavy. I purchased font licences and localised all my typography. I found this webfonts article by Thierry Blancpain to be extra helpful.
• Applied font-display: swap to my @font-face declarations. What font-display: swap does is it tells the browser to use your fallback fonts while your custom fonts are being downloaded, so the user isn't waiting for fonts to load to read. Support is not ubiquitous yet, and hosted fonts like Typekit and Google Fonts don't support it, so you have to self host (see above).
• Added prefetch as a support for font-display: swap. Together, this the dynamic font-loading duo we need.
• Friend Zach Leatherman's article on comprehensive webfonts is one of the best resources. Zach is so good at explaining technical things in an accessible way.
• Also, friend Mandy Michael's talk on variable fonts inspires me as a next step.
• Oh, and because of these improvements, I kicked my PageSpeed score up from 98 to 100 for mobile. Now, I'm rocking double 100s! I'm super proud of this. Have you checked your PageSpeed Insights?

Security

• Added noreferrer and noopener to all my external links. Lots of nuance here, but tl;dr is that in doing so, it does not allow browsing data to be passed forward to the site being opened and closes vulnerabilities of opening a new browser window when using target="_blank", respectively. Because I don't care to invade my users' privacy, this has no impact on my analytics. People who want to steal information about their users by way of Google Analytics and other tracking should avoid this. Also, I learned that this doesn't have a negative SEO impact, which many misunderstand it to.

15 April 2019

Version 1.1.1

Tax day release (why should I pay taxes to a corrupt government with a president who doesn't pay taxes?) made some substantial improvements to accessibility and performance. Inspired what I learned at PerfMatters, I implemented some major performance improvements.

From a content strategy perspective, I reframed myself for job hunting and speaking events.

Content

• Added Canary in a Coal Mine to writing section.
• Built out speaking section into its own tier for past and future gigs! Very proud of the fun use of CSS radial-gradients() and outline to get the stamp effect. In unsupported browsers, it has more of a puzzle piece feel, which I dig.
• Added city stamps to show first (!) international speaking gigs! First time experimenting with SVG textPaths. The semantics are odd to me; will need to read more. Also, when running standard accessibility tests, it can get confused about contrast checking, so I had to manually check.
• Built out about section into its own tier. Rewrote it to be a more coherent bio.

Systems

• Added third titling style typeface
• Renamed zigzag dividers to be more intuitive and reusable (colours as opposed to arbitrary sequence numbers).

Performance

• Changed all raster <imgs> from JPGs to WEBPs. In order to make sure browsers that don't support WEBP, I used to <picture> with <source> to build in appropriate fallbacks. Building all those image stacks was a bitch, but online image generators helped me out there.
• Added srcsets so that the appropriate image size is served up. Chris Coyier's article on responsive images was so helpful!
• Replaced the heavy-ass Taco Bell gif with a cute SVG. Ultimately from a content perspective, it wasn't offering its performance weight. Bye boi, bye.
• Minified all my code: SVGs (using Jake Archibald's SVGOMG) and CSS file using a VSCode extension.
• Subsetted Typekit fonts to dispaly only Roman characters.
• Implemented cachine. Holy hell was this hard to figure out. I presumed that I'd append it to my .htaccess file, but none of the tutorials explicitly mentioned this.
• Started the day with PageSpeed scores of 91 (mobile) and 94 (desktop). Ended at 98 and 100, respectively!

Accessibility

• Created <nav> area with anchor links to help access information more fluidly. Reminder: If you are about to use an aria-label, first ask yourself: Is there a semantic tag that intrinsically provides that landmark role? (The answer is almost always yes). I see a lot of navigations that are made with divs and this makes me cry a little bit.
• Replaced seasonless <divs> with semantic HTML. What a joy for screenreader users to know the sections! I also had a revelation that <divs> should only be used for things that have no content consequence. Said another way, if a section has meaning from an information architecture perspective, it likely has a relevant semantic HTML tag. Taking this approach, I think that <divs> should only have computational meaning; to aid in making something look a certain way.
• Rearranged and removed h tags that didn't make sense. Thanks to my super-smart friend Marcy Sutton for pointing this out. Remember kids, h tag order is separate from your visual hierarchy. Don't use h tags to represent sizing; make that agnostic.
• Added Skip to content link with the help of my brilliant friend Zoë Bijl.
• Rewrote alt tags to be more about the content, and less formal analysis. We have a tendency to overdescribe. Conciseness and clarity over comprehensiveness.