Blog

Later Ctrl + ↑

User interface for Mimic 2.0

A web application’s front end (what the user sees) and back end (what happens on a remote server) are often developed separately. If the back end of some feature is not ready yet, the front-end developer is very limited in what they can do.

I’ve designed the user interface for Mimic 2.0, a web developer tool for mocking server responses in a browser. With Mimic, you can develop as if the server was alive. It’s very easy to set up a simple mock. Say, you want to pretend the server responds with a line of JSON:

It lets you set up very advanced mocks, adjusting HTTP headers, timeouts and what not:

The great thing about Mimic is that you don’t need to set up a local server and change request URIs in your application. It works with the existing applications as they are, right in the browser. And you don’t even need to install browser extensions: you just link one script to your application and that’s it.

Read more about the user interface on the project page.

Kiev street name plates

A characteristic Kiev street name plate looks like this:

1
2

There is a bulb inside, sometimes:

3
4

An old one:

5

An ugly soviet one:

6

The ones on Khreshchatyk look more like car license plates:

7-8

There is also a blue design:

9
10

And also there are these weird boxes at the entrances:

11
12

Transport in Kiev

More pictures from the same April trip to Kiev as the recent yards.

Nice yellow trolleybuses:

Not as nice:

Jitney stops list:

A stop:

Metro ticket hall:

Inside:

Turnstiles:

A poster:

Map booklets:

River station:

Anything goes to protect your parking stop. Bottles:

Planks:

This is a different kind of transport. They attach you to a cable and you fly to the island:

Looks cool:

How to un-hang a hung app on a Mac

In some cases an app on your Mac would hang: the mouse cursor would turn into a spinning beach ball, and the app would ignore all clicks and key presses. If this doesn’t cure itself in a couple of seconds, there’s not much you can do other than to force quit the app and re-launch it.

Except that sometimes you can. Open Activity Monitor and select the hung app in the list. It’s shown in red as “not responding”. Then click the gear icon and select “Sample Process”:

How to un-hang a hung app on a Mac

If you are lucky, the app would just magically un-hang!

I have no idea what this feature is for, and it doesn’t always work. But if the app’s data is very valuable to you, you don’t just want to give up and force quit it. So you can try this. I’ve saved a couple of Photoshop files this way.

Kiev yards

Here are some pictures of beautiful Kiev yards.

1
2
3
4
5
6
7
8
9
10
11

Perfect coincidence: ass spinner

This TV set in a cafe has lost signal while showing a biathlon race:

A loading indicator has been spinning around a biathlete’s ass for minutes: “here, pay attention, this is the most important part”.

Why I don’t call myself a “UI/UX” designer

Many of the things I do are considered a job of a “UI/UX” designer. But I haven’t ever called myself one.

That’s because the term “UI/UX” is badly designed: it’s tasteless and vague.

Tasteless

The abbreviations are used in science and tech, but when normal people talk, abbreviations are out of place. A good user interface is humane.

The way this abbreviation is constructed is wacky. First, it includes the word “user” twice. The good designer would not put a word twice where once would suffice. Second, it abbreviates “experience” with X instead of E. This comes from cheap marketing, where X used to sound “cool” and “trendy”. When a designer uses it, I feel like they disrespect the user and have shallow knowledge.

Vague

There’s a “/” in the middle, whose meaning is unclear. A slash usually implies an exclusive or. So does this mean “UI or UX, but not both”?

Good writers use conjunctions, not slashes. A slash is a way to slam two pieces together without thinking what sense the combination makes. This is not how you design a good user interface though.

The lack of taste and inability to communicate well are not the qualities of a good designer.

See also: Guy English on UX

How to install Aegea locally on a Mac

Before installing Aegea on a server, you may want to try it out locally. This is a manual on how to install it locally on a Mac in a way that I find the best.

Mac comes with a pre-installed Apache. But the way it is configured is rather strange and very hard to use in a productive way. I set up separate host names for all my local projects, such that I can point the browser to the address “aegea” to open Aegea or “ib” to open my website.

Here’s how to do this.

Get Aegea package

This part is the same as in How to install Aegea.

Download the Aegea zip archive from the website and unzip it:

Inside, you will see files like these (the list may differ depending on the version):

Put these files in ~/Sites/aegea/ folder. Select this folder in Finder, press ⌘I, go to the end of the panel, open the lock and change all permissions to “Read & Write”. Then click the gear and select “Apply to enclosed items”.

Configure Apache

Open /etc/apache2/httpd.conf. Uncomment this line:

LoadModule rewrite_module libexec/apache2/mod_rewrite.so

Do not uncomment the PHP line.

Add the following after other Directory sections:

