DEV Community: Matt Lawrence ☕

What are var, let, and const in JavaScript?

Matt Lawrence ☕ — Tue, 15 Jul 2025 18:27:09 +0000

In JavaScript, var, let, and constare used to declare variables—but they differ in how they behave when it comes to scope, hoisting, and mutability. Choosing the right one helps prevent bugs and makes your code easier to reason about.

In modern development, let and const are preferred. var is mostly reserved for legacy code or situations requiring function-scoped variables. Many developers search “what is let var const” — this guide breaks it all down so you can write cleaner, safer JavaScript.

🔄 What's the difference between var, let, and const?

Feature	`var`	`let`	`const`
Scope	Function scope	Block scope	Block scope
Hoisting	✅ Yes (initialized as `undefined`)	✅ Yes (not initialized)	✅ Yes (not initialized)
Reassignable	✅ Yes	✅ Yes	❌ No
Redeclarable	✅ Yes	❌ No	❌ No

Understanding scope in JavaScript

Variable scope determines where a variable is accessible.

var is function-scoped — accessible throughout the entire function.
let and const are block-scoped — accessible only within the { } block they are defined in.

function example() {
    if (true) {    
        var x = 1;    
        let y = 2;  
    }  
    console.log(x); // ✅ Outputs 1  
    console.log(y); // ❌ ReferenceError
}

What do hoisting, reassignable, and redeclarable mean?

Hoisting

JavaScript moves variable declarations to the top of their scope.

With var the variable is hoisted and initialized as undefined.
With let and const the declaration is hoisted but not initialized, so using them before their declaration results in a ReferenceError.

Reassignable

Can you assign a new value to the variable after declaring it?

let and var allow reassignment.
const does not.

Redeclarable

Can you declare the same variable name again in the same scope?

var allows it.
let and const do not — which helps prevent accidental bugs.

How to choose between var, let, and const

✅ Use const by default.
Prevents accidental reassignment and communicates intent clearly.
🔁 Use let when the variable will change.
Useful in loops, state changes, toggles, and accumulations.
🚫 Avoid var unless maintaining legacy code
var still works, but its function scope and redeclaration behavior make it error-prone in modern codebases.

When to use var, let and const

✅ Use const when:

The variable should never be reassigned.
You want stable, predictable references.
You're working with arrays or objects that can be mutated but shouldn’t be reassigned entirely.

const config = { debug: false };
config.debug = true; // ✅ 
allowedconfig = {}; // ❌ Error: Assignment to constant variable

🔁 Use let when:

You need to reassign the variable later.
You're using a variable inside a block (for, if, etc.).
You want to avoid accidental redeclaration.

let score = 0;
score += 10;

🕰 Use var when:

You're working in legacy ES5 codebases.
You need function-level scope instead of block scope.
You’re supporting very old browsers.

function legacyCode() {
    if (true) {
        var total = 42;  
    }  
    console.log(total); // ✅ 42 (still accessible)
}

FAQ

Is it better to use let or const?

Use const whenever possible. It helps prevent bugs by signaling that the variable won’t change. Use let when reassignment is necessary.

Why is var discouraged in modern JavaScript?

var is function-scoped and allows redeclaration, which can lead to confusing bugs. let and const offer safer scoping and behavior.

Is let faster than var?

Not really. Performance is nearly identical in most cases. The real benefit is developer clarity and fewer bugs, not execution speed.

Can you reassign a const variable?

No — but you can change the contents of arrays or objects declared with const.

const colors = ['red', 'blue'];
colors.push('green'); // ✅ Works
colors = ['yellow'];  // ❌ Error

What happens if you use var inside a function?

It’s hoisted and scoped to the entire function, initialized as undefined no matter where you declare it.

Does let have block scope?

Yes. let only exists within the {} block where it's declared.

Can you redeclare variables with let or const?

No — attempting to redeclare in the same scope throws a SyntaxError.

let a = 1;
let a = 2; // ❌ Error

Want to learn more JavaScript?

Learn to code using Scrimba with their interactive follow-along code editor.

Join their exclusive discord communities and network to find your first job!

Use our affiliate link for a 20% discount!!

Click the link to take you to the Scrimba site
A pop-up should appear on your screen with the discount amount and instructions on how to claim it
Discount is for new accounts only

We receive a monetary kickback if you use our affiliate link and make a purchase.

This and many other guides are available on htmlallthethings.com

CSS Pseudo Class Explained: What It Is and How to Use It

Matt Lawrence ☕ — Fri, 20 Jun 2025 19:56:09 +0000

What are CSS pseudo-classes?

CSS pseudo-classes are special keywords that let you apply styles to elements based on their state or position in the document—without needing to add extra classes or IDs in your HTML.

For example, when a user hovers their mouse over a button, you might want it to change color. Instead of using JavaScript to detect that interaction, CSS pseudo-classes let you do it with just a few lines of CSS.

These selectors start with a single colon (:) and target elements dynamically based on conditions like user interaction, form validation, or document structure. They can be combined with additional pseudo-classes or other selectors to give you granular control over which element(s) you want to select.

CSS pseudo-class example

In this example, the :hover pseudo-class applies a new background and text color when the user hovers over a button.

button:hover {
  background-color: #007bff;
  color: white;
}

Common CSS pseudo-classes

There are dozens of pseudo-classes available in CSS, but you won’t need to memorize them all to create most websites. Here are a few of the most common pseudo-classes, from our experience:

Hover

The :hover pseudo-class targets an element when a user hovers their pointer over it. This is great for enhancing interactivity, especially on links and buttons.

a:hover {
  text-decoration: underline;
}

Required

The :required pseudo-class selects input fields that have the required attribute. You can use it to visually indicate that a field must be filled out before submitting a form.

input:required {
  border-color: red;
}

Empty

The :empty pseudo-class targets elements that have no children—no text nodes, no elements, nothing. This can be useful for debugging or conditionally styling placeholder containers. I personally use this when filling in a new website’s content for the first time to ensure I don’t miss anything.

div:empty {
  background-color: #f8d7da;
}

nth-child()

The :nth-child() pseudo-class targets elements based on their order in the DOM. It accepts values like numbers (:nth-child(3)), keywords like odd or even, or formulas like 2n+1.

li:nth-child(odd) {
  background-color: #f2f2f2;
}

Visited

The :visited pseudo-class applies styles to links that the user has already clicked. Most modern browsers limit what styles can be changed here for privacy reasons (ie color, background-color, border-color, etc.). Furthermore, this pseudo-class can only be applied to <a> and <area> elements that have an href attribute.

a:visited {
  color: purple;
}

FAQ

What is the difference between a pseudo-element and a pseudo-class?

A pseudo-class is defined by a single colon (:) and is used to target and style elements in a specific state (ie when a mouse is hovering over top). Meanwhile a pseudo-element is defined by a double colon (::) and lets you target and style specific parts of a selected element, such as the first line of a paragraph. In some cases pseudo-elements can be used to generate content using the content CSS property.

Examples:

/* Pseudo-Class: Makes links with the class 'featured-link' red when hovered over */
a.featured-link:hover {
    color: red;
}

/* Pseudo-Element: Bolds the text in the first line of paragraphs */
p::first-line {
  font-weight: bold;
}

What is `:` in CSS?

The single colon (:) is used to define pseudo-classes, like :hover, :focus, or :first-child. It tells the browser to apply styles when a specific condition is met for an element.

What is `::` in CSS?

The double colon (::) is used for pseudo-elements, which let you style specific parts of an element or inject content (like ::before, ::after, or ::first-letter).

Can I use multiple pseudo-classes on the same element?

Yes! You can chain pseudo-classes together for more complex selection logic without the use of JavaScript.

For example, The selector below targets a button that is both hovered and focused.

button:hover:focus {
  outline: 2px solid orange;
}

Do all browsers support CSS pseudo-classes?

