Does Space Smell Like Burnt Steak? Astronaut Chris Hadfield Debunks (and Confirms) Space Myths

Retired astronaut Chris Hadfield helps debunk (and confirm!) some common myths about space. Is there any sound in space? Does space smell like burnt steak? Is NASA working on warp speed?

Multilingual Sites: Styling translated text

Ire Aderinokun on why you should use the :lang pseudo-class over the lang attribute selector (e.g. [lang]) for language-specific styles:

The problem with having language-specific styles based on the [lang] attribute selector is that the selector isn’t actually aware of the language of the element. It’s just like any other “dumb” attribute selector.

This can become a problem if we have a document with multiple, nested elements of different languages. Let’s take this section below. The section has a French lang attribute but, within the section, we have a quote in Spanish.

<section lang="fr">
    <p>Comment dites-vous "Bonjour" en Espanol?</p>
    <blockquote lang="es">
        <p>Hola!</p>
    </blockquote>
</section>

If one were to be styling based on the lang attribute, the styling would only work nice if the order of the CSS declarations was the same as the order in which the different languages appear in the markup. Flip your CSS around, and the styling will be wrong.

The fix is to use the :lang pseudo-class, a selector whose use wasn’t very clear to me … up until now 😉

Use the :lang pseudo-class over the lang attribute selector for language-specific styles →

Want to know how to link to a translation? Check Multilingual Sites: Linking to Translations.

Multilingual Sites: Linking to Translations

Good piece by Hidde on the markup one needs to use when linking to a translation of a page.

The other day I worked on some front-end code that takes users to a version of the website in a different language. Two attributes can make such links more accessible: lang and hreflang. What’s the difference?

Linking to Translations →

Beyond the interface – The Sameness of Apps and Websites

Friend Thomas Byttebier – Digital Director at Base Design – has written a very insightful post on the sameness of apps, websites, subway maps, and coffee shops.

Why do all apps look the same nowadays? Why do all websites look the same? What can brands do to create more memorable digital experiences?

And also: how do you stand out – without compromising predictability, usability, etc. – when everything needs to (somewhat) look and behave the same?

Read the entire thing. It’s pure gold.

Beyond the interface →

Building Better Forms™ by not taking away affordances

Don’t fiddle too much with your forms‘ look and feel. A small innocent-looking piece of CSS, even when combined with semantically correct HTML, could leave you with a degraded UX and lesser accessibility.

Yesterday I went to see Girl at Kinepolis. Whilst ordering tickets I ran into an issue though: after completing the payment form – or at least I think I had – it complained about some incomplete fields.


Can you spot the missing completed field(s)?

🤐 Insert sidenote here about the error message not being very distinguishable from the rest of the page, it blends in whilst it should stand out.

After scratching my head for a while, it turned out that I hadn’t selected a payment method. So I selected one, and could continue on forwards.


Oh, those were options for me to choose from!?

🤐 Insert sidenote here about the active payment method indicator being red, which mostly is used to visually indicate errors.

Today, the day after, I revisited the form as I wanted to know why I had missed the payment method in the first place. I work in web, so completing forms shouldn’t be an issue to me, right? I first thought they’d be using some crazy markup/JS combo, but the good thing about this form is that they’ve actually used radio buttons for the payment method selection.

<div class="method-list">
        <label class="method-list-item" data-method-list-item="">
            <input type="radio" name="PaymentMethod" value="BCMC--Ogone--CreditCard" class="method-list-item-input" required="">
            <span class="method-list-item-copy">
                    <img src="http://cms.kinepolis.megatix.be//media/1008/bcmc_combined.png" alt="BCMC">
            </span>
        </label>
        <label class="method-list-item">
            <input type="radio" name="PaymentMethod" value="MasterCard--Ogone--CreditCard" class="method-list-item-input" required="">
            <span class="method-list-item-copy">
                    <img src="http://cms.kinepolis.megatix.be//media/1030/mastercard_2017.png" alt="MasterCard">
            </span>
        </label>
        <label class="method-list-item">
            <input type="radio" name="PaymentMethod" value="Visa--Ogone--CreditCard" class="method-list-item-input" required="">
            <span class="method-list-item-copy">
                    <img src="http://cms.kinepolis.megatix.be//media/1005/visa.png" alt="Visa">
            </span>
        </label>
        <label class="method-list-item">
            <input type="radio" name="PaymentMethod" value="Maestro--Ogone--CreditCard" class="method-list-item-input" required="">
            <span class="method-list-item-copy">
                    <img src="http://cms.kinepolis.megatix.be//media/1012/maestro_2017.png" alt="Maestro">
            </span>
        </label>
        <label class="method-list-item">
            <input type="radio" name="PaymentMethod" value="MasterPass--Ogone--MasterPass" class="method-list-item-input" required="">
            <span class="method-list-item-copy">
                    <img src="http://cms.kinepolis.megatix.be//media/1023/masterpass-logo-featured-1.png" alt="MasterPass">
            </span>
        </label>
