Lots to Learn in the NDC Workshop Front End Web Fundamentals

Last week I attended the NDC Oslo 2020 online workshop Front End Web Fundamentals hosted by Amy Kapernick (@amys_kapers). She is a front end developer and speaks at conferences from NDC to Microsoft Build. If you want to learn about HTML and CSS, you should read her blog (and attend her workshop).

The workshop started with a refresher on HTML tags. We all think of HTML as something static and only slowly changing. But even at a slow pace the changes add up. I was surprised how many tags one can use I never heard of.

In the CSS part we could experience the importance of well-structured HTML. If our content has a good structure, we can use CSS to completely change the layout – without the need to touch any of the HTML. We moved content around using CSS Grid and Flexbox in a way I could not dream of. I was impressed what we now can do with plain CSS that years ago required frameworks like Bootstrap. If you never saw the possibilities you should watch this talk by Amy from NDC Oslo 2019.

Day 2 was all about testing. We started with accessibility testing and run tools like Pa11y, Lighthouse and Wave against our websites. I was surprised how well the tools worked and how actionable their findings are. Even simple pages can have a lot to improve. However, most often you just need an alt-attribute on your images and a text with your linked icons to improve the accessibility. Those changes do not need much time and are a big help to your users.

The next part was visual regression testing. When we refactor our CSS we may introduce accidental changes. With tools like BackstopJS we can verify that our site looks exactly the same as before. However, when we do not need a pixel-perfect copy those tools have a hard time to figure out if the test should pass or fail.

The last part of the workshop covered end-to-end testing through the user interface with Cypress.io. Tools like Cypress (or Selenium) are better suited to check that the users can work with the web application than BackstopJS. Unfortunately, Cypress does not work with Safari and BrowserStack which are two must-haves for me. When this changes I will revisit Cypress.

At the end of the workshop I was happy and exhausted. We covered a lot and I learned many new things that I can use to improve the projects I work on. I can highly recommend this workshop and I hope it will be repeated at other NDC conferences.

 

Helpful Resources

Htmlreference.io is a web site that explains all 113 HTML elements. For each element you find a short explanation on the purpose of the element and a code snippet that shows how you can use it. The link in the right corner to the MDN (Mozilla Developer Network) will give you a lot of additional information.

 

The Mozilla Developer Network (MDN) offers a large documentation on everything you need to know about web technologies: HTML, CSS, JavaScript and SVG. What you can learn there is not limited to Mozilla/Firefox and should work in most current browsers.

 

Your first steps with CSS layouts may be a pain. Nothing works as expected and the tutorials are all but fun. However, there are other approaches to learn than just reading articles and watching videos. Grid Garden is a game to learn CSS grid. In this game you need to water carrots using grid-* properties. Flexbox Froggy is a similar game to learn CSS Flexbox. You need to place frogs on lilypads using the right CSS property:

 

Inside your CSS Grid you can make a lot of calculations to get the width of your columns right. If you want some columns of a uniform size and others a multiple of this size, the fr unit can help you a lot. This fractional unit is a bit like the columns in the Bootstrap Grid. It automatically adjusts to your screen size, but you are more flexible on how to use them. You can find great examples on how to use fr at Alligator.io.

 

Who can use is a great visual help to figure out how accessible your colour combination is. You get a list of the most common visual impairments and a representation on how that looks. I especially liked the last two examples about situational vision events (direct sunlight and Night Shift mode) since they make it clear that a good contrast is important for everyone.