How and why the leap second affected Cloudflare DNS

At midnight UTC on New Year’s Day, deep inside Cloudflare’s custom RRDNS software, a number went negative when it should always have been, at worst, zero. A little later this negative value caused RRDNS to panic. This panic was caught using the recover feature of the Go language. The net effect was that some DNS resolutions to some Cloudflare managed web properties failed.

90 minutes later they had identified the problem and started rolling out a 1-character fix.

How and why the leap second affected Cloudflare DNS →

Elsewhere , , , Leave a comment

A billion dollar gift for Twitter

Anil Dash was asked by Jack Dorsey (CEO of Twitter in case that name doesn’t ring a bell) if they could have a talk to spewing some ideas on fixing Twitter. Anil declined the talk. Instead, he wrote an article on Medium.

Jack: I’ll give you this one for free, just because I still have a soft spot in my heart for the product and I really want us all to stop having to rescue Twitter in 2017

A list of 5 things, which – each and every one of them – are spot-on:

  1. Show you can consistently ship new features
  2. Directly handle abuse and tell the world what you’re doing
  3. Stop using meaningless metrics as your measure of success
  4. Provide specific tools for each of your types of users
  5. Decide if you give a damn about developers or not

A billion dollar gift for Twitter →

Elsewhere , Leave a comment

10 things I learned making the fastest site in the world

Great writeup by David Gilbertson on creating this super fast loading website.

  1. Try not to make a slow site
  2. Do mobile first. Like, really do it.
  3. Be a benchmark hussy
  4. Client Side Rendering is expensive
  5. Don’t server-render HTML
  6. Inline stuff, probably
  7. Preload, then load
  8. Reward good behaviour
  9. Service workers: like me in high school (cool and easy)
  10. Computers have nice fonts

The list contains some stuff that is common sense when you read it, but that we – or at least I – don’t actually do all the time. Take “Mobile First” for example:

For this project I actually did real mobile first. That is, developed the site with it running on a mobile device. I did this first, and when I was satisfied with the UI and the performance, I went about getting it to work on a big computer.

You’d be surprised how easy it is to get a fast site to run on a fast machine!

Also contains some great tips:

When you do your benchmarking, you should use the Chrome DevTools and throttle your CPU and network. I use a 10x CPU slowdown and set the network to “Good 3G”. I know that’s maybe not quite as slow as the average phone, but I don’t want to get so frustrated with slow speeds that I get out of the habit of really doing this.

And oh, very humorous too 🙂

10 things I learned making the fastest site in the world →

Elsewhere , , Leave a comment

React Native at WalmartLabs

The engineering team at WalmartLabs has been switching their (hybrid) web views to React Native:

The data we’ve gathered is promising. It has shown that React Native is indeed a viable solution for mobile applications big and small. In the areas of graphical performance, RAM usage, and CPU, every measure we took was comparable to or better than our current hybrid solution, and this held true for both platforms. The overall feel of the app was significantly improved, and provides a far superior user experience over hybrid.

React Native at WalmartLabs →

Elsewhere , Leave a comment

Facebook Live Reactions

Facebook Live Reactions is a Linux script for creating Facebook Live Streams that contains interactive reaction counts. It also includes an interactive shoutout feature that gives live shoutouts to users who typed “shared” into the comment box.

The livestreaming itself is handled through ffmpeg; whilst PHP takes care of the counting of all reactions and redrawing of the image to be broadcasted.

Facebook Live Reactions →

Elsewhere , , , Leave a comment

Attention

Jason Fried, CEO of Basecamp, in an interview, answering a question on how his workspace is set up:

I’m a one-computer guy—a 12″ MacBook, so I can work from anywhere. Years ago I used multiple monitors and had multiple computers. Then I jettisoned multiple computers but kept the multiple monitor setup. And a few years ago I tossed out the second monitor and have been a single computer, single screen person since then. I go full screen on nearly every app. I also hide my dock. I don’t want anything pulling my attention away. When I’m curious I’ll look. Otherwise, I’m looking at what I want, not what someone else might want me to see.

