Web Directions Code Melbourne June 12 & 13

What if websites could adapt their behaviour based on the electricity powering them? This talk explores the vision of a grid-aware web that responds dynamically to the availability of clean power sources. We'll examine the role that developers, designers, and decision makers can play in pioneering a web that operates with a sustainable focus.

For years, we’ve defaulted to centralised servers and, more recently, leaned heavily on server-side components to power our web apps. But this dependence has a cost: apps that break without constant internet connectivity, sluggish performance under heavy load, and user frustration when things don’t just work.

This talk challenges the cloud-first status quo and invites developers to explore the power of local-first. Imagine building multiplayer, collaborative experiences that thrive offline, sync smoothly when online, and harness the value of localised state. We’ll also tackle the complexities of conflict resolution when shifting from a centralised authority to a sync server as a lightweight mediator. It’s time to rethink collaboration

With the active TC39 proposal in play, I think it’s about time we talk about Signals.

Over the years, the concept has had many different names. From “observables” in KnockoutJS, to “refs” in VueJS, before Solid made “signals” popular. We’ve seen the carcinization of frontend frameworks in the pursuit of more seamless and fine-grained reactivity in our applications.

But what actually are Signals? Why do we keep coming back to them? And why is their potential adoption as a language standard such a big deal?

Explore the latest additions to JavaScript's Map and Set objects, designed to simplify data manipulation and enhance developer productivity. In this talk, Zach Jensz covers newly introduced methods that streamline common tasks such as filtering, mapping, merging, and transforming collections. Learn how these powerful, expressive features help write more concise, readable, and efficient code.

Ideal for JavaScript developers seeking to keep their skills current, this session will demonstrate practical use cases and patterns, showing exactly how the new methods can simplify your everyday workflows. You'll walk away equipped to take full advantage of these modern improvements, reducing boilerplate and unlocking clearer, more maintainable solutions.

Fix layout shift caused by font loading! Font loading can trigger reflows and visual instability, negatively impacting user experience and Core Web Vitals, specifically the Cumulative Layout Shift (CLS) metric.

We’ll look at new and existing CSS that focus on reducing visual discrepancies and optimise font loading behaviour. We’ll enhance visual stability, reduce layout shifts, and improve web performance scores and ultimately create a better overall user experience.

With models like Gemini Nano running entirely on-device, the web is entering a new era of AI-powered applications that don’t require servers.

This talk delves into the latest advancements in browser-based LLMs and tooling, including Gemini Nano, WebLLM, and ONNX.js. We’ll examine the trade-offs, performance considerations, and implications of these developments for AI on the web.

Whether you’re building AI-powered applications or simply curious about the future of machine learning in the browser, this session provides a glimpse into what’s ahead.

Many of us are using AI assisted coding these days, however, many of us don't know how to leverage the full potential and what tasks we could use AI to assist with. In this session I will help you to unleash the full potential of GenAI to change the way you think when using AI assisted tooling like GitHub Copilot or CursorAI. This advanced session delves deep into how GenAI can elevate code quality, streamline testing processes, and bolster security measures. By integrating AI into your development lifecycle, you can achieve unprecedented levels of efficiency and robustness in your software projects.

Key topics to be covered:

Enhancing Code Quality: Discover how GenAI can assist in writing cleaner, more efficient code by providing intelligent suggestions, refactoring existing code, and ensuring adherence to best practices.

Streamlining Testing: Explore AI-driven test generation, automated test case design, and continuous testing to reduce manual effort and increase coverage, leading to more reliable software.

Bolstering Security: Learn how AI can identify vulnerabilities, suggest security improvements, and keep your codebase secure from potential threats through continuous monitoring and proactive defense mechanisms.

Real-World Applications: Examine case studies and practical examples where GenAI has been successfully implemented to solve complex coding challenges and enhance overall software quality.

Did you know 1 in 5 Australians have a disability? That's 5.4 million people! Yet only 3% of Australian organisations are meeting accessibility standards. Can AI be the answer to making our digital assets more accessible?

This talk explores the benefits and pitfalls of AI in achieving accessibility. We'll look at real world cases of how AI can be used to help accessibility initiatives, and areas where we need to be weary. How can we leverage this new technology to increase access? Hint: it's not what you think!

Reflecting on her 15+ years of web development experience, Siobhan takes us through her experience with the before client-side web landscape, the during client-side web landscape, ending on her thoughts on a hopefully post client-side landscape.

As someone who managed to avoid using React until 6 months ago, Siobhan offers a unique perspective on the current client-side rendering landscape, pushing us all for a return to a more progressively enhanced web but done in a modern way.

