5 things in web development I learned this year

This year has been weird but good, after suddenly becoming the most experienced frontend developer at the company I work at, Matise, I really had to step it up.

In this article I've listed 5 things I learned this year concerning web development.

1. Mix blend modes

Okay, I had heard about this one, but I never really delved in to it. mix-blend-mode is a css property that determines how an element's content should blend with the content of the element's parent and the element's background [1]. It's a great way to add animated effects on images or implement a dark mode for example.

2. CSS Filters

CSS filter are amazing, I would only recommend using filters on images if you want to animate them. Because although browsers have become better at handling them, it's still a bit of a performance hit [2]. I actually used a SVG filter to create a duotone effect before realising it would be soooo much easier using blend modes and pseudo elements which are actually animatable.

3. Line clamping

A lot of our clients like it when excerpts on blog previews are the same height, I always explained to them that that's not possible because of varying text lengths and not using monotype fonts etc. I found out this year I was wrong! It is possible as an enhancement, this doesn't work in non webkit browsers, to 'line-clamp' text at three lines for example. I still instruct clients to keep their excerpts short and to the point but this is a nice extra for them.

.text-excerpt {  overflow: hidden;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;}

4. CSS variables are funnnn

I've used CSS variables (or custom properties if you like it old school) to animate elements so much this year and bored people with talking about it so much, I might be it's biggest advocate.
They can be global, they can be scoped, you can change them in a lower scope IT'S GREAT.

I like to use the style.setProperty method in stead of actually using JavaScript to add css properties directly. I always hate when I want to overwrite these JavaScript set properties I have to use !importants. I also love that my logic stays in the SCSS file and the variables are available in all child elements. This can be useful if you want to set a style on multiple elements, no need for JavaScript loops anymore you can just simply set the property on the parent element and use a class selector to add it to all of them.

5. Text strokes

This is more just a really fun thing I've found out about this year, like line clamping it should really be used as an enhancement because of its browser support.

BONUSSS

I learned about clip-paths back in 2018. But I've still used them a lot this year, and learned some new things about animating them. For example you can't animate between two different types of clip-path like a circle and polygon type, which is understandable but really still a shame. You can fake it a little by first creating a square and then replacing the polygon type with a circle type, but it's not ideal.

What did you learn this year?

Sources

1. https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
2. https://www.smashingmagazine.com/2016/05/web-image-effects-performance-showdown/