Steve Schoger | Refactoring UI — Tips and tricks to make a site visually more interesting

As seen at the most recent CSS Day. I’m quite sure this will help many developers to make their POCs/experiments visually more interesting:

Sometimes when we look at a polished interface we can acknowledge that it looks good but it’s hard to articulate why it looks good. In this practical session, Steve will be explaining the why. He’ll be looking at a poorly designed UI and refactoring it while providing some of the strategies and techniques designers use to give an interface that polished look.

We’ll be looking at some of the more common problems faced by designers and developers—from simple forms to complex data—showing what a difference a few small cosmetic changes can do to bring design to the next level.

How to deploy your first site onto Netlify (+ basic configuration)

About two months ago I developed the website for vBridge, a new company I’m participating in. As the website consists of only one static placeholder-like page, I decided to look into hosting the page directly onto a CDN. Having heard a lot of good things about Netlify, I decided to check that out.

The site itself is built from its source through Webpack by calling yarn build. Where I’d normally go for an external build service to build the site for me, and then deploy it from there into a bucket onto Google Cloud Storage or Amazon S3, Netlify allows me to remove this extra service in between as it has built-in support to building the source for me:

And best of all? Netlify is free (for basic sites), and supports Lambda Functions, and is configurable through a file named netlify.toml.

Configuring Netlify trough netlify.toml

Before adding the site to Netlify itself, I added an instruction file named netlify.toml in the root of the repo. This file tells Netlify what the build command is, which folder needs to be deployed, which redirects to perform, etc.

Here’s the full contents of my netlify.toml configuration file:

[build]
  publish = "build"
  command = "yarn build"

[[redirects]]
  from = "https://vbridge.netlify.com/*"
  to = "https://www.vbridge.eu/:splat"
  status = 301
  force = true

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "no-referrer"
    X-Content-Type-Options = "nosniff"
    Strict-Transport-Security = "max-age=63072000; includeSubDomains; preload"

Let’s break that down into several pieces:

  1. [build]
      publish = "build"
      command = "yarn build"

    This snippet tells Netlify what the build command is (yarn build), and which folder that needs to be deployed (build).

  2. [[redirects]]
      from = "https://projectname.netlify.com/*"
      to = "https://www.domain.tld/:splat"
      status = 301
      force = true

    Whenever you deploy a project to Netlify, it will deploy it to a projectname.netlify.com subdomain. To prevent people from accessing the site through that subdomain, add this redirect instruction to your netlify.toml. The snippet is smart enough to retain the value of the pathname when redirecting

  3. Additionally I also added some extra security headers. They are applied to all URLs ("/*")

    [[headers]]
      for = "/*"
      [headers.values]
        X-Frame-Options = "DENY"
        X-XSS-Protection = "1; mode=block"
        Referrer-Policy = "no-referrer"
        X-Content-Type-Options = "nosniff"
        Strict-Transport-Security = "max-age=63072000; includeSubDomains; preload"

Further steps

After having added the netlify.toml into the repo, one still needs to:

  1. Add the project to Netlify itself (see the video above)
    • As your own domain is not pointing to Netlify yet, you might want to skip on that [[redirect]] part in your netlify.toml for now …
  2. Update DNS so that your own domain points to the Netlify servers (ref)
    • Add/change CNAME record for www and point it to projectname.netlify.com.
    • Set A record to 104.198.14.52, or if your DNS provider supports CNAME Flattening, ANAME, or ALIAS, alias the root domain to projectname.netlify.com.
  3. Once DNS has propagated, Netlify will automatically enable HTTPS for your site: Netlify will automatically redirect non-https and non-www visits to https://www.domain.tld/
    • The Strict-Transport-Security header only won’t do, as that’s intended for browsers only

And oh, if you want to create your own 404 page, just build a file named 404.html and it will be used as the 404 page 🙂

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Google Street View is a Time Capsule

Recently the Google Street View footage for the area I live in got updated. This got me thinking: Google Street View is a time capsule. I’m quite sure that one day we’ll be able to time travel through the captured footage.

