The Importance of External Backups

Six months ago, I lost my wallet. I arrived home after grabbing coffee with a friend, walked through the front door, and emptied my pockets to find I was missing an important leather rectangle.

I immediately cancelled all of my credit and debit cards. I ordered new ones, updated my autopay information for the important subscription services (Water, Electricity, Netlix, Spotify, etc), and was confident I'd solved the problem. However, there was an important item I'd missed.

I'd forgotten to update my payment information for this site. And after a few months of missed payments, Digital Ocean shut down my droplets and deleted all of their contents AND all of their backups.

All of the beautiful content I'd created from 2017-2019 was deleted. Now, all that I have left of the posts I'd written is this woefully inadequate snapshot from the Wayback Machine.

This has served as a harsh reminder of the importance of multiple backups. While I'm disappointed, I'm choosing to look on the bright side: better to learn this lesson with my blog than with an employer or client's resources. Learning from your mistakes is an important part of software engineering, and I'm going to take what I can from this lesson and keep writing new posts. And also store multiple backups for redundancy.

Learn Design in 15 Minutes

Everyone appreciates good design. It's the reason we are drawn to great works of art, such as Michelangelo's David or Picasso's Starry Night. It's the reason our eyes are captivated by beautiful machines, such as the 1959 Corvette Stingray Concept Car. And it's the reason Apple's products have captured the public's attention and dominated its competitors' products for over a decade.

I can't tell you how to do any of that. I learned everything I know about design from a textbook I checked out from the library, and my meagre portfolio contains a very small number of amateurish websites and documents. However, I do think that my limited experience has helped me come a long way. I want to share what I've learned with you because I believe the world is a better place with more designers in it, and because I think you'll be impressed with how much better your work can be with a few basic design tips.

In this post I'll cover 5 tips and show you how to use them to design and style a web page. But, before we move on, we need to consider two important questions:

What is design? Design is the method by which an object fulfills its function. For example, this web page is an object. Its function is to communicate information to users. Its design - the way in which it communicates information- consists of everything from the code that runs the backend to the layout and colors of the text on the page.

What is good design? Good design is effective use of an object's medium. A medium is the material or materials an object is made of. This web page's medium is its server, your browser, and my writing. I like to think it exhibits good design - its backend code is clean and fast, and the information on the page is, hopefully, laid out and written in a way that makes it easy to understand.

That's it! Let's move on to those tips.

5 tips for Designing a Web Page

Consider the embedded page below. It's not well designed - it's hard to read and it isn't easy to look at. We're going to take a few steps to improve it.

1. Use whitespace

Whitespace is the easiest tool to use. You can use it to separate the elements of a page, which helps clarify the structure of the information you're presenting.

For example, it's now much more clear that the short strip of text at the top of the page is the title.

2. Use proportions

Proportions - the ratios of the sizes of the elements on your page - are a fantastic tool. You can use them to balance the elements of a page, highlight important information, and more clearly separate information. You should ensure that the size and spacing of your elements have some sort of proportional relationship.

What do I mean by a proportional relationship? Just that the size of one or more elements on your page has some sort of scalar relationship to the size of one or more separate elements. For example, the page title's text size is now 3 times the text size of the main content. The spacing between the bottom of the page title and the first paragraph is also about 3 times as great as the distance between the first paragraph and the second paragraph. The text content is now constrained to be 5/6 the width of the entire page.

Playing around with the proportions on the elements of a page can make the page much easier to read and much more aesthetically pleasing. For reference - the most common proportions used in web design are 1/3, 1/4, 1/6, 1/8, and 1/12.

3. Use an appropriate font

Fonts are an easy way to improve a page's design. Broadly speaking, there are two types of fonts: Serif fonts (those with accented strokes, such as Times New Roman) and Sans-Serif fonts (those without accented strokes, such as Helvetica). Serif fonts were designed specifically for printed information, and so they're best used on paper. Sans-serif fonts are usually easier to read on screens and are typically best for web design. If serif fonts are used on a web page, it's usually for short text such as titles and section headers.

You can vary the weight and size of fonts to separate information as well. For example - bold text usually indicates importance.

In the example below I've used two different fonts - Aleo for the page title, and Lato for the main content. I've used a serif font for the page title to further differentiate the page title from the main content.

4. Use like or complementary colors and contrast them

Colors provide yet another way to separate or highlight information. The effective use of color is also a hugely complex topic - there is much debate on which types of colors you should use for the various types of websites. Because of that, I won't give you any tips on what colors to use in your work. However, I will tell you that when deciding on what colors to use on your site, make sure that they are like or complimentary.

What do I mean by like or complimentary? Well, it turns out that colors can have scalar relationships as well - web colors are determined using the rgb scale - a 3 channel scale in which the Red, Green, and Blue channels can each range from 0 to 255. As a result, you can consider a single color to be a point in a 3 dimensional coordinate system. When selecting a set of colors for a site, you generally want to select colors (points) that are separated by proportional amounts of distance. Like colors are colors whose RGB values share similar proportions (for example - rgb(30,30,30) is like rgb(120,120,120) - both are shades of gray). Complementary colors are colors that are relatively far from one another in one or more dimensions (for example - orange, rgb(255,116,0) is complementary to teal, rgb(0,153,153)).

Thankfully there are tools that can perform distance calculations for you and give you sets of colors you can choose from. My personal favorite is Paletton.

5. Content is king

Finally, the most important design aspect of a web page is its content. The actual information you're presenting is vastly more important than the way in which you present it. Consider the example below: it's much more visually appealing than our original example. However, the information doesn't actually tell you anything about Design. Since the function of the page is to communicate a basic description of design to the reader, the page below is pretty terrible.


That's all! I hope the tips above help you improve your work. If not, then I've designed this post poorly.

2 Potential Problems Securing a Ghost blog Using SSL and Nginx

This blog is hosted on Digital Ocean using the droplet imageUbuntu Ghost 0.8.0 on 14.04 It uses nginx and an SSL certificate issued by Let's Encrypt to encrypt its data. While setting up the blog was easy (I just used Digital Ocean's dashboard to deploy the image mentioned above), installing the SSL certificate took a little more effort.

Thankfully, I found 2 excellent blog posts that explain how to do so:

These posts explain the process better than I can, so I won't repeat how to install a certificate here. However, I will share the solutions to 2 issues that cost me more time than I'm willing to admit.

1. Editing the Wrong Nginx Site File

You'll have to change the nginx configuration file for your site in order to ensure requests for your site are handled using the appropriate protocols.

The nginx config file for your site is in 2 places: /etc/nginx/sites-enabled/yoursiteand /etc/nginx/sites-available/. I recommend editing the file in sites-enabled. The file in sites-available will be automatically updated with any changes you make.

The sites-enabled directory should have at least 2 files: default and ghost. Edit ghost - your droplet treats your ghost installation as a site named ghost. This is why the directory that contains your site files is located at /var/www/ghost.

Editing defualt will not work. Nginx will only use default if the ghost file does not exist.

2. Not Restoring Ghost's Permissions After a Restart

If you stop or restart Ghost during this process, your site may break and return the error code 502 - Bad Gateway.

This is because Ghost's permissions have been reset, and it no longer has permission to access itself. You can resolve this by navigating to /var/www and running this command:

chown -R ghost:ghost *

That's it! I hope this post has helped save you some time.