Most modern browsers support the majority of pseudo-classes. However, some newer or more complex pseudo-classes like :is() or :has()—may have limited support in older versions. Always check Can I Use (https://caniuse.com/) if you're unsure about compatibility.

And remember that there are a lot of ways to workaround browser limitations in CSS, meaning you can typically use an “advanced” feature for people using compatible browsers, then fall back on an alternative for those on incompatible browsers.

Want to learn more CSS?

Learn to code using Scrimba with their interactive follow-along code editor.

Join their exclusive discord communities and network to find your first job!

Use our affiliate link for a 20% discount!!

Click the link to take you to the Scrimba site
A pop-up should appear on your screen with the discount amount and instructions on how to claim it
Discount is for new accounts only

We receive a monetary kickback if you use our affiliate link and make a purchase.

More web development guides and podcast episodes on htmlallthethings.com

Why Feature Phones are Important in 2025

Matt Lawrence ☕ — Mon, 12 May 2025 13:00:00 +0000

What is a feature phone?

Feature phones (aka “dumb phones”) are mobile devices that offer basic features like text messaging and making phone calls. They often go against the modern smartphone form factor, including a set of buttons to navigate the software and a keypad to dial phone numbers. If you were around during the early 2000s, you’ll remember devices such as the Motorola Razr v3 and the LG Chocolate - these are prime examples of what you can roughly expect in a modern feature phone.

What is considered a feature phone?

Feature phones are considered less capable devices than modern smartphones, they typically have a small screen, physical keypad, limited internet capabilities, and a few built-in apps. In contrast, modern smartphones have large touch screens, advanced cameras setups, high-speed data, and millions of apps.

What is the difference between a feature phone and a smartphone?

Feature phones offer only basic features, while smartphones try to offer cutting edge tech. The focus of a feature phone is communication (calling and texting), while a modern smartphone focuses on being an all-in-one computing device (communication, photography, games, and content creation).

What can you do with a feature phone?

Feature phones are focused on communication - namely talk and text. However, like phones from the early 2000s, they also typically offer helpful built-in apps for note taking, calendar management, listening to music (local files, not streaming), and even email (although typically limited). Modern apps and functionality can be used on some feature phones using a service called Cloud Phone.

Are feature phones making a comeback?

Feature phones are making a comeback in 2025 largely due to a niche audience looking to do a digital detox. This audience is looking to ditch the constant stimulation and distraction (ie doomscrolling) that their smartphones offer, preferring to “go back to basics” when phones were primarily used for communication.

In addition to this niche audience, there are several audiences around the world in countries that aren’t able to afford smartphones. These people are budget-forced to purchase and use dumbphones to keep in touch with friends and family. In this particular case, dumbphones are making less of a “comeback” and are more a “daily necessity.”

How much do feature phones cost?

Feature phones are generally cheaper than the high-end smartphones of today, however, their prices range wildly due to their included features and capabilities. Roughly speaking, you can get a feature phone in 2025 for as little as $12 USD and as high as $700 USD. This wild range reflects the different demographics that feature phones serve, from people that are looking for a digital detox, to those that need a phone on a restrictive budget.

Popular Feature Phones

There are a lot of feature phones out there, the ones featured in this section are primarily focused on their recent virality in 2025. It’s important to note that the ones showcased here are just scratching the surface of what is available in terms of form factor and price.

Minimal Phone

The Minimal Phone is really a hybrid device between smartphone and dumbphone. Our daily lives have largely been changed by the rise of the smartphone, making them essential in some use cases - such as Uber for travel, and data-driven chat apps for work (ie Slack). To bridge this gap, the Minimal phone sports an eInk display with a high refresh rate, a physical keyboard for that tactile feel, all while running on Android with full access to Google Play.

Minimal Phone features:

$399 USD MSRP
E-Paper Display (eInk)
Tactile QWERTY keyboard
Android 14
Headphone jack
RCS messaging
Full Google Play Store access
4-day battery life
NFC Payment support
Android Auto

Full details on the official Minimal Phone website.

Litephone III

The Litephone III has been making the rounds on YouTube lately for its unique form factor and dedication to keeping things simple. The device boasts metal side buttons, premium build quality, and AMOLED touch display. It’s shorter and thicker than a traditional smartphone, with a large speaker grill across the bottom of the device. It runs LightOS, a minimal software experience that offer a black and white list of utility-driven apps such as Alarm, Calculator, Podcast, Phone, and more.

Lite Phone III features:

Matte Glass 3.92” AMOLED (1080x1240) display
1800mAH battery
IP54 rated
~1-2 days of battery life (still being determined as per the official FAQ)

Full details on the official Litephone III website.

The problem with modern feature phones

The problem with modern feature phones is primarily the price, although that makes sense. Modern dumb phones are often tailored for those coming from the modern smartphone, serving people that need to keep some modern luxuries (ie mobile payments, navigation). Even still these dumb phones are often cheaper than many smartphones on the market - but not cheap enough for some.

There is an entire demographic out there that have extremely limited budgets, but still need to be able to communicate with family and friends. Furthermore, as smartphones revolutionize what’s possible on-the-go, those that are budget-restricted have an increased need for more data-driven experiences. That means that we can’t just give these people a basic flip phone and call it a day. This is where Cloud Phone by CloudMosa comes in.

What is Cloud Phone?

Cloud Phone is a revolutionary technology that brings modern web apps to basic dumb phones. Some of these dumb phones cost as little as $12 USD - so their onboard hardware is severely limited. If you think of modern websites and web apps, they have fancy hi-res images and animations that will struggle to run on anything but modern hardware, let alone tiny displays on phones with questionable reception. This is where Cloud Phone steps in.

How Cloud Phone Works

Cloud Phone uses cloud-based technology to offload computational tasks from low-end feature phones to cloud servers that allow these basic phones to function more like smartphones.

Thin client architecture: The feature phone acts as a lightweight terminal that connects to a virtualized environment in the cloud.
Remote rendering and streaming: User interactions are processed in the cloud and streamed back to the feature phone in real time.
Web-based applications: Instead of installing apps like you would on an iPhone, users access cloud-hosted widgets for services like YouTube, Facebook, podcasts, news, and more.

In-depth look at Cloud Phone

A few weeks ago Matt had the pleasure of sitting down with Cloud Phone’s Tom Barrasso on the HTML All The Things Podcast to discuss the importance of flip phones in 2025. The guys did a deep dive into flip phones for those looking at a digital detox, the limitations of RTOS, and the empowerment that Cloud Phone brings to devices with limited hardware.

Also available on Spotify and Apple Podcasts.

The Toughest Concepts in Web Development

Matt Lawrence ☕ — Tue, 15 Oct 2024 20:04:18 +0000

Web development is not easy! Many think it's as simple as choosing your favorite website builder, spending a few days uploading content, then pressing publish. If all you're looking for is a simple marketing website, then you're in luck...but if you're in need of anything else, you'll soon find yourself in the weeds.

Some of the toughest concepts (according to us) include:

Asynchronous Programming and Promises
State Management
Security Concerns (XSS, CSRF, SQL Injection)
Performance Optimization
Scalability and Architecture
Cross-Browser Compatibility
Responsive Design
Web Accessibility (a11y)
SSR, SSG, CSR
Event-Driven Architectures
Dependency Management
CI/CD

Myself and my co-host, Mike Karan, discussed these topics below:

Listen to Part 1
Listen to Part 2

How to Create Blog Categories and Tags in Webflow

Matt Lawrence ☕ — Mon, 23 Sep 2024 20:22:50 +0000

Blogging platforms like WordPress come with categories and tags that you can assign to blog posts right out of the box. This same functionality is available in Webflow, but it is not immediately obvious how to get it working. Unless you're using a template, Webflow websites require that we set up this functionality ourselves via the reference and multi-reference CMS fields. When working with Webflow it's important to remember that unlike WordPress, Webflow is not a blogging platform first. Webflow is a no-code website creation tool that can be used to create static sites, ecommerce stores, and blogs - therefore we need to utilize the power of the Webflow CMS to build out own blogging functionality.

Guide Summary

In this guide we will learn how to:

Use a reference field to create blog categories
Use a multi-reference field to create blog tags This guide does not require any custom code.

How to create blog categories in Webflow

This guide assumes you already have a CMS collection for your blog posts.

Blog categories are a taxonomy that define the broad grouping that our blog post fall under. For example, a tech blog may have a category for their how-to guides and another category for their news posts. Using the steps below, we'll be allowing each of our blog posts to have a single category assigned to them.

Step 1: Create a category CMS collection

Open the CMS menu in the Webflow Designer
Click on the "Create New Collection" button
Type in a name for the category collection
-- We'll name ours "Blog Categories"
Save the collection by clicking "Create Collection"

Step 2: Create category fields

By default, we're provided with a name field when we created the collection. Some websites will only need their categories to have a name and nothing else, if that's you, you can skip this step. Alternatively, categories need additional information other than just a name. For example, you may want a color selector so that content editors can control the color associated with each category. In this guide we'll assume we need this sort of color control.

Hover over the "Blog Categories" collection and click on the cog icon
Click on "+ Add New Field"
Select the Color field and give it a name
-- We'll call ours "Category Color"
Save the field and the collection

Step 3: Create categories

Click on the "Blog Categories" collection
Click on the "+ New Blog Category" button
Fill in a name and color for our category
-- In this guide we'll add the "Guide" category in red and "News" category in green
Save and publish your categories once you're done editing
-- Note: You may need to publish your entire site before being able to publish single collection items

Step 4: Make a reference field in your blog post CMS collection

In this step we're going to add a reference field that will allow our blog posts to reference our categories collection. As a reference field you can reference a single category per blog post.

Hover over the CMS collection you're using for your blog posts and click the cog icon

-- In our case it's the "Blog Posts" collection

Click on "+ Add New Field"
Select the Reference field and select your categories collection in the dropdown list
-- In this guide, this is "Blog Categories"
Give your reference field a recognizable name - we'll use "Category"
Save the field and the collection

Step 5: Attach a category to your blog post

Edit an existing, or create a new blog post
You should see your reference field, where you can now select from any of the categories you've made

How to create blog tags in Webflow

This guide assumes you already have a CMS collection for your blog posts.

Step 1: Create a tags CMS collection

Open the CMS menu in the Webflow Designer
Click on the "Create New Collection" button
Type in a name for the tags collection
-- We'll name ours "Blog Tags"
Save the collection by clicking on "Create Collection"

Step 2: Create tag fields

By default, we're provided with a name field when we created the collection. Typically tags only need a name so you'll likely not have to add any additional fields - if this applies to you, you can skip this step. However, you can attach other fields to tags, much like categories. In this guide, we'll add a color control field so that site editors can control the affiliated color with each tag.

Hover over the "Blog Tags" collection and click on the cog icon
Click on "Add New Field"
Select the Color field and give it a name
-- We'll call our "Tag Color"
Save the field and the collection

Step 3: Create tags

Click on the "Blog Tags" collection
Click on the "+ New Blog Tag" button
Fill in a name and color for our tag
-- In this guide we'll add the "webdev" tag in blue and "html" tag in purple
Save and publish your tags once you're done editing
-- Note: You may need to publish your entire site before you'll be able to publish your tags

Step 4: Make a multi-reference field in your blog post CMS collection

In this step we're going to add a multi-reference field that will allow our blog posts to reference our tags collection. As a multi-reference field, we'll be able to reference multiple tags at once.

Hover over the CMS collection you're using for your blog posts and click the cog icon
-- In our case it's the "Blog Posts" collection
Click on "Add New Field"
Select the Multi-Reference field and select your tags collection in the dropdown list
-- In this guide, this is "Blog Tags"
Give your multi-reference field a recognizable name - we'll use "Tags"
Save the field and the collection

Step 5: Attach tags to your blog post

Edit an existing, or create a new blog post
You should see your multi-reference field, where you can now select from any of the tags that you made
-- Note that you can select multiple tags if you wish

Support guides like this by checking out our website, or giving Webflow a try with our link!

How to Center Text in CSS

Matt Lawrence ☕ — Thu, 05 Oct 2023 20:49:21 +0000

How to center text in CSS

You can center text in CSS both horizontally and vertically using a few different methods including margins, padding, flexbox, line-height, and text-align. How you center your text will depend on how your webpage is styled and whether you want to center horizontally, vertically, or both. Below, we'll explore centering text vertically using these methods in detail.

How to horizontally center text in CSS

Horizontally centering text in CSS can be achieved with the text-align and margin CSS properties. The text-align property will align the text itself, whereas the margin property will be used to center the container that the text resides in.

Horizontal text alignment with the text-align CSS property

In your CSS, add text-align: center to a selector that contains the text you need to center.

HTML

<div class="center-me">
  <h1>Center this title!</h1>
</div>

CSS

.center-me {
  text-align: center;
}

Output

If you want all your text centered across the entire page you can use the asterisk (*) or body selectors instead of a specific one (see CSS snippet below).

CSS

/* Option 1 - Body Selector */
body {
  text-align: center;
}

/* Option 2 - Asterisk Selector */
* {
  text-align: center;
}

Horizontal text alignment with the margin CSS property

When you're working with a block-level element, you can center it using margin: auto in your CSS. This is a common practice when you want to center text that is contained inside a content box. The auto margin centers the containing box, but the text's alignment stays the same.

HTML

<div class="text-container">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus urna et turpis tempus pulvinar. Vestibulum laoreet lectus eget egestas mattis. Donec et leo consectetur, elementum est ac, aliquet nisl. Nunc aliquet, est sollicitudin suscipit auctor, lacus erat mattis ex, id bibendum lorem neque vitae mauris. Ut et tellus lectus. Maecenas non enim eget ante semper accumsan in at mi. Nam iaculis nec ex sed sodales. Morbi id euismod sapien.</p>
</div>

CSS

.text-container {
  margin: auto;
  width: 450px;
  background-color: green;
  padding: 30px;
}

Output

This output shows us that the margin: auto centered the block-level content box (green), but did not change the alignment of the text itself (it is left as default, left-aligned in this case).

If we want to alter the alignment of the text inside the content box, we can use the text-align property on it (see below).

CSS

/* Note the addition of the text-align: center */
.text-container {
  margin: auto;
  width: 450px;
  background-color: green;
  padding: 30px;
  text-align: center;
}

Output

How to vertically center text in CSS

Vertically aligning text in CSS can be achieved with the line-height and padding CSS properties. Line-height adjusts the minimum height of each line that the text sits on - you can think of it as adjusting the space between the lines on a lined sheet of paper. Padding adds space between the edge of an element (border) and the elements it contains.

Vertical text alignment with the line-height CSS property

The line-height CSS property is typically used to adjust the spacing between several lines of text (ie in the body of a blog post), but it can also be used to center text vertically if you know the height of the containing element.

Here's an example of some text inside a containing div, the div has the height and width explicitly set.

HTML

<div class="text-container">
  <p>This is some text</p>
</div>

CSS

p {
  font-size: 1.5rem;
}

.text-container {
  width: 450px;
  height: 200px;
  background-color: green;
}

Output

As you can see below, our text will go to the top-left corner by default.

CSS w/ line-height centering

Here we added the line-height property and set it to the height of the containing div.

CSS

p {
  font-size: 1.5rem;
}

.text-container {
  font-weight: 700;
  width: 450px;
  height: 200px;
  background-color: green;
  line-height: 200px;
}

Output

The text is now vertically aligned within it's containing div. Please note that if you write too much text to the point of the text wrapping to the next line, the results may be undesirable.

Vertical alignment with the padding CSS property

The padding CSS property is typically used to add space between the edges (border) of an element and its contents. In some cases it can be used to center text vertically within an element.

HTML

<div class="text-container">
    <p>This is some text</p>
</div>

CSS (long-form)

This long-form CSS uses both the padding-top and padding-bottom properties. You can condense these properties into a single line as shown in the "CSS Alternative (shorthand)" section below.

.text-container {
  background-color: green;
  width: 450px;
  padding-top: 60px;
  padding-bottom: 60px;
}

CSS Alternative (shorthand)

Note the padding property pulls double duty, replacing padding-top and padding-bottom via the shorthand shown below. Both the long-form CSS above and the shorthand CSS shown here are valid.

.text-container {
  background-color: green;
  width: 450px;
  padding: 60px 0;
}

Output

By setting the top and bottom padding to the same amount, our text containing div grows in height, pushing our text into the vertical center.

How to horizontally and vertically center text in CSS

Sometimes you need to center text both horizontally and vertically. We can achieve this by using flexbox in our CSS, we'll explore this in detail below.

How to use flexbox to horizontally and vertically center text

To horizontally and vertically center our text we can use display: flex alongside a couple other properties. In total we'll be setting the display, justify-content, and align-items properties.

HTML

We've put our text in a containing element (div).

<div class="text-container">
    <p>This is some text</p>
</div>

CSS

We set the containing div to flexbox and then align the text. We use justify-content: center to center the text horizontally and align-items: center to center the text vertically.

.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  width: 450px;
  height: 300px;
}

