dev // bnijenhuis

Notes Fronteers 2016: Day 1

The organisation of this years conference was as great as ever. The venue (Pathe Tuschinski) was beautiful and the seating in this cinema is perfect for a conference. I liked the variation in subjects over the day and I also liked the fact that the name of the current speaker was shown on stage throughout the talk. Like the Spring Conference earlier this year there was a live transcriber for the deaf, non-English speaking attendees or just for anyone who missed something during the talk (props for the transcriber, because some of the speakers talked really fast). Unfortunately I could only attend the first day, but nevertheless it was a great experience once again.

Progressive Enhancement and CSS - Ire Aderinokun (@ireaderinokun) • Slides

The first talk of the day (and the conference) was about progressive enhancement. Ire talked about how graceful degradation usually doesn't go much further back than one version of the browser, and progressive enhancement is a better practice because you build the basics first, which work in all browsers, and enhance on that.

She noted that progressive enhancement in JavaScript can be done by building the functionality without JavaScript and then enhance the user experience with JavaScript (even with feature-detection in the JavaScript itself). Progressive enhancement of the HTML is handled by the browser itself, where if certain elements aren't supported (for instance <main>) the browser will handle this as a <div>. Progressive enhancement in CSS is harder, because if it's not supported (or implemented incorrectly) it will be ignored. But there are ways for progressive enhancement in CSS, for instance using @support and using properties in a cascading way. For example: use background-color: red; followed by background-image: linear-gradient(red, blue);, which means that browsers that don't support linear-gradients still defaults to a red background.

My takeaways:

I think that, if done correctly, both graceful degradation and progressive enhancement can end up with the same result. But if not done correctly, progressive enhancement is a better way to go. Ire gave a nice example using mobile-first developing. If the default is designed for a desktop, and it's not properly optimised for other devices, it will be too large for a mobile device. But if the mobile device is the default, and nothing else is optimised, it will still be usable on desktop.

Hacking the Visual Norm - Nadieh Bremer (@NadiehBremer) • Slides

Nadieh works at Adyen where she is responsible for creating visualisation of different datasets. Examples were an organizational chart and a chart of the payment processes. Every dataset is unique and should be treated as such, so keep optimizing the visualization. For the organizational chart she finetuned the clicking areas so it's as useable as possible. She uses d3.js for the charts, but even for some charts she had to make changes to the core of this library to make the chart the way she wanted it.

My takeaways:

Always keep optimizing untill it's just as you want it to be. Really impressive how she created all these different, beautiful, charts.

How You Do What You Do Is Who You Are - Scott Olson (@gscottolson)

Scott talked about solutions they came up with at making the web version of their native app Paper. After some shameless plugs for his products he sparked up some discussion by using some solutions which could have been done differently. Such as using a spacer-image for filling up space before the image is downloaded (can be done in CSS just as well), handling different sizes of images with JavaScript (where srcset can be used) and recreating input/placeholder functionality using JavaScript (why do this, when the default HTML already has it?).

My takeaways:

It was nice to see the discussion about different solutions following his solutions. It shows front-end development isn't a one-way street, but can be approached in many ways. During the discussion on Twitter I learned about this little trick: Uncle Dave's Ol' Padded Box.

Offline, Progressive and Multithreaded: a Peek at the Webapps of the Future - Nolan Lawson (@nolanlawson) • Slides

This talk was about what the webapps will look like in the future, based on the trends that are currently going on. First there was a bit of history where he explained how HTML5 was a response to Flash. HTML5 won the battle on desktop (yay!), but now mobile comes in, where apps are winning the web. A response for the apps are the Progressive Web Apps.

According to Nolan there are three categories in which (web)apps can be divided: Offline, Progressive an Multithreaded. Native apps (in general) have offline support, aren't progressive and are multithreaded. Webapps (in general) are not offline, are progressive and are not multithreaded. PWA's however have the potential to check all three boxes.

Offline first is not about laggy connections, but it's about speed. Progressive can mean it adds functionality based on capabilities (weak version) or should always work without JavaScript (strong version). Multithreaded is possible via Service Workers. Using a worker creates a new thread, so the UI thread won't lag during hard calcutions made in the worker.

My takeaways:

Nolan made a statement during his talk: "In 2016, it's okay to build a website that doesn't work without JavaScript.". This sparked even more discussion amongst the attendees. His point actually was to not focus on making it work without JavaScript, but first focus on offline-first for progressive enhancement, because there's more to gain there.

Multi-user WebVR or Wait. Who Are These People - Martin Splitt (@g33konaut) • Slides

Martin had a nice talk which featured some live demo's with WebVR. Currently all virtual reality solutions are bounded to a certain system (Google Cardboard, Oculus, etc.), but WebVR is coming.

My takeaways:

It was an entertaining talk and very nice to see that virtual reality is coming to the web.

Big Data, Big Impact - Lodewijk Nauta

Lodewijk was the second speaker about big data. He talked about three projects he worked on at his company: analysing health of employees, analysing metro data and analysing shopping public. He showed some different ways to get data and how to compare this data to other data to come to useable results.

My takeaways:

I was surprised a big company made assumptions about some data to come to conclusions (assuming people take the shortest route for instance in the metro). I would think that for data analysis not a single assumption would be made, because, you know, assumption is the mother of all fuckups.

Scaling Front-end Development - Monika Piotrowicz (@monsika) • Slides

Monika talked about the choices they made at Shopify when scaling the front-end development. The reason it should be scalable in the first place, is because a team isn't always in the same, physical place. An important aspect of scalable front-end is standardisation. Standards about how the code should be written (language styleguides for HTML, CSS and JS). Code reviews (mostly automated) so you can check if the rules you set up are followed, or should be changed. Usage of pattern libraries and UI libraries can help to have consistent code accross projects. But always make sure you don't confirm to the rules, just because those are the rules. Review them constantly and change them of the project needs that.

My takeaways:

I liked this talk, because even for smaller teams this could work. Standardisation makes it easier for new team-members to join the team, so even if the team is as small as 2 developers, standardisation can be very useful.

Surveying the Landscape - Peter Gasston (@stopsatgreen) • Slides

The closing talk of the day was by Peter Gasston. It started really depressing, because the web won't disappear, but it's becoming marginalized. The web is moving to mobile, because the web is slow. It's not because it is slow by default, it's because we made it slow. Ads account for 9% of the webpage, but account for 54%(!) of the load time and for 55%(!) of the bandwidth. Bandwidth is expensive, especially in upcoming markets like Myanmar (1GB of data in Myanmar is 15% of the average person's monthly income!). Facebook is now loading webpages in it's own app, without all the ads and stuff, which makes it faster than the normal webpage. Apps like Facebook and WeChat are becoming the internet.

The good news about the talk is that although the web looks like it's loosing, it's actually changing. Instead of viewing the web in browsers, it has to change in an user experience that's delivered across multiple channels and devices.

My takeaways:

Ads and trackers have actually ruined the web as it is, but I think the change that has to come is a good thing. It means the core of the web (structured HTML) will become more important again, and I for one think that's a good thing.