Protect your attention like you protect your friends, family, money, etc. It’s among the most valuable things you have.

Being a unitasker (1 window, maximized) myself (yet with two screens): yes!

Also: who needs notifications?

Elsewhere , Leave a comment

Text-wrapping, hyphenation, emojis and what not

Earlier today I ran some tests to see how text-wrapping/hyphenation of long uninterrupted strings works in browsers. I tested both “normal” strings and strings of emojis.

The tests (and its rendering results per browser) are stored on Codepen and embedded below:

💩 and ⚠️ behave differently (click to enlarge):

These tests left me with some core questions:

  1. Why do some emojis get text-wrapped, and some not?
  2. If the above is a feature: is there a list of emojis – or can we detect which emojis – that get text-wrapped (and those who are not) available somewhere?
  3. Why do emojis get text-wrapped, and not hyphenated?

~

Later in the afternoon Khaled Hosny jumped in on Twitter, and pointed me towards the needed Line Breaking Properties Specification, by which I was able to answer the core questions. Here goes …

1. Why do some emojis get text-wrapped, and some not?

This is dependent on the “Line Breaking Property” which is set for/on a character.

The Line Breaking Properties Specification defines a set of possible classes:

(A)
Allows a break opportunity after in specified contexts
(XA)
Prevents a break opportunity after in specified contexts
(B)
Allows a break opportunity before in specified contexts
(XB)
Prevents a break opportunity before in specified contexts
(P)
Allows a break opportunity for a pair of same characters
(XP)
Prevents a break opportunity for a pair of same characters

These classes are then combined into properties. To us relevant properties (extracted from the spec) are:

ID

Ideographic (B/A)

Characters with this property do not require other characters to provide break opportunities; lines can ordinarily break before and after and between pairs of ideographic characters.

AL

Ordinary Alphabetic and Symbol Characters (XP)

Characters with this property require other characters to provide break opportunities; otherwise, no line breaks are allowed between pairs of them.

It’s these properties that can then be assigned to a specific character.

Say a character has the AL Line Breaking Property set, then it means that no line breaks are allowed between pairs of them.

Characters (and thus emojis) have a “Line Breaking Property”, which applies one or more breaking classes onto the character. Two of the possible values for said property are:

  • ID = (B) and (A) classes = allow breaks before and after the character
  • AL = (XP) class = don’t allow breaks in between pairs.

~

2. If the above is a feature: is there a list of emojis – or can we detect which emojis – that get text-wrapped (and those who are not) available somewhere?

The answer to question 1 clearly indicates that it’s an actual feature. Khaled also sent me a link to a plain text file mentioning the Line Breaking Properties per character. Linking back to the tests I ran, we can extract these values for 💩 and ⚠️:

  • 💩 = 1F4A5..1F4A9;ID
  • ⚠️ = 26A0..26BC;AL

The plot thickens, right?

💩 and ⚠️ have a different Line Breaking Property set:

  • 💩 = ID = breaks allowed before and after the character
  • ⚠️ = AL = no breaks allowed in between pairs.

~

2b. (Bonus question) Can I somehow force emojis with the AL-property to split in between pairs?

Yes you can! From the spec:

Use ZWSP as a manual override to provide break opportunities around alphabetic or symbol characters.

ZWSP = ZERO WIDTH SPACE (U+200B or HTML ​).

When looking that one up in the list, we can see that is has ZW set as a value for its Line Breaking Property. The spec mentions that ZW applies the (A) class, thus allowing breaks after it 😊

Manually sprinkle a ZWSP character in between pairs of AL-emoijs to provide break opportunities.

~

3. Why do emojis get text-wrapped, and not hyphenated?

Browsers use a language-based hyphenation dictionary to apply hyphenation. The dictionary to use is defined by the set language on a document or element. From the CSS Text Module Level 3 Spec:

