Frontend friday 3
It’s been a while since our last front-end newsletter. To try to increase the frequency, we’ll try to split the newsletter into smaller chunks. It’s both easier to consume and more frequent. It’s gonna be great!
This time around, we’ll focus on miscellaneous tips within the world of CSS, and have a little recap on the importance of HTML semantics.
CSS — Viewport units and grid
For many years the usual suspect for managing layout and spacing in CSS was the pixel unit. It was, and still is a very useful unit in some scenarios. However, for managing large scale layouts, the pixel unit is usually too unresponsive and may lead to the use of media queries for managing responsiveness. A couple of new units was created to simplify development of responsive layouts which was based on the size of the viewport, namely the viewport units. These units have however gone under the radar for some. If you’re one of those people, a quick look at this introduction is encouraged.
There is another great tool that exists for managing layout. This tool has been around for a shorter period than the viewport units, and is to my experience even less used. Considering it’s an even more powerful tool for managing layout than the viewport units, it’s strongly suggested that web developers take a few minutes to behold the wonders of CSS grid.
There also exists a game similar to Flexbox Froggy called Grid Garden, which is a great tool to practice your grid skills. It’s worth a try if the grid-introduction caught your interest.
The importance of semantics
Looking back at the brilliant talk by Torbjørn Helland Solhaug about accessibility during the last meetup, it feels natural to repeat some of the things we learned. This YouTube channel about accessibility emphasizes the importance of semantics when writing HTML and the benefits it provides.
One of the things that was mentioned as an example in his talk, is the use of the button element. Some developers find it hard to style the button the way they want, so they reach for the well-known div element. However, the consequences for such a decision might be larger than you think. This video from the same channel proves the point.
