When you code similar things every day, it’s easy to ignore the fact that you’re repeating yourself and digging into old code to copy-paste from “that one time you did something similar”.
In addition, I often find myself referring to old projects as teaching tools, and telling learners to ignore the more complex parts of a project so I can use it to demonstrate a simple concept. Why not just abstract out those concepts and let them learn by building on them?
Introducing two trivial front-end code snippets I reuse too frequently:
Screen size above the breakpoint? Normal header menu. Screen size below the breakpoint? JS-powered hamburger menu.
This is the simplest possible implementation of a responsive menu that doesn’t rely on any libraries, including jQuery. Or Bootstrap. Please, please never use Bootstrap just to get a mobile menu.
This template saves me the extremely boring 5-10 minutes I spend on autopilot at the start of every static website, which happens about once a week. It includes linking CSS and JS, setting title and meta viewport, some basic global styling, and the proper
.gitignore configuration for SCSS.
I’m pushing aside perfectionism and releasing these as-is for now. Since I’m dogfooding my own code, they’ll be improved upon as I use them and find issues. I’ll document known issues/considerations as I go.