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 could be the best tool to make the site scalable and 100% static.
bullframe.css boilerplate, (S)CSS 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.
I used Babel to write modern JavaScript and get browser-compatibility.
The code syntax highlighting is made with Lea Verou’s Prism 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), terminal and debugger.
File processing
Gulp.js and some incredible related npm packages (autoprefixer, babel, imagemin among the most valuable) were used as building tools to automate, precompile, generate and optimize files for this website.
I used Chrome and Firefox 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 mostly 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 scripts use their own CDNs.
Accessibility & non-JS
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.
Privacy and cookies
I used Google Analytics to track visitors.
The cookie alert, privacy and cookie policies are generated via Iubenda.
Clear the browser cache or open again this website in a new incognito/private window if you wanna take a look at the cookie alert again.
Suggestions, revisions, and tips and tricks are welcome 👋