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 designed by Pria Ravichandran for the H1 headlines, Cabin by Impallari Type for body content and Roboto Mono by Christian Robertson for monospaced elements (e.g. code snippets).
These fonts are downloaded via Google Webfonts Helper and self-hosted.
I used rem units everywhere but for media queries rulesets. By changing the font-size of the <body> element, all the layout dimensions change proportionally.
I used a modern native font stack to support as much as possible UI system fonts as a fallback for the webfonts above.
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 for version control and source code hosting.
Gulp.js and some related npm packages (e.g. autoprefixer, browser-sync, imagemin) were used as building tools to automate, precompile, generate and optimize files for this website. You might want to take a look at gulp-starter, a fast and powerful gulp boilerplate available on GitHub.
Under the hood, there is a simple shared Linux server with a cPanel.
The Apache configuration file is a customised version of the one from HTML5 Boilerplate, plus a couple of useful tricks from Jeff Starr’s Perishable Press.
The .htaccess file in use is used for cross-origin access to webfonts, removing the www. at the beginning of the URL, rewriting URLs, redirects, controlling cache, gzipping, block access to directories and files, and set a CSP for the bad guys out there.
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.
I used the ACR toolkit Chrome extension to get an overview of most of the a11y errors and warnings.
There are ARIA roles and attributes, but the job here is just a beta version.
The W3C markup validity is supported as much as possible. Give it a try.
I used Modernizr’s .no-js class to fix some UI issues though.
Do you want to see the cookie consent again? Clear the browser cache or open again this website in a new incognito/private window.