Blog

Later Ctrl + ↑

Likely 2.2 for single-page applications and more

We’ve just released Likely 2.2 which adds support for single-page applications and includes many more improvements.

Ivan Akulov, the project’s maintainer, writes:

Most modern single-page apps use History API which allows developers navigate between pages without refreshing them. Since 2.2, Likely supports this API out of the box! If you place the buttons on a page and then do history.pushState () or history.replaceState (), Likely will automatically catch these changes and update itself. (Navigating backwards and forwards is also supported, of course.)

If you don’t use History API, call likely.initiate () when you need the buttons to update.

Since 2.1 we have a Telegram button, and now we add LinkedIn:

Likely LinkedIn button

There are also great improvements under the hood. As the result, the file size has been cut in half. And the code is now covered with automated tests.

See the GitHub release page for a more detailed description.

Map and reality: layers

In Map and reality: distortion I talked about how distortion is inevitable on a map and the question is what to distort given a particular task.

Now let’s talk about layers. What properties of land should a map display?

Physical and geographical world atlas (1964)

Physical and geographical world atlas (1964)

A physical map shows terrain: oceans, trenches, plains and mountains. On a political map, the land is divided into countries and states. A mineral resources map is covered with the symbols of mineral deposits and oilfields.

One can’t say that a physical map is “truer” than, say, a railroad atlas. The following map shows the history of Amsterdam’s development, and it’s also true. Red houses are the oldest, the blue ones are the newest:

Buildings age in the Netherlands

A good cartographer will find ways to display lots of data on a map:

A map of Chelyabinsk region, Russia (1956)

A map of Chelyabinsk region, Russia (1956)

This map displays terrain, the region boundaries, motorways and railroads, settlements, ponds, mountain ridges, height markings, parallels and meridians.

By carefully choosing colour shades, widths and styles of lines, typefaces of text, the cartographer achieves clear separation of visual layers. Background colours that marks the heights are unsaturated to let one see the labels clearly. A particular hatching is used along the region boundaries to make them well distinguishable. The letters У Р А on the left separated by many other designations, are perceived as one label ЮЖНЫЙ УРАЛ (Southern Ural) on the full map thanks to a special typeface.

The more features are shown on a map, the more interesting it is to explore it.

However, there are circumstances that do not suggest an unhurried examination by a curious reader. Sometimes a map should just answer a narrow set of practical questions.

A pedestrian map shows the main landmarks, sidewalks, bike lanes, subway stations, toilets and Wi-Fi zones:

WalkNYC wayfinding system (2013)

A nautical chart displays water depths, navigational hazards, important routes, harbours and the details of the coastline:

A nautical chart

The depths are marked with numbers — while the shades of blue as used on physical maps are more illustrative, a sailor wants the actual values. The dry land gets very little attention.

The choice of the layers and the way to separate them, as well as the choice of appropriate distortion, depends on the map’s goal and supposed use.

Continued in Map and reality: diagrams.

Map and reality: distortion

Often, transport diagrams do not accurately represent reality. But is this “lying” even acceptable? And if yes, to what degree?

Schematic depiction of the land has been done since rock drawings. By any contemporary measure these “maps” are ridiculously inaccurate. But they include enough detail for orientation.

This is an ancient road map of Roman Empire (created between −1 and 5 centuries; implemented in parchment in the 13th):

Ancient road map of Roman Empire

Here is Rome:

Rome on a map of Roman Empire

We are used to a very different appearance of these territories on a map. It’s quite hard to figure out what’s going on here. However, for a man who haven’t seen other maps, there is no reason to think that something is wrong: the roads actually connect the places.

On Ptolemy’s map of the world (2nd century; reproduced by the engraver Johan Schnitzer in the 15th century) the outline of Europe gets somewhat familiar:

Ptolemy’s map of the world

On Mercator’s map (16th century) it looks the way we are used to:

Transit maps and distortion

And here’s the whole world in Mercator projection:

Transit maps and distortion

Greenland looks bigger than Africa. The area of Antarctica’s looks comparable to everything else combined. But the red circles actually denote the same physical area, which gives you an idea of how distorted the map is.

This is a modern Google Map:

A Google Map of Europe

After a man had been to space, it seems, there are no more uncertainties about the shapes of land and sea. But can we say this map is actually precise?

The map is flat and Earth is “round”, so a precise map just can’t exist. Futhermore, let’s look from a distance:

A Google Map

This is Mercator projection!

Mercator projection is one the most important map projections. Its main quality is that it preserves the angles. In each point the horizontal and vertical scales of the map are the same. That’s why when moving from the equator to the poles, the map is artificially stretched vertically the same way it naturally gets stretched horizontally.

Google engineer explains:

The first launch of Maps actually did not use Mercator, and streets in high latitude places like Stockholm did not meet at right angles on the map the way they do in reality. While [Mercator] distorts a “zoomed-out view” of the map, it allows close-ups (street level) to appear more like reality. The majority of our users are looking down at the street level for businesses, directions, etc… so we’re sticking with this projection for now.

Turns out, angles are far more important for navigation than the fair relative representation of land area.

The equidistant projection doesn’t distort area as much, but does distort the shape significantly:

