5 things in web development I learned this year
Tags: css, javascript, beginners, list
Published: 2019-12-27 15:01:48

---
title: 5 things in web development I learned this year
published: true
description: This year has been weird but good, after suddenly becoming the most experienced frontend developer at my company I really had to step it up.
tags: css, javascript, beginners, list
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ap6yrs4ougw5i6vulyay.jpg
---

**This year has been weird but good, after suddenly becoming the most experienced frontend developer at the company I work at, [Matise](https://www.matise.nl/), 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]](#sources). It's a great way to add animated effects on images or [implement a dark mode](https://dev.to/wgao19/night-mode-with-mix-blend-mode-difference-23lm) for example.

{% codepen https://codepen.io/Sidstumple/pen/NWPgGNB %}

### 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]](#sources). 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](https://dev.to/cydstumpel/making-magic-with-before-and-after-pseudo-elements-2fb2#fun-stuff) which are actually animatable. 

{% codepen https://codepen.io/Sidstumple/pen/gKKVRQ %}

### 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.

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

{% codepen https://codepen.io/Sidstumple/pen/QWwgbvq %}

### 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](https://dev.to/cydstumpel/using-css-variables-to-create-smooth-animations-5164), 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 `!important`s. 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.

{% codepen https://codepen.io/Sidstumple/pen/jJaWBr %}

### 5. Text strokes
This is more just a really fun thing I've found out about this year, like [line clamping](#line-clamping) it should really be used as an enhancement because of its [browser support](https://caniuse.com/#feat=text-stroke).
{% codepen https://codepen.io/Sidstumple/pen/pQbRPG %}

### 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.

{% codepen https://codepen.io/Sidstumple/pen/KKwvVRV %}


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/