Web Directions Year round learning for web and digital professionals

The husk of true faith

I’m writing this on Good Friday, considered by many of the Christian faith to be perhaps the most important day in the Christian calendar, and in Australia, a largely secular country, so sacred that you cannot buy take away alcohol on this and only one other day in the year (that being Christmas Day). Pubs […]

Security, privacy and the Web–or why we can’t have nice things

I hear from my children there’s these things called “streaks” on social media (actually Ms just about 13 called out to Ms just turned 11 the other day “streaks aren’t a thing any more”), a game based dynamic for increasing the stickiness of social media (it’s also a useful technique for positive habit forming) so […]

Progressive Web Apps, Graffiti Dinosaurs and more

Yes, I admit, I’ve been less than assiduous about this ‘weekly’ (more ‘weakly’ amirite?) newsletter for a while now. 2020. Programming a series of 6 conferences, trying to be an ok parent in these times. Plenty of excuses. Let’s see if we can’t get the show back on the road. As always I’ve still been […]

Web Directions Hover ’21 session spotlight–What’s New In CSS 2021

What’s New In CSS 2021 Adam Argyle, Developer Advocate, Google From risky and may never be in your browser, to stable and just released yesterday; follow Adam as he strolls through proposals, specs and supporting tools for all the this new CSS hotness. Adam Argyle Adam is a bright, passionate, punk engineer with an adoration […]

Web Directions Hover ’21 session spotlight–Container Queries & The Future of CSS

Container Queries & The Future of CSS Miriam Suzanne, Co-founder, Oddbird Over the last decade Object-Oriented & Responsive design have become the norm – with tools like Flexbox, Grid, intrinsic sizing, and aspect-ratio giving us even more layout control. CSS has always been designed for a responsive web, but that goalpost can shift over time. […]

Web Directions Hover ’21 session spotlight–CSS Aspect Ratio

Have you needed to maintain an aspect ratio in a layout? Perhaps 16:9 for a video or a 4:3 photograph. Was it more work than you would have thought? There’s JavaScript solutions or the Padding-Top hack that work, but there are sacrifices to these workarounds.

The frustration of maintaining a consistent width-height ratio is about to be solved with modern browsers supporting the CSS Aspect Ratio property. In this talk we look at what aspect ratio is, how we can use it in our code and the problems it’ll solve.

Web Directions Hover ’21 session spotlight–CSS Variables for Real Life

CSS Variables is still a bit of a buzz word. Many of us have googled it, looked at some examples, maybe even done a tutorial, but how many of us have used CSS Variables in production?

I want to show you how and why we used CSS Variables in production in the new deployments view in Jira. More importantly I want to show you how to spot a potential use case for CSS Variables so you’re ready for it when it’s staring you in the face! Oh, and our use case is not dark mode or theming!

Web Directions Hover ’21 session spotlight–Typography superpower with variable fonts and CSS

Over the years, there has been a lot of effort in getting typography on the web right. With the advent of variable fonts, we’re already witnessing how it improves the experience and even web performance.

We’ll explore how adding modern CSS capabilities such as layout grids and custom properties in the mix truly gives us superpowers to create practical dynamic type systems that are accessible, performant and works across various screen dimensions.

Web Directions Hover ’21 session spotlight–Understanding display

CSS Layout is all about boxes. We know that some boxes are blocks, and others are inline, and we can change the display type of elements by changing the value of the display property. That property holds the key to much more than this, however. It is the foundation on which all layout is built; the core of the inbuilt CSS layout system. Learning Grid Layout, or Flexbox, without understanding Display, leaves you with a wobbly foundation and more questions than answers.

The real question isn’t “Should I use Grid or Flexbox?” but instead, “How do I want these boxes to behave?” Understanding the interaction between layout methods will enable you to easily create fallbacks for older browsers, and be able to make more informed decisions when deciding how to build any part of your design, big or small.

Web Directions Hover ’21 session spotlight–Move over TypeScript, here comes TypedCSS!

Have you ever wondered how a browser makes sense of CSS properties and values?

Turns out by parsing strings. Everything is a string: 50%, string. 2px, string. 0.5, string. #FFF, string.

So what happens when the browser can’t work out what the string is? Such as “width: 24asd;”

It fails silently, warning us with the generic “invalid property value” message. But what if we could assign types to the values? So the browser knew what it was expecting and what was wrong with the value we entered.

This is where the CSS Typed Object Model comes in. It sits under the umbrella of the CSS Houdini API’s and assign types to CSS values. So the browser knows it’s expecting a number, colour or keyword. This allows for more control over attributes and for more useful errors.

In this talk I’m going to take you through the CSS Typed OM and examples of how we can start using and benefiting from TypedCSS.

Web Directions Hover ’21 session spotlight–The State of CSS-in-JS

It’s been six years since Christopher Chedeau’s seminal yet infamous talk on CSS-in-JS. The community has come a long way since then but the experimentation hasn’t stopped. In this talk we’ll look at the current state of CSS-in-JS and examine the trends that are driving the space forwards.

Web Directions Hover ’21 session spotlight–The New CSS Logical Properties

Most of us developers used to think in terms of left and right, top and bottom. This is because, in the early days of the internet, it was meant mostly for uploading documents, and not for the complex website structures we know today.

This is the reason that no one considered the needs of multiple language websites.

But now the new logical properties give us a lot more power to control our websites, no matter which type of language we are using, for example, English, Arabic, Japanese, etc.). All this with minimal styles changing.

delivering year round learning for front end and full stack professionals

Learn more about us

Thoroughly enjoyed Web Directions — met some great people, heard some inspiring presenters and added a whole bunch of things to my to-do list.

Joel Roberts Web Developer