Useful sites and apps I've come across while studying web frontend development and web server configuration

Web development is hard. There are seemingly infinite ways to make things work, many of them outdated and no longer useful to the developer because of the incredible speed with which the web development ecosystem pushes forward.

This speed has its pros and cons, and one of the drawbacks I've found while learning web development is that sometimes finding up-to-date resources for learning is difficult.

What follows is a smattering of resources I've found incredibly useful while beginning to study web development - both front- and back-end.

I've stayed away from learning frameworks, focusing instead on learning mostly fundamentals. For me personally, just learning a framework like Angular or React without having a solid understanding of the basics means long, frustrating debugging sessions while attempting to interpret what was messed up in the framework. Often times, this issue is exacerbated by the fact that the framework assumes I know the basics of whatever the context is and glosses over certain details when reporting error information.

Please note: I am in no way affiliated with any of the following resources.

Frontend basics

Interneting is Hard - This site offers a beautifully made tutorial about using HTML and CSS to build modern websites. It starts from the perspective of someone who knows nothing about HTML or CSS. If you're looking for a rock solid place to start this is it.

Mozilla Developer Network
This is most likely the best reference for general web development knowledge and has replaced the W3 Schools in my digital library.

CSS Diner
Practice CSS selectors while selecting fruits and veggies! CSS selectors are very important to building clean, maintainable CSS.

Browser feature compatibility

CanIUse
I quickly learned not all browsers are created equal. CanIUse shows just how different they are, feature by feature. Example queries:

• Referrer Policy
• Content Security Policy
• Video
• Client Hints: DPR, Width, Viewport-Width
• Srcset and sizes attributes
• Http/2
• CSS Grid
• Imports
• CSS image-set
• calc()
• TrueType and OpenType

CSS Grid

Grid By Example
While I spent a large amount of time learning Flexbox, CSS Grid is just as cool if not a bit more easy to use (in my novice opinion) from a responsive design perspective. This feature in particular is very cool.

Templating engines

I do not consider these to be frameworks akin to Angular or React, but they helped with some of the pain points of writing plain HTML, such as writing list items. I do not have a strong opinion on either yet so I've listed the two I've spent some time learning and using in small projects.

The idea behind these types of tools is helping componentize blocks of HTML by 'templating' out logical groups (like a 'card' of data) and allowing for data to be inserted into specific areas of the template at runtime. This way, a single logical grouping of HTML can be used over and over again while the actual markup only needs to exist once (while avoiding the overhead of larger frameworks that also do this).

• Pug - formerly Jade
• Handlebars

It's also worth noting that Express has support for some template engines, although that is outside of the scope of this post.

Browser usage stats

gs.statcounter
Straightforward, no-nonsense data about browser usage, common screen resolutions and device usage. If you're looking to build a web app for a more specific audience this site could help you decide what to focus on first.

Design

I am not very artistic. The resources here mostly helped me learn some ways web design can be done. One crucial concept I learned is that there is nothing wrong with having someone dedicated to designing your site for you as the web developer to then build. This might mean acquiring a pre-built theme and then modifying it as needed or working with a full-time web designer. I found that I intertwined web development and web design as a single profession more than they need to be. Web design is a full-time job and people study it just as hard as programmers study programming. If you want something that looks professional and don't want to attempt to manage learning both good design and web programming yourself, these artists will do the design right, thus freeing your mind to focus on building the vision. That being said, understanding some of their processes and tooling will help you communicate with them which can be a major benefit.

• Paletton
• Figma
• Ultimate Google Font Pairings
• Typewolf
• 7 Rules for Creating Gorgeous UI - Part 1
• 7 Rules for Creating Gorgeous UI - Part 2

Provisioning

It's one (very important) thing to know how to build the frontend of a website, but hosting it was something rather foreign to me as well. There are a smorgasboard of tools available to do this, many of them offering more or less options based on how much stuff in the server you want to manage yourself.

Here are some options:

Microsoft Azure
Coming from a .NET background I thought I'd be more confortable learning to host sites on Azure. I've hosted a few very small APIs on Azure in the past, but never any actual web sites.

To be honest, the amount of options in Azure was overwhelming to me as a novice. More power to you if you want to go this route or the Amazon Web Services route, but I found the complexity more than I wanted to take on at this stage of learning.

Heroku
At no point in time did I need to remote into a machine and run terminal commands to configure a site while using Heroku. Their web UI is more than enough to get a basic site hosted and they offer some really nice tooling around configuring Continuous Integration among some other great scaling options, and there is a free tier.

