We are going to the Moon, to stay, by 2024. And this is how.
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
Via Janne Aukia on Twitter
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.
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:
Configuring Netlify trough
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:
[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 (
[[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.comsubdomain. 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
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"
After having added the
netlify.toml into the repo, one still needs to:
- 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.tomlfor now …
- As your own domain is not pointing to Netlify yet, you might want to skip on that
- Update DNS so that your own domain points to the Netlify servers (ref)
wwwand point it to
22.214.171.124, or if your DNS provider supports
ALIAS, alias the root domain to
- Once DNS has propagated, Netlify will automatically enable HTTPS for your site: Netlify will automatically redirect non-https and non-www visits to
Strict-Transport-Securityheader 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 🙂
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!
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:
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
@mediabreakpoints, “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.
Great trick by Brad Frost, in which he combines
prefers-reduced-motion? with the
<picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img src="animated.gif alt="brick wall" /> </picture>
Yes, that actually works!
💫 When taking
prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Variables
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.
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
// time will not progress anymore TestTime::freeze(); // Advance one minute TestTime::addMinute(); // Rewind 5 hours TestTime::subHours(5);
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.