Happy 🦃thanksgiving🦃! I've decided to use my free time this break to rebuild my website from scratch. I'm using some really cool new technologies for this, and I'm going to run through each of them and how they contributed to the site.
You might notice how quick it is to click around the site (try clicking on the links at the top and then coming back here), that's because of React! React allows you to build a website in components, and then only re-render the components on the page that change. So if you click on "About", React recognizes that the header at the top of the screen doesn't need to change, and only reloads the body content. This makes webpages feel more like downloaded applications.
import styled from "styled-components" const Header = styled.h1` padding-top: 20px; color: plurple; `
and then in your render function you would put
<Header> My header! </Header>
One of my favorite things about styled components is it makes it trivial to read someone else's code at a glance. Here's a screenshot of some code from my "About me" page, see if you can you figure out what's going on:
Ah, isn't that nice? No more wondering what's in that mysterious
div, it's the
It's important to note that Styled Components are very restrictive in what they effect. If I apply
color: chartreuse to the
<ContactContainer> it will not cascade down to the
<ContactIcon> unless I use a nested selector. There are pros and cons to this, it does make it very clear what css styles are applied to which component, but it can mean finicking with nested selectors or extended components if you actually want to cascade down (aka the 'C' in 'CSS'). If your website is highly componentized Styled Components may be exactly what you're looking for, but if you need that cascading behavior you may want to look elsewhere.
GraphQL is a data query language built into Gatsby. I use it in this site to automatically create blog posts from
.md files, and to query the images and other assets. To learn more about this process, see part 4 of the Gatsby tutorial because honestly, I barely understand it yet.
Gatsby provides some awesome ways to render previews of images. My favorite is the tracedSVG method, which uses some fancy-schmancy algorithm to create an outline of your image rendered as a tiny SVG file, and shows that to the user before the final image is finished loading in. Since this is Thanksgiving, here's an example with a Turkey:
You can learn more about how Gatsby handles images here.
Thanks for taking the time to read through my blog post, if you've made it this far you might be interested in the source code for my site, which is available here. If you have any questions, please feel free to shoot me a message on twitter. Happy holidays!