Output

Scrimba Discount

If you use our link to purchase a plan, we will receive a monetary kickback

Learn to code using Scrimba with their interactive follow-along code editor
Join their exclusive Discord communities and network to find your first job!
Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Sources

CSS Layout - Horizontal & Vertical Align (Source: W3Schools)
How to Center Text & Headers in CSS Using the Text-Align Property (Source: HubSpot)

What is VPS Hosting? How Does It Work? (Beginner's Guide)

Matt Lawrence ☕ — Mon, 18 Sep 2023 21:22:24 +0000

What is VPS hosting?

VPS hosting stands for Virtual Private Server hosting, it serves as the middle option among the traditional hosting types (shared, VPS, dedicated). With VPS hosting, multiple users share a single piece of hardware (server), the server is divided up according to the amount of resources and specifications you've purchased from the hosting provider. The hosting provider manages the server with a hypervisor, a type of software that lets them divide up the server's resources into separate sections for each of their customers. These sections can have different operating systems installed, be given access to different types of storage (ie HDD vs SSD), and be powered by individual CPUs at varying performance levels.

How does VPS hosting compare to shared and dedicated hosting?

VPS hosting finds itself in the middle ground between shared hosting and dedicated hosting in terms of capability, price, and performance.

What is shared hosting?

Shared hosting provides a budget-friendly and low-performance solution for those with small-to-medium websites by sharing a single server among multiple hosting customers. With shared hosting, there is minimal administrative freedom, you can't install apps and configure the server any way you want, you're stuck working with whatever the hosting provider allows you to do. This lack of freedom benefits those that want an easy-to-setup environment with minimal technical knowhow.

What is dedicated hosting?

Dedicated hosting is the most expensive of the traditional hosting types, but it also provides the most administrative freedom and computing power. When you purchase a dedicated hosting plan, you're given access to an entire server, that you can setup and use as you see fit. These added capabilities allow dedicated hosting to power demanding websites and web apps, even if they have special configuration requirements. The downside is that you're in charge of the entire server and therefore there is quite a lot of technical debt added to your project in the form of server administration (installs, updates, maintenance).

VPS vs shared vs dedicated

There is a great disparity between shared hosting and dedicated hosting. In summary, shared hosting provides a budget-friendly and low-technical skill solution for small-to-medium websites. Dedicated hosting on the other hand is very expensive and adds a lot technical debt to your workflow, but is capable of powering demanding websites and web apps. VPS hosting lives between shared and dedicated hosting, it acts as the middle ground in capability, price, and performance.

Many projects (ie a niche blog) will start out on shared hosting, but as the site grows in popularity, shared hosting may not provide enough performance for the amount of users on the site. Instead of investing in a very expensive dedicated hosting plan and a server administrator to setup and maintain it, a VPS hosting plan is a more flexible option for your growing site. VPS hosting offers flexibility via managed and unmanaged options. Managed VPS hosting lets your hosting provider manage and maintain the server, just like they would with their shared hosting plans. This is a great option for those that don't need a lot of administrative freedoms, but have outgrown a shared hosting plan. On the flip side, an unmanaged VPS hosting plan gives you more administrative freedoms, but requires that you maintain the server yourself. This option is ideal for projects that require special server configurations to work, but aren't busy enough to justify a dedicated hosting plan.

How does VPS hosting work?

VPS hosting works by dividing up a single piece of hardware (server) into separate sections that hosting customers rent from a hosting provider. The hosting provider divides up their server through the use of a hypervisor, a type of software that allows multiple operating systems to share a single piece of hardware through the creation and management of virtual machines (VMs). Hypervisors can be installed on top of an operating system (type-2 hypervisor), or can be installed on the physical server without an operating system (type-1 hypervisor).

As a customer of a hosting provider, you don't need to worry about interacting with the hypervisor layer, instead, you'll be provisioned one of the virtual machines that the hypervisor helps manage. Each virtual machine can have its own operating system (ie Linux, Windows) and resource allocation (ie 4GHz 2-core CPU, 3GB RAM, 128GB SSD). Oftentimes, the servers that hosting providers use for their VPS offerings have redundant components, like multiple CPUs installed, meaning that an entire dedicated CPU can be allocated to a single VM.

Each VM operates as it's own individual server, the resource limits are hard set so that a single hosting customer can't hog too many resources (something that can happen rarely in shared hosting). If managed properly, you should never see, or notice, any other hosting customer that is on the same physical server as you.

When should I use VPS hosting?

VPS hosting is best used for websites and web apps that are not suitable for shared hosting (ie too much traffic), but don't require the amount of computing power that dedicated hosting provides. The middle ground, where VPS hosting sits, offers an environment that is much more powerful than shared hosting and optionally provides more administrative freedom. We'll explore the differences between managed and unmanaged VPS hosting below alongside examples of projects that would commonly use them.

Each hosting provider may treat managed versus unmanaged VPS hosting differently, with some even offering a semi-managed solution. Make sure you research exactly what you're purchasing from the hosting provider. Personally, I always reach out to my selected hosting provider before purchasing a plan, to confirm that the solution that I'm choosing does exactly what I want it to do.

What is managed VPS hosting?

Managed VPS hosting offloads the server management (server administration) duties onto the hosting provider. These duties will vary from provider-to-provider, but in general, they'll continue caring for the server in the same way they do on their shared hosting plans. This frees up their customers to continue working on their website without having to worry about installing, updating, or maintaining the server's core functions.

Example: When to use managed VPS hosting

A common use case for VPS hosting is a niche website that has increased its traffic to the point where shared hosting cannot continue to provide a good experience for readers. Outgrowing shared hosting this way leads naturally to managed VPS hosting, as it provides vastly superior performance, with minimal technical knowhow.

What is unmanaged VPS hosting?

Unmanaged VPS hosting puts the server management (server administration) duties onto the customer. The hosting provider will provision a VM to their customer, leaving them to maintain and configure it as they see fit. This emulates the freedoms that dedicated hosting provides, without the steep costs. However, it's important to note that if you're not tech-savvy, server administration duties have a steep learning curve and can take a long time - adding to your technical debt.

Example: When to use unmanaged VPS hosting

A startup is creating a web app that has a lot of server configuration requirements. These requirements go beyond the customization capabilities that shared hosting provides (ie root access). Because the development team needs these freedoms, server management (sever administration) is not needed from the hosting provider. Since this is a new web app that is still not all that popular and is being developed on a startup's budget, unmanaged VPS hosting fits into this scenario almost perfectly.

What is VPS hosting used for?

VPS hosting is commonly used to host websites and web apps that are too much for shared hosting, and not enough for dedicated hosting. However, because you have an entire VM at your disposal (especially if it's unmanaged), then there are some alternative use cases for VPS hosting.

Alternative VPS hosting use cases

If you've read our article on dedicated hosting, it contains alternatives to just hosting websites and web apps. Because VPS is similar to dedicated in a lot of ways, namely in administrative freedom and computing power, the same alternative use cases that we mentioned for dedicated can apply to VPS as well. The benefit here is that VPS is a more budget-friendly option than dedicated, but because it is more locked down (ie managed VPS) you may need to shop around a bit more for a hosting provider that can give you a VPS that is appropriate for your alternative use case.

I recommend reaching out to the sales/support of your preferred hosting provider to ask them if their VPS is capable of running your use case. Since VPS lies between the restriction of shared hosting and the freedom of dedicated hosting, sometimes web hosts will put some limitations on VPS that echo that of shared hosting. These restrictions may prevent specific applications (ie a Minecraft server) from being installed in the first place.

Hosting game servers

Many video games allow you to host private game servers for your friends and/or community. Some VPS hosting plans will allow you to install whatever you'd like and are powerful enough to run a game server with quite a few people playing at once (these requirements vary per game). With many unmanaged VPS hosting plans you can even choose Windows over Linux as an operating system, an option that can open up a large list of game server compatibility. Keep in mind though, that VPS is typically not as powerful as dedicated, so a demanding game server - and especially a demanding game sever on Windows, may be too difficult to run on VPS. Check with your hosting provider for their hardware specifications.

IT infrastructure

IT departments are responsible for setting up and maintaining several pieces of infrastructure, some of which may benefit from being hosted on the cloud. If compatible, VPS can offer a budget-friendly way to host some infrastructure instead of reaching for a traditional cloud hosting service (ie Azure, AWS), or even dedicated hosting.

Remote Workstation

Sometimes you may need a workstation that is geographically close to a particular place. For example, if you hire someone from Australia, and they're required to FTP projects onto a Canadian server, they may experience disconnects and errors due to high latency (ping) between their computer and the Canadian server. By remotely accessing a server (remote workstation) that is closer to the Canadian server, these errors can be mitigated.

Is VPS hosting good?

VPS hosting is good as long as you use it for what it is designed for, projects that can't run on shared hosting, but aren't demanding enough for dedicated hosting. These projects are typically websites and web apps that have outgrown their beginnings on shared hosting. For example, shared hosting is a perfect place to start a niche blog, but once the traffic picks up, performance may suffer. When that happens, it's time to upgrade your hosting - VPS is a great option in this particular case because it can handle a lot more traffic than shared, and is much cheaper than dedicated. VPS hosting is also ideal for people that have minimal technical knowhow in server administration, many hosting providers offer "managed VPS hosting" plans meaning they deal with the majority of the server maintenance for you.

Choosing the best hosting type for you comes down to selecting the right tool for the job. In general this means...

Shared hosting for small-to-medium websites and web apps. You can read more about shared hosting here
VPS hosting for websites and web apps that have outgrown shared hosting, but don't need the full power of a dedicated server
Dedicated hosting for demanding websites and web apps (and other server applications) that are very demanding, or need specialized configuration(s). You can read more about dedicated hosting here

Pros and cons of VPS hosting

Like all other hosting types, VPS hosting comes with its fair share of advantages and disadvantages. Please note that hosting providers operate as independent businesses and therefore some of the advantages and disadvantages listed below may not apply. After choosing a VPS hosting plan, I recommend reaching out to your chosen hosting provider to make sure that the project you plan to host will run without issues on their service.

Advantages of using VPS hosting

Flexible offerings
- Managed VPS hosting lets you offload the majority of the server maintenance and administration duties onto the hosting provider. Typically, this results in less administrative freedoms, but allows those with minimal technical knowhow to take advantage of the increased computing power that VPS offers
- Unmanaged VPS hosting lets you get one step closer to dedicated hosting without a huge increase in budget by giving you more administrative freedoms for more demanding projects
Budget-friendly upgrade
- VPS gives you a budget-friendly upgrade option when you're coming from shared hosting. Jumping from shared to dedicated requires a large bump in the budget and the ability to take on a heap of technical debt
Testing and training friendly
- If you're training a new employee, or testing out a client project in a private environment then you probably don't want to pay the high cost of a dedicated server. VPS gives you the freedom and power to run most websites, web apps, and other projects - especially if the only traffic is the development team

Disadvantages of using VPS hosting

The allure and constraint of the middle ground
- Since VPS is a lot cheaper than dedicated hosting, it may be difficult to convince a purchasing manager to upgrade to dedicated when the time comes
- It's easy for a manager to keep asking their developers to increase site performance to stretch the host to the absolute limit, but there are only so many efficiencies that can be done before an upgrade to dedicated is required
Confusing offerings
- Some hosting providers aren't real clear on what they're offering
- For example, all their VPS hosting plans may be managed, or unmanaged, without clearly stating which is which. Other hosting providers will offer managed and unmanaged, but may call them by different names
- This "marketing confusion" can cause more shopping around than normal for VPS versus shared or dedicated options

Related Podcast Episode

If you want to learn more about dedicated hosting and other traditional hosting types like shared and VPS, we have a recent podcast that you might be interested in listening to titled "What Type of Hosting Should You Use? (Shared, VPS, Dedicated, Reseller, WordPress, NodeJS)"

You can give it a listen right here.

Scrimba Discount

If you use our link to purchase a plan, we will receive a monetary kickback

Learn to code using Scrimba with their interactive follow-along code editor
Join their exclusive Discord communities and network to find your first job!
Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Support Us On Patreon

If you'd like to support more articles like this and future podcast episodes, please consider checking us out on Patreon.

Sources

What Is VPS Hosting? All You Need to Know About Virtual Private Servers (Source: Hostinger Tutorials)
What Is a Virtual Private Server (VPS)? (Source: Google Cloud)
Thumbnail made with Bing Image Creator and Canva

If you'd like to support more articles like this and future podcast episodes, please consider checking us out on Patreon.

How to Center an Image with CSS

Matt Lawrence ☕ — Thu, 31 Aug 2023 21:34:36 +0000

In this comprehensive guide, learn how to center an image vertically and horizontally using vanilla CSS. There are several methods that you can pick-and-choose from based on your project's needs and your own personal preference. As a junior developer it can be difficult to understand how each method works and which method to choose - we'll be covering several of these methods with examples below to help guide you.

How to Center an Image Horizontally

Using CSS to center an image horizontally means you're centering it on the x-axis.

Method 1: Margin Auto

Using automatic margins on the left and right will align a block-level image element as long as it has a width that's less than 100%.

HTML

<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">

CSS

img {
  display: block;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}

display: block | Changes our image element to a block-level element from it's inline-level default
width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)
margin-left: auto & margin-right: auto | These two properties horizontally center our image property

Note: Instead of using margin-left: auto and margin-right: auto you can alternatively use the margin: auto shorthand, however, it sets all margin directions (margin-top, margin-right, margin-bottom, margin-left) to auto. This might disrupt your layout if you're using specific margin values on the top and bottom of your image.

Alternative CSS

/* Alternative: Using margin auto shorthand */
img {
  display: block;
  width: 250px;
  margin: auto;
}

Method 2: Display Flex

If you're using flexbox throughout your project, this is a great method to horizontally center an image. For this method you'll need to have a container div that wraps around the image element.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

div | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  display: flex;
  justify-content: center;
}