</div>

Great! As these elements are some of the basic building blocks of the web, they have built-in traits such as having the right semantics, being accessible, etc.

🏆 Extra bonus points for wrapping those inputs in a <label> by the way!

What’s going on then? Well, the “bad” thing about this form is that those radio buttons were visually hidden, as they’d been moved offscreen using a small piece of CSS — a not so uncommon technique:

.method-list-item-input {
    position: absolute;
    left: -99999px;
}

Even though the form is semantically correct (Yay! 🎉), that little piece of CSS unfortunately introduces two nasty side-effects:

  1. [#UX] Removed Affordance: When completing a form, a user scans for form controls which they need to complete. Since the payment method selector does not seem to contain any form controls, as it looks like a “Hey, here’s some logos of the supported payment methods for ya” kind of thing, the brain skips over it.
  2. [#A11Y] Removed focus indication When tabbing through the form you don’t know that the focus has hit the payment method radio buttons, so you unwillingly skip over it as you keep tabbing. This will give one the impression that they cannot complete the form without the use of a mouse. (It took me a while to figure out how you eventually can: when you’ve hit focus on the payment method selector, hit an arrow key to select one of the options)

Here’s a recording of me tabbing through the form, unknowingly skipping the payment method controls as I didn’t know it got focus:

Now, the fix to these side-effects is quite simple: Don’t try to be smart, and leave the radiobuttons be.

.method-list-item-input {
    /* position: absolute; */
    /* left: -99999px; */
}

See what I did there?

Sprinkle some CSS on top to make ‘m all a bit more beautiful (alignment, position, color) and you’re good to go:


Ah, these look like options to me!

💁‍♂️ Here’s the CSS I used, in case you were wondering:

.method-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #bcbcbc;
    margin: 0.25em;
    padding: 0.25em 0.25em 1em 0.25em;
}

.method-list-item-input {
    /* position: absolute; */
    /* left: -99999px; */
    order: 2;
}

It adds an outline, adds some margin/padding, and visually moves the radio buttons below the logo (something which I personally find more pleasing). And yes, I know, those logos may be a tad smaller too …

Additionally, they could also add some extra CSS to visually indicate that the wrapping label.method-list-item has a focussed element within. This can be achieved using :focus-within (supported in all modern browsers except Edge):

label.method-list-item:focus-within {
  border-color: #2781a3;
}

Here’s a recording of me tabbing through the form with all mentioned CSS adjustments applied:

A small change, lifting this form from a 9/10 up to a 10/10, no?

For your own forms, you can use these simple tricks to quickly check them for the issues I just mentioned here:

  1. Tab through your forms (and your site in general) to see if you can access all controls.
  2. Controls should have a different look when they are focussed (e.g. so that you know they have focus)
  3. Think away labels and titles (or translate them to another language), and ask yourself if the meaning of the controls/elements still remain clear or not. (e.g. titles such as “Choose X” don’t indicate choice. Radio buttons / checkboxes / dropdowns do)

Of course those three won’t make a good form all by itself, as you can’t forget about other things the basics such as the use of good labels, grouping of controls, etc. — See Designing Better Forms for a good list of tips.

Here’s to good forms! 🥂

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)

React Native Gesture Handler

React Native Gesture Handler is a declarative API exposing platform native touch and gesture system to React Native.

React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native. With this library gestures are no longer controlled by the JS responder system, but instead are recognized and tracked in the UI thread. It makes touch interactions and gesture tracking not only smooth, but also dependable and deterministic..

Comes with a few handlers (such as PanGestureHandler, TapGestureHandler, LongPressGestureHandler, RotationGestureHandler, PinchGestureHandler, etc) and components (such as <Swipeable />)

