My Website’s Ins and Outs

Article

Scroll down to read

Blog » My Website’s Ins and Outs

✍🏻 2018.11.7🔄 2020.11.19

Professionally, I’m a C# developer, but building stuff for the Web is something I’m also particularly attracted to. To be honest, Web development was the field I was the most interested in once, before moving to my actual job. Working for a company that uses Microsoft technologies, I could have employed ASP.NET to build my website. However, I preferred opting for the old HTML, CSS, and JavaScript.

I love the Web so much that, still now, questions flash in my mind when I visit a website. Some of those questions are:

Whenever I was about to build my website, two certainties settled in my mind:

  1. I wanted people to know how it would have been made.
  2. Content had to be the only stuff being shown.

Now that this website is alive, I unquestionably don’t give up on that will.

The Minimum Needed

Taking inspiration from Death to Bullshit and a motherfucking website, content rules this website, which doesn’t use analytics, tracking scripts, databases, or social scripts; it doesn’t store cookies nor shows ads. Your privacy and your experience here are more important to me than metrics. I wrote every character of code behind these webpages without resorting to libraries or frameworks, so I know what is in the source code. This website doesn’t:

Responsive Web Design

This website is responsive. This means it can adapt to any device, from smart TVs to smartphones. The use of fixed units like pixels is a distant memory; only relative units like percentages and rem have been used.

Web-safe Fonts

The font stacks used on this website are:

I could have used fancy, modern Web fonts from libraries like Google Fonts, but I chose to comply with carefully selected Web-safe fonts so that your browser doesn’t need to make further requests to obtain those fonts. Your time is precious.

Aesthetic and Accessibility

The colors you see are #000, #FBFBFF, #FFAE00, #AA0000 and #7023B7. They’ve been carefully chosen to provide adequate contrast. In general, this website follows the WCAG to ensure anyone can enjoy it.

Eleventy and Performance

This website is entirely static: it’s made of pure HTML files directly sent by the server (without any previous server-side rendering or access to a database) to your device and rendered by your browser. In particular, using a database puts you in front of additional security issues, not to mention that accessing a database is a slow operation. Server-side rendering is another matter that slows down the website’s loading since a webpage would need to be built on demand before a user can view it. If a website is simple, why don’t you develop it as one or more independent HTML files? Of course, managing every single file would be unproductive since it would force you to edit each of them separately. Static site generators are the game-changer. They take content files, apply custom templates to them, and generate a website made of ready-to-use HTML files. In my case, I used Eleventy, my favorite, and de facto SSG. I find it to be simple to use, intuitive, and swift. The hero image you see on the top of each webpage is an SVG of just 14 KB, cached adequately on your browser. This website stays away from calling unnecessary resources like unique fonts, frameworks, and libraries. The absence of JavaScript code provides to show the bareness of this “home on the Web.” The compression of the source code further reduces the size of these webpages.

Fluid Typography

Nowadays, users take advantage of the most various devices to access the Web: TVs, desktops, laptops, tablets, smartphones, and even smartwatches. An old, common approach to Web Design limits a webpage’s content in the middle of the viewport and renders it like a single column, with auto margins on the left and the right. I think it’s a pity not using all of the available space devices give us. For this reason, I used CSS variables that depend on the root element’s font size and the viewport’s width. This way, all dimensions, like font sizes, margins, paddings, widths, and borders, are relative to the screen’s available space.

Netlify, HTTPS, CD, and The JAMstack Approach

This website is hosted on Netlify and is guarded through HTTPS. Netlify is an excellent choice for those who want to publish a static website, also for free. Netlify and JAMStack go hand-in-hand, and not by chance, this website uses a JAMstack strategy. But what is JAMStack? It’s a new approach for building websites, a path that involves using, guess what, only static HTML files, without server-side rendering nor access to databases. This development philosophy makes heavy use of CDNs, without the browser having to reach the Web server. The core thing is that non-static features are obtained through the use of APIs. My website doesn’t use the “A” part of the JAMStack, the APIs, because it doesn’t need them; nevertheless, it remains a JAMStack thing since you’re not forced to use all of the technologies that appear in the acronym. As I wrote in my article about Netlify CD, this website’s project is stored on GitHub, and every time I push changes to the server, Netlify runs a build and publish the result.

Offline Capabilities

The only portion of JavaScript code that appears on these webpages is solely used by a service worker to provide the user with the offline capability to navigate even without an Internet connection. Don’t you believe it? Turn it off and visit another webpage of this website: you never see the downasaur; at the limit, an appropriate offline page shows, telling you which pages you can still reach. Moreover, I provided an appropriate manifest that contains metadata about the website itself. These two features promote this website to a full-fledged PWA: it’s fast, reliable, and you can install it on the home screen of your smartphone. When you first visit this website, the service worker “installs” the main pages for you on your device. Each time you visit a page not already cached, the service worker caches it automatically so you can reach it the next time, even without an Internet connection.

Privacy Policy

I bet you’ve already spread your data all across the Internet. We put personal info on the Web with an alarming carefreeness. This site doesn’t want to be part of that circle; it doesn’t collect any personal data, it doesn’t provide any private area, and it doesn’t show any form. This website doesn’t:

I don’t care about what pages are seen the most. I just want to provide you with content, hoping you find it interesting and useful.

Everything I write on this website reflects my personal views. Do you have questions, ideas, or suggestions? Do you want to get in touch with me? Do it!