DEV Community: Ethan Roberts

Troubleshooting Protip

Ethan Roberts — Tue, 16 Apr 2019 20:13:49 +0000

Many times I have found myself trying to figure out an issue, whether it's troubleshooting code or a problem with configuration, OS, or even hardware. After hours of banging my head against the wall confused why it doesn't work, then I realize the problem is something very simple that I should have started with. Often, people will overlook the simple solution because they are assuming it must be another cause.

Overconfidence

Even when you have years of experience, you are not immune to this same problem. If you are a beginner, you shouldn't assume those who are more experienced than you have followed every basic troubleshooting procedure.

Always start from the ground up. Start troubleshooting with the simplest and easiest explanation first.

Code not working? Check for spelling errors, basic syntax errors, etc.
Computer not working? Reboot. Make sure everything is plugged in and turned on.
Already rebooted and you're still stumped? Reboot it again!

The rubber duck technique is based on this idea, where you explain what your code is supposed to do to someone (or something) in the smallest increments. This forces you to analyze every part of your code that you would likely have overlooked because you assumed it was working the way you wanted it to.

This most basic tip has saved me countless hours of wasted time, and similarly not following this tip has wasted more than I would like to admit.

If you have a horror story of a simple overlooked problem that plagued you, please share it in the comments.

Reference Guide: Building a Mobile Friendly Website

Ethan Roberts — Tue, 02 Apr 2019 09:13:20 +0000

If you're a new web developer you've probably made some small web-apps or websites that you want to show off to your friends and family. However, most of those people will likely be checking out your nifty web-app on their mobile device. If you designed your project on a desktop you may not have thought about how it looks or works on a mobile device. If that's the case you probably received plenty of feedback from those you shared your project with who either used a mobile device or sub-1080p display to check out your cool new project.

Now you're exploring how to make your project mobile friendly and I'll introduce you to the tools you need to make that happen. All of these tools are useful for making your website responsive or adaptive, but there is no definitive way to use them to make your project look great on devices of all sizes. It entirely depends on how your website is used and what you need displayed.

The goal of this post is to not overwhelm you with a ton of information, but instead give a brief overview for each tool with links to more in-depth information so you can skip to the part you want to implement or just get an idea of what is available for when you need it.

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
-MDN

"A pixel is not a pixel." Devices with higher DPI (Dots Per Inch) or PPI (Pixels Per Inch) can make designs made for desktops look off. The average desktop monitor can range from ~80dpi to ~200ppi where a mobile device can often be more than double that.

MDN: Viewport Meta Tag

@viewport

@viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}

The @viewport CSS at-rule lets you configure the viewport through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).
-MDN

MDN: @Viewport

Viewport units! (vw, vh, vmin, vmax)

div {
  width: 50vw;
  height: 50vh;
}

The new units – vw, vh, vmin, and vmax - work similarly to existing length units like px or em, but represent a percentage of the current browser viewport.
-Miriam Suzanne @ CSS-Tricks

1vw: 1% of viewport width

1vh: 1% of viewport height

1vmin: 1vw or 1vh, whatever is smallest

1vmax: 1vw or 1vh, whatever is largest

-Chris Mills @ Dev.Opera

CSS-Tricks: Fun with Viewport Units
Dev.Opera: CSS Viewport Units: vw, vh, vmin and vmax

@media queries

@media screen and (max-width: 900px) {
  div {
    width: 5vw;
    height: 5vw;
  }
}

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
-MDN

CSS-Tricks: CSS Media Queries
MDN: Using Media Queries

Another option would be to create whole stylesheets that load per screen size, aka the 'Adaptive' model
CSS-Tricks: Resolution Specific Stylesheets

CSS Grid

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}
// If you had 9 divs inside a div with the classs .container 
// this will create a 3 x 3 grid of those 9 inner divs with 5px between them

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element's children (which become Grid Items).
-CSS-Tricks

The fr unit is a fleixible unit for defining CSS grids.

The fr unit (a "fraction") can be used when defining grids like any other CSS length such as %, px or em.
-Robin Rendle @ CSS-Tricks

CSS-Tricks: Getting Started With CSS Grid
CSS-Tricks: A Complete Guide to CSS Grid
CSS-Tricks: An Introduction to the fr CSS unit

Flexbox

.container {
  display: flex; /* or inline-flex */
}

A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

