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

Everyone knows that with great power comes great responsibility. Just like their range of skills, the front-end developer's responsibilities may vary across teams, but one things remains the same: a front-end developer can either make or break a user's experience. We build the interface that users interact with, and how we do it has a direct impact on how the user feels when they do, whether they find it delightful to use, and, most importantly, whether or not they *can* use it properly.

CSS is one of the most powerful UI tools in our arsenal. In this talk, Sara will show a wide range of possibilities that CSS offers to improve the overall user experience of your UI, using CSS (with sprinkles of SVG and JavaScript here and there).

Most JavaScript developers are probably familiar with the event loop. It’s how JavaScript handles I/O events without blocking, even though it’s single-threaded. Event callbacks are added to the task queue. The browser then takes a callback from the queue and runs it from start to finish. Then it decides to either repaint or run another callback. Simple, right?

But what about web workers? And promises? And what happens when your JavaScript isn’t running in a browser? In this talk, we’ll look at how multi-threaded event loops work, how promises differ from other callbacks, and what goes on in the Node event loop.

Many things cause connection trouble. Bad reception, flaky Wi-Fi, servers being down, computers resuming from sleep. The standard way to handle this is an App Shell with a "Cannot connect" message. This is a terrible offline experience. We can do better.

How can you balance your UI updates between optimistic and honest? Between spamming users with "Now connected!" notifications and not telling them at all? Does it matter if a Like silently fails?

You'll learn answers to these, and other ways to make a more fault-tolerant, more fun frontend.

Push notifications on the web can be a force for good, but is that how they are coming across? We'll take a look at how to implement push notifications in Angular applications, from permissions to notification. Then we'll see how it's being done wrong and how to improve on that.

We'll then look at the notifications themselves, find out what the best kind of notifications are and how not to wind up with your app's, or the entire web's, notifications blocked forever.

It doesn't feel that long ago that we all moved to Bower and then NPM as a way of managing and bundling our dependencies locally, but with ES6 native modules support landing in major browsers, and tools like unpkg.com there's a growing interest in front-end development without the build systems and local compilation.

The web is a unique medium on its own and we need to establish a new normal for the web, breaking it free from the shackles of static print design. This new normal involves ceding control of our designs to the browsers that render them rather than constantly engage in this battle to dictate where every pixel should fall. Modern CSS gives us a comprehensive set of tools that lets us embrace the fluidity of the web.

We've always been trying to transfer ideas and concepts from a static medium like print, onto a dynamic medium like the web. But their difference in nature has caused quite a bit of grief, and this talk suggests taking a different approach to designing and building for the web, a way that better suits the nature of the medium.

Your CSS can already be just* as functional as JavaScript. It is pure, can be immutable, and can be reasoned about.

If you start thinking about CSS in the same terms that other languages use, they can use their paradigms to learn your language.

And when you start using their tooling, they'll be running out of excuses to not embrace Specificity.

(*Well, as functional as some JavaScript :D )

Animations have potential to add detail and flair to your user experience, but may introduce some issues for assistive technology and render performance. It’s now common practice to include some animation in web apps to enhance user experience.

We'll go over common accessibility issues with CSS animations, why people may not be aware of the fact that some of their CSS animations are not accessible, and some simple ways this can be resolved with minimal JavaScript. We will also do a quick dive into the performance differences across various animation methods.

Programming generative art, also known as creative coding, is often a trial-and-error process, combining creativity and logic to present something aesthetic. However, creative coding has a high barrier to entry due to the breadth of knowledge and coding skills required. This talk aims to lower that barrier for you to take home and practice creative coding.

In this talk, you will learn about algorithms and techniques for generative art using Javascript. First, shepherding random numbers to simulate the universality of nature patterns that appear in plants, rocks, sand, and smoke. Next, using L-system formal grammar to create a seemingly infinite, but well-structured, series of graphics. Lastly, integrating your creativity to be used in your own projects.

For you to get the most out of this talk, you should be comfortable working with Javascript. Although I will introduce some theory, background in mathematics and formal theory is not required to attend.

Users don’t care how your website is built, what backend you’re running, or if you’re using the coolest JavaScript framework on the block. They only care about content. That content has to be meaningful, and it has to be rendered in the browser lightning fast, or you’ve lost them.

Performance metrics are critical for understanding the impact of our work as web developers on improving our user experience and making it a joy to use. But not all performance metrics do a great job of representing what our users actual see and experience. Network metrics have been around for decades, but rendering metrics are newer, and they’re doing a better job of capturing the moment critical content is visible.

Mark Zeman offers an overview of available rendering metrics, including newcomers like Time to Interactive and Time to First Meaningful Paint, and helps you pick the right metrics to focus on for your website and your users. Along the way, Mark outlines several techniques for improving the rendering experience of your websites, including delivering your brand in the first request, building a skeleton screen of elements, image SVG placeholders, and progressing rendering. You’ll leave armed with performance metrics and rendering techniques that will help you best improve your user experience.

Perspective. Seldom do we realise the influence that can we have on the products we work on and the effect on the people who use those products, let alone the power we have over our own lives, our wellness and our careers.

