Lachlan's avatar@lachlanjc/notebook

Wednesday, August 14, 2019

  • Built Hack Pennsylvania recap site
    • Made this entirely on Glitch, which was a new experience for a full JS site. Great experience now that I've got the watch.json files sorted out.
  • Organized my Glitch profile, made some Collections for Hack Happy Valley, Hack Penn, my Hack Club, etc. I love Glitch.
  • Got my Ruined by Design zine

Theme UI

After making the Hack Penn recap site, I feel like I finally understand Theme UI & MDX now. It's an incredible DX, where I don't feel like I'm writing the same boilerplate code over & over like I do with styled-components/DS/my previous stack. You can't go back.

I love how with MDX, your content is separated from your code. Makes it so much more approachable, too.

One interesting thing is the sx object for styling props. Initially it looks like a downgrade—why not use first-class props like in DS? (Historical note: this is actually a switch back to how Rebass v0 did it with inline styles! I was in 8th/9th grade when that happened.) But once you're using it, the sx object prop is so much better. The syntax is easier to type & format than JSX props, & mostly, it gives you an escape hatch. Need to do a weird selector or psuedoelement or make a little change to a tag inside? You don't need to graduate to a full-on styled-component at the top of the file with two lines of code in it, & do the awkward balancing act between attrs, defaultProps, & JSX props, you can just open up sx={{ }} & make the change right there. It encourages a much healthier balance of components—you can easily recognize when a component is getting unweildy in your MDX & move it over to a JS file to be resuable.

Before Theme UI, I was feeling kinda done building Gatsby + DS sites. I've made like a dozen, & maintained hackclub.com, 2019.hackpenn.com, hackhappyvalley.com, statehigh.hackclub.com, & so many others. It's not a bad library, but I was getting tired of a lot of little patterns I didn't love.

With MDX & Next.js/Gatsby & Theme UI, I've got something new, & it feels distinctly better. It's going to be awhile before this catches on, if it ever becomes at all popular, but in the meantime, like I said about Next.js, it makes me want to build things. That's when you know you've got a really incredible stack.