ErBlog

A collection of UI tweaks unlocked by new CSS features.

About using vector graphics for animation.

A performance featuring an oscilloscope, lasers, and a fire extinguisher. Turning an image into sound and back.

About how, to learn something new, you first have to let go of the old.

About layouts beyond just Pinterest-style masonry.

About what you can do in CSS now and how to pair it with JS so the code stays readable.

A customisable select was already needed back in '93. And now, years later, we almost have it.

A clear guide at the start and wild time-travel tricks at the end.

A dark theme does not suit everyone. A light theme does not suit everyone either. You need both.

An x86 emulator in pure CSS. An emulator! x86! In pure CSS!!!

About how fun and interesting it is to build a browser from scratch by following the specs.

A talk about how color spaces are similar to plumbing faucets, and how to learn to change a color's hue while preserving its brightness and saturation.

A talk about how color spaces are similar to plumbing faucets, and how to learn to change a color's hue while preserving its brightness and saturation.

In a classic speedboat, the engine is housed inside the hull rather than hanging off the back. This approach comes with a lot of complications, but it looks better, in my opinion. The easiest view to draw is from above. Let's start with the hull: two symmetrical curved lines — the sides. The transom is angled, so it's visible. Next, let's add some details: a windshield, a seat, and a steering wheel. You can also add fins at the stern.

Vacation, for me, is associated with palm trees on the seashore and people chilling in them, watching the sunset. Today I started wondering why that is, since most of my actual vacations featured neither palm trees nor the sea. After spending fifteen minutes digging through my memory, I figured out that it's a frame from a Soviet cartoon I watched as a kid. That's what vacation looks like in my head. Let's start with the palm trees. Chaotically hanging leaves, coconuts beneath them, and below the coconuts — a slightly curved trunk. On the other side — another palm tree, just the same. Next — the lounge chairs. Two crossed sticks. A little higher and to the right — two more sticks, just like those. A piece of fabric stretched between them. Let's add one more — mirrored. That's it. Vacation is ready.

Rocks are easy to draw. The beauty of it is that every rock you draw turns out unique. Start with a rough, angular shape. Add a few facets along the edges and a couple of jagged ridges inside. All that's left is to shade the facets — and the rock is done.

The hardest part of drawing a fan is making the blades the same size. The simpler their shape, the easier it is to repeat them. Draw a circle. Around it, add three, four, five, or as many blades as you like, spaced evenly apart. Behind them, draw a stand or the fan's body.

We’ll start drawing the browser with an empty rectangle. Despite the whims of design and fashion, in 2026 you can still recognize a browser by the address bar and the back/forward buttons. Let’s add them to the rectangle. These days a site without an s after http looks suspicious at the very least, and every browser highlights that somehow—usually with a shield or a padlock. This icon next to the address means the site is running over https, which means everything you send it and everything it sends back to you is encrypted, and that’s more or less protected. Pay attention to it: an encrypted connection is the key to healthy web surfing. Next you can add window controls to taste and a scrollbar on the right for solidity. You can draw any site inside the browser. I drew my little blog. In troubled times, a good old separate website with RSS will stay accessible a bit longer than everything else. Save the link for yourself if you like it. Good luck to you and safe internets.

The bottle is easy to recognize by its shape. Adding a highlight will make it look even better. In our case, the bottle has a metal cap. Just before the cap, at the neck, there is a small thickening. The cap itself resembles a narrow trapezoid with hatching connected at the bottom.

The most recognizable image of an astronaut is the spacesuit for extravehicular activity. It's the kind of thing that looks more like a vehicle than clothing: with a rigid frame, a cooling loop, and a flashlight. That's what we're going to draw. First — the helmet. It's rigidly fixed to the torso, and the astronaut's head moves inside it, which is why the helmet has a huge visor protected from the sun. Next — the cuirass, to which the arms and the lower part of the torso are attached. And on the back — a massive box housing the life support system and other useful things. Doesn't look very comfortable, but out in open space, you simply can't do without all of it.

Today we’re drawing a wall. What makes a wall recognizable? Of course, bricks. To make the wall sturdy, the bricks are laid in a staggered pattern. We’ll do the same. First, we’ll draw a rectangular wall. Add a concrete trim on top. Then divide the wall with horizontal lines. Split the first row into individual bricks with vertical lines. On the next row, do the same, but shift it by half a brick. This is how you need to divide the entire wall into bricks. All that’s left is to add the shadow from the trim — and the wall is ready.

A modern refrigerator in a drawing is hard to tell apart from a wardrobe, so we will be drawing a rounded retro-style refrigerator. We will start with the door — it is a rectangle with rounded corners. Then we will add some depth: the upper part of the back wall will also be rounded, while the lower part will be straight. All that is left is to add the handles and divide the refrigerator and freezer compartment doors.

A spider has a round cephalothorax with eyes, from which eight legs with small claws at the tips grow. At the front there are also chelicerae and pedipalps (front legs), and at the back there is an abdomen. I start drawing with the cephalothorax, then mark the positions for the legs. Next comes the hardest part: correctly conveying the shape and length of the legs. All that remains is to draw the abdomen.

Cucumber differs from a regular elongated oval only by its bumps and little tail. It also has stripes, but they are only noticeable near the tips.

Ordinary clover has three leaves. But everyone knows that the fourth leaf brings luck, so we'll draw a four-leaf clover. The easiest way is to draw a thin diagonal cross, and then around each line – an elongated heart. Then draw a stem at the bottom. Happy Saint Patrick's Day to everyone!