GooBing Detroit is a project compares old and new GSV footage from the Detroit Area:

GooBing Detroit – An archaeology of Detroit through Google Street View →

Relearn CSS layout with “Every Layout”

As just announced (on stage) at CSS Day by Heydon himself:

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.

Relearn CSS layout: Every Layout →

Reducing motion with the <picture> element

Great trick by Brad Frost, in which he combines prefers-reduced-motion? with the <picture> element

<picture>
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> 
  <img src="animated.gif alt="brick wall" />
</picture>

Yes, that actually works!

Reducing motion with the <picture> element →

💫 When taking prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Variables

Ungoogled Chromium is Google Chrome, but without Google

If you’re not too fond of Google but do want a Chromium-based browser that is as close to Google Chrome as it can be (along with some extras), be sure to check out Ungoogled Chromium:

ungoogled-chromium is Google Chromium, sans dependency on Google web services. It also features some tweaks to enhance privacy, control, and transparency (almost all of which require manual activation or enabling).

ungoogled-chromium retains the default Chromium experience as closely as possible. Unlike other Chromium forks that have their own visions of a web browser, ungoogled-chromium is essentially a drop-in replacement for Chromium.

Ungoogled Chromium Source (GitHub) →
Ungoogle Chromium Binaries →

spatie/test-time – A PHP package to control the flow of time

Freek has created spatie/test-time, a package to easily freeze/rewind/advance time in PHP.

Imagine you’re building that your app can notify your user, but you don’t want to send more than one notification in a timeframe of five seconds. How are you going to test the time aspect? Do you have to create a test that takes five minutes?

Luckily the answer is “no”. If you’re using the popular Carbon library, you can set the value that the library considers “now”

The package provides a few convenience methods around Carbon’s setTestNow method:

// time will not progress anymore
TestTime::freeze();

// Advance one minute
TestTime::addMinute();

// Rewind 5 hours
TestTime::subHours(5);

💁‍♂️ If you are not using Carbon you can reside to the php-timecop PHP extension that does the job (and affects \DateTime).

A PHP package to control the flow of time →
spatie/test-time (GitHub) →

Resilient Management, an excerpt

On A List Apart you can read an excerpt from the book Resilient Management by Lara Hogan. It’s from chapter 2, entitled “Grow your teammates”:

To spur this course-correction and growth in your teammates, you’ll end up wearing four different hats:

  • Mentoring: lending advice and helping to problem solve based on your own experience.
  • Coaching: asking open questions to help your teammate reflect and introspect, rather than sharing your own opinions or quickly problem solving.
  • Sponsoring: finding opportunities for your teammate to level up, take on new leadership roles, and get promoted.
  • Delivering feedback: observing behavior that is or isn’t aligned to what the team needs to be doing and sharing those observations, along with praise or suggestions.

Let’s dive in to how to choose, and when to use, each of these skills as you grow your teammates, and then talk about what it looks like when teammates support the overarching direction of the team.

/me orders book.

Resilient Management, an excerpt →

Indicating focus to improve accessibility

Great article by Hidde. It totally rhymes with my Building Better Forms™ by not taking away affordances post.

It’s a common, but fairly easy-to-fix accessibility issue: lack of indicating focus. In this post I will explain what we mean by focus and show you how focus outlines make your site easier to use.

Indicating focus to improve accessibility →

An introduction to the JAMstack

This introduction to JAMstack – or is it SHAMstack? – is quite complete:

Traditional websites or CMS sites (e.g WordPress, Drupal, etc.) rely heavily on servers, plugins and databases. But the JAMstack can load some JavaScript that receives data from an API, serving files from a CDN and markup generated using a static site generator during deploy time.

Maggie Appleton – from the aforementioned illustrated.dev – also created this ace drawing:

☝️ Yes, that should be markup instead of markdown, I already notified Maggie about it 😉

And oh, I follow Chris here, whether <body><script src="react-bundle.js"></script></body> falls under the JAMstack label or not:

An introduction to the JAMstack: the architecture of the modern web →