Web Directions Code Melbourne June 20 & 21

Most frontend tooling talks seem to focus on adding things to your project. There's no problem that can't be solved by adding more bits to your build, right?!

But when I looked at our UI library, I realised all those bits *were* the problem. Solutions that had been standard had fallen into disrepair in just a few years. Fundamental upgrades were blocked and the developer experience was awful.

People were quick to propose new-and-shiny silver bullets to replace the old-and-busted silver bullets. But repeating the same actions seemed unlikely to yield a different result.

So I proposed a new strategy: use as little as possible, and treat complexity as a risk.

By making every dependency fight for its place, we gained an appreciation for why each piece was there. By considering the risk each piece added, we had a framework to decide which risks were worth taking.

This did not lead to a pointlessly ascetic solution, but it did result in a set of deliberate choices and some guiding principles to keep the build lean.

Perhaps this could be your next project as well: defined not by what you add, but by what you leave out.

We’ve become so accustomed to aiming for developing native apps to get access to certain advanced features and functionality that it’s easy to miss that a lot of that has been adopted slowly but surely by our web browsers over time.

In this talk, we’ll have a look at some of these Web APIs, how they work, and how you can use them to progressively enhance the experience of your users in a real-life context.

The last year has seen a flurry of activity in JavaScript's standard library. New methods have been added to the Array and Set prototypes, and Objects and Maps are getting in on the party with new static functions. We'll take a look at what all these new methods do, how they fill the gaps in JavaScript that you have likely written functions for yourself, and how they prepare the language for future upgrades. With a better standard library, you can retire some dependencies and get excited about ES2024 and beyond.

In the last few years there's been an explosion in the ways you can run JavaScript. Node has its new dinosaur cousin Deno. They're both based on V8 from Chrome. Everybody is talking about Bun, which is faster apparently. It doesn't use V8, so what's the deal with that? There's JavaScript on Cloudflare, and a bunch of other Serverless providers. How will this impact bundling, and other front-end tooling? Does the same JavaScript work on all of them? What's the difference? What's going on?

In this talk we'll look over the history of JavaScript engines in browsers, and what makes them different. Then we'll look at JavaScript outside of browsers, featuring Node. Finally we'll explore the new wave of JavaScript engines and look at how they're trying to become Web-interoperable. I'll explore this all through the lens of how it impacts front-end developers primarily. If I get distracted I might accidentally start talking about WebAssembly. It'll be a ride!

Javascript frameworks get a bad rap when it comes to accessibility. But it’s easier than you think to make your JS applications accessible!

Accessible websites benefit not only people with disabilities, but improve the user experience for everyone. Follow me on a journey exploring techniques and approaches you can use to improve your projects today. We’ll look at specific code examples to address things like div soup, focus management and visibility, routing and meta data control.

We won’t just describe the issues, we'll cover how to address them as well. You’ll walk away knowing how to ensure your website or application is accessible and inclusive for everyone.

