Forem: Nathan Minchow

Let's Look at prefers-reduced-data

Nathan Minchow — Sat, 13 Jun 2020 18:57:31 +0000

I like web fonts. They are an easy way to enable consistent typography and design for a website.

Still, I sometimes wonder if I ought to force my users to download a font (even if it might be cached already) just to view my site. I've encountered plenty of websites filled with custom fonts and images that can take a while to load. This is especially frustrating when I only want to read the content. And while I do my best to minimize the data load on my sites, I still want things to look nice by default.

It would be great if users could indicate they'd prefer to minimize their data load as they browse the web, potentially at the cost of high-res images or detailed typography. That's where prefers-reduced-data comes into play.

prefers-reduced-data is a user preference media feature like prefers-color-scheme and prefers-reduced-motion. Unlike those, prefers-reduced-data is not supported in any browsers yet, and it's functionality could change bit before we see it implemented anywhere.

Curiously, prefers-reduced-motion, prefers-color-scheme, and prefers-reduced-data (among others) were all introduced in the Media Queries 5 spec from the W3C, but prefers-reduced-data has not seen the progress of the other two. There are some open questions related to the feature which could be slowing it down.

I'm hopeful that we'll see this feature implemented sooner rather than later. The <picture> and <link> elements both support media queries already, which means we could already account for images, fonts, and libraries without much work. Let's look at a potential method to prevent an image from loading if a user indicated they preferred reduced data.

min-width and max-width are common media queries to pair with the <picture> element because they allow us to load different images based on the form factor of the user's device (note that the <picture> element is not always necessary for this). In the example below, the image swaps to a different one once the width of the window shrinks below 400px.

If we wanted to use prefers-reduced-data to minimize our data load, we could adapt this technique from a blog post by Mike Masey to load a tiny, 1x1 transparent gif instead of a full image:

    <picture>
        <source 
            srcset="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" 
            media="(prefers-reduced-data: reduce)">
        <img 
            src="https://unsplash.com/photos/7hQ4Y_-bSb4/download?force=true&w=640" />
    </picture>

The best part about using the <picture> element like this is that no request is made to retrieve full image, which could save quite a bit of data for the user.