React Native Gesture Handler →

The curious case of the Raspberry Pi in the network closet

Christian Haschek:

Last week I got a message from a co-worker notifying me there was a Raspberry Pi connected to our network.

I asked my IT colleagues and they were as baffled as I was. I heard of people getting paid to put things like this in places they shouldn’t and for this reason I was very interested in finding out what it actually does.

This reads like an episode of Mr. Robot … 😱

The curious case of the Raspberry Pi in the network closet →

Laravel Valet Environment Variables

To set/override Environment Variables in Laravel Valet, one had to manually edit the Nginx config files and restart Nginx after doing so. With the release of Laravel Valet 2.1.6 this is no longer needed: Valet 2.1.6 contains a merged PR that provides built-in support for an specific file named .valet-env.php in which you can set your environment variables.

🕸 Running an older version of Valet? Run these on the CLI to update:

# update package
composer global update

# Make Valet do its housekeeping
valet install

To set environment variables in Valet 2.1.6 or newer, create a file named .valet-env.php inside the directory where you ran valet link app-name before. Its contents must return an array with the envvars you want to define.

However, you must group these per app-name (e.g. the one you used during the valet link command), or you can use * as the wildcard. Each app-name define contains an array in itself, with the keys representing the names of the environment variable, and the values their respective value.

Here’s a few examples:

<?php

return [
	'*' => [ // Applies to all
		'APP_ENV' => 'dev',
	],
];
<?php

return [
	'app-name' => [ // Only applies to app-name.test
		'APP_ENV' => 'dev',
	],
];

It’s possible to combine * and app-name, their defined envvars will get merged at runtime:

<?php

return [
	'*' => [ // Applies to all
		'APP_ENV' => 'dev',
	],
	'myproject' => [ // Only applies to myproject.test
		'DB_NAME' => 'db_devdata',
	],
	'empty.myproject' => [ // Only applies to empty.myproject.test
		'DB_NAME' => 'db_empty',
	],
];

Here’s to no more fiddling with ~/.config/valet/Nginx/app-name.test files 🍻

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)

The nightmare videos of childrens’ YouTube

James Bridle – whom you might know from his autonomous trap for self-driving cars – on the dangers of leaving your children on YouTube unattended:

Writer and artist James Bridle uncovers a dark, strange corner of the internet, where unknown people or groups on YouTube hack the brains of young children in return for advertising revenue. From “surprise egg” reveals and the “Finger Family Song” to algorithmically created mashups of familiar cartoon characters in violent situations, these videos exploit and terrify young minds — and they tell us something about where our increasingly data-driven world is headed.

As he says (*):

If you have small children, keep them the hell away from YouTube.

Having two young children myself I can confirm what he’s saying. Don’t believe it still? Here, watch Peppa Pig making cocaine pancakes, which is only a few recommendations away when watching an “official” Peppa Pig episode.

(*) This is exactly the same message that my former employer Small Town Heroes – who make apps for children such as Ketnet Junior, amongst other things – have been saying during all of their pitches.

The Flexbox Holy Albatross

Great work by Heydon Pickering, in which he lets a flexbox layout respond to the size of its container, and not the viewport

Sometimes you want your items to wrap in a very particular way. For instance, when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid the intermediary part where you get a pair of elements on one line followed by a longer element underneath.

How do we skip this intermediary layout state and switch directly from a horizontal to vertical triptych? What’s the solution?

The solution he knocked up involves flex-basis being changed thanks to calc() and CSS Custom Properties (“CSS Variables”). The code behaves nicely when the viewport becomes too narrow, or when the container becomes too narrow (set the max-width of the body to 37em to see it in action)

💁‍♂️ To get a good understanding of how exactly this works, see Jonathan Snook’s Understanding the Albatross

Now, are these “Container Queries” we want? Not quite imho: whilst is does tackle the issue of layout for flexed children, it’s still not possible to, for example, change the font-size or, another example, switch from flexbox to grid using this technique.

Sidenote: I think one could hack the font-size thing together if CSS calc() were to support the modulo operator, but that’s not the case unfortunately. Also, it would still leave switching from flexbox to grid out of the loop.

The Flexbox Holy Albatross →
Understanding the Albatross →