Because without documentation, what even the fuck am I doing? A summary of bugs caught and released, accessibility and performance improvements, explorations and learnings in markup.
File an issue on Github
17 July 2019
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.
- Changed CSSCamp to past event type, added slides.
- Fixed incorrect link for STL Design Week slides.
5 July 2019
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.
- 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.
- Broke out
_zigzaginto its own partial. Before, I kept it only in my
_homepartial, but as I start to create additional pages, feels like this allows it to be universally accessed and managed. It could use some
@mixinusage to make it leaner and DRYer.
- 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
Accepted a few conference gigs (!), broke my MBP2017 keyboard (after months of frustration with the hardware spacebar issue), and migrated to Netlify!
- 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!
- 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-threefor 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
- 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.
- Changed a few
divsto more meaningful semantic tags here and there.
- 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
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.
- Added section for sponsorship to both encourage new patronage and to thank current ones.
- In some CSS explorations, I learned that
filtercan'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.
- 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.
font-display: swapto my
font-display: swapdoes 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).
prefetchas 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?
noopenerto 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
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.I also learned a lot about semantic HTML, which improved the site's accessibility.
From a content strategy perspective, I reframed myself for job hunting and speaking events.
- 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
outlineto 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
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.
- Added third titling style typeface
- Renamed zigzag dividers to be more intuitive and reusable (colours as opposed to arbitrary sequence numbers).
- Changed all raster
<imgs>from JPGs to WEBPs. In order to make sure browsers that don't support WEBP, I used to
<source>to build in appropriate fallbacks. Building all those image stacks was a bitch, but online image generators helped me out there.
srcsetsso 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
.htaccessfile, 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!
<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
divsand 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.
alttags to be more about the content, and less formal analysis. We have a tendency to overdescribe. Conciseness and clarity over comprehensiveness.