We Attended codefront.io: The Frontend Conference in Austria

Being a member of the organizing team, I spend last weekend in Linz for codefront.io, a frontend conference counting 3 tracks and no less than 26 speakers. I led one of the tracks at the Johannes Kepler Universität and still got to enjoy some other talks and highlights. To summarize…

Table of Contents

• Architecting Resilient Frontends
• How to build products people want
• Offline First and no Backend
• Superpowers in your editor
• UX best practices
• Design for open data

Architecting Resilient Frontends

Andy Hume works in the engineering team at Twitter and pointed out to a full room how ‘companies spend hundreds of thousands of dollars on the uptime of their server infrastructure and yet real world websites are slow and failing all the time’. The web is inherently unreliable, yet resilient. So how do we fix that?

Hume says that loading content first, before getting to the (JavaScript) enhancements (and then all other leftover styling elements) is preferable. “If everything after content fails, you at least have that.” Improving the ‘time to screen’ – getting content to the page as soon as possible with fewer http requests – will make your site seem faster. Hume also suggested to eliminate whatever blocks DOM construction, like fetching a remote script that needs to be executed synchronously. Using an inline script node that waits for the relevant stylesheet match instead, with the script tag in your HTML (although it hurts newer browsers and excludes you from using the HTML pre-parser feature of modern browsers) will make you website (appear to) load faster.

How to build products people want

Co-founder & CEO of Blossom.io, Thomas Schranz is an ambassador for dartlang (and can get pretty psyched up about that topic). Yet Saturday he decided to talk about ‘the toughest challenge of all: building products people want’. Talking Product Super Powers, ‘tosh’ praises Clayton M. Christensen and his new concept: ‘jobs to be done’. “Do not only listen what people are saying, but moreover ‘why’ they say that.”

As an owner of a milkshake joint, looking to improve your product, you’re not necessarily competing with other milkshake joints, but with whatever people might want to consume in the user story of the morning commute. People don’t buy a quarter inch nail, they want a quarter inch hole, Schranz quotes Theodore Lewitt. Think about the result people ‘hire’ your product for.

For some useful tips on product development, Schranz recommends to stop thinking in sprints, but in episodes with characters with desires. “It helps you focus on what you really want to do creating your solution.” And in addition to that: start with announcements (a blog post, press release) about why you would build something. “It helps you to get clarity about what you are building exactly and why. We spend too much time on coding and forget the why.”

Offline First and no Backend

Ola Gasidlo has been working as a professional front-end developer for 7 years and joined Hoodie last year. The Internet turned 25 and it grew up, we use our mobile phones for a large chunk of our time online. We all experienced unreliable wifi – who did not make a screenshot of Google Maps at some point in her/his life, to make sure the data is safe? – yet there are little ‘offline first’ applications. “We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error.”

Hoodie intends to make building offline first apps easy. Hoodie is a JavaScript library, that comes with a backend with user accounts and is indeed very interesting. “If your backend is out for lunch, your frontend doesn’t care.” Care to give it a try? Find a Hoodie tutorial and template.

Ola’s co-worker Lena Reinhard talked about the future of Open Source (contributions), looking at its position in our society and the world of technology. And moreover: why is it so important to fix its inherent culture when it’s broken. A very loaded and necessary topic.

Superpowers in your editor

Hampton Catlin is the inventor of Sass and the author of The Pragmatic Guide to Sass on the single most popular front-end pre-processor. Back in 2007, Hampton invented the concept of Sass. We got to hear about its entertaining history and that of Haml, it’s more opinionated older sibling (and alternative for writing HTML-as-you-know it).

Kevin Sawicki, a developer at GitHub, currently works on the Atom Editor. Convinced that Atom will be the standard in text editor land ‘for the next 50 years’, Kevin discussed the future of the Atom editor and what interesting packages have been made for since its beta release in February (spoiler: a lot).

UX best practices

Gerçek Karakus is an UX engineer at Redbeacon. Driven to better understand human behavior in relation to technology, he shed some much deserved light on improving perceived speed, optimizing conversion funnels and building polished apps.

“Everything on the web is a form and the problem with forms is validation.” Helping users understand why you need their information will avoid a huge drop-off after frontend validation, Gerçek explains in his crash course. Thus: offer meaningful error messages. When validating phone numbers for instance, remove non-digit characters. But moreover, don’t ever ask for information that you don’t really need.

And in addition to that: think about mobile input (use HTML5 input types), auto-complete common fields and turn off auto-capitalization for password input fields. When optimizing perceived performance vs actual performance, Gerçek recommends building single page web apps, pre-catch views on the frontend, keeping cache in memory for fast access and avoiding spinners when possible. “I don’t want an animation that shows me I am waiting to take up even more of the loading time.”

Design for open data

Hollie Lubbock is a London-based interaction designer at Bureau for Visual affairs. She has worked on search-specific projects including the collections of the V&A and the IWM, and talked about how to use design to aid the release of knowledge from within cultural institutions.

Good design can increase the value of open data to the public and industry professionals. And it isn’t just museums. Hollie discussed the challenges of designing for complex UIs in general. “The semantic web isn’t just about putting data on the web. It is about making links, so that a person or machine can explore the web of data. With data linked, you find other data.” On why visualization is important: “data skills will become more important as data plays a larger part in our lives. Raw data isn’t easy to interpret. Maps and graphs are easier to digest.”