DEV Community

loading...
Cover image for 5 things in web development I learned this year

5 things in web development I learned this year

Cyd
Freelance Web developer
Updated on ・3 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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/

Discussion (33)

Collapse
gdotdesign profile image
Szikszai Gusztáv

I was happy to notice that line-clamp is supported across most browsers (~95%) using the prefixed version ➡️ caniuse.com/#feat=css-line-clamp

This is huge since designers seemingly always want to do this and I had to tell them this is not possible.

Collapse
cydstumpel profile image
Cyd Author

Thanks for doing the research✌️! It’s not bad indeed, but still rather an enhancement than a promise I think

Collapse
damsalem profile image
Dani Amsalem

Nice article!

This was my first year of web development. I learned a lot of WP template tags, a teensy bit of PHP, many fundamentals of JS and SCSS while also digging deep into Bootstrap documentation.

In the last quarter, I took a break from Bootstrap so I could dive into Flexbox and Grid. I'm finally feeling pretty comfortable with them! I got to this point by playing and completing every CSS game I could find (6 in case you were wondering).

Collapse
cydstumpel profile image
Cyd Author

You mean grid garden and stuff right? I loovvve those, I insist my interns play them in the first few weeks!

Collapse
damsalem profile image
Dani Amsalem

Yeah! Those are so great. These are the games I've discovered/completed so far.

  1. CSS Selector (free) flukeout.github.io/
  2. Flexbox Defense (free) flexboxdefense.com/
  3. Flexbox Froggy (free) flexboxfroggy.com/
  4. Grid Garden (free) cssgridgarden.com/
  5. Flexbox Zombies (free) mastery.games/p/flexbox-zombies
  6. Grid Critters ($129) gridcritters.com/
Collapse
piotrk profile image
2pi.pl

mix-blend-mode - no support on Edge so far, so kind of useless for now :(
line-clamp, text-stroke - nice feature - I didn't know about it - Edge compatible - thanks!
clip-paths - this animation idea looks great but unfortunately there's again problem with Edge support :(

Collapse
cydstumpel profile image
Cyd Author

If you look at it as enhancements in stead of features an entire world of not edge supported coolness opens up ;)

Collapse
piotrk profile image
2pi.pl

Sure, but then the client writes - it's not working do something! :)

Thread Thread
cydstumpel profile image
Cyd Author

Enhancements are not features so you shouldn't use it on stuff that diminish the functionality of your website, that's the magic of enhancements ✨

Collapse
nightcoder profile image
nightcoder

thank you so much for this GREAT article and sharing all this super interesting knowledge !!! CSS power! 👍🏾 i'm a newbie aspiring frontend dev (2020!🤩) started my 100 days of code 2 weeks ago and learning to rewrite all my css with sass at the moment.
and thanks to you i just learned 5 amazing tips!! ❤️👍🏾 love your joyful energy while sharing your valuable experience ! 😉 thank you very much and happy New year in advance to you too!

Collapse
marklchaves profile image
mark l chaves

Very enjoyable read.

Just a heads-up your above CodPen for the CSS vars looks like the image is missing. I love the animation though. I can't wait to see it with the image.

Ok, one tiny thing I learned recently that blew my mind is the shape-outside CSS attribute!

Collapse
cydstumpel profile image
Cyd Author

Very cool! You can't see the space cat in the vars codepen? :(

Collapse
hinasoftwareengineer profile image
Hina-softwareEngineer

Great Article. I have also learnt the css but I don't know about css tricks which you have mentioned. I learned a lot from your article. I am second year undergraduate student of Software engineering. I have learnt html, css, JavaScript, bootstrap, php just basic, nodejs, expressjs,mongodb, python,rust lang. Currently i am learning numpy and pandas. After this my aim is to learn react js and flutter. I am reading articles of developers such as you to know about latest technologies.

Again thanks for sharing such useful stuff.

Collapse
alvincentm profile image
AlVincentM

Me too. Right now Im learning nodejs.

Collapse
ben profile image
Ben Halpern

I didn't know most of this, thanks!

Collapse
kmwill23 profile image
Kevin

I am stealing everything here. Brilliant. The only one I use regularly are filters.

With our shop finally moving past IE, I am also going dive into variables. Thanks for the reminder!

Collapse
cydstumpel profile image
Cyd Author

I’m so happy for you that you no longer need to support ie! I wrote another article about variables a while back, maybe you’d like to check that out!

Collapse
mdsardar profile image
Mohammed Sardar

I've learned Restful web services, little mongo db, Spring boot, spring, Java 8 salient features recently introduced, Hibernate - ORM some new functionalities available, little Docker..

Collapse
loccode profile image
Malik Khodjaev

Thank you for your article. I have found lots of tricky and useful things here. This year was very unusual for me. I relised that 4 years in the humanitarian university was a big mistake, because I have lost all my skills as a developer. Anyway, I have improved my English (my mother tongue is Russian) and articles like yours are big reading plesure for me now.

Collapse
cydstumpel profile image
Cyd Author

Cool that you’re getting back to it. I recommend subscribing to some newsletters, like css weekly, it’s how I read about most new things.
Good luck!

Collapse
adisreyaj profile image
Adithya Sreyaj

So damn cool🔥

Collapse
kpunith8 profile image
Punith K

Simple and elegant, I like the way the code was written, I learnt lot of tricks from your code. Thanks for the nice article.

Collapse
canbax profile image
yusuf

Thanks for the informative things. Also, the animations are pretty nice.

Collapse
jagajastic profile image
Ibrahim Joseph M. • Edited

ooh yes, I learned how to use clip-path too, it's really cool and I loved it. thanks doe for sharing things you have learned

Collapse
pflash profile image
Precious adeyinka

Awesome article thanks a lot, like the idea about this being enhancement based and not feature based!

Collapse
dreamchild7 profile image
dreamchild7

Wow! I learnt a lot from these. Your codes are clean and top notch. Thanks for writing this.

Collapse
_ezell_ profile image
Ezell Frazier

Learned a lot of cool things just now. Thanks!

Collapse
drdougtheman profile image
drdougtheman

I didn't thought it was possible to animate using CSS only. Great examples.

Collapse
sansseryph profile image
Kyla

Just about everything in this post is new information for me - thank you for sharing it!

Collapse
reythedev profile image
Rey van den Berg

Thanks for the article! Haven't seen line-clamp before so thanks for the little css knowledge upgrade:)

Collapse
danielskiala profile image
danielskiala

This really Excellent

Collapse
jlrxt profile image
Jose Luis Ramos T.

Hola saludos desde México. Este año enfocado en PHP/HTML/CSS Y JS. gracias por compartir y felices fiestas.