February 17, 2020
One of my goals this year is to make this site feel more like a journey rather than a collection of disconnected tutorials. I fall asleep as soon as anybody starts talking about “user retention” or funnels, but I wanted to make it more obvious how everything fits together, the order of things, and what you should do next after you finish reading a page.
So, I spent this long weekend adding a left nav to the site. Here’s a timelapse of the process:
This came together relatively quickly, mostly thanks to the magic of flexbox. I briefly considered going with a full-width top nav, but decided to stick with having different sections centered in the page. I fall back to this pattern pretty often, but I think it works pretty well.
When all you see is the finished product, it’s easy to assume that its creation was a one-step process. This can be especially unhealthy for beginners who take that as evidence they don’t belong. “I don’t know how to add a left nav to a website, therefore I must be bad at web development!” As a creator, it’s also easy to hide behind this misconception, to only show the polished end result to the world. But I think it’s important to demystify the process of problem-solving, and to show that research and debugging is a natural part of coding.
With that in mind, here’s everything I googled while implementing the new left nav:
html newline between css classes jekyll check if variable exists jekyll double curly brackets jekyll previous and next css flex left and right jekyll or jekyll comments jekyll code comments jekyll functions jekyll null jekyll where cache jekyll "where" cache happy coding jekyll previous and next ruby update jekyll github pages jekyll version update ruby ruby "gem update jekyll" doesn't work Dependency Error: Yikes! It looks like you don't have jemoji or one of its dependencies installed. In order to use Jekyll as currently configured jemoji jekyll jemoji not installed "Could not locate Gemfile or .bundle/ directory" jekyll create gemfile for existing site jekyll gemfile "Could not find gem 'jemoji x64-mingw32' in any of the gem sources listed in your Gemfile." windows disable "terminate batch job" prompt zombies run play two missions should I eat after running? running calorie calculator dreams ps4 is we first person second person should tutorial be written in first or second person how wide should a website be website how many characters per line flexbox left nav jekyll where cache jekyll "where" cache coding horror css flex left and right width css flex width css flex ignores width of child jekyll liquid comment html nav tag html nested nav tag jekyll liquid string contains css select element after class css list style css list-style dash Ashwin Maroli jekyll flexbox div height fit content css select style of nesting css indent wrapped text css text-indent css detect mobile css hide div on mobile css visibility hidden vs display none css visibility collapse css flexbox ignores viewport flexbox default flex-grow css ul inside flexbox div shows as inline melanie martinez copycat happy coding image magick decrease gif file size 1920/600 600/1923 1040*600/1923 imagemagick gif reduce colors image magick gif first and last frame longer resting heart rate weather google search history jekyll post not showing up but url works jekyll post direct url works but not included in posts jekyll incremental doesn't see new posts flexbox prevent overflow css flexbox define: timelapse xkcd scared all the time
I googled 80 things this weekend, ranging from fundamental concepts, to syntax quirks, to error messages. You can see me get distracted by going down a rabbit hole of updating Jekyll, which ended up improving my build time by 100x! I also spent a couple hours debugging the layout on mobile devices, which ended up being an existing problem caused by a single line of CSS on the blog homepage. And just to be meta, I’ve included what I searched while writing this post.
In the name of demystifying this process, I want to point out that I do the same kind of research at my job. I’ve been programming for almost 15 years, I’ve been a “software engineer” for over 11 years, and I’m currently the TL of a frontend team at Google. But I still have to google every time I want to align two divs. So if you feel like you have to research everything, or like you encounter errors every 5 minutes, don’t worry- that’s normal!
Anyway, I’m pretty happy with the end result. Flexbox is magic to me, so I’m still getting used to not specifying every width myself and trusting the layout to do all the work for me. I’ll probably keep tinkering with it, but for now I think it improves the overall flow of the site.
Let me know what you think, and feel free to post your own google search history if you’re brave enough!
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!
Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!