We could do something similar to prevent the loading and use of web fonts (this example comes from MDN:

<head>
  <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin>
  <link rel="stylesheet" href="style.css">
</head>

@media (prefers-reduced-data: no-preference) {
    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        /* latin */
        src: local('Montserrat Regular'), local('Montserrat-Regular'), url('fonts/montserrat-regular.woff2') format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
}

body {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Until browser support improves, we have other methods like the Save Data HTTP header to help users minimize data loads when requested. Still, I think prefers-reduced-data is more elegant and straightforward for developers. I'm looking forward to the day that we can use it in modern browsers.

If anyone has additional thoughts or interesting use-cases for prefers-reduced-data, please say so in the comments to this post. Also feel free to check out some of the issue discussions for this feature on Github.

Easy Website Themes with CSS Custom Properties

Nathan Minchow — Tue, 10 Mar 2020 14:30:50 +0000

With the advent of dark mode, website theme customization is becoming an expectation instead of a feature.

Plenty of websites go a step further and allow their users to select from multiple themes (like dev.to):

Full website theme customization may be overkill for some sites, but it's still something we ought to keep in mind when designing and developing for the web. Thankfully, modern CSS includes features that make implementing website customization easy. Most of it boils down to CSS Custom Properties.

CSS Properties: A Quick Overview

CSS Custom Properties allow us to define reusable variables in CSS without a preprocessor. They aren't exactly new; most modern browsers have supported them since 2016. And since they are variables, we can update them dynamically.

Custom Properties can be defined on any element by prefixing the property name with --. If we wanted to create reusable properties on the root element, we could define them like so (these examples are taken from MDN):

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

We can access these properties in child elements via the var() keyword:

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

To see this in action, I've defined three different colors in the example below. When the checkbox is toggled, the CSS properties update and colors change wherever they are referenced:

Custom Properties can do a lot of useful things. I recommend reading this excellent article by Michael Riethmuller for a more in-depth look at CSS Custom Properties, how to use them, and how they differ from preprocessor variables.

Theme Customization Use Cases

Since Custom Properties can be reused and updated dynamically, they are a good fit for theme customization. Let's look at how we can use Custom Properties to customize a site.

Implementing Dark Mode

The most straightforward way to add a dark mode to your site is via the prefers-color-scheme media query. This media query typically corresponds to the theme of the user's operating system.

So, if we have some scoped properties defined like so:

    main {
      --primary-color: cyan;
      --secondary-color: orange;
      --tertiary-color: yellow;
    }

We can simply update their values in the media query:

    @media (prefers-color-scheme: dark) {
      main {
        --primary-color: gray;
        --secondary-color: darkgray;
        --tertiary-color: lightgray;
      }
    }

And any elements using those properties will update dynamically when the user's theme changes. Here's how that might look in practice:

Custom Theme Selection

While prefers-color-scheme is a great starting point, sometimes we want to give the user the ability to select a theme at will.

If you've designed your site to take advantage of Custom Properties, we can accomplish this fairly easily. All we need to do is modify them, which we can do via CSS or Javascript.

Modify Custom Properties with CSS

Custom Properties, like any other CSS, can be updated as long as we have the proper selector.

If you examine the CSS from my earlier example, you'll notice that I've scoped my Custom Properties to the main element. When the checkbox is toggled, a selector updates the scoped properties inside it. This causes all elements within the main element to update with the new values:

While this method is pretty quick to implement, CSS selectors can be somewhat fickle (and dependent on our HTML). Furthermore, in most cases we'd want to save a user's theme choice. Javascript gives us more flexibility.

Modify Custom Properties with Javascript

We can use the setProperty() method to update our Custom Properties from Javascript.

If we have some Custom Properties scoped to a main element, we can query for it in our Javascript and call setProperty() to update its properties to new values:

It's common to see Custom Properties defined in the :root pseudo-class. In that case, the Custom Properties can be updated by calling setProperty on the root element:

While those examples only altered a few div elements, the same technique can be used to alter the theme for an entire site. To demonstrate this, I modified a template from HTML5UP to use Custom Properties for most backgrounds, text colors, and accents. Then, I added a toggle button that updates those properties with dark values instead:

The code for the theme switch is very similar to the CodePens above. I define a couple "Theme" objects in my Javascript:

const darkTheme = {
  "--accent-color": "#4acaa8",
  "--background-color": "#343737",
  "--active-scroll-background": "#343737",
  "--color-text": "white",
  "--sidebar-color": "#444c48"
};

const lightTheme = {
  "--accent-color": "#4bcdab",
  "--background-color": "#f0ffff",
  "--active-scroll-background": "#f0ffff",
  "--color-text": "#777",
  "--sidebar-color": "#4bcdab"
};

Then, when the toggle button is pressed, I update the Custom Properties I've defined on the root element with properties from a given "Theme":

function applyTheme(theme) {
  let root = document.documentElement;
  root.style.setProperty("--accent-color", theme["--accent-color"]);
  root.style.setProperty("--background-color", theme["--background-color"]);
  root.style.setProperty(
    "--active-scroll-background",
    theme["--active-scroll-background"]
  );
  root.style.setProperty("--color-text", theme["--color-text"]);
  root.style.setProperty("--sidebar-color", theme["--sidebar-color"]);
}

Feel free to take a look at the preview here, with the source code available here.

By implementing theme customization like this, adding a new theme to the site is as simple as creating a new theme object. We could save a user's preference via local storage or a database depending on what tools we have available.

Custom Color Selection

Some websites and apps allow users to create and modify themes directly. Once again, we can use setProperty() to update a Custom Property with any value, including ones exposed for input.

In the Codepen below, the colors of the first square and the borders of all squares are exposed as input elements. When the form is submitted, these values are updated and are reflected in the result:

Naturally, we could extend this to expose the various properties used on an entire website or application. Those preferences could then be exported or saved to remember a user's choice (or to allow users to share themes).

Conclusion

Custom Properties allow us to make sweeping changes to our website without much work. This makes them a great tool for implementing theme customization, whether for automatically detecting a user's theme preference with prefers-color-scheme or allowing them to pick (and potentially modify) their own themes.

Creating a Resume in HTML and CSS

Nathan Minchow — Tue, 04 Feb 2020 15:48:59 +0000

Standard word processors don't hold a candle to HTML and CSS when it comes to controlling the finer details of styling and layout. I've had difficulty fine-tuning my resume in a word processor, so I started using HTML and CSS to create and maintain my resume instead. I've found it to work a lot better overall, but there are a few helpful things to know before beginning the transition.

Getting Started

First, a disclaimer: this guide is not meant to provide resume templates or styling advice. Rather, I'm detailing a process for handling a resume print layout in HTML/CSS. This includes setup, print styling, and a final PDF export.

Wireframe

It's much easier to write HTML and CSS when working from a mockup or wireframe. I used an old resume from Word as my baseline, but you could just as easily mock something up in a free tool like Adobe XD or Figma (Figma even supports print sizes by default).

If you already have content from a past resume ready to go (like I did), you can break out your design into sections and add the details later:

Wireframe of resume built in Figma

We don't have to adhere to the exact styling of a template or mockup, but it can be useful for organizing the overall layout.

Setting up a "Canvas"

To better visualize your resume as you code, I'd recommend creating a "canvas" – an HTML container with the same proportions as your resume. By placing this container on an empty page, you'll get a view very similar to a typical word processor:

We can actually use physical measurement units in CSS (even though they end up mapping to pixels anyway), so it was quite easy to set this canvas up:

.canvas-container {
  margin: 0 auto; /* for centering, feel free to use flexbox or some other method*/
  box-sizing: border-box;
  padding: 0.5in; /* controls margins */
  width: 8.5in;
  height: 11in;
  background-color: white;
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.7);
}

Here's what that might look like on a barebones page (use 0.5x or 0.25x zoom for the best effect):

Use your canvas container to set default styles on your entire page, similar to defaults in a word processor. Other good properties to consider adding here are line-height and font properties like font-size and font-family.

Layout and Content

Using your wireframe for reference, map out how you will divide your canvas space into sections of content. This is where tools like Flexbox and Grid will come in handy if your layout is more complex.

My setup was fairly straightforward: each area of my resume was broken into a section element. Whenever I had content spanning two columns, I used a grid to split them up:

.multicolumn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Here's what that looks like in practice:

In my resume, I only needed a multicolumn layout for two sections, Experience and Certifications / Skills. I hid the content, but here's how those grids are situated on my current layout:

One added bonus of using something like grid is maintainability; I could very easily add another instance of work experience and have the grid automatically adjust without destroying the rest of my layout:

Apart from using grid in those two instances, everything else fit nicely into sections using normal flow. Feel free to use whatever works best for you.

Exporting

Most companies and recruiters won't accept an HTML page as a valid resume. Therefore, you'll want to export your page as a PDF. Browsers can do this readily via the Print command, but we'll need to do some adjustments to our CSS beforehand.

Print Styles

We'll be taking advantage of the print media query to style our exported page. It allows us to apply styles specifically when a browser attempts to print.

If you followed my advice of building everything inside a container, this should be a straightforward process. For simplicity, I made the entire html element's width and height match the print size of my container. You may also need to remove any margins (and box-shadows!) for elements between the body and your container, otherwise the added space might cause an extra page to render:

@media print {
  html {
    height: 11in;
    width: 8.5in;
    overflow: hidden;
  }

  body {
    margin: 0;
  }

  .canvas-container {
    width: 100%;
    box-shadow: none;
  }
}

Generating a PDF

With browser styles in place, we can use the browser's Print dialog to save our page as a PDF.

While I love Firefox, Blink's Print functionality tends to do a much better job of accurately exporting a page. I used Chrome for my final export – as detailed in the following instructions.

After opening the print dialog, set your Destination to "Save as PDF". Additionally, you'll want to adjust a few settings before saving the final result. Expand the "More settings" option and check the following:

Color is enabled if you are using anything other than shades of gray
Paper size is set to your preferred size (I used Letter throughout this guide)
Margins should be set to None
Scale should be set to 100
Background Graphics are enabled

Example of Chrome's print dialog with proper settings for PDF export

Go ahead and save the page. With that, you should have both an easily maintainable HTML resume and a PDF export to use for actual applications.

Conclusion

I hope this guide was a helpful starting point in how to create a resume in HTML and CSS.

If you're curious for what my final result was, the source code for my current implementation is available here.

If you've gone through this process or have any additional tips for handling a print layout in HTML/CSS, please let me know in the comments below.

This post originally appeared on my personal blog, with a few modifications here for brevity.