Digital Ocean
In constrast to Heroku, Digital Ocean requirements for configuration are much more technical, however, that is not a bad thing. In fact, coming at setting up a web server with almost no knowledge of how to do it led me to using Digital Ocean for several sites I've done so far specifically because I wanted to learn more about how this is done.

Aside from 'empty' VPS's (Virtual Private Servers - they call them Droplets) they have these One-click apps which are VPS's with a bunch of software pre-installed and configured on them. These are amazing, especially for a beginner like me. This reduces the overhead for getting a server up and running drasitically, allowing me to focus on the specifics of my server configuration (like setting up sites in Nginx). I've used the NodeJS and Ghost One-click apps so far and might check out the GitLab one in the future.

In addition to fantastic infrastructure provisioning, DigitalOcean has some of the best tutorials and documentation on web server configurations I've come across. Some examples:

• An Introduction to DNS Terminology, Components, and Concepts
• How to Secure Nginx with Let's Encrypt on Ubuntu 16.04
• How to Point to DigitalOcean Nameservers From Common Domain Registrars
• Nginx Essentials: Installation and Configuration Troubleshooting
• How to Install Nginx on Ubuntu 16.04
• How To Protect an Nginx Server with Fail2Ban on Ubuntu 14.04
• How Fail2Ban Works to Protect Services on a Linux Server

DNSMap
One thing that burned me several times was that making DNS changes is not instant. There were a few times I was repointing a domain to different name servers while adjusting the site config (in Nginx). This was confusing because browsers would show the site was misconfigured (especially if SSL certs were involved) even though in reality DNS propagation of my changes had not yet completed. There are a bunch of variations on the above tool, but it helps to know when these types of changes have 'completed'. These tools aren't perfect, but I haven't found another way to be notified when propagation has been completed.

Performance

Google's PageSpeed Insights
You may have already heard of PageSpeed Insights since 'page speed' is now factored into Google search rankings for mobile. I found this tool useful after a first pass on a site as it helps identify issues that I found fixes easy to learn and implement. It also seperates mobile and desktop scores which can be very helpful if you're trying to tailor your site to a specific audience. Additionally, if you're looking for something more intensive, take a look at Lighthouse .

Nginx

In my brief time learning about how to configure web servers Nginx has been fairly straightforward to use. There are docs and articles galore about how to do very specific things.

• Nginx - Start with Igor's Beginner's Guide
• Wiki home
• Nginx Amplify

Once I got some sites up and running I looked around for some services to monitor them. I didn't want to be writing my own tooling or parsing log files and landed on Nginx Amplify. You can connect a few Nginx instances to Amplify for free and the monitoring tools are great. Included in the free 'tier' is the ability to send Slack messages and emails when metrics go over thresholds you configure. Thanks to this tool I was notified of a bot making thousands of requests per second to one of my sites just a few minutes after the bot started doing this. A quick update to the firewall stopped the issue. Not only does this show monitoring metrics, but will use static analysis on your nginx.conf files to find common issues and show info about SSL configs and security advisories for the running version of Nginx. Again, tools like this are super useful to newbies like me as it helped give an awareness of the system I might not have been able to grasp otherwise.

NginxConfig.io - This tool helps kickstart writing nginx config files and server blocks

Web server configuration tools

Laboratory (Content Security Policy / CSP Toolkit)
While learning about secure server configurations I came across this Firefox addon. It will build your Content Security Policy while recording you using your site. This, of course, assumes your site is stable and serving expected data. It should also be noted this is an experimental addon.

Test your server's SSL implementation
Again, being a newbie I wanted to find tools that could tell me what I was messing up while learning. This site focuses on grading your SSL implementation in detail and is a good jumping point for seeing what makes up a secure SSL implementation.

Image optimization

• TinyPng
• Cloudinary
• Responsive Image Breakpoints Generator

Of all the frontend concepts I'm learning I find this the most challenging. I didn't discover Cloudinary until sinking a bunch of time into learning how to shape or serve variations of my images depending on the client parameters. In fact, using newer features like sizes and srcset require knowing how all the parameters to configure them work, which is a decent hill to climb by itself.

However, once I started to understand how sizes and srcset work in tandem with media queries I loved Cloudinary all the more. The work it does on the fly for the developer is incredible.

TinyPng is listed because it's important to understand how responsive image sizing (by itself) is different from compression-based image optimization. TinyPng (which supports more than PNGs) focuses on optimization of an existing image rather than only resizing it. While Cloudinary does offer this service as well, it's probably overkill for smaller sites. TinyPng will optimize your images for free up to a certain quota. I found their .NET api super easy to use to send up a folder of images for processing.

That's my set of sites and tools I've come across so far while learning web development. I hope some of them are useful to you!

Featured Image by nihon graphy