Web Directions Code 2020 Australia's Professional JavaScript Development & Front End Engineering Conference

Progressive Web Apps–Web sites that can progressively turn into app like experiences and be installed on your devices–were introduced to the world at this very conference in 2015, by Alex Russell.

PWAs now also work on desktop systems, but usually desktop applications have different requirements as they are usually used for creating, in contract to consumption on mobile. As a user you want to be able to access your files, copy paste without issues, not having the screen turn off while giving a presentation, you want access to printers and other devices, access to local fonts. The list goes on! Currently most of those things are only available to native apps and are not things you want your random web sites to have access to. Project Fugu is the project to extend the web with more native like capabilities in a way that is safe and understood by the users. Join this talk to learn more about the exciting things we are working on as part of Project Fugu.

Although early web standards forewarned of the privacy risk of technologies like cookies, they never envisioned that the Web Platform would be coopted for global-scale mass surveillance. In response, browser vendors have been working together to clamp down on the most egregious privacy abuses.

In this talk, Marcos will discuss breaking changes and new APIs that will help make the web platform more private and secure, and what these changes will mean for you as a developer and user going forward.

Join in a conversation with our speakers to discuss their presentations and more.

In recent years the Web Platform has gained many of the capabilities that had been exclusively the preserve of native applications. But one area in which the Web has continued to lag is in the area of payments.

Enter the Payment Request API a way for browsers to manage the user's experience of paying for things on the Web, and making this faster and more consistent for users and merchants alike.

In this session, Eiji Kitamura from Google Web Developer Relations team shows us what the payments API is for and how to use it to make the experience of paying for things on the Web much more pleasant.

Identifying ourself to access social media, banking details, and every aspect of our online life is something we do potentially dozens of times a day.

But as the nearly ten billion leaked account details documented by "';--have i been pwned?" attest, this process has a fatal weakness–passwords.

The Web Authentication API (or WebAuthn) is a standard from the W3C and FIDO tjat "allows servers to register and authenticate users using public key cryptography instead of a password". WebAuthn is part of a set of standards that enable passwordless authentication between servers, browsers, and authenticators. It's supported in all modern browsers.

In this presentation Ben Dechrai will outline how the technologies work, and how you can take advantage of them today to create a far more secure experience for your users.

Young adult, dystopian thriller or the future of the web? Origin trials are one of the methods that browsers experiment with new web technologies and you should know about them. Being aware of the experiments and taking part in the ones important to you gives you a voice in the future of the web platform.

In this talk we'll explore what an origin trial is, how you can take part, and what is currently being experimented with on the web. Vigilance is key to protect the web from a potential future dystopia.

A decade in the making, Web Components, a standardized set of technologies allowing us to allowing to create reusable custom elements are now widely supported in modern browsers.

In this presentation Ana Cidre will take a look at the overall architecture and some common use cases and patterns to get you started now Web Components are a viable option.

How are we actually using JavaScript today? Which features are widely adopted, and which less so? What performance impacts is JavaScript really having on page load times?

In this presentation Houssein Djirdeh details how we're really using JavaScript today.

While not quite the bumper update of 2015, the most recent iteration of JavaScript, ES2020 features a number of new language features, small and large. From the ability to handle very large integers, to additions to asynchronous JavaScript, to a myriad of cleanups and refinements of the language.

In this presentation, Open Web advocate and front-end engineer Tomomi Imura gets us up to speed with the latest iteration of JavaScript, with a little whimsy, because we could all use a bit of that right now.

Join in a conversation with our speakers to discuss their presentations and more.

Callbacks… Callbacks everywhere… Callback inside the callback, and one more inside! Asynchronous JavaScript code is a pain. Event loop is a JavaScript “bigfoot” - everyone heard about it, almost nobody knows how it works… There is multiple ways you can deal with the asynchronous action: callbacks, Promises, Observables, async-await; but which one is best? Which one should you choose for the particular scenarios?

Error on line 1, column 6532112 of bundle.js? Out of memory error trying to load a CPU profile into the Chrome debugger? Two minutes to see wait and see if a change you made fixed a bug?

While upgrading our complex web application from Webpack 3 to Webpack 4, we ran into these of challenges and more, that required adapting my use of debugging tools and techniques to deal with the scale of the problem.

As your codebase grows the debugging techniques you apply need to adapt - things you take for granted like setting a quick breakpoint, reproducing a bug in seconds, or loading a CPU profile into the Chrome Dev Tools start to break down.

This talk dives into the different issues we encountered, and how we debugged and fixed them - providing practical examples, and tips, for debugging JavaScript in the Browser and Node as your codebase grows, that provide a valuable addition to any developer's toolbox.

Join in a conversation with our speakers to discuss their presentations and more.

A decade (or more) in the making, JavaScript modules are now supported in all major browsers and in Node.js. So now theres a widely supported, standardized way of modularizing your JavaScrpt.

In this presentation Mejin Leechor will show us how they work, and why you should be using them.

A language like JavaScript, with a large diverse user space, is half designed, and half reverse engineered. Like all web standards, JavaScript is developed in conjunction with the realities of the web and user decisions in how the language is used and formed.

This results in unique backwards compatibility issues such as the recent smooshGate discussion. These cannot be ignored in the standardization process, even when better alternatives exist. This talk will discuss constraints, mediation strategies and issues that have arisen from the proposal process introduced by the TC39, and the unique challenge of introducing formalist methods to a language that has been developed in such a manner.

