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

MelbourneAugust 2 & 3 2018

Australia's conference for JavaScript Developers and Front End Engineers.

Day 1

  • Melbourne: August 2nd
8:00 am

Registration

,

Serving barista coffee to get your heart started.

9:00 am

Welcome

John Allsopp, Web Directions

9:15 am

Using CSS (and SVG) for the Good of UX

Sara Soueidan, UI/UX developer Freelance

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).

10:15 am

Morning Break

,

Fully catered, with great coffee, and the chance to connect with your peers.

10:45 am

Further Adventures of the Event Loop

Erin Zimmer, Senior Software Developer Australia Post

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.

11:35 am

Optimistic Offline Experiences

Simon Knox, FrontEnd Operator GitLab

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.

12:00 pm

Aggressive Web Apps

Phil Nash, Developer Evangelist Twilio

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.

12:25 pm

Return of the script tag

Paul Heasley, Technical Lead PageUp

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.

12:45 pm

Lunch

,

We've got something very special lined up for lunch. But you'll have to come to find out,

1:45 pm

Not in Kansas anymore: a new frontier for web design

Hui Jing Chen, Senior Developer Jewel Paymentech

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.

2:35 pm

Functional CSS yesterday

Craig Sharkie, Senior Developer Seven West Media

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 )

3:00 pm

Performant, accessible animations with CSS & a dash of JavaScript

Wing Ho, Front End Engineer Data61

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.

3:25 pm

Programming Generative Art

Xavier Ho, Software Crafter Data61

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.

3:45 pm

Afternoon Break

,

Need more coffee? Or an increasingly hip tea? We've got you covered, plus a sweet afternoon pick-me-up.

4:15 pm

Meaningful UX performance metrics and how to improve them

Mark Zeman, Founder SpeedCurve

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.

5:00 pm

Happy Hour (and a half)

,

Share a drink, a bite, and a chat with your peers, right here at the venue.

7:30 pm

Speaker Dinner

,

Gold ticket holders join our speakers for fine food and conversation five minutes walk away.

Day 2

  • Melbourne: August 3rd
8:30 am

Heart Starting

,

Serving barista coffee to get your heart started for another day of amazingness.

9:00 am

Welcome back

John Allsopp, Web Directions

9:15 am

The art of giving a damn, and also not

Patima Tantiprasut Head of Product and Design Seven West Media

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.

10:15 am

Morning Break

,

10:45 am

Functional HTML

Mandy Michael, Front End Development Manager Seven West Media

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.

11:35 am

Scaling frontend development

Marcin Szczepanski, Principal Front End Developer Atlassian

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.

12:00 pm

Atomic, presentational, reusable, functional components: UI architecture in the age of design systems

Isabel Brison, FRont End Developer Fairfax

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.

12:25 pm

Here Comes QUIC

Mark Nottingham Principal Engineer Fastly

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.

12:45 pm

Lunch

,

Like everything else we do, expect the best conference food you'll have anywhere, and plenty of it.

1:45 pm

How to GraphQL, and why you should

Tim Hingston & James Baxley III, Tech Lead, FE &Team Lead, OSS Apollo

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.

2:35 pm

Blockchain for Web Developers

Michael John Peña, Technical Consultant Readify

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.

3:00 pm

Your web page never listens to me

Jason O'Neil, Software Engineer Culture Amp

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.

3:25 pm

The State of Authentication

Marcos Caceres, Platform Engineer Mozilla

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.

3:45 pm

Afternoon Break

,

Need more coffee? We've got you covered, plus an awesome surprise sweet afternoon treat.

4:15 pm

Uncovering the secrets of Progressive Web Apps

Maximiliano Firtman, Author, Developer Independent

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.

4:50 pm

Farewell

John Allsopp,

Find the conference pass for you

Combined Pass

  • Code conference

  • Code Leaders conference

  • Code conference video

  • $1,795 First Release
    (Sold Out)
  • $1,995 Final Release
    (Sold Out)

Silver Pass

  • Code conference

  • Code conference video

  •  
  • $1,395 First Release
    (Sold Out)
  • $1,595 Final Release
    (Sold Out)

Code Leaders

  • Code Leaders Conference

  •  
  •  
  • $995 First Release
    (May 15–June 30)
  • $1,295 Final Release

Code Conference
2–3 August

  • 2 day conference.
  • Happy Hour (& ½)
  • Awesome conference coffee
  • Sensational catered breaks

