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 and the dark theme in use is called “tomorrow night”.
Git and GitHub for version control and source code hosting.
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.
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 👋
I’m a Developer and Designer from Italy, based in Portugal.
I make websites and web apps focusing on modern web technologies, cross-browser interfaces and efficient code.
If you would like to work with me, please feel free to drop me a line at email@example.com. I’d love to chat!