NASA: We Are Going

We are going to the Moon, to stay, by 2024. And this is how.

Chart Design Guidelines at City Intelligence

At the City Intelligence unit at City Hall almost anyone can create a data visualisation. To keep everyone in line they created Data Design Guidelines:

Effective communication of evidence and data through information design and data visualisation, is obviously important to help inform policy internally, but it is also just as important to help boroughs and individual Londoners better understand their city.

With this in mind, over the past year, we have been thinking more about how we can improve the clarity, consistency and accessibility of our data visualisation output.

The guidelines, which focus principally on chart design, cover the following areas:

  • Design Principles
  • Practical Steps
  • Styling & Layout
  • Using Colour
  • Categorical Colour Palettes
  • Find & Test Your Own Colours
  • Introducing GGLAPlot
  • Chart Examples
  • Further Reading

Nice!

City Intelligence Data Design Guidelines →

Via Janne Aukia on Twitter

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 →