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 icons are made by Pixel Perfect and downloaded from Flaticon.com
Take a look at the living styleguide to understand better the common visual language of the components of this website.
Code
I used HTML5 to author this website’s pages markup. PHP just for dynamic HTML includes and classes, and CSS/JS cache-busting.
Eleventy generator may be the best tool to make the site scalable and 100% static.
bullframe.css boilerplate, SCSS, BEM and some IE11 hacks in a Sass architecture are used for page styles.
Just a few lines of vanilla Javascript plus a couple of polyfills to handle cross-browsers compatibility and some amazing 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 for version control and source code hosting.
Visual Studio Code as a text editor (with some useful extensions), a terminal and a debugger.
File processing
Gulp.js and some incredible related npm packages (autoprefixer, browser-sync, imagemin among the most valuable) were used as building tools to automate, precompile, generate and optimize files for this website.
I used Chrome DevTools, Google Lighthouse, critical CSS, assets preloading, lazyloading, minification, compression and gzipping to get the best possible performance on mobile and desktop browsers. Give it a try.
You can also take a look at detailed CSS stats.
Server & Hosting
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.
This site is hosted at Netsons.
The Iubenda and Google Analytics assets use their own CDNs.
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.
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.
A user with JS disabled should see all the content but the website shouldn’t work properly (e.g. dark mode toggle is hidden). I used Modernizr’s .no-js class to fix some UI issues.
Testing
This website is being tested in multiple browsers/devices using BrowserStack and a wide collection of automatic testing tools.
Privacy and cookies
I used Google Analytics to track visitors.
The cookie consent and the privacy policy are generated via Iubenda.
Clear the browser cache or open again this website in a new incognito/private window if you want to take a look again at the cookie alert.
Suggestions, revisions, tips, and tricks are welcome 👋