^ Currently WIP description, will most likely evolve

Recent CSS features like cascade layers, @scope, and container queries are incredible tools for general style management. Except, there’s one context where things can get a bit strange, and that is when those styles are expected to be applied both globally and within the shadow DOM. Builders of web component-based architecture are highly likely to encounter these barriers, especially as there is a lack of awareness about the behavior of modern CSS across shadow boundaries. Let’s uncover those potential styling pitfalls, and explore techniques that allow using modern features and inherent shadow DOM behavior in harmony.

HTML has come a long way since the early 2000s. It’s no longer limited to clunky forms and buttons — with modern HTML (and a little CSS), it’s possible to build rich, interactive components like modals, accordions, and more.

These Javscript-free components are often (but not always) functional enough to rely on instead of their scripted brethren, simplifying your frontends and making them more maintainable (less JS dependencies!).

Join me as we explore the power of modern HTML & browser APIs (ie: Popover API, new base-select styling), plus some of their limitations.

You could almost set your watch by it: at 2pm each day, the microservice would time out and crash, the database growing increasingly slow and deadlock prone, and the SLA perilously close to being breached.

Everything looked "normal" - the logs showed typical requests and responses right up until it all fell over, the metrics showed the API received more requests at other times of the day so it wasn't overwhelmed and had capacity, but something was different.

Was it a noisy neighbour problem on the shared database? Something malicious not caught by the WAF? Solar flares?

What was going on?!

Join us on a journey into the unknown-unknowns with our guide O11y (pronounced "Ollie", short for "Observability") as we explore:

• Observability and its "three pillars"
• OpenTelemetry Tracing
• Auto- and Manual-Instrumentation
• High Cardinality, High Dimensionality, and Sampling
• Honeycomb.io's querying and trace rendering

Cyber security (or lack of) has been covered extensively in the news. Hacker attacks range from bored school kids toying around to state-sponsored ransom-driven targeted strikes. As software engineers it’s our responsibility to incorporate cyber security best practices into the development cycle.

Secure by Design initiative is being adopted by more and more countries including Australia. Products designed with Secure by Design principles prioritise the security of customers as a core business requirement, rather than merely treating it as a technical feature.

This session includes the list of resources, best practices, tools for designing and implementing more secure applications and to prepare for penetration testing.

At Atlassian, we take accessibility seriously enough that we have entire teams dedicated to it. There are experts on hand to provide feedback on designs, and answer questions about implementation details. There's a team that runs audits of new features before they're launched. It's honestly pretty good.

But obviously not everyone has the resources available for this kind of setup. So what can you do instead? I'm going to talk you through a range of tools and processes that we use to improve the accessibility of our products, what each does well, where they fall short, and what they cost to implement. You can then use this information to figure out which solutions best fit your particular situation, and how you can get the best bang for your accessibility buck.

Frontend frameworks may abstract the details away from us, so what's really happening as it relates to the loading of HTML, CSS and JS?

This talk uses real code examples to concisely demonstrate browser behaviours of streaming, parsing, rendering and execution.

If you're using ES Modules - beware of the cache invalidation cascade!

Conditional imports is a new API integrated into Atlaspack, our internal fork of the Parcel bundler. This new API allows developers to load code conditionally, thereby optimising performance by minimizing unnecessary code execution and reducing bundle size during day-to-day feature release.

Additionally, it offers better observability into changes introduced into the codebase, and their impact on the customer experience. We will explore the implementation details of the importCond API and discuss how we leveraged our internal bundler to successfully deploy this feature.

Managing multiple projects within a single codebase, or a monorepo, offers advantages like easier code sharing, unified tooling, and streamlined dependency management. At the same time, it introduces challenges such as longer build times, complex versioning, and coordination across teams.

In this talk, Sarath covers the benefits, common pitfalls, and proven strategies to scale codebases efficiently while maintaining structure, speed, and developer satisfaction.

Software development has enjoyed a remarkably consistent foundation for over 40 years—but that era is ending. Just as we once leapt from assembly to high-level languages, we’re now entering a new phase: programming with large language models. This shift isn’t incremental; it’s a new layer of abstraction. For engineering leaders, the challenge isn’t just adopting new tools—it’s guiding teams through a fundamental change in how we build software.

In this talk, Geoff Huntleys explore why now is the moment to reassess your carefully crafted roadmaps, identify which assumptions no longer hold, and prepare your people for a different kind of work. We’ll talk about accelerating your team’s “oh-fuck” moment—the realization that things are changing faster than expected—and how to support them through the emotional and professional turbulence that follows.