HTML, the foundation of the web! With so much time being spent on typed javascript, functional programming, unit tests, visual regression testing, tools, frameworks and a drive to write better more efficient code we often forget that the web starts with HTML.

Let’s talk HTML, semantics and why choosing the right html elements will help you write better, cleaner more efficient code not just in your HTML but your CSS and Javascript as well. Most importantly why HTML is so vital in improving your projects overall functionality for people and for bots.

Atlassian Jira's has a new frontend codebase that is "only" 18 months old, but already contains over 50 top level "apps" and 400,000+ lines of JavaScript code, from almost 200 committers. The problem was that with 50 apps we had 50 different approaches to how to build a frontend application.

We needed to scale our development processes, so in late 2017 we embarked on Tangerine - a program to standardise principles that define a world class frontend application as it scales up, and apply this to Jira.

Tangerine provides the framework for principles that make up a frontend application to be "decided, documented, and done" - all supported and enforced by tooling and automation, and published for the world to see and learn from.

Learn about our journey with Tangerine so far - good parts and bad, our vision for Jira and beyond; as well as the program structure, processes, and how we've used this all to take a backlog of ideas and progressively work them into concrete proposals, and have them implemented in Jira.

Modern web app architecture, whichever framework you use, focuses on separation of concerns and reusability. The current trend towards design systems feeds into this logic, abstracting a highly reusable presentational layer. Design is Atomic; code is neatly separated into presentational and container components. But what happens when these different paradigms meet in the middle? Should the app architecture be influenced by Atomic principles? How do we represent state changes in the design system?

We’ll look at a few problems that might pop up when applying these principles to a real world product (especially when working to tight deadlines) and share a few tips on how to avoid pitfalls and build a clean, scalable codebase, all while staying on speaking terms with the design team.

HTTP and TLS have both been revised recently; now it's TCP's turn. Come learn more about what's coming to Internet transport, and what it might do for you.

GraphQL is reshaping data on the web. Whether you are building APIs or just requesting data from them, GraphQL is quickly becoming a “must-have” skill for front-end developers. In this talk, we'll introduce some of the key concepts and motivations which explain the rise of GraphQL, as well as some real-world practical advice for transitioning to a GraphQL mindset.

Part I: Introduction to GraphQL and its EcosystemAs front-end developers we have come to expect the frustrations that come with APIs on the web. REST endpoints with too much or too little data make it impossible to fetch just the data we need on the page. Constantly changing product requirements too often result in a version-less API soup, and working with documentation that’s completely up-to-date is a luxury only available to the lucky few. Learn how GraphQL solves these problems and generally improves our lives as frontend devs, as well as the suite of amazing tools that have arisen around it.

Part II: Developing a GraphQL MindsetTransitioning to GraphQL will bring you tears of joy, but like any new technology it comes with some new challenges. In this session, we'll explore the practicalities of building web apps with GraphQL. We'll share some best-practices, common patterns, and things to watch out for as you take GraphQL into production.

Blockchain has been a big buzz lately. There are a lot of demand for DApps (Decentralised Applications) developers in the market right now.

In this session, the audience will understand the fundamentals of a Blockchain platform, what it means for web developers and how to get started writing your own Decentralised App. The speaker coming from a developer background himself, will bridge the gap the knowledge to fast-track the audience in DApps development.

The audience will also learn available platforms and tooling within the Blockchain space. The speaker will highlight some of the good use cases of Blockchain and when NOT to use it.

Siri, Alexa, Cortana and “Hey Google” - the big companies are all building services that can talk to us, and that we can talk back at. These tools are great for setting timers, adding reminders, and playing a song. But compared to the sheer amount of information and interaction available to us on the web, they can still feel quite limited.

How can we, as standards-loving web developers, help shape the future of voice controlled, conversational user interfaces? How can we use the well supported Speech Synthesis API, and the still new Speech Recognition API, to teach our pages to talk, and to listen?

And how can we make the key information on our page, and the key interactions, available to people who might be driving, preparing food, carrying a child, or people with visual impairments? In this talk we’ll explore how voice controlled interfaces open even more possibilities once combined with the natural strengths of the web platform.

In addition to naming things and cache invalidation, add authentication to the list of the hardest problems in computer science (come to think of it authentication basically combines those two).

In this session Marcos Carceres looks at the current state of authentication on the Web, and in particular Web Authentication, an effort to standardise web based authentication.

You probably know what a Progressive Web App is but you probably don't know what challenges do we need to face to see them as a real alternative for app-like experiences. In this session, we will uncover today's secrets on PWAs that you must know to create a successful experience for your users looking for a fast and reliable app solution.

We’ll introduce the current state of PWAs including the latest iOS and desktop support, and we will get deeper into real challenges, such as the In-App Browser inside Facebook, the Android's WebAPK system and how to get our PWA into stores, including official support on Microsoft Store, the usage of Web Trusted Activities for Android's Play Store and solutions for iOS and mac AppStore, including the new Capacitor framework to create native PWAs.