Nathan Curtis — Components: Big, Small or Do ‘em All?

By Kacim Fedjkhi

We’re always talking about Design Systems and Component Libraries these days. But one of the struggles all libraries experience after a while is that they get bloated and they tend to lack overview.

Nathan documents some remarkable techniques to help working on public component libraries.

First technique he gave was to measure the need for organisms (which are components that consume multiple smaller components). When a new organism is proposed, the main idea is to review the usefulness of each component.

• How many teams will use the new component within the 12 months? What is the adoption rate?

• How efficient is it to create this component?

• Will the organism be consistently used?

He showed us the technique to create sub components. This is the phenomenon when a component has the need for a large amount of flexibility, to split up logic into sub components.

This has the potential to empower your users with flexibility but it comes with a few drawbacks for the production team. It can lead to inconsistency and more technical debt so this technique should not be misused.

Slides of this presentation can be found on slidedeck.

Kacim’s takeaway

Nathan was the opening speaker and caught our attention the most because the content was so relevant to the work we do every day. For our clients at Craftzing we’re maintaining and creating Component Libraries on a daily basis so we’re facing the same challenges in maintaining overview.

Michelle Barker — Modern CSS Layout

By Kris Van Herzeele

Michelle Barker is quite known in the world of CSS by her blog CSS { In Real Life } https://css-irl.info/. She enjoys tinkering with code in creative demos. Her talk shows that CSS layout had moved along in leaps and bounds in the past few years and she shared some thrilling novelties with us.

Beyond flexbox and grid, there is aspect-ratio, min, max and clamp functions, custom properties and logical properties.

There are some exciting new features on the horizon as well such as:

• subgrid: to deal with Nested Grids, CSS introduced the concept of CSS Subgrids, which helped in developing nested grids that were easier to design and manage.

• container queries: provide a way to query the size of a container, and conditionally apply CSS to the content of that container.

• and the :has() pseudo-parent selector. This selector allows us to style an element based on its descendants or any succeeding elements.

This is challenging the developer to decide which of these tools to reach for in his CSS toolbox.

Michelle Barker also demonstrates how those new tools can fix some well known hacks developers used for years such as the aspect-ratio hack.

She continued with a hands-on live coding session building a layout with all those new exciting features. 

Slides of her presentation can be found here.

Kris’ takeaway

The emphasis is that many of the new CSS features we have at our disposal help (and even encourage) us to embrace the flexible web of the present day. We can ensure our layouts are robust across all devices. Diversity is the web’s strength, not its limitation!

Andy Bell — Be the Browser’s Mentor, not its Micromanager

By Thomas Verleye

Andy Bell gave us a view on how he tackles the task to create and style a website in the current state of the web. Following a CSS methodology he calls CUBE CSS (cube.fyi) which is inspired by BEM (getbem.com) but with the core flexibility of CSS.

In short he applies following rule of thumb:

1. Apply HTML. Always start off using semantic HTML so every user can use your website.

2. Apply Modern CSS Reset. (eg: github.com/hankchizljaw/modern-css-reset)

3. Setup Global CSS. Set your css variables and add global styling to your body and basic html elements.

4. Composite. Create smart layout classes you can use on regions which provide the child components positioning.

5. Utilities. Make on the fly utility classes to apply specific styling to your regions or components.

6. Blocks. This is where he uses BEM methodology for component stylings.

7. Exceptions. Instead of using BEM modifiers for everything Andy suggests the usage of data-attributes for adding exceptional differences in components.

Besides the methodology Andy had a few nice tricks underneath his sleeve.

• He showed us how clamp() was an ideal css function to create fluid typography and spacings. He used a nifty tool called utopia to calculate the values (utopia.fyi).

• To present his examples he showed a screen capture with a lot of screen sizes scrolling at once. He used polypane for that which is a great tool for testing (polypane.app).

Slides of his presentation can be found here.

Thomas’ takeaways