img {
  width: 250px;
}

display: flex | Applying flexbox to our wrapper div
justify-content: center | Centers flex children horizontally (assuming the flex-direction property is left as default)
width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)

Method 3: Text Align

Images are inline-level elements by default, when contained by a block-level element, you can use the text-align property on the container to center the image horizontally.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

div | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  display: block;
  text-align: center;
}

img {
  width: 250px;
}

display: block | Ensures our wrapper div is a block-level element so that text-align works (by default a div is block-level, so in this context it is redundant, however the element you use as a wrapper may not be block-level by default and will need this applied)
text-align: center | Applied on a block-level wrapper element, it will center the image element that it contains
width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)

Method 4: Position Absolute, CSS Calc & CSS Transform

This method is a manual way of centering our image horizontally, it is more involved than the other methods covered in this guide, but it is still responsive.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

div | A container (aka wrapper) div that contains the image that we need to center

CSS - Calc

div {
  position: relative;
}

img {
  position: absolute;
  left: calc(50% - 125px);
  width: 250px;
}

position: relative | Makes the image align in relation to the container div
position: absolute | Lets you set where the image will be positioned exactly
left: calc(50% - 125px) | Horizontally centers our image
- left: 50% alone would move the left side of the image to be horizontally centered
- We know the width of our image (250px), to center the image horizontally we need to move it over by half of that width (125px)
- calc(50% - 125px) moves our image over by 50% minus half of the image's width (125px), horizontally centering the image