Single page apps (SPA's) have become a very popular way to build web applications. They offer incredible developer experience and allow the web to become far more ‘app like’ than ever before.

There is one problem with SPAs though; they actually suck.

In this talk I will take you on a practical deep dive show you how we can do better than the SPA model. We'll revisit our roots in traditional web apps and learn how we can use the same motivations that made SPA's so popular and re-apply them in a way that will make the web a better place.

Let's critically dive into Web Components, the component model built into the browser. What can they solve for us? Should we be using them? What are their strengths and weaknesses? Can they replace the frameworks we're using today, or should they just complement them? What's missing and what's happening about that? In this talk we'll aim to answer all of those questions, look at the use-cases, address the misconceptions, and take a look at the good, the bad, and the ugly.

Discover the journey of building and evolving the Canva Developer Platform driven by a vision to build the world's richest design ecosystem. Now, over a thousand developers are creating generative AI-powered tools, workflow integrations, design effect apps, and more for over 170+ million people using Canva across the globe.

This talk focuses on the lessons learnt in our quest to design simple, powerful APIs and the evolution of our Developers Platform. You will also gain insights into Canva's unique engineering culture and the values that drive us.

Canva is a global online visual communications platform launched in 2013 on a mission to empower the world to design

I have a dilemma. I'm trying to find a job but the job I'm looking for no longer exists. I'm a front-end developer. Which to me means I work on the user interface of the website. But now in our industry front-end means the same thing as full-stack. Front-end developer job descriptions include many back-end duties. There are almost always even more back-end duties than there are front-end. This is because the industry has devalued front-end development. To the point where it's no longer considered complex or time-consuming enough to be a full-time job.

In this talk, we're going to go through the issues with full-stack and front-end development, and then we'll figure out what title best describes the people left behind by the new definition of front-end.

Over the past couple years, CSS has progressed at rate never seen before. Sometimes, such a deluge of features can feel overwhelming. The State of CSS surveys have been running for 5 years. Some folks see it as a knowledge quiz, to see how many features they know or use, but we want the survey to inform folks of new features that could benefit their daily work, as well as observe what trends are happening in the world of CSS.

In this talk, we'll hear some insights from the survey as well as real world applications of CSS featured in the survey.

Modern CSS Layouts are amazing. We can do stuff that developers of an earlier age only dreamed of. And we can make it responsive at the same time. But, how do you decide what to use? Now that we've got grid, do we even need flex anymore? What about normal flow? And floats? Is there ever a time for floats?

In this talk, we're going to look at the intended use case for each of the layout modes, how to decide between them, and when it just doesn't matter which you use. And yes, we'll even find a use case for floats.

Fallback fonts. They don't often get much of our attention, after all, they are only a fallback! But their importance is growing with a focus on user experience metrics like Cumulative Layout Shift (CLS) — a metric targeted at improving janky page load experiences.

In this talk, we will explore modern CSS font-face descriptors, such as size-adjust and metric overrides, and leverage fallback fonts for better alignment with web fonts.

To achieve this, we journey through the world of font metric tables and how we can use them to calculate the required CSS, dramatically reducing layout shift on page load — all the design aesthetic of web fonts, without the jank.

With widespread browser support, you can now use CSS to ensure scrolling can only stop at certain positions. This is great for building native-like experiences on mobile and desktop, and we'll look at how easy it is to do this for simple use cases, like a 3-image carousel.

But what if you have 300,000 images instead, and need to combine it with dynamic rendering as you scroll? Or want to allow scrolling in either horizontal or vertical dimension, but not both at once? You'll soon find you're fighting the browser, and the browser fights back hard. We'll discover some clever hacks — and gotchas to avoid — so you too can build the snappiest of UIs.

At Web Directions Respond in May 2017, I presented “The Anatomy of an Accessible Auto-suggest” which was a step-by-step guide on how to implement an accessible auto-suggest. In December that same year, the W3C made ARIA 1.1 a W3C Recommendation, and changed the requirements for the combobox pattern that formed the foundation of that auto-suggest component. The changes were made with the aim of more accurately representing the semantics of the user interface in the accessibility tree, and while they did solve that problem, unfortunately, they created many other issues.

Fast forward 7 years to 2024, ARIA 1.2 is a W3C Recommendation, and the combobox pattern that runs our auto-suggest has gone back to the future.

In this talk, we’ll look at changes in ARIA using the combobox pattern from ARIA 1.0 through to ARIA 1.2, and recreate our accessible auto-suggest component.

We’ve never relied more on web and mobile technologies than we do now. Whether for essential services or a cheeky late night burger delivery (ok, maybe that’s essential, too!), you’d be hard-pressed to go more than a day without relying on some HTML, JavaScript or a flex-box just to get by in the world.

So as the first entry-point to the online world, how secure is the browser and the code we write for it? In this talk I’ll recap some of the basics of security in the browser and show how modern encryption can shed new light on old problems.

Web browsers are magical creatures that include A LOT of features. Buried within this multitude, you’ll find a number of security tools waiting for you, kinda like the chatty stranger in the bar, trying to flog off their wares. Although unlike that stranger, the browser lets you use them all for free, and you can use as many as you want!

You might have heard of Content Security Policies (CSP), and HTTP Strict Transport Security (HSTS), and Same-Site Cookies, or seen headers like X-Content-Type-Options and X-Frame-Options in your web server configuration. What about the confusingly named CORP, COOP, CORS and COEP, or Trusted Types, and a Permissions-Policy?

The point is, like secrets in a cave, there are a lot of security tools hidden in your browser. You won’t want or need all of them on every site, but if you’re aware of what's available, you’ll know what you can and should enable, to add that extra layer of security to your sites. I’m just not sure they’ll help you slay that dragon though...

Since the arrival of Core Web Vitals, understanding and optimizing front end performance has never been more critical.

So Ben Schwarz whose life revolves around performance will shed light on the current state of front end performance, focusing on central metrics and the latest developments in performance measurement and enhancement, particularly Core Web Vitals (CWV) with an emphasis on Interaction to Next Paint (INP) as the latest metric to watch.

Drawing on extensive data, Ben will identify common pitfalls in performance optimization efforts and provide actionable insights for teams to track, avoid, or rectify these issues, ensuring a seamless user experience.

Over the last 18 months regulators in the EU, UK, Japan, Australia and elsewhere have focussed their attentions on platforms like operating systems and App Stores. They've also more recently turned their attention to the state of browsers on mobile platforms, with potentially very significant impacts on the capabilities of the browsers on your mobile devices. Alex Moore gives us an update on these regulatory efforts and their impacts, current and potential.

To close Code '24, join some of our speakers for a moderated conversation about the state of the Web platform and some predictions about what comes next, and where you should cinsider investing your energy and efforts.