Work in progress overview of open source projects, techniques, tools, and resources with which this site was built.
The term colophon is often used for publishing. Derives from the Latin colophōn and means “summit” or “finishing touch”.
Typography & Design
The webfonts used on this website are Catamaran for H1 headlines, Cabin for body content, and Roboto Mono for monospaced elements (e.g., code snippets). These fonts are downloaded via Google Webfonts Helper and self-hosted.
A modern native font stack supports UI system fonts as a fallback for the webfonts mentioned above.
The logo has been designed by Linda Armelius.
The icons are made by Pixel Perfect on Flaticon.
The micro-browsers preview image is from Shahadat Rahman on Unsplash.
rem CSS units are used everywhere except for media queries rulesets. By changing the font-size of the <body> element, all layout dimensions change proportionally.
Take a look at the living styleguide to better understand the common visual language of the components of this website.
Code
I used HTML5 to author this website’s page markup. PHP is used for dynamic HTML includes and classes, and CSS/JS cache-busting. The Eleventy generator may be the best tool to make the site scalable and 100% static.
bullframe.css boilerplate and SCSS in a Sass/BEM architecture are used for page styles.
Just a few lines of vanilla JavaScript plus a couple of polyfills to handle cross-browser compatibility and some npm installs for the interaction code. The code syntax highlighting is made with Lea Verou’s Prism JS, and the dark theme in use is called “tomorrow night”.
Git and GitHub are used for version control and source code hosting. Visual Studio Code serves as a text editor (with several useful extensions), terminal, and debugger.
File Processing
Gulp.js and some related npm packages (e.g., autoprefixer, browser-sync, imagemin) are used as building tools to automate, precompile, generate, and optimize files for this website. Check out gulp-starter, a fast and powerful gulp boilerplate available on GitHub.
Chrome DevTools, Google Lighthouse, critical CSS, assets preloading, lazyloading, minification, compression, and gzipping are utilized to achieve the best possible performance on mobile and desktop browsers. Try it out here. Detailed CSS stats are also available.
Server & Hosting
Under the hood, there is a simple shared Linux server with a cPanel.
The Apache configuration file (.htaccess) is a customized version of the one from HTML5 Boilerplate, plus a couple of useful tricks from Jeff Starr’s Perishable Press. The server config file is used for various purposes such as cross-origin access to webfonts, URL rewriting, redirects, cache control, gzipping, blocking access to directories and files, and setting a CSP for security.
This site is hosted on a Netsons SSD 50 storage. The assets for Iubenda and Google Analytics are hosted on their respective servers.
Accessibility
A basic keyboard-navigation is supported by a clear focus indicator using the :focus-visible CSS pseudo-class. Each page on this website has a “skip to content” link at the top and a “back to start” link at the very bottom. You should be able to zoom each page up to 200% without any issues as well. ACR toolkit Chrome extension was used to review most of the a11y issues. There are ARIA roles and attributes, although this is still a beta version. The W3C markup validity is supported as much as possible.
A user without JavaScript enabled should see all the content, but the website may not function properly (e.g., dark mode toggle is hidden). Modernizr’s .no-js class is utilized to fix some UI issues.
Testing
This website has been tested in multiple browsers and devices using BrowserStack and a wide collection of automatic testing tools.
Privacy and Cookies
Google Analytics tracks visitors. The cookie consent, the privacy policy, and cookie policy are generated via Iubenda. To view the cookie consent again, clear the browser cache or open this website in a new incognito/private window.
Do you have questions or comments? Get in touch by email 👋