Alternative CSS - Transform & Translate

This alternative method swaps out the calc function in our left property and replaces it with a transform property + translate function. This method is arguably better for responsivity as you don't need to know what the width of our image is - allowing our image to be dynamically sized as needed without additional media queries in our CSS to compensate.

div {
  position: relative;
  height: 500px;
  background-color: red;
}

img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
}

The differences between the previous CSS example and this alternative version lie in the top, transform, and width properties (we removed the height property).

left: 50% | Moves the left side of the image over to the horizontally aligned position
transform: translateX(-50%) | This moves the image left by 50% of it's height so that the center of the image aligns with the horizontally centered position
width: 25% | We set our width to 25% to show that we have not explicitly set our height + width, meaning it can responsively change as needed and this method will continue horizontally centering our image

How to Center an Image Vertically

Using CSS to center an image horizontally means you're centering it on the y-axis. Centering an image vertically has less methods than horizontally, but luckily the more modern methods like flexbox and grid make the task easy.

Method 1: Display Flex

You'll need a container div wrapped around the image you're centering, you'll also need to give the container a height that is larger than the image's height so that we can vertically center it within the container.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

div | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  display: flex;
  align-items: center;
  height: 500px;
}

img {
  width: 250px;
}

display: flex | Sets the wrapper div to flexbox
align-items: center | Centers flex-items to be vertically centered, our image is the only flex-item in this example (assuming the flex-direction property is left as default)‍
height: 500px | The container needs to be taller than the image we are centering so that the image can be centered vertically inside of it

Method 2: Position Absolute, CSS Calc & CSS Transform

This method is a manual way of centering our image vertically, it is more involved than the other methods covered in this guide, but it is still responsive.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

div | A container (aka wrapper) div that contains the image that we need to center

CSS - Calc

div {
  position: relative;
  height: 500px;
}

img {
  position: absolute;
  top: calc(50% - 37.5px);
  height: 75px;
}

position: relative | Makes the image align in relation to the container div
height: 500px | Sets a height for the container div that is higher than the height of the image
position: absolute | Lets you set where the image will be positioned exactly
top: calc(50% - 37.5px) | Sets the position of the image as vertically centered
- top: 50% alone would move the top of the image to be vertically centered
- We need to move the image up a bit so that the center of the image lines up to be vertically centered
- calc(50% - 37.5px) moves the image down by 50%, then we subtract half the image image's height (image height: 75px, half of that is: 37.5px) from that figure to move the image up to be vertically centered

Alternative CSS - Transform & Translate

This alternative method swaps out the calc function in our top property and replaces it with a transform property + translate function. This method is arguably better for responsivity as you don't need to know what the height of our image is - allowing our image to be dynamically sized as needed without additional media queries in our CSS to compensate.

div {
  position: relative;
  height: 500px;
  background-color: red;
}

img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25%;
}

The differences between the previous CSS example and this alternative version lie in the top, transform, and width properties (we removed the height property).

top: 50% | Moves the top of the image down to the vertically aligned position
transform: translateY(-50%) | This moves the image up by 50% of it's height so that the center of the image aligns with the vertically centered position
width: 25% | We set our width to 25% to show that we have not explicitly set our height + width, meaning it can responsively change as needed and this method will continue to vertically center our image

How to Center an Image Horizontally and Vertically at the Same Time

Centering an image vertically and horizontally means you're centering it on both the x and y axes. You can think of it of placing your image right in the center of a page (wrapper div).

Method 1: How to Center an Image with CSS Grid

Using this centering method with CSS Grid will center our image both horizontally and vertically at the same time. This is arguably the easiest way to vertically and horizontally center an image.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

div | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  display: grid;
  place-items: center;
  height: 500px; 
}

img {
  width: 250px;
}

display: grid | Applies grid layout to our wrapper div
place-items: center | Vertically and horizontally centers our image
height: 500px | Sets a height for the container div that is higher than the height of the image
width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)

Method 2: Display Flex (horizontal & vertical)

Using flexbox to center an image horizontally and vertically is just a matter of combining both the horizontal and vertical methods together.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

div | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;

}

img {
  width: 250px;
}

height: 500px | Sets a height for the container div that is higher than the height of the image
display: flex | Sets the wrapper div to flexbox
justify-content: center | Centers flex-items horizontally, our image is the only flex-item in this example (assuming the flex-direction property is left as default)‍
align-items: center | Centers flex-items to be vertically centered, our image is the only flex-item in this example (assuming the flex-direction property is left as default)‍
width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)

Method 3: Position Absolute, CSS Transform & CSS Translate (horizontal & vertical)

This method is a manual way of centering our image vertically and horizontally, it is more involved than the other methods covered in this guide, but it is still responsive.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

div | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  position: relative;
  height: 500px;
}

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
}

position: relative | Makes the image align in relation to the container div
height: 500px | Sets a height for the container div that is higher than the height of the image
position: absolute | Lets you set where the image will be positioned exactly
left: 50% | Sets the left side of the image to be horizontally centered
top: 50% | Sets the top side of the image to be vertically centered
transform: translate(-50%, -50%) | Adjusts the image position to move up by 50% of its height and left by 50% of its width so that the center of the image is centered horizontally and vertically
- The translate CSS function is shorthand for the translateX and translateY functions
- It can be broken down as translate(X, Y)
width: 25% | We set our width to 25% to show that we have not explicitly set our height + width, meaning it can responsively change as needed and this method will continue vertically center our image

Learn More CSS

If you're looking for more CSS content we have a couple of podcast episodes that you might be interested in:

CSS Attribute Selectors & Custom Attributes

Listen Here: Episode Link

Learn how to select elements based on the presence of an attribute, or the presence of an attribute with a specific value
Filter through attribute values with vanilla CSS features
Create and work with custom attributes

CSS Selectors Crash Course

Listen Here: Episode Link

Learn how to select elements based on their class, ID, or HTML element type
CSS selector structure
- Simple selector
- Compound selector
- Relative selector
- Selector List
Grouping selectors

Scrimba Discount!

Learn to code using Scrimba with their interactive follow along code editor
Join their exclusive discord communities and network to find your first job!
Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Sources

How to Vertically & Horizontally Center an Image in HTML & CSS (Hubspot)
HTML Center Image – CSS Align Img Center Example (Free Code Camp)
How to Center an Image Vertically and Horizontally with CSS (Free Code Camp)

What Is Dedicated Hosting? How Does It Work? (Beginner’s Guide)

Matt Lawrence ☕ — Thu, 31 Aug 2023 20:40:39 +0000

What is dedicated hosting?

Dedicated hosting is a type of web hosting that gives you access to an entire physical server. It is designed to give you the freedom to configure and install whatever you need to, to get your website/web app up and running. Out of all the hosting types offered by traditional web hosts (shared, VPS, dedicated), dedicated hosting gives you the most computing power, perfect for complex web apps, or websites with a lot of traffic.

You can compare dedicated hosting to using your own personal computer. Nobody else uses it and you're free to install and uninstall any programs that you want. Because nobody else is using your computer, you have all its power at your disposal to run a program, play a game, convert files, and more.

Note: Despite the power and freedoms found with dedicated hosting, I recommend contacting your hosting provider with your project's use case and requirements to ensure that you're purchasing the plan that is right for you. Hosting providers are all separate and competing businesses, so they're offerings will vary depending on the needs of their customers.

How does dedicated hosting work?

When you purchase a dedicated hosting plan, you're renting a server in a hosting provider's datacenter. A server is a computer that, in this context, you access remotely to setup and configure a website, web app, or other server application. Unlike other hosting types like shared and VPS where you need to share the server with some of the hosting provider's other customers, dedicated hosting gives you an entire server just for yourself. The hosting provider is responsible for keeping that server running through power outages, hardware failures, and network problems. Your responsibility is for everything on the server itself, including the programs you need to install and how they're configured. Sometimes you can purchase additional support from the hosting provider to help you manage the server's software - some hosting providers will include support for no additional cost.

When should I use dedicated hosting?

Dedicated hosting should be used for websites and web apps that have a lot of traffic (high bandwidth), need a lot of computing power (complex), and/or require a specialized configuration. Some projects need a high-level of security and may gravitate towards dedicated hosting just so they're not sharing hardware with any other customers like on VPS, or shared hosting. Dedicated hosting is typically sold as web hosting (websites and web apps), but because you have access to a powerful server sitting on the cloud, some people will use it for other server-based applications like game servers, or IT infrastructure - you can read more about this in the "Alternative uses for dedicated hosting" section below.