This talk definitely had us nodding, a few of our colleagues compared our methodology with it and they felt that they were on the same page and may adapt a few of these techniques.

BEM is definitely a great methodology to build up your dedicated components but when you want to have a scale-able design system you'll run into trouble.

A good global styling, compositing classes (or components) in combination with smart utility classes are essential.

Harry Roberts — Get Your Head Straight

By Maxim De Geyter

A mystery guest was planned for the first talk of the second day. That mystery speaker turned out to be Harry Roberts, a consultant web performance engineer. He’s also known as csswizardry. His talk was about the head tag and how the order of elements in the head can improve page speed significantly.  He showed this by an example of a slow loading page. 

Initially the page took 9.33s to show the First Contentful Paint (FCP). Step by step he showed how to improve the page speed, mainly by changing the order of elements in the head tag which he named the Optimum Head Order.

Some tips by Harry to improve the page speed by changing some things inside the head tag:

• Remove as much as possible: Kill any inefficiencies such as redirects. Move low-priority scripts to the closing body tag. Reduce in-head payloads.

• Self-host static assets.

• Fix invalid markup: This could close off the head tag by the browser and put the other elements that would belong in the head tag in the body.

• Follow the Optimum Head Order.

Metadata about the page goes first. Right after this the title tag should come according to the Optimum Head Order. The title is the first impression of a page and gives the users feedback if the site has responded or not. We should avoid putting anything synchronous ahead of the title tag, as this could block the rendering of the page. Synchronous JavaScript should come before synchronous CSS. CSS could block the execution of subsequent JS. However @imports could be blocked by synchronous JS, so this should be placed before it. Reordering the CSS and JS could improve the load speed a lot. Everything else, such as SEO meta tags and icons, should be placed at the bottom of the head tag.

By implementing all these changes Harry was able to reduce the loading time from 9.33s to 2.669s!

Maxim's takeaways

Since HTML is parsed line by line, the order of what you place in your head tag can affect your page speed significantly. Render-blocking elements in the head could slow the loading of a page tremendously. Harry Roberts gave us an easy to follow order with the Optimum Head Order to avoid these issues.

Manuel Matuzović — Lost in Translation

By Wout Thielemans

Developers might know this speaker from the htmhell.dev blog, a collection of HTML snippets so erroneous they're almost funny. Almost, because for Manuel Matuzović, HTML is no laughing matter. This language is the foundation of every website we make, and still, Manuel argues, as a community, we are kind of bad at it. When it comes to translating a design into code, too often developers focus on the visual aspect instead of the semantic meaning, resulting in a loss of information and causing accessibility issues. We should learn to identify invisible patterns in a design to produce semantic HTML and quality websites.

Let's take a look at a specific example from the talk: a close button using an icon.

This incorrect snippet does the job visually, but fails semantically, resulting in an inaccessible button:

A correct button implementation uses, well, a <button>, and makes sure it communicates what it is and what it does to every kind of user:

This is a great example of looking at the hidden information behind a design:

• use the correct role for the element;

• use a readable label if necessary, even if it's not visible;

• use ARIA to communicate state and relationship.

Roles and attributes will depend on the kind of element you need, so make sure to do research. There are 115 HTML elements (at the time of writing), so chances are there's one perfect for your needs. Part of our job as developers is to make these decisions by reading in between the lines of a design. Other examples of this include implementing a correct heading order (these might not all be visible or visually ordered in a design) and including alt descriptions for images.

Wout's takeaways

96.8% of home pages have detected WCAG 2 failures, so obviously there is room for improvement. We have to make accessibility – and by extension, proper knowledge of HTML – a standard requirement in our industry, both at our places of work and in the courses we create for the programmers of tomorrow. The simplicity of HTML's semantics might obscure the complexity of the language, but let's not go over it too lightly. Using it correctly makes sure every kind of user can use the websites we create.

By Michele Stynen

Digital Marketeer