Equidistant projection

The map projections are actually classified by the types of distortions they make. Depending on task at hand, the lengths, angles, areas or shapes can be sacrificed.

When I was designing a map of UZP plant dealerships in Russia, I even split the country in two halves. The Eastern part was displayed at twice smaller scale. This has let me show the much more inhabited Western part in larger detail (I didn’t know then that using such colours was not a good idea):

Map of UZP plant dealerships in Russia

A map from Herbert Bayer’s “The World Geo-Graphical Atlas” the Earth is cut in pieces in order to preserve the shape of the mainlands. For a map that shows the world’s population the fair display of the oceans and Antarctica is not that important:

World population map from Herbert Bayer’s “The World Geo-Graphical Atlas”

To some degree, any map is a lie.

Continued in Map and reality: layers.

Sayve with Karaoke

Sayve 1.1 is out. We’ve added what we call Karaoke:

Sayve with Karaoke

The screenshot is in Russian, but you probably get the idea. When playing audio, we now highlight the corresponding words in the transcription. When playing, tap any word to jump to it in the audio. When selecting among alternatives, tap Play to listen to the selected word only.

We transcribe up to a minute of speech, but the recording can now be as long as you like. Tap audio wave to play. The screen when you have no more recordings looks better. And other small improvements.

The button:

Get for free in the App Store

It won’t be always free.

Create a new contact or add to an existing one?

Boy do I hate this question:

Create a new contact or add to an existing one?

Sometimes I tap “Create New Contact” and end up with two records for one person. One with an email, one with a phone number. Turns out, I had this contact already.

Sometimes I tap “Add to Existing Contact” and end up not finding the person in the contact list. Turns out, I was wrong to believe I had had this contact already.

When I don’t remember for sure, I have to flip a coin. But why should I occupy my brain with this? For a programmer INSERT and UPDATE are different database queries. This purely technological difference degrades the user interface. It should be hidden from the user.

In most cases a computer knows a name and can at least suggest adding to a contact if it exists. But even if the name is unknown, just show a searchable contact list and a “+” button together. When I press “+”, put my search query into the contact name field.

Previously in the stupid questions series:

Sayve, a reliable voice recorder and recogniser

Sometimes an idea comes to mind when I am running or driving and I can’t write it down. I just want to say it to my phone and I want the phone to remember it. Unfortunately, there was no tool for this.

Siri needs Internet and is stupid. When it fails to recognise what I’ve said, there is no way to get back to it later. Keyboard dictation works offline most of the time, but if you aren’t lucky, the original audio recording is also lost. Also, you have to remember to pick the right keyboard language before starting dictation, otherwise you will also lose everything. The Voice Notes app records audio, but does not recognise speech. To find the necessary recording, you need to listen to each as they all look the same.

That’s why together with the developer Michael Rubanov we made Sayve — a reliable voice recorder and recogniser. It works like this: when you open the app, it starts recording and recognising immediately. When you are done speaking, it underlines the words it’s unsure about.

Sayve, a reliable voice recorder and recogniser

You can tap the words and replace with the alternatives. If it’s completely wrong, you can re-listen to the audio. Raise the phone to your ear to listen through the ear speaker.

You can change the recognition language after recording, and it will re-recognise the recording. Then you can export everything to Notes.app or whatever.

We can’t always recognise speech without Internet. But audio is stored permanently, so you won’t lose your thoughts in any case. Also we’ll try to recognise it later, when Internet is back.

Here is the button:

Get for free in the App Store

For free for now, but we’ll see.

The Medium typography

What confuses a heck out of me is that so many articles on design and typography are being published on Medium. Why do designers choose Medium?

The Medium typography

It seems like every element has its own font, size, alignment and shade of grey. Vertical spacing is broken: the subheading is too close to the heading, the paragraphs are too far from each other.

The article itself is great though.

I don’t consider myself particularly good in typography, but this?

The Medium typography

It’s all random, isn’t it? And again, a great article.

(Shrug.)

How to not destroy Apple cables

Apple cables suck. If you aren’t particularly careful with them, they get destroyed quickly. But I haven’t destroyed a single one in my life.

How to not destroy Apple cables

Most people take the power adapter and tightly wrap the cable around it, thus significantly bending it at its weakest point. Instead, let it go freely straight from the brick for an inch, then wrap around. The same goes for lightning and earphones cables.

Still, Apple cables suck.

Fifth version of the Moscow Metro map

I made my first Moscow metro map in 2007. The official map was disgusting then, but nobody cared. My work inspired many designers to try to design their own map. I know several designers who gave up after they’ve appreciated how hard the task actually was. I had two major revisions of my map including the one for the official 2013 competition for the new map to be used on the system. In that version I’ve solved the problem of the Biblioteka imeni Lenina junction and invented the Compass (more on that on the 2013 map’s page in my portfolio). I took the second place. It took most of the 2015 to design the next version of the map: it used space more efficiently and the overall graphical design was improved.

Here is the new version, with the new Circle Railway (Line 14) added:

Compared to the official map, this map has almost 35% larger font when printed as same-size poster:

Fifth version of the Moscow Metro map

See the project page for detail.

Earlier Ctrl + ↓