Today I was looking for new illustration inspiration for my CSS City, and I came across this adorable animals illustration. I love animals! I had many dogs, cats, parrots, pigeons, rabbits, guinea pigs, hamsters, fish, and many more🤯. Also, most of my tattoos are animals 🤣

Adorable illustration of animals created with CSS! 

Animals Posters Gallery

Another fancy building for my CSS city! This time I found a beautiful school building. Every town should have a school, so mine have it too! 😎

School Building

School building

Fully responsive American-style CSS building created for my CSS city. I thought it would be much easier to make, but it took me over 4 hours!

Fully responsive American-style CSS building created for my CSS city.

American Style CSS Building

American Style CSS building

A simple script to generate custom og:images for your website

Learn how to Generate Seo Images with a simple Node.js script

Learn how to Generate Seo Images with simple Node.js script

A look at the Claymorphism - a new UI design trend from a developer’s point of view

How To Create Claymorphism Using CSS

How To Create an Claymorphism Using CSS

I completely rewrote my blog with Next.js, Emotion, MDX and Storyblok

How I Rewrote My Blog with Next.js

How I rewrote my blog

Knowing how to google is the most important skill for a developer. We do it at every level of experience - from junior developer to senior with 10 years of experience

Know How to Google Is Important. Do You Know How Do It?

Design trends are creating like a new javascript framework. Some of them are good and accessible to all users, and some of them are not.

Aurora UI - how to create with CSS

A short tutorial on how to start with single div images. To create a simple image, you need to know only one thing: how backgrounds in CSS works.

How to Fall In Love With Single Div Illustrations

To add, remove or toggle element's class, first of all, we need to get this element. The most modern way is to use 

. Javascript have element.classList property, which will return DOMTokenList collection attributes of the element. And that's how we can manipulate elements classes.

To remove class from element, we need to use 

Lastly, to toggle class (remove, if class exist and add if the class doesn't exist), we need to use the 

But what if we want to add specific class to all existing classes? We need to use different selector - 

, which will return a list of elements with class from parameter. Then, to add, remove or toggle class, we should use 

Short cheatsheet for adding, removing and toggling css classes

How to change element's class with Javascript?

This space below the image is not a bug or an issue, and it is a default browser behavior. Images created with 

 property. Every text, not only in programming, have various properties. This extra gap exists because of the 

. Long story short: descender is the gap below the baseline of the font. So, if our image is treated as text, it has to have a descender.

There are multiple different ways to fix this problem:

I can recommend the first solution for this problem. It's the easiest one.

I don't recommend the last two solutions because it will set font-size or line-height to all text nodes in div.

Also, font-size: 0 will affect image ALT font-size. If your image doesn't work, your alt text won't display too (okay, it will display but with font-size:0, so it will be invisible.

Image below was fixed by adding display:block to image.

One of the most common problems that almost every junior frontend developer had

Extra space below image

The easiest way to limit text to n lines is to use

.  N can be any positive number, but it will be two or three lines most of the time. On my blog, I'm using 

 in all post-type components to ensure that it will have the same height as siblings.

White-space and overflow will do the job, while text-overflow will add three dots at the end of the line.

 truncation is supported by all major browsers except IE11 and Opera Mini.

 to 3,6em. Max lines are calculated in this way: 3,6em divided by 1,8em equals 2 lines.

Sometimes, we have to trim text to limit the number of lines.

How to limit text to n lines with CSS?

How to limit text to n lines

Variables in programming should be named to achieve one goal: to explain what it does and why it exists. Variables with good naming save time for all people because you already know what this variable stands for.

Meaningful  and easy to  pronounce  variable names

Better variable names

The proposal "Numeric Separators" allows underscores as separators in numeric literals, and it's a part of ES12.

Numeric separators allow using big numbers more transparently.

Numeric separators allow using huge numbers in easy way

Numeric separator

HTML allows creating a date picker out of the box! You don't need to import any other library to have a date picker. Just use 

It might look different on different browsers and OS. Internet Explorer does not support the native HTML date picker.

Native date picker supported by all major browser

Native date picker

Not many people know that HTML allows you to have a color picker out of the box!  You don't need any extra javascript library to do this. All you need to do is to use 

It might look different on different browsers and OS.

Did you know that you don't have to use a special javascript library to achieve that?

Albert Walicki

Frontend Developer & Entrepreneur

About me 👋

Find me here

Latest articles

Learn how to Generate Seo Images with a simple Node.js script

How To Create Claymorphism Using CSS

How I Rewrote My Blog with Next.js

Know How to Google Is Important. Do You Know How Do It?

Aurora UI - how to create with CSS

How to Fall In Love With Single Div Illustrations

Youtube videos

School - CSS Art - timelapse

CSS art & illustrations

Animals Posters Gallery

School Building

American Style CSS Building

Frontend tips

Better variable names

Numeric separator

Native date picker

Native color picker

Problems & solutions

How to change element's class with Javascript?

Extra space below image

How to limit text to n lines with CSS?

Hello, i’m Albert Walicki. i’m a frontend developer and cofounder of development & design agency Hype4 and education platform Hype4 Academy. I wrote a book for Junior Frontend developers called Frontend Unicorn.