Correct automatic hyphenation requires a hyphenation resource appropriate to the language of the text being broken. The UA is therefore only required to automatically hyphenate text for which the author has declared a language (e.g. via HTML lang) and for which it has an appropriate hyphenation resource.

(*) As seen in the tests it should be noted that firefox follows this guideline quite strictly, as hyphenation only works when explicitly setting the lang attribute to a one of its supported languages (see tests). Chrome and Safari, apparently, are not so strict in this and use a default language. There’s a bug filed for Chrome on this.

There is no hyphenation dictionary for emojis.

Emojis don’t hyphenate because they have no hyphenation-dictionary. For regular text, be sure to set your lang attribute if you want hyphenation to work properly. Also: IE/Edge don’t like my tests, apparently.

~

Now, that was an interesting journey I must say. I now understand why certain things (should) happen. 🙂

Remains – as per usual – a few browser-specific quirks to be answered …

  1. Why, in Chrome, is hyphenation not applied on the last string?
    It’s a bug! and has been fixed in Chrome 56 and up.
  2. Why, in Firefox, does the container stretch out on the ⚠️-test, whilst other browsers overflow?
    → …
  3. Why, in IE11/Edge, does the 💩-test not wrap, whilst other browsers do?
    → …
  4. Why, in IE11/Edge, does hyphenation not work even though it should? Setting the lang to en-US, or setting the lang on the body or html yield the same result.
    → …
  5. Why, in Chrome and Safari, is hyphenation applied even when the required lang is not set?
    → Bugs for Chrome and Safari have been filed.
Elsewhere , , , Leave a comment

How the Circle Line rogue train was caught with data

Singapore GovTech data scientists share how they identified a rogue train as the cause of the recent MRT Circle Line disruptions:

Singapore’s MRT Circle Line was hit by a spate of mysterious disruptions in recent months, causing much confusion and distress to thousands of commuters.

From prior investigations by train operator SMRT and the Land Transport Authority (LTA), we knew that the incidents were caused by some form of signal interference, which led to loss of signals in some trains. The signal loss would trigger the emergency brake safety feature in those trains and cause them to stop randomly along the tracks.

But the incidents — which first happened in August — seemed to occur at random, making it difficult for the investigation team to pinpoint the exact cause.

How the Circle Line rogue train was caught with data →

Elsewhere , , Leave a comment

Why Super Mario Run costs $9.99

Because you’re not nagged with screens like this:

Nor screens like this:

I’ve been playing Super Mario Run the past few days and haven’t regretted paying $9.99 to get the full version. Yes, that’s above average when compared to other apps, but at least you get a real game in return for it:

  • A game sporting Super Mario, a well established character which everybody loves.
  • A game in line with previous Mario games: enemies, design elements, etc. – it all feels familiar.
  • A game that is playable by those that just jump around a bit (read: my kids), but also by those wanting to truly master it.
  • A game with levels that can be replayed at least three times: after having collected the 5 pink challenge coins in a level, the level structure changes a bit and then sports 5 purple challenge coins. Rinse an repeat with 5 black challenge coins. Collecting them all will take you time (*)
  • A forward-moving game in which you can move in the opposite direction thanks to clever level design/structure and some well chosen elements.
  • A game that doesn’t nag you every five steps to buying stuff.
  • A game featuring a highly-replayable rally mode, next to the main campaign, in which you can race both friends and strangers to earn more stuff

More photos: What Super Mario Run would look like as a free to play game →

(*) If you just jump around a bit you can speedrun-finish the game in one single day. However, one week in and I’m not even halfway because collecting all special coins will take quite some skills (and time).

Elsewhere , Leave a comment

Polyfill.io

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Interesting service by Polyfill.io. Just include their polyfill.js file and it’ll include a set of polyfills specifically for the browser used:

Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser.

This one could come in handy for older projects that have gathered some dust over time (And that don’t use Babel/Babel Polyfill yet) .

Also reminds me of Dean Edwards’ IE7.js from (way) back in the day 🙂

Polyfill.io →

Elsewhere , , Leave a comment