CSS-Tricks: A Complete Guide to Flexbox

Responsive Fonts: em and rem

h1 {
  font-size: 2rem
}

While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
-Chris Coyier

REM vs EM – The Great Debate

calc()

.content {
  /* Subtract the header size */
  height: calc(100% - 50px);
  overflow: auto;
}

calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.

The most useful ability of calc() is its ability to mix units, like percentages and pixels.
-Chris Coyier @ CSS-Tricks

calc() can really save your butt when you have tight rules, but also need responsive design.

Hardcore CSS calc( )
A Couple of Use Cases for Calc()

Adaptive vs Responsive

Adaptive takes your current structure and scales it for many sizes.
Responsive serves different templates based on the user agent and the device type.

dev.to: The Adaptive + Responsive model - Mattia Astorino
CSS-Tricks: The Difference Between Responsive and Adaptive Design

Other tools:

Device Mode in Chrome DevTools
Detect device viewport size

Why you should use Netlify instead of GitHub Pages

Ethan Roberts — Tue, 19 Mar 2019 22:33:04 +0000

Netlify is awesome!

I am not being paid to say that. I just think they provide some fantastic free services. There are too many to list here, but these are some features of their totally free services that I would like to highlight to get you to consider checking them out. There are more features that you pay for, but I am only highlighting features for free users. Go check out their website here.

Free Private Repository Hosting

The best reason to use Netlify is that you can host a private repository. Normally this is a GitHub Pro feature. That's a minimum of $84 per year that not everyone can afford.

Custom Netlify Subdomains

You can set a custom subdomain (as long as it's not already being used).

Custom SSL

If you have your own SSL certificate that you purchased, you can use your custom SSL certification instead LetsEncrypt. Otherwise they also provide an automatic LetsEncrypt SSL certificate like GitHub.

Speed up your website with Asset Optimization

Bundle and Minify CSS and JavaScript

If you're linking a handful of CSS and/or JavaScript files Netlify can bundle them all together and minify them (remove unnecessary whitespace) to speed up loading your pages.

Lossless compression for images

Netlify also provides the option to compress images to make for a speedier download.

Prerendering

When turned on, Netlify can host your site from one of their CDNs to serve to a crawler to greatly improve SEO.

Forms

You can receive up to 100 form submissions for free without having to have a backend.

Does git cmd scare you or your client?

You can deploy using drag & drop as well and still rollback to previous versions with a couple clicks.

The Real Facts About VPNs

Ethan Roberts — Mon, 04 Mar 2019 07:47:26 +0000

A VPN stands for a Virtual Private Network, and does exactly what it sounds like. It connects your device to an encrypted private network through software. It's a useful tool, but why is it important for security and privacy? First, we'll go over briefly what a VPN does.

What does a VPN do?

A VPN works by hiding your IP address and making connections to other servers on the internet on your behalf, then sending that data to you. This makes it harder to track you. It protects you from DDoS attacks and MITM attacks. It encrypts your data between your computer and their servers which protects you from being easily spied on through WiFi or other computers on the same network. It allows you to bypass censorship and Geoblocking.

What does a VPN not do?

A VPN will generally only encrypt your data between you and their servers. There are also many methods of identifying you through your browser alone, including cookies, scripts, and HTTP request header information. That's only what your browser sends to each website you connect to and doesn't count the data your browser can collect from you and send to their own servers. No VPN can protect you from these methods of collecting your data.

Why should I use a VPN?

A VPN is still the most effective first step in protecting your data and an important step for privacy. A VPN is just one part of full privacy and security. Even if you don't care about your privacy (even though you should), it is still worth it for the security benefits alone. Any time you are connected to a network, wireless or wired, you are trusting that no one else is trying to sniff out your personal data. Also, on a wireless network anyone can intercept data that you are broadcasting even if they are not connected to the same network.

What is a good VPN?

There are many services out there, but no single VPN service is best for everyone. It depends on your needs and what the individual VPN service provides. Always research before trusting your data with someone. How do you know they are actually encrypting your data? What information about you are they keeping? A good rule of thumb is: if the product is free then you are the product, meaning they are probably selling your data.

Summary

Use a VPN when you are using a public network and/or when transmitting sensitive data on a network that is broadcasting wirelessly
A VPN is not a total solution for privacy and security
Research the VPN service provider before you trust them with your security