Site goals
Now that I've got things rolling with this new site, here's some of the territory I'm hoping to explore while also creating a place to catalog my thoughts and showcase some of my current work. What would a personal website be if it wasn't a place to try new things, break stuff, and learn something in the process?
In no particular order...
CSS Grid
I've been working with CSS Grid on a large decoupled higher-ed project recently. In that case, we're having to polyfill for IE11, using autoprefixer which...works, but also restricts the features of Grid that are at your disposal and forces you to write your Grid styles rather verbosely. I'm not worried about IE11 with this personal project, so I can take full advantage of what's available. Woo! I might even order this poster...
A colleague shared this nifty Full-Bleed Layout Using CSS Grid trick from Josh Comeau for a quick-n-easy layout that, for now, is keeping things nice and readable with the ability to easily add full-width sections until I start to need more complex layouts.
CSS Custom Properties
I saw an amazing Dynamic CSS presentation by Miriam Suzanne at Design 4 Drupal 2019 where she really displayed the power of CSS Custom Properties paired with other modern CSS features like calc() and Grid. We're using Custom Properties on the project mentioned above but, to be honest, I don't fully understand them. This ought to be a good place to learn and practice.
Variable fonts
At NEDCamp 2019, Jason Pamental presented an intriguing session called Typographic Design Innovation with Modern CSS & Variable Fonts. As a designer at heart, nothing excites me more than the progress made recently with web typography. Right now on my site you are reading the variable version of Literata. Check out A Variable Fonts Primer as a super cool resource.
Dark mode
I'm a dark mode fan all around. I think the prefers-color-scheme media query is pretty neat. I've got it working on an extremely basic level right now – go to System Preferences > General then switch the Appearance setting between Light and Dark. I endeavor to play with this a bit more.
Next.js
I originally planned to do this site with Gatsby and Drupal. I've worked through two decoupled projects with that setup in the past year, though, and thought it might be good to try something similar but also different. I chose Next.js because it is a React-based static site generator like Gatsby but with some differences I figured I'd try and understand.
I've also decided I don't need a CMS for my personal site so I'm abandoning that idea all together and going straight up Next and working with MDX to author content. With the simple push-to-Github-to-deploy-changes-in-30-seconds that is possible with Vercel (or other cloud hosts), publishing and updating is so quick and simple right from the command line that I felt like trying to configure a CMS and wire everything up would just slow my progress from the start. Since I'm the only author, I'll keep it simple.
Theme UI
I don't hate CSS-in-JS like some people do. I've grown to embrace it, but mostly use CSS Modules since it is an authoring experience closer to what I'm used to with traditional CSS. I typically work on custom projects where all of our base styles are custom defaults. I'm interested in trying out Theme UI as it seems like a good, sensible foundation that I can actually customize without having to override everything along the way. We shall see.
Storybook
I love Storybook. I've implemented it on a couple projects and it is so fun and useful. I reaaaaally love developing dynamic components. Once I get a chance to plan out more parts of the site and organize my styles better, I'll start a branch to add Storybook as a catalog of the site's design system.