Code Leaders
1 August

Our one day, fully catered Code Leaders conference

Code Conference Videos

All the Code conference presentations, captioned, transcribed and more

Find the conference pass for you

Combined Pass

  • Code Conference

  • Code Leaders Conference

  • Conference Video

  • $1,795 First Release
    (sold out)
  • $1,895 Final Release
    (sold out)

Sold Out

Silver Pass

  • Conference

  • Conference Video

  • $1,395 First Release
    (sold out)
  • $1,595 Final Release
    (sold out)

Sold Out

Code Leaders

  • Code Leaders Conference

  • $995 First Release
    (May 15–June 30)
  • $1,295 Final Release
    (July 1–August 1)

Register Now

Code together

Teams get more

Send a team of five or more to Code and get even more. For the price of a Classic ticket per team member, you'll get:

  • A Silver pass for each attendee
  • A team licence to the videos from Code 2018
  • Team shoutout from the stage
  • Special team goodies

Just use the code team when you register.

Keen to send a bigger team? Drop us a line and we can work out a special deal just for you.

Inclusive pricing

We strive to make our events as affordable as possible, and so have a limited number of specially priced tickets for charitable Not For Profits and freelancers. If that's you, use the code nfp or freelance to get a Silver ticket for just $795.

Not sure if you qualify? Drop us a line, we try to be as generous as possible.

Our venue

Code 2018 will again be held in the Pavilion at the iconic Arts Centre Melbourne, right on the Yarra in Southbank.

The Pavilion,
Arts Centre Melbourne,
100 St Kilda Road, Melbourne

Getting there:

With excellent public transport connections right outside, and Flinders Street Station right across the bridge, it's our best connected location yet.

Accommodation:

If you're coming from out of town, there are many hotel and serviced apartments style accomodation options in Southbank, and otherwise close by. We have for some time put our speakers up at the Quest Southbank Apartments, and stay there ourselves.

Partners

At Web Directions we work closely with partners to help make our events even better. Sponsor our coffee, reception, recharge station, or other valued activities and start or grow your relationship with our highly qualified audience.

Contact us for more on how we work can work with you to help you be even more awesome.

Key Partners

twilio logo
bitgenics logo
Servian logo
Servian logo
Servian logo

Praise for past Web Directions events

Phil Whitehouse
Web Directions is the must-attend event of the year for anyone serious about web development.

Phil Whitehouse,
Innovation Lead DigitasLBi

Ethan Marcotte
I’ve been admiring the Web Directions events for years, and was honored to be part… What a fantastic event!

Ethan Marcotte,
inventor "responsive Web design"

Dave Greiner
Out of any conference, Web Directions is far and away our favourite

Dave Greiner,
founder Campaign Monitor

About Us

Co-founded and now run by John Allsopp, Web Directions has for over a decade brought together leading developers, engineers, visual, IxD, UX and product designers, Art and Creative Directors, indeed everyone involved in producing web and digital products to learn from one another, and the World's leading experts across this vast field.

We spend our lives thinking about what comes next, keeping up with trends in technology, practices and processes, and filtering the hype, to make sure you don't miss trends that matter, and don't waste time on hype that doesn't.

We promise attending one of our events will leave you significantly better versed in the challenges you face day to day, and in solutions for addressing them.

In 2018, we'll be organising Design in Melbourne, Code and Code Leaders in Melbourne, and Web Directions Summit, AI and Culture in Sydney

vignettes form our events, social, speakers and more. Includes Hannah Donovan skylarking.

John Allsopp

John Allsopp has been working on the Web for over 20 years. He's been responsible for innovative developer tools such as Style Master, X-Ray and many more. He's spoken at numerous conferences around the World and delivered dozens of workshops in that time as well.

His writing includes two books, including Developing With Web Standards and countless articles and tutorials in print and online publications.

His "A Dao of Web Design" published in 2000 is cited by Ethan Marcotte as a key influence in the development of Responsive Web Design, who's rightly acclaimed article in 2010 begins by quoting John in detail, and by Jeremy Keith as "a manifesto for anyone working on the Web".

Code of Conduct

For over a decade, we've worked hard to create inclusive, fun, inspring and safe events for the Web Industry.

As part of our commitment to these values, we've adopted a code of conduct for all involved: ourselves, our speakers, our partners and our audience.

If you have any concern or feedback, please don't hesitate to contact us.