Join in a conversation with our speakers to discuss their presentations and more.

Historically, layout on the web has been quite difficult. Developers have relied on third-party tools, like Bootstrap, and media queries based on "average" device sizes. Today, however, the web is available on an increasingly large range of devices - everything from your watch to your fridge! We are reaching the limits of what these tools can handle.

The good news is that CSS has you covered now! Modern CSS contains a number of properties that support responsive designs natively. We're going to have a look at CSS columns, flexbox and grid. We'll take a quick look into how each works individually. And then we'll learn how we can combine them to create truly flexible layouts, that work across a huge range of devices, without relying on device-based breakpoints.

HTML didn't stop at version 5 and it continues to evolve. Chris Lienert will review a number of HTML elements and attributes that are new and (somewhat!) ready to be used.

Join in a conversation with our speakers to discuss their presentations and more.

CSS is a powerful technology for styling web content, with on significant drawback (no not specificity). We're restricted to the styling primitives built into the language (and browser), which relies on others to specify and implement them, and can take years.

Well, until now. Enter Houdini.

Houdini is a set of lower level APIs that allow us to essentially create our own visual style, layout, and animation properties for CSS. Sounds like magic? That's why it's called Houdini.

In this presentation creative developer Ruth John will show us how the illusion is created.

It's a common misconception that things like inclusive design and accessibility only come at the cost of design details like motion, but that doesn’t have to be the case. In this session we’ll take a closer look at the prefers-reduced-motion query and how we can use it to make sure even our most creative web animation work can be viewed safely by those with motion sensitivities.

Join in a conversation with our speakers to discuss their presentations and more.

Practices and techniques for debugging traditional programming languages, like C or JavaScript, have developed and matured over the last half century or more.

But CSS, as any developer who's even moderately familiar with the language will know, is very different from such languages.

Even spotting, let alone tracking down the cause of incorrectly styled content can be maddening. And managing the interaction of potentially numerous rules spread throughout a style sheet, or across multiple style sheets, or the cascade and inheritance of a property and its impact on an element's style causes frustration even for very experienced CSS developers.

In this presentation designer and developer Ahmad Shadeed asks why hasn't a systematic body of debugging practice emerged for CSS? And what might that look like?

CSS syntax, like the box-model, flex, and grid is relatively easy to learn, or at least lookup. But CSS semantics, like when to apply the cascade, inheritance, or custom properties is an art form. And to master this art form, we first need to understand them.

Join in a conversation with our speakers to discuss their presentations and more.

Within the observability community, there’s a saying, “nines don’t matter if users aren’t happy,” meaning that 99.999% server uptime is a pointless goal if our customers aren’t having a fast, smooth, productive experience. But how do we know if users are happy? As members of the web performance community, we’ve been thinking about the best ways to answer that question for years.

Now the observability community is asking the same questions, but coming at them from the opposite side of the stack. What can we learn from each other? Emily will talk about how approaching web performance through the lens of observability has changed the way her team thinks about performance instrumentation and optimization. She’ll cover the nuts & bolts of how Honeycomb instrumented its customer-facing web app, and she’ll show how the Honeycomb team is using this data to find and fix some of its trickiest performance issues, optimize customer productivity, and drive the design of new features.

Full session details coming soon

Join in a conversation with our speakers to discuss their presentations and more.

As web applications become more complex, with a corresponding increase in required bandwidth and bundle sizes, to meet users' expectations the need to consider web performance has never been more important.

Yes, there are third-party tools that can help with performance but what about what is available "out-of-the-box"? In this talk we will look at some of the browser APIs which can greatly assist in implementing techniques to improve web performance.

From Network Information API, to Device Memory and Performance APIs, these are all right there in the browser and a great set of tools with which to design our apps from the ground up with performance in mind and the means to identify where we can focus to help our users.

There are so many ways you can compress an image before serving it on the web, and there are a lot of tools that can help you with that. However, how does image compression actually works? and why there are many types of image compression?

In this talk, Andi will explain how different image compression algorithms work, and in which cases they will be best used for, also the reason why we need all of them instead of just using a single compression algorithm.

Join in a conversation with our speakers to discuss their presentations and more.

Browser hints like prefetch enable you to get critical resources in advance and save valuable (next) render time. These speculative optimizations integrate the developers assumptions about the users route. Speculative pre-fetching can be wasteful due to incidences of fetching resources that will never be used.

Leaning on advances in machine learning and analytics data allows us to significantly increase the efficacy of our fetches. Let’s explore techniques that move predictive prefetching from idea to reality.

Performant web sites are critical for your user’s experience. No doubt about that. But keeping our users’ information private and secure is similarly critical to maintain their trust in the web platform and keep them around. Those two requirements are somewhat at odds.

There are many cases where performance optimizations ended up creating security or privacy holes. There are also many cases where privacy and security restrictions introduce significant performance overhead, or prevent us from getting access to performance-critical information in the wild.

In this talk, we’ll discuss different examples outlining this tension, dig deeper into them, understand the underlying principles behind the web’s security model, and hopefully agree that we need both a performant and safe web to keep our users happy.

Join in a conversation with our speakers to discuss their presentations and more.