Is dedicated hosting good?

Dedicated hosting is good as long as you use it for what it's designed for, very high demand websites, web apps, and server-based projects. It is very high performance, but also very expensive in comparison to other hosting types like shared hosting. Some projects will work just fine under the constraints of shared hosting at a fraction of the cost, so it's important that you check if your project needs dedicated hosting before committing to it.

Choosing the best hosting type for you comes down to selecting the right tool for the job. In general this means...

Shared hosting for small-to-medium websites and web apps. You can read more about shared hosting here
VPS hosting for websites and web apps that have outgrown shared hosting, but don't need the full power of a dedicated server
Dedicated hosting for demanding websites and web apps (and other server applications) that are very demanding, or need specialized configuration(s)

Pros and cons of dedicated hosting

Like all other hosting types, dedicated hosting comes with its fair share of advantages and disadvantages. It's important to note that hosting providers are businesses that compete with each other and therefore some of the points listed below may not apply to you (ie your hosting provider may give you comprehensive support for free).

Advantages of using dedicated hosting

Freedom of configuration -- You'll have the freedom to install, configure, and uninstall programs that you might need. You may even be given the choice of OS (Windows Server, Linux Server - various distros)
A lot of computing resources -- If your project requires a lot of computing power, then dedicated hosting provides the highest amount of computing power out of the traditional hosting types (shared, VPS, dedicated)
Hardware insights and selection -- When you purchase dedicated hosting from a hosting provider, they'll usually give you insights into the components they're using (ie type of CPU, amount of RAM, storage amount + speed). Typically hosting providers will keep some of these details under wraps (unless asked) for other hosting types like shared and VPS. Some dedicated hosting packages even let you choose from a pre-selected list of hardware options.

Disadvantages of using dedicated hosting

Added technical debt -- You're almost always responsible for the entire server's configuration and maintenance. That means you'll need to perform OS and software updates as well as software installations - this includes testing if the updates work before making them live to avoid as much downtime as possible. These skills are often called "server administration" and they have an extremely high learning curve, with a big time commitment required to learn and implement all the things that keep your server working as intended
Increased expense -- Dedicated hosting is the most expensive of the traditional web hosting types (shared, VPS, dedicated)
The expense increase can be quite considerable with shared hosting plans starting at ~$10CAD/month and dedicated starting at ~$100CAD/month
Less comprehensive or more expensive support -- Hosting providers will often offer comprehensive support for their shared and managed VPS hosting plans. This offering is much more rare for dedicated hosting as you have free reign over the server, so they aren't experienced with your unique configurations
Some hosting providers will offer comprehensive support for their dedicated hosting at a premium hourly rate

Alternative uses for dedicated hosting

Servers aren't just used for websites and web apps, there are plenty of reasons why you'd want to have a computer sitting in the cloud at your disposal. Because you have virtually free reign over dedicated hosting, some people will use them for other use cases like hosting game servers, or IT infrastructure.

Important note: Dedicated hosting is typically sold as web hosting. If you are trying to use a dedicated hosting plan for something other than a website/web app, I recommend contacting the hosting provider to ask them if your intended use case is supported.

Examples of alternative use cases for dedicated hosting

Remote workstation -- Sometimes you may need a workstation that is geographically close to a particular place. For example, you may have a developer located in Australia that constantly needs to upload and interact with servers in Canada. These interactions may be slow and timeout frequently, because of how far away they are from what they're working on. To remedy this, they could remote into a workstation (ie dedicated server running Windows) located in Canada, and perform those troublesome actions on there.
Video game server -- Some games require, or have the option for you to run your own server (ie Minecraft). Your home computer may not be able to keep up with hosting a game server due to the computing requirements, internet speed, or even electricity required (if you live in an area with frequent power outages, the server will keep going down). Dedicated servers are typically powerful enough in computing power and have enough networking capability to keep up with you and your friends playing together. -- You may need to limit the population of a game server if it gets too popular as some game servers are very demanding, with demand climbing considerably as new users log in.
IT infrastructure -- Some of IT's systems may benefit from sitting on a dedicated server. While this is typically done on cloud hosting with providers such as Azure, some small-to-medium businesses may find that dedicated hosting is more budget friendly to run apps that IT is comfortable running on a dedicated server. -- It's important to note that a lot of IT systems need a good amount of security, so an internal server, or secured Azure offering may be preferred -- An example of an IT system that could work on dedicated hosting is a video streaming server. The power of dedicated hosting would allow for transcoding, and the increased storage space has room for high-quality 4K videos. If the videos are meant for marketing on a digital display (ie on a retail smart display), then security may not be an issue as the videos are already suitable for public-viewing.

Related Podcast Episode

You can give it a listen right here.

Scrimba Discount!

Learn to code using Scrimba with their interactive follow-along code editor
Join their exclusive Discord communities and network to find your first job!
Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Sources

What is Dedicated Hosting? (Source: wpbeginner)
Shared Hosting vs. Dedicated Hosting (Source: domain.com)
WHC Pricing pages for shared hosting and dedicated hosting
Thumbnail made with Bing Image Creator and Canva

What Is Shared Hosting? How Does It Work? (Beginner’s Guide)

Matt Lawrence ☕ — Thu, 24 Aug 2023 18:51:25 +0000

What is shared hosting?

Shared hosting is a type of web hosting that is a budget and beginner-friendly option offered by most "traditional web hosts." Shared hosting allows you to share a single piece of hardware (a server) with other web hosting customers, a method that keeps costs down for those that run small low-traffic websites, or are just getting started online. The server is managed by the hosting provider, so you won't need to do any sort of server administration tasks. Instead of managing the server, the provider will give you a small piece of the server to work with, within the freedoms that they allow.

For example, many hosting providers will give you access to your account via cPanel, a web app that you can log in to, to manage your little piece of the server. Within cPanel you'll have the power to upload files, manage databases, install site builders (ie WordPress), configure PHP versions, and more.* Not all hosting providers use cPanel, some will use their own custom management software, while others will use more widespread cPanel alternatives such as Plesk. The hosting provider has the ultimate say in what goes on, on their server, they'll choose what you can and cannot do on your account. This means that when you're shopping for shared hosting, they're not all built the same, it's important that you check that you have the ability to configure and install all you need to for your website to work properly.

* Available features are dictated and controlled by the hosting provider

What is a traditional web host?

Traditional web hosts are hosting provider businesses that offer hosting services on a single server within a single datacenter. They typically offer three hosting types including shared hosting, VPS hosting, and dedicated hosting. This is unlike hosting providers like AWS (sometimes called cloud hosting), that provide services capable of scaling up and down across multiple datacenters and servers as needed and as purchased.

In my experience, traditional web hosts are commonly associated with selling a "complete package" - using Linux as their OS (pre-installed), running WHM and/or cPanel for management (pre-installed), MySQL for databases (configurable from cPanel), with Apache as their web server. Although they're not limited to these options of course.

How does shared hosting work?

Shared hosting works by taking a single server (computer) and dividing its resources up amongst several of a hosting provider's customers. Each customer is given a pool of resources that they're allowed to use (ie 2GB of memory, 5GB of storage space), most modern shared hosting will treat this pool of resources as a hard limit. This means that if a customer is limited to 2GB of memory, the provider's management software won't allow them to go over this limit - this ensures that a single customer won't hog all the available server resources. Each customer is typically given access to their piece of the server via a control panel web app where they can configure and install their website. Since the hosting provider manages the server, they have the ultimate say on what their customers are allowed to configure and install in their control panels.

Is shared hosting good?

Shared hosting is good, as long as you use it for what it's designed for. It is designed for small websites with low-to-medium traffic and minimal required computing power. The traffic amount is usually easy enough to figure out, but the required computing power is not. For example, having images on your website is easy for shared hosting to handle...but having videos that need to be transcoded (changing the quality between say 1080p through 720p) will most likely max out the amount of CPU power that you're allotted - even if your traffic is low. It is important to research and test your project's needs before deploying it to production as the amount of computing power you have at your disposal on shared hosting is usually very limited.

Advantages of shared hosting

Budget Friendly: Only one server is being used for several customers and therefore the provider's costs are lower than other hosting types. Those savings get passed down to you in the form of budget-friendly pricing.
Minimal Administrative Overhead: The hosting provider deals with all the server's OS updates, networking, and app installations. You don't need to do all that management yourself - a time consuming task with a steep learning curve.
Low Technical Ability Friendly: The hosting provider manages the server and almost always provides comprehensive support for anything that goes wrong (with some exceptions that vary provider-to-provider). This makes shared hosting one of the easiest hosting types for people that don't have much technical knowhow.
Scalability: Commonly, websites will overrun their storage requirements before generating enough traffic to justify upgrading to a more powerful hosting type. There are usually several tiers of shared hosting available at most hosting providers and upgrading through them is commonly as easy as paying for a new plan to raise your resource allotment.

Disadvantages of shared hosting

Limited Freedoms: The hosting provider dictates what you can and cannot install, configure, and use.
Low computing power: If your web app needs to use anything that is computationally heavy (ie transcode a video on the fly) then you'll be susceptible to poor performance and crashes.
Lack of technical insight: Shared hosting is often sold with minimal technical details short of the amount of storage space and management software they'll be selling you. For example, it's common you won't know how fast the NIC (Network Interface Card) is, or what processor is being used.
Security Risks: You're sharing a server/computer with strangers and while it's very rare that you'll ever see their data, a bug or bad actor could cause trouble on your server. If you're using webmail, you could find yourself temporarily blocked from sending email to popular services (ie Outlook/Hotmail, Gmail) if someone else on the server (with the same IP address) sent out a lot of spam.

What type of projects is shared hosting good for?

Shared hosting is good for projects with low-to-medium traffic, and minimal computational power requirements.

