Easy, fast, and very cute candle. I will write a small article or thread how to create this illustration 💪

Easy, fast and very cute candle. I will write a small article or thread how to create this illustration

Cute Animated Candle

cute-candle

The lighthouse was supposed to be much easier than it was. The top part was created as repeatable background. 💪

The lighthouse supposed to be much easier than it was. The top part was created as repeatable background.

Lighthouse illustration

lighthouse

When I saw this image the first time, I immediately knew that I want to rewrite it with CSS. 💕

When I saw this image the first time, I immediately knew that I want to rewrite it with CSS.

Cafe CSS illustration

cafe

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

HTML5 added a lot of new tags. Let's discover a few not that well known

6 Form Related HTML Tags You Might not Know

These days, it's hard to get your first tech job without impressing your employer with your portfolio. A lot of new developers create identical landing pages from the same template

How to Stand out From the Crowd and be Unique

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