Read highlights from Melbourne. Including grid-based layout, web accessibility, faster fonts, WebUSB APIs, abstract syntax trees, error handling and much more.
JSConf-goers enjoying the complimentary coffee on the first day of the event (and some cheery Abletechers on the right!)
Last month Kate Norquay and Sam Gard attended CSSConf and JSConf, held at Melbourne’s Meat Market — an iconic heritage building reimagined as a venue hire space.
The three days of talks were augmented with delicious catering (breakfast, lunch and dinner); all-you-can-drink coffee, juice, and soda; event t-shirts; and several fantastic social events.
Kate and Sam’s review of some of their favourite speakers:
CSSConf
Brenda Storer on CSS Grid
Brenda gave us a thorough overview of the new CSS Grid specification, with a step-by-step guide to implementing Grid to enhance a site, as well as how to provide graceful fallbacks for unsupported browsers (looking at you IE) using Flexbox.
Julie Grundy on A11y
Julie gave us a bunch of useful tips for improving our sites for users with low-vision (which, it turns out make up 9% of Australian web users!). She talked us through a couple of common scenarios these users run into, and gave us a few easy fixes.
Some users struggle to read small text and zoom in on web pages. Julie suggested flipping to the mobile design as the user zooms in.
For colour blind users, it’s important to make sure your page has sufficient contrast. We can also check what our pages look like in greyscale to make sure we don’t have any ‘colour-only indicators’, like links or menu items.
For users viewing the page in high contrast mode, borders around input fields are an easy way to make sure our fields don’t disappear into the background.
Jeremy Wagner on Faster fonts
Jeremy provided some useful tips and tricks on font performance such as:
-
self-hosting to reduce latency
-
using preload, prefetch and preconnect to open up early connections and DNS look-ups
-
the font-display CSS declaration, which allows control over font swapping (first displaying a locally-installed font then replacing it with the web-font once it has loaded)
Photo credit: Ed Moore & Jeremy Wagner
Theresa Ma on Effective design & engineering collaboration
Theresa Ma spoke to us about the best ways to get designers and engineers to work effectively together, and a few ways to improve our design systems.
Some of her suggestions were to:
-
Involve engineers earlier in the design process
-
Have designers and engineers sit together so they can talk to each other casually, without the pressure of being in a meeting.
-
Have designers and engineers go on offsites together
-
Consider which design and engineering decisions need to be made earlier on
-
Use checklists when giving feedback. (Different screen sizes? Error states? Final copy?)
Ivana McConnell on What makes a developer, really?
Ivana spoke on the development identity crisis, and how the weight and gravity that comes with the term developer doesn’t always come with CSS development. She emphasised that devaluing and ignoring CSS as a development skill compromises the language, the people who use it, and the industry itself.
“CSS isn’t just about presentation. We’ve come a long way and the lines between design and development are now blurred. Fluidity in roles matters and titles matter. Computer science is great, but it’s not the only way to be a developer.”
Other talks:
-
Layout animations
-
Colour systems
-
Houdini
JSConf
Amy Nguyen on the power of Chrome Developer Tools
Amy gave a talk on how she used Chrome Developer Tools to get tickets to Taylor Swift’s concert. Essentially, Amy had to trick TicketMasters system into thinking she’s a Taylor Swift super fan by watching her music videos over and over again. She took us on a journey, demonstrating a bunch of useful techniques, like setting XHR Breakpoints, and copying network requests into cURL commands.
If you want to know more, check out her blog post which features a lot of Taylor Swift lyrics combined with coding jokes (it’s really excellent).
Suz Hinton on WebUSB
Suz’s talk on WebUSB API compared the accessible, cross-platform, and safe spec to old ‘hacky’ methods of connecting browsers to hardware, such as Flash and Chrome Serial.
While maintaining that it is still fragile (currently only supported in Chrome), Suz impressed us with her oled-js library by uploading an image in the browser and sending it a to SSD1306 OLED screen in her live demo!
Photo credit: Theresa Ma & Duyen Ho
Craig Spence on Abstract Syntax Trees
Craig taught us about Abstract Syntax Trees. They are a useful way to represent the structure of source code, and can be used to compile one language into another.
Craig’s talk was Harry Potter themed, and ended with debugging a new programming language — ‘Parseltongue’ in the browser, which I think pretty much blew everyone’s mind.
Tim Holman on Generative Art
Tim gave a speedrun talk on his experience with generative art. He began by detailing the generative art toolbelt — the building blocks of design tools used to generate art (lines, curves, displacement, repetition, shapes, rotation, tiling, and colour). From there, he introduced the ideas of recursion and algorithms to introduce complexity, randomisation, evolution and chaos. This subject was really refreshing, and Tim delivered it all with a fun and charismatic nature.
It’s something new every time you press refresh. Like art that kind of makes itself?
Photo credit: Kevin Yank & Craig Ambrose
Brittany Storoz on the sad state of error handling
Brittany gave an eye opening talk about the ways poor error handling is impacting new developers.
Brittany teaches front-end development and has seen newcomers get stuck on errors that more experienced devs would immediately recognise as simple errors in spelling, syntax or mixing up data types. When they are met with unhelpful error messages (Unexpected token < in JSON at position 0, anyone?), they are left spinning their wheels and feeling frustrated, when in reality their code is very close to correct.
Brittany drew attention to improvements we need to make in our error handling, and the empathy and thought that needs to go in to making our errors more understandable to new developers.
Other talks:
-
Javascript engine internals
-
Node.js and Rust
-
HTTP2
-
Adtech
-
ServiceWorkers
-
Javascript Raytracing Engine
-
Node.js application diagnostics
-
Progressively rolling out accessibility changes
-
Bias, stereotypes and accountability in tech
Notably, CSSConf and JSConf also focused on making events inclusive, safe spaces for everyone. Both conferences had:
-
Diverse speakers
-
A clearly communicated and enforceable Code of Conduct
-
Live captioning by Lindsay Stoker from White Coat Captioning
-
A media policy (colour-coded lanyards to indicate your comfort level for being photographed)
-
Quiet spaces/live-streamed talks
Second breakfasts, exploring Melbourne, and enjoying the spectacular JSConf after-party
More from Abletech
-
Graham, infrastructure lead at Coinbase gives an insight behind-the-scenes
-
Intern reflects on three months at Abletech