Shared hosting is good for these types of projects:

Blogs (including ones with a database-driven CMS like WordPress)
Landing pages
Small business websites
Static sites (no CMS, no databases)

_Remember to check with the hosting provider to ensure your project's needs are met by your selected hosting plan and be sure to test your project extensively before launching. Even if you're launching "just a blog" you may not realize that a feature of your site could overrun the capabilities of a shared hosting.
_

How to select a shared hosting plan

In order to select the shared hosting plan that is right for you, you'll need to know what your website's requirements are. One key requirement is how much storage space your project needs now and in the immediate future. Most hosting providers offer multiple tiers of shared hosting plans that come with various perks and capabilities. Commonly, the biggest difference between the tiers will be how much storage space will be made available to you, but there are some other things you should be aware of.

Whenever I select a shared hosting plan I review:

Storage Type: Some shared hosting plans still come with an HDD for storage. HDD is an older storage method that is significantly slower than SSD technology.
Storage Amount: Ensure that you're purchasing enough space for your project to run today and at a minimum into the immediate future. You don't want to hit your storage limits too quickly - ideally never (if possible).Filling up your storage allotment can cause your website to perform poorly, or become inaccessible.
Compatibility: You need to ensure that your website will run on the OS installed by the hosting provider and that you have access to the configuration options you need. For example, if your website requires node.js and the shared hosting you've selected doesn't support it, then your project won't work.
Unlisted Specs & Limitations: Some hosting plans don't clearly state everything that you need to know. For example, I've been hit by a mailbox size limitation that wasn't listed in the original purchase order - it was instead buried in the hosting provider's blog. Maybe your project needs a particular amount of memory to run, or you're worried that it may need more CPU power than shared hosting can provide. To alleviate these concerns, I contact the hosting provider's support and/or sales team to discuss my project and its requirements. Sometimes they'll notice that your project can't run on their shared hosting plan, or maybe that you should upgrade to a higher tier to get access to more memory, etc.

Screenshot from Web Hosting Canada

Using node.js with shared hosting

Node.js is a popular tool for building websites and web apps, but it is typically barred from using shared hosting because in order to install and configure Node.js, you typically need more access than what is provided with most shared hosting plans. Many traditional web hosts will recommend using their VPS or dedicated hosting plans in order to install Node.js, but unfortunately, these hosting types are considerably more expensive than shared.

Luckily as Node.js matures, traditional web hosts are taking notice and some are starting to offer the ability to install and configure Node.js apps on their shared hosting services. Two such hosting providers are A2 Hosting and InMotion Hosting, both provide a GUI tool within the cPanel that they give their customers access to.

Related Podcast Episode

If you're interested in learning more about different types of hosting including shared, VPS, dedicated, and WordPress then you might be interested our podcast episode entitled "What Type of Hosting Should You Use? (Shared, VPS, Dedicated, Reseller, WordPress, NodeJS)"

You can give it a listen right here.

Sources

What Is Shared Hosting? The Ultimate Guide for Beginners (Source: Dreamhost)
How To Create Node.js App With cPanel With Node.js Selector (Source: A2 Hosting)
Shared Hosting for Fast & Secure Websites (Source: InMotion Hosting)
Header/OpenGraph image created with Bing Image Creator and Canva

CSS Variables – What Are They & How to Use Them

Matt Lawrence ☕ — Tue, 22 Nov 2022 13:40:00 +0000

What Is a CSS Variable?