<Directory "/Users/ilyabirman/Sites">
    Options Indexes FollowSymLinks Multiviews
    MultiviewsMatch Any
    AllowOverride All
    Require all granted
</Directory>

Replace ilyabirman with your username.

Now find and uncomment this line:

Include /private/etc/apache2/extra/httpd-vhosts.conf

Now open the very file /etc/apache2/extra/httpd-vhosts.conf and add this:

<VirtualHost *:80>
    DocumentRoot "/Users/ilyabirman/Sites/aegea"
    ServerName aegea
    ErrorLog "/private/var/log/apache2/aegea.l-error_log"
</VirtualHost>

Again, replace ilyabirman with your username.

Finally, open the /etc/hosts file and add the hostname you want to use for local projects:

127.0.0.1 aegea

Now if you point the browser to the address “aegea”, it will request it from the local machine. If Apache is running locally, it will capture the request and look at ~/Sites/aegea/ folder for the content to serve. This will not work just yet because we haven’t installed PHP.

Install PHP and MySQL

Mac comes with a pre-installed PHP, but it’s rather old and doesn’t include GD (a library that Aegea uses to work with images). Install good PHP. I use the installers from the page PHP for macOS as binary package and like them very much. They have never failed me.

Install PHP 5.6 (better for now) or PHP 7.1 by following the instructions on the page.

This will make Apache work with PHP without any changes to the httpd.conf file.

With MySQL it’s even easier: there’s an official native Mac installer available. Download the DMG file and follow the installer’s instructions. Don’t forget to Install the System Preferences pane to be able to start and stop the MySQL server from System Preferences.

Start MySQL and Apache

Open System Preferences, go to MySQL and press “Start MySQL Server”.

Open Terminal and type:

sudo apachectl start

It will ask for your password.

Create a database for Aegea

In Terminal, type:

sudo /usr/local/mysql/bin/mysql

In the MySQL prompt, type:

create database aegea;

Install Aegea

Navigate to “aegea/” with your browser. Without the final “/” Safari will try to do a Google search of “aegea”.

You will see Aegea installer. Enter the following MySQL database access parameters:

Server 127.0.0.1
User name root
Password (leave empty)
Database name aegea

The last thing to fill in is the password that you want to use to access your blog (you can change it later):

Click “Start blogging” — and that’s it.

UI Animations: four things

Here’s a video of my recent talk about UI Animations at AngularJS-IL meetup in Tel Aviv:

The video quality is not good because this wasn’t even meant to be recorded. I am lucky to have the video at all. Also, this was my first public talk in English — sorry about some slips.

The design of the iPhone 7

Somehow it’s become a common knowledge that the design of the iPhone 7 is almost the same as the design of the iPhone 6. This boggles my mind.

How can you not see that the iPhones 6 and 7 are the most different iPhones in the history of iPhones? The iPhone 6 is the ugliest iPhone ever created. The iPhone 7 is the most beautiful iPhone ever created.

This is the original iPhone:

Original iPhone

It was beautiful. Everything was perfectly aligned. It would be better without the black stripe on the bottom, but it had to be there for the antennas to work.

iPhones 3G and 3Gs were worse:

iPhones 3G and 3Gs

They looked fine in pictures, but were plastic, felt cheap and often cracked.

Then there were the iPhones 4 and 4s:

iPhone 4

These were special. They didn’t look nice in pictures, but were very attractive in person. The antenna lines bugged me a lot, but overall these were good ones. The glass back was really cool (I don’t break my phones).

Since then, things went downhill. The iPhones 5 and 5s were ugly:

iPhone 5

The black stripes, unlike on the original iPhone, were completely out of place. The camera was misaligned.

I wrote about it in The hope for a beautiful iPhone.

Then came the iPhones 6 and 6s, painfully ugly:

iPhone 6

The camera was not aligned with anything and sticked out. The rubber stripes were all over the back. How was this even possible? Imagine somebody showing it to you in 2008, after you’ve seen the first iPhones. You wouldn’t believe Apple would have shipped such a device.

Definitely, these were the ugliest iPhones ever built.

And then Apple showed the iPhone 7:

iPhone 7

Image from wylsa.com

How can you even compare it to the 6? This one is finally beautiful, after several years of ugliness. The camera is aligned with the phone’s corner, for the first time after the iPhone 4! It still sticks out, but this time the phone is designed with this in mind. It’s not slapped on top of an unexpecting phone; it’s there because it was meant to be there. The same for the antenna lines: they are part of the design, not some crap put on top because it had to be.

This is the first iPhone in years that you can enjoy just looking at. And unlike the iPhone 4, it looks great from every angle. It’s the opposite of the iPhones 6.

Earlier Ctrl + ↓