Stabile.Codes – Website, Mailserver and Hosting

Stabile Codes is a German site and brand that I created for advertising my freelance services for my German speaking clients.

The term „stabil“ has different meanings. For one it mean stable, robust, solid, or reliable but in a more colloquial way it can also mean great, good, cool, or in regards to physical fitness it can mean buffed or strong.
The main idea for the brand came from my background in enterprise software solutions where we used to write code that has to run reliable for many years and oftentimes cannot be updated that easy.

I picked Montserrat as the main font for the site.

The Montserrat font was created in 2011 by Julieta Ulnavosky and it was inspired by old traditional posters and designs from the Montserrat neighborhood in Buenos Aires and it combines a rich history of traditional craftsmanship and local knowledge with modern design ideas.
The typeface is modern, simple, strong, and clear which are qualities that align with the brand idea pretty well. For the website project and branding, the mood I wanted to convey is strong, calm, reliable, and clear, like traditional craftsmanship.

(btw a great and way more detailed ui case study on the montserrat typeface can be found in this great article on medium https://medium.com/@jocelync12005/montserrat-a-ui-case-study-for-a-typographical-specimen-8eb169b1aa65)

For the colors, I decided to focus primarily on a combination of different shades of blue, gray, black and white. To keep a more minimalist look and feel. Blue is a color that is usually associated with feelings of trust, cleanliness, strength, dependability. Darker shades of blue are used for business suits and portray authority and seriousness. But shaed of blue can also be associated with one of the icons of urbanism, craftsmanship and hard and honest work, the blue jeans.

Gray is more a diplomatic color for everything falling between black and white. It is typically considered to be conservative, logical, elegant, like the color of business suits but also the color seen in urban environments. So it can be also associated with urbanism, architecure and manmade environment

The wording of the website is themed around strength, reliability, robustness. The main slogan translates to “Web development with a strong partner”, and I added a section with work principles at the bottom of the page with the three core principles, “stable”, “secure”, “measurable” or “testable”

When creating a website, my go-to solution for prototyping is Figma. It is in my opinion still the best tool to create and manage prototypes for anything from websites to mobile apps, icons, banners, you name it.
The great thing is, that you can export almost everything you create in Figma to images, pdfs and vector graphics.

For the development itself, I didn’t need much extra software as the pages are created in pure HTML and CSS. It decided to not use any CSS Library like Bootstrap or so since they would just introduce way too many unused selectors to the site and add to the page load.
For convenience I set up a simple node project, and added a SaSS build process so I could reuse colors, layout breakpoints and things like that easily by using SCSS Variables and imports.

The only JavaScript on the page is a simple search and replace mechanism for the email addresses on the page. I prefer generating the email addresses on the client and at least add a tiny barrier against automated mail address harvesters.

** Please note that I am in NOT related to, endorsed by or sponsored by vultr. I don’t earn anything by mentioning them, I don’t provide referral links. I just think they offer a good service

I picked a debian 10 as operating system over ubuntu or freebsd for it’s stability and because I know debian the best.
First steps was of course to update the system.
I decided to opt out of a password authentication and to use ssh keys instead.
While not that necessary, I still decided to create a normal unprivileged user account and to add this one to the sudoers instead of just using root directly.
I know that there is some controversy around if this really makes sense on a server as most tasks required elevated privileges anyway but it became such a habit for me to not use root on any machine that typing sudo in front of commands didn’t feel like much inconvenience.

My webserver of choice in this case was nginx as it is a fairly lightweight product that has proven it’s stability and performance on so many sites over the years. Plus it is relatively easy to configure, yet very powerful.
I am using python certbot for the ssl certificates which intergrates very nice in the nginx config files and saves you a lot of time and makes https configuration really easy.

For the mail server configuration I followed through the scripts and tutorials of Luke Smith, which I think are really great. I like his simplistic, no bloat, straightforward approach.

For a firewall solution I picked iptables. Could have used ufw to make things a bit easier but then again, I wanted to define the rules manually anyway so decided to just go with iptables.

Challenges during the installation and configuration

I ran into a problem with the configuration of the iptables firewall settings as my initial settings blocked traffic to local loopback interfaces needed to generate certificates for DKIM. Also since my domain was newly registered and not really under a common tld I found my mailsever blocked by Spamhaus, so had to open a support ticket and ask them to allow this domain.
But luckily the Spamhaus Support Team does an awesome job and replies really fast, so within a business day my ticket was resolved and my mails were no longer blocked.

It was great to have worked on a project like this from the very first brand ideas to deployment after I have been working more on isolated parts of big enterprise web applications for years.
What could be improved is the workflow for updating content. Since I have used git with gitflow as a version control locally for the whole website from the start it could make sense to push the whole project to github and use github actions to synchronize new content with the live website whereas at the moment I use rsync.

• HTML
• SaSS
• Figma
• ngninx
• postfix
• iptables