CSS custom properties are often referred to as CSS variables. They allow you to set and store values within them for use throughout your stylesheet(s). For example, you could have a primary-color variable that is set to the hex value of red (#FF0000).

What Are CSS Variables Used for?

CSS variables allow you to use a value throughout your stylesheet without the need for typing it in repeatedly. Modifying the value of a variable updates all the places in your stylesheet where the variable was used, preventing the need to go back and edit several instances of the same value in the future.*

For example, if the primary color of your website is red (#FF0000), then you'd have several places throughout your CSS that would need to be set to #FF0000. If, in the future, the primary color of the website was to change to blue (#0000FF), you'd have to go through your stylesheet and update every instance where red was used, manually. With CSS variables you'd only have to change the variable's value for it to update throughout the stylesheet.

There are some exceptions to this, especially when a variable's value is set in multiple locations. Example 3 below covers this in more detail.

How to Set Up and Use a CSS Variable

Like other programming languages, CSS variables need to be declared with a valid name and an appropriate value before they can be used. Once declared their value can be called upon by using the var() function throughout the scope (global or local) in which the variable was declared. CSS variables can be declared both globally and locally as needed.

Global Versus Local CSS Variables

A CSS global variable is declared such that it can be used throughout your styles, this includes the stylesheet in which the variable was declared, but also other stylesheets (other files) as well. An example of this can be found on StackOverflow. As for a local variable, they're declared on a smaller scope than global, commonly on a specific class, or ID. The variable cannot be used outside the local scope in which it was declared.

The image below shows an example of how a local CSS variable works.

The variable primary-color is set to red and is declared locally on the featured class.
The color property is then set to the value of primary-color on all paragraphs (p elements).
The output shows, that the red color is exclusively applied to the paragraphs that are contained by the div with the featured class and not any other paragraphs.

If you're a little confused by this example, don't worry, we have more explanations and three detailed examples still coming up!

How to Declare a CSS Variable

CSS variables are declared by using two dashes (--) followed by a valid variable name. Remember, they can be declared both globally and locally.

Valid CSS Variable Names

CSS variable names can contain:

alphanumeric characters
dashes
underscores

You can see an example of the same "primary color" variable declared with variety of character configurations in the image below.

How to Declare a CSS Variable Globally

To declare a CSS variable globally, we use the :root pseudo-class. Since we are working with HTML, the :root pseudo-class applies to the HTML element, and therefore globally throughout our page.

How to Declare a CSS Variable Locally

To declare a CSS variable locally, we declare the variable in a desired scope - like a class, or an ID. Once delcared locally, the variable can only be used within that scope.

How to Use a CSS Variable

To use a CSS variable in your stylesheet, you need to use the var() function. The var() function inserts the variable's value wherever it is used. Simply enter the variable name between the brackets like so, var(--variablename). Remember you need to declare your variable before using it.

CSS Variable Examples

Below are some detailed examples of how global and local CSS variables work.

Example 1 - The Global Scope

In this example, you can see that we've globally declared the red-text variable and then applied it's value to the color property, which is being applied to all paragraph elements.

As you can see in the image above, all the paragraphs have red text because the red-text variable was declared globally and applied to all paragraphs. Remember that global variables can be used throughout your CSS stylesheets, this includes across multiple files (ie variables.css, styles.css, etc.).

Example 1 Breakdown

In our HTML we have two paragraph elements...

Paragraph 1 is contained within a div that has the featured class applied to it.
Paragraph 2 is NOT contained within the div with the featured class

In our CSS we have three aspects to focus on...

The red-text variable is being declared on the :root pseudo-class (which is the same as declaring it on the HTML element)
The color property is being set to the value of the red-text variable
The color property mentioned above is being applied to all paragraphs (p tags) in the HTML

In our output/webpage we can see that both Paragraph 1 and Paragraph 2 have red text. Despite Paragraph 1 being contained within a div, and Paragraph 2 being a direct child of the HTML element, the value of the red-text variable applies. The red-text variable is global and therefore applies not just to direct children of the HTML element, but throughout other scopes that may be present - like the featured class scope that Paragraph 1 finds itself in.

Example 2 - The Local Scope

In this example, you can see that we've locally declared the red-text variable on the featured class. This means that the value of red-text can only be applied to elements that are within the scope of the featured class.

As you can see above, we have a div and two paragraphs. The div has the featured class applied to it. In our CSS we're applying the red-text variable to the color property on all paragraphs, but the second paragraph's text did not change color. This is because the second paragraph is not within the scope of the featured class.

Example 2 Breakdown

In our HTML we have two aspects to focus on...

Paragraph 1 is contained within a div that has the featured class applied to it
Paragraph 2 is NOT contained within the div with the featured class

In our CSS we have three aspects to focus on...

The red-text variable is being declared on the featured class
The color property is being set to the value of the red-text variable
The color property mentioned above is being applied to all paragraphs (p tags) in the HTML

In our output/webpage, we can see that only Paragraph 1 is showing red text, when in fact we've applied the red-text variable's value to the color property on all paragraph HTML elements.

The reason Paragraph 2 does not have red text, is because we've declared the red-text variable locally, on the featured class's scope. Paragraph 2 falls outside of this scope and therefore the value of the red-text variable does not apply.

Let's build on what we've learned here with Example 3 below.

Example 3 - Local & Global

In this example we're going to combine the use of both globally and locally declared variables at the same time, with a bit of a twist - we'll be declaring the same variable twice, in both the local and global scopes.

As you can see above, we've declared two variables, in three different instances:

text-color is declared globally and is set to the hex value #FF0000 (red)
text-size is declared globally and is set to 25px
text-color is declared again, locally under the scope of the featured class, set to the hex value #0000FF (blue)

The final result is that Paragraph 1 has blue text, from the locally declared version of the text-color variable. Paragraph 1 also has larger text than Paragraph 2, because its font-size is being set to 25px by the text-size variable. Paragraph 2 has blue text because its color property is being set by the globally declared version of the text-color variable.

Example 3 Breakdown

Just like Example 2, in our HTML we have two aspects to focus on...

Paragraph 1 is contained within a div that has the featured class applied to it.
Paragraph 2 is NOT contained within the div with the featured class

For the CSS we have a few aspects to focus on...

text-color is declared globally as the color red
text-size is declared globally as the value 25px
text-color is declared again, but locally this time as the color blue

And finally, our output/webpage for this example displays as you can see in the image below. Paragraph 1 is larger and is blue, while Paragraph 2 is the default font size and is red.

Let's break down this output piece-by-piece:

Paragraph 1 is larger than the default font size due to the text-size variable being applied to the featured class
Paragraph 2 is red because the value of the text-color global variable is being applied to all paragraphs
Despite text-color being applied to all paragraphs, Paragraph 1 is not red, instead it shows up as blue. This is because we've declared the text-color variable again locally in our CSS on the featured class. The local declaration is more specific to Paragraph 1 than the global declaration, and therefore the local declaration wins out. You can read a little more about cascading and specificity with variables in this DEV article

Theming a Website With CSS Variables

In this article we focused on CSS variable basics, but I think it's important to showcase some real-world applications of CSS variables so that you can see them in a more practical setting. One of the most common real-world uses for CSS variables is theming a website with a different colour scheme based on a set of parameters, such as toggling between a light and dark mode.

Toggling between dark and light modes is a popular option for a lot of software out there, including websites and web apps. Using CSS variables alongside additional HTML, CSS, and JS, you can put together a practical theme switcher. Ananya Neogi was able to make a dark/light mode toggle switch - detailed guide in this article: Create A Dark/Light Mode Switch with CSS Variables

Similarly, Praveen on the Tech Inscribed blog, has a guide for making a theme selector with a focus on a light/dark theme in this guide: Developing Websites with Multiple Themes using CSS Variables

Sources

Free CSS variables course (Scrimba)
Using CSS custom properties (variables) (MDN Docs)
CSS Variables - The var() Function (W3Schools)
Understanding CSS Variables (DEV)

Working from Home

Matt Lawrence ☕ — Tue, 17 Mar 2020 00:29:03 +0000

If you’re new to working from home, then you’re probably a little nervous about how it’s all going to work out. How will you be productive without your team members next to you? How are you going to avoid all those distractions at home? Will you be able to get all your work done? With the sad development of coronavirus (COVID-19) ravaging through many countries worldwide, many companies and individuals have made the choice to close the office in favour of remote work. While most programmers and technical staff are used to some sort of working from home scenario, there are a lot of us that are being torn from our comfort zone of commuting to the office and chatting at the water cooler. As an entrepreneur, I’ve been working from home for the past ~5 years, and while I used to work in an office prior to opening my own business, I’m happy to report that you can be super productive with just some adapting. So, let’s address some of the most common questions…

How will you be productive without your team members next to you?

One of the most common gripes I hear about remote work is that you don’t have the convenience of tapping on your colleague’s shoulder to ask a question. While this is true, we have the next best thing – chatting apps. Whether it be Slack, or WhatsApp, or whatever solution your workplace uses, chatting apps are more than just a tool to keep in touch when you’re out of your normal working hours.
Let’s take a common scenario for a web developer. You receive an AdobeXD prototype from the design team and you’re tasked with creating a client’s website from it. You start coding away and suddenly you realize – Is that a slider from left-to-right? Or does it just fade through the images in place?

Ideal Office Solution
You get up from your desk, walk over to the designer’s desk and ask them how the slider works. You then take that information, go back to your desk and continue developing away. But…this isn’t the utopia of offices and it’s hardly ever this easy…

Typical Office Solution
You get up from your desk, walk over to the designer’s desk and they’re not there. So you ask one of their team members and they say something like “Oh they left a little while ago, they’ll probably be back in a few minutes” Since you’ve got a few minutes to spare, you’ll probably end up chatting with that team member for 10 minutes before realizing the designer you came to speak to isn’t back yet – so you go back to your desk and send them a message (email or otherwise) asking for information. In this scenario you not only wasted time walking over, but you also wasted yours and your colleague’s time chatting while waiting for someone that might be gone for hours.

Working from Home Solution
You send a message (email or otherwise) to the designer asking them for additional details and then begin work on another portion of the page while you wait for the designer to respond. You’re not only saving the time it took to walk over to your colleague’s desk (which is minimal I know), but you’re also saving yourself from potential distraction of chatting with one of their team, or another colleague you might bump into.

How are you going to avoid all those distractions at home?

If you’re like most people, then your home is designed to distract you after a long day of work. It’s the place where you might play some Xbox, watch a little Netflix, hangout in the workshop, or even take a nap on the couch. As a result, many new remote workers are often worried about their own ability to set these distractions aside and get some work done. Not everyone’s work ethic or discipline is iron clad, and it’s just too easy to lay down after lunch for a nap.

Luckily though, and I’m a bit of an outlier in this regard, I actually don’t think you should fight these distractions too much. As discussed in the episode “What We Need to Do Better” of the HTML All The Things Podcast, I mentioned that instead of fighting off my distractions all the time, I indulge them – within reason. If I’m really not into the work I’m about to do and I’d rather watch something, I’ll pull up some Netflix, throw it onto my second monitor and then continue to work and watch. Slowly but surely, I get into what I’m working on and the Netflix becomes a distraction, so I pause it. This also works when I start getting worked up about something, when I get anxious, I take a brief video break, and slowly head back into the work. The key is not doing something that you know will pull your attention away for hours, or that’s too involved. If you like to build things for a hobby, you shouldn’t “take a brief break” and build an entire table – that’s not going to work. However, if you’re really itching to get back into the workshop, maybe you can start drafting up some plans for a new project, or finish sanding a section of a work in progress. If you’re like me, you’ll eventually start feeling guilty about stepping away from the computer, so you’ll sit back down refreshed and ready to get back to work. I believe it’s unrealistic that humans won’t be distracted in this day and age between our smartphones delivering hundreds of push notifications, to news reports piling in, and just the everyday workplace stress level – we’ll inevitably want to step away and do something else. Get it out of your system, then get back to work.

Will you be able to get all your work done?

Speaking generally, this relies on you not your environment. Some people work better with a lot of background noise and goings-on that happen in an office, while others need silence to focus - everyone is different. While a lot of remote workers will tell you to work in a café, you might be hesitant due to the climate (coronavirus). Assuming you’re staying in you can do a few things to help you get the environment you need.

If you need a quiet environment:

Finding a quiet room in solidarity might do the trick
If your home is noisy, then grabbing some ear plugs – or even noise cancelling headphones with nothing playing

If you need a noisy environment:

Playing a podcast, or a TV show that you’ve seen before (so you mostly listen to the audio)
Having a fan, or other white noise playing
Utilizing a variety of different “Focus” playlists that can be found on Spotify and other music streaming services
Moving from a quiet study, or home office, into the one of the more lived in areas of your home like a kitchen or living room

If all else fails:

If you’re a person that really needs that office environment and you’re not allowed to go in, you could always utilize something like a co-working space. Co-working spaces are offices that you can rent a space in for a day/week/month sometimes even just a few hours. They’re generally filled with a bunch of different businesses all doing different things, but together they generate the same sort of typical office environment you’d probably expect. Again, however, these co-working spaces can be crowded and with the current COVID-19 situation you’ll probably want to try and stay home as much as possible.
Force yourself to adapt – yeah, I know it sucks – But at the end of the day you’ll eventually get used to working in your home office. It might take a couple days before your productivity starts to improve, but if you stick with it, you’ll eventually find the home environment that’s right for you. It’s important to not focus on how uncomfortable you are working from home, how much you want to work in the office, or how unproductive you are. Just sit down and keep at it, it’s just like a new job, you get overwhelmed the first few days or weeks, but slowly you learn little tricks and adaptations that get you through the workdays with ease.

This article is also available on Medium

DEV Community: Matt Lawrence ☕

What are var, let, and const in JavaScript?

🔄 What's the difference between var, let, and const?

Understanding scope in JavaScript

What do hoisting, reassignable, and redeclarable mean?

Hoisting

Reassignable

Redeclarable

How to choose between var, let, and const

When to use var, let and const

✅ Use const when:

🔁 Use let when:

🕰 Use var when:

FAQ

Is it better to use let or const?

Why is var discouraged in modern JavaScript?

Is let faster than var?

Can you reassign a const variable?

What happens if you use var inside a function?

Does let have block scope?

Can you redeclare variables with let or const?

Want to learn more JavaScript?

CSS Pseudo Class Explained: What It Is and How to Use It

What are CSS pseudo-classes?

CSS pseudo-class example

Common CSS pseudo-classes

Hover

Required

Empty

nth-child()

Visited

FAQ

What is the difference between a pseudo-element and a pseudo-class?

What is : in CSS?

What is :: in CSS?

Can I use multiple pseudo-classes on the same element?

Do all browsers support CSS pseudo-classes?

Want to learn more CSS?

Why Feature Phones are Important in 2025

What is a feature phone?

What is considered a feature phone?

What is the difference between a feature phone and a smartphone?

What can you do with a feature phone?

Are feature phones making a comeback?

How much do feature phones cost?

Popular Feature Phones

Minimal Phone

Litephone III

The problem with modern feature phones

What is Cloud Phone?

How Cloud Phone Works

In-depth look at Cloud Phone

The Toughest Concepts in Web Development

How to Create Blog Categories and Tags in Webflow

Guide Summary

How to create blog categories in Webflow

Step 1: Create a category CMS collection

Step 2: Create category fields

Step 3: Create categories

Step 4: Make a reference field in your blog post CMS collection

Step 5: Attach a category to your blog post

How to create blog tags in Webflow

Step 1: Create a tags CMS collection

Step 2: Create tag fields

Step 3: Create tags

Step 4: Make a multi-reference field in your blog post CMS collection

Step 5: Attach tags to your blog post

How to Center Text in CSS

How to center text in CSS

How to horizontally center text in CSS

Horizontal text alignment with the text-align CSS property

HTML

CSS

Output

CSS

Horizontal text alignment with the margin CSS property

HTML

CSS

Output

CSS

What is `:` in CSS?

What is `::` in CSS?