FRONT-TRENDS 2016

Last month, we visited Front-Trends conference. The event is known in whole Europe and is dedicated to Front-end Developers. The conference delivers wide range of professional knowledge and above that, it gives opportunity to meet other passionate developers to share experience and get inspired. Below you will find our impressions from the whole event. Enjoy your reading 🙂

Day 1 – Presentation 1

„The web in motion” – Rachel Nabors

“Animation is a visual representation of a rate of change over time. By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift context to the interface domain. By eliminating sudden visual changes, animation lessens the chance that user is surprised.”

Scott E. Hudson and John T. Stasko

Animations help to increase natural feeling or experience. This is especially good for older people because of their inexperience with things which are obvious for developers. Additionally animations make younger users less bored.

If you want someone to notice something add bright and jiggly animation, but don’t use it in places where user looks at by default (f.e. Center of the page). Remember when everything vies for our attention, nothing commands our attention. It should’t looks like timesquare.

Tip: Modern browsers have support/tools to manage animations.

Most of developers know css transition and css animation. There was also SMIL (she said it’s dead at this moment). Now there is Web Animations API which offers you synchronize animations etc.. looks like worth to check.

“An animation is worth a thousand meetings”

There is a problem to design animations, because single picture/mockup can’t express this. Solution for this are storyboards. Storyboard is a way to express design with animations by showing important points/frames from animation.

Links/libraries:

Summary:

Presentation can be found here
buff.ly/1WMnXuf

Pretty nice presentation with clear message that we should use animations and there is deeper meaning for it.

 

Day 1 – Presentation 2

„Static sites go all hollywood” – Phil Hawksworth

http://example.com
Http double meh

A static web page (sometimes called a flat page/stationary page) is a web page that is delivered to the user exactly as stored, in contrast to dynamic web pages which are generated by a web application.

Static web pages are suitable for the contents that never or rarely need to be updated. However, maintaining large numbers of static pages as files can be impractical without automated tools. Any personalization or interactivity has to run client-side, which is restricting.

Static sites generator pros:

  • cheaper simpler hosting
  • fewer points of failure
  • fewer vulnerabilities
  • easier compliance
  • great portability
  • attrition avoidance

Styleguide:

  • Styleguide as a side effect.
  • Styleguide as a process.
  • Styleguide as an artifact.

“Unless it is a part of your build your style guide is just more documentation to maintain.”

You should be able to generate styleguide automatically.
Modules, templates, ssg -> styleguide

Links/libraries:

Summary:

Presentation can be found here
bit.ly/ssg-hollywood

Presentation was mostly just big words plus some graphs.

 

Day 1 – Presentation 3

„Working with the web and the future” – Sally Jenkinson

What can change in the future: our projects, our users, our business, technology and  wildcards. What we plan now may not be relevant in the future. Disruption will only accelerate. Our existing standards, workflow and infrastructure won’t hold up. The standardization process will be painfully slow. Browsers also have problem to follow all trends synchronously so we have to check site like “caniuse.com” to know if solution we want to use will work.

It is all about future thinking.

  • We should better consider our user changing needs.
  • Different elements have different life spans.
  • Separate concerns; loosely couple; think in patterns, not pages.
  • Be more modular.
  • Be guaranteed to meet the business and customer needs for the next 5-10 years at least

“A good science fiction story should be able to predict not the automobile but the traffic jam”

“Zero UI is taking us away from screens to a more natural way of interacting with things.”

Example:

Input can be different from keyboard, touchpad, voice, thoughts, but function of submit form will work the same.

Keep updated otherwise you can have big trouble to be in game.

Links/libraries:

Summary:

Presentation can be found here
http://www.slideshare.net/sallyjenkinson/working-with-the-web-and-the-future
Motivation talk. Many images related to how past saw the future.

 

Day 1 – Lightning talks

Some interesting quotes from lightning talks

“always try to find a solution that solves customer and business needs”

“Failure is fine, try different solutions until you succeed.”

“You can improve your product all the time. There is no limit for it. And there are many ways to improve.”

“never use !important in anger”

 

Day 1 – Presentation 4

„RxJS – Destroy the state machine” – Stenver Jerkku

RxJS reactive extension for javascript. A library that helps you do reactive programming.

Async is hard because of callback hell, state, error handling. Solution seems to be reactive programming. Reactive programming is programming with async streams. Async streams are: mouse clicks, events or other streams like keyboard input. Events are fundamentally collections and a stream. Everything can be composed of arrays and array is a collection. We can treat everything as a stream: variables, user input, properties, caches, data structures etc. Facebook infinite scroll is a stream just like mouse click events are.

streams are cheap – this is where the functional magic kicks in you can use a stream as an input to another stream. you can even use multiple streams as an input to one stream. All by using concat and merge.

streams are functional – they can be mapped, they can be filtered and they can be debounced.

streams can be completed – you can take first element or take until you find what you need.

streams are observables – in rx you create observables i.e. streams. The function listening on events are observers

Observables are everywhere – App startup, Real-time Communication between people, CoBrowsing, Data access, Animations View/model binding

Links/libraries:

Summary:

Presentation can be found here:
http://slides.com/stenverjerkku/deck#/

Pretty nice presentation, worth to check.

 

Day 1 – Presentation 5

„untangle your code with yield” – Staś Małolepszy

Generators and iterators are among the most enigmatic and underused features of ECMAScript 2015. They can be used to create custom iterables and infinite sequences. Lesser known applications include controlling asynchronous operations and handling side effects.

The yield keyword causes generator function execution to pause and the value of the expression following the yield keyword is returned to the generator’s caller. It can be thought of as a generator-based version of the return keyword.

Links/libraries:

Summary:

Presentation can be found here:
https://github.com/stasm/preso/tree/master/untangle

Live coding with many examples.

 

Day 1 – Presentation 6

„Once more with feeling” – Tim Kadlec

Walmart and amazon says that if page is loading 100ms faster they have more 1% revenue. Studies say:

  • 100ms – feels instantaneous & maintains a connection between action & reaction.
  • 1000ms – anything longer and the user loses focus on their task.

There are passive and active way of waiting:

Passive waiting – you don’t have anything to do and nothing happens. People asked about estimating time in this case overestimated waiting time by 36%.

Active waiting – user can do something or see progress. People are less bored.

Example: People was complaining about how long it take to use elevator. First they tried to improve it technically but there was no way to do it. Then one guy proposed to put mirror inside it. Result was that there was far less complainings.

people hate progress bars – better than nothing but is annoying because it focus on the waiting. Use skeleton screens. Facebook gives you empty boxes in place where text will appear. Other way is a message to user that we calculating/finding things for him. That we are doing something for him and he don’t need to do it.

Most important thing in page loading is critical path. We should focus on it.

Interesting things to check: Dns-prefetch, preconnect, prerender, preload.
Tips for javascript: async and defer – for js not needed in critical path.
Tips for css: loadCSS in javascript – for css not needed in critical path.

Don’t do it manually, find automatic solution/tools.

Everything should have value, because everything has a cost. We should balance richness with speed. Performance is the developer’s responsibility. Performance is also about the user so put metrics away care about feeling.

Paradox: faster is not always better. Artifiction delay in complicated process gives user feeling that app doing good job. People don’t trust if something going too fast in some cases like credit card verification, calculate hard things.

Links/libraries:

Summary:

Presentation can be found here:
https://speakerdeck.com/tkadlec/once-more-with-feeling
Cool. Couldn’t put everything in description. Check presentation for more details.

 

Day 1 – Presentation 7

„Leadership in an ever-changing industry” – Meri Williams

  • Put down your sword. you are not a roman general.
  • In our industry, things change so fast you can’t possibly have always the right answer. Rely on your people if s to technical stuff.
  • As leader our job is to create the space in which people can be awesome. Space to figure out what to do and then get it/span>
  • Create space for everyone to be the best they can be.
  • You have to be a translator – make purpose, strategy, direction make sense

Book
“First, break all the rules“
Marcus Buckingham and Curt Coffman

Links/libraries:

Summary:

Couln’t find the presentation A lot of motivation talks. Some graphs. Some images.

 

Day 2 – Presentation 1

„First class styles” – Mark Dalgleish

Global scope vs maintenance:
Don’t fool yourself. At some point you need to maintain your code. Nowadays we are making web applications, not single web documents. With maintain or extend your project for sure you experienced problems because of global scope. Dependencies, dead code elimination, minification etc.. and it is all because of classes with global scope. More and more people starts to be more modular. Creating components instead of global thinking help to avoid problems mentioned above. There are few ways to have local scope in CSS: OOCSS, SMACSS, BEM, SUIT, etc..

Developers tried to insert css code in js by add inline styles. OK you have your component with: css, js and html code separated from everything, but it’s not good because you have to resign from media queries, css animations and pseudo classes.

Okay so you need to have CSS file but how to make it to have local scope? You can use BEM and good file structure like this (css and images are private to a component):

In React this issue can be solved using CSS Modules together with PostCSS.

Rendering the component will produce a markup similar to:

 

THE END OF GLOBAL CSS

Links/libraries:

Summary:

Presentation can be found here:
https://markdalgleish.github.io/presentation-first-class-styles/#75

Nice overview of solutions we can use to have local CSS. More in presentation. Nice examples.

 

Day 2 – Presentation 2

„Our eternal digital afterlife” – Alberta Soranzo

What happens to our digital live after death. What you can do with your facebook, google and other service account regarding this topic. See more details in presentation.

Links/libraries:

Summary:

Presentation can be found here:
http://www.slideshare.net/atrebla/our-eternal-digital-afterlife-fronttrends-2016
For me it was boring. I didn’t listen. If you are interested in it please check the presentation.

 

Day 2 – Presentation 3

„Demo reel and tiny javascript” – Mathieu Henri

Presentation was about visualization using canvas. Idea is to use minimal code to achieve nice effects. There is a competition to write animation below 1024 bytes http://js1k.com

Tips and tricks:

  • creative mindset
  • abusing the standards
  • visual understanding of mathematics
  • zero frameworks and libraries
  • one primitive and one formula
  • dirty trigonometry

Links/libraries:

Summary:

Didnt find the presentation but here website from the speaker http://www.p01.org/ live demo cool awesome i love it
This animation was really amazing

This animation was really amazing

Day 2 – Presentation 4

„Syntax highlight everything” – Kenneth Ormandy

A developer employs syntax highlighting to visually differentiate portions of her code; for centuries, designers, printers, and scribes have done the same for readers. Today, advanced features built into fonts can subtly signify types of content, increase a text’s authority, and are actually necessary for many languages.

There is a lot advanced typographic features worth to check:

not all fonts have all features

Align for numbers:

Links/libraries:

Summary:

Couldn’t find presentation

Nice presentation. I didn’t know that fonts have so many features:)

 

Day 2 – Lightning talks

Interesting websites/tools

tic tac toe.js
http://ramonvictor.github.io/tic-tac-toe-js/
restful.js
raml.org
devtoolschallanger.com

 

Day 2 – Presentation 5

„Computer assisted arts and crafts” – Mariko Kosaka

Links/libraries:

Summary:

Couldn’t find presentation Some talk about connect to the different devices via internet. But it was a little bit mess.

 

Day 2 – Presentation 6

„Taking over the web with Angular 2” – Todd Motto

“Think of Angular 2 as a platform not a framework.”

Angular 2 anatomy:

Angular core, modules (routing/http/etc)
Components, one-way dataflow
RxJS, TypeScript, CLI
Template compiler
Dependency Injection, Zones

Examples and a lot of graphs in presentation if you interested in this topic check it. Hard to describe.

Links/libraries:

Summary:

Presentation can be found here:

https://speakerdeck.com/toddmotto/taking-over-the-web-with-angular-2

Examples and a lot of graphs in presentation if you interested in this topic check it. Hard to describe.

 

Day 2 – Discussion panel

„The state of Front-end Tooling”

Talk was about that we have so many tools right now. We should follow trends/new things but we should use tools we need. Also rebuilding whole application just to use new shiny tools don’t have sense unless you will have profit from it in the feature.

We should avoid to memorize everything because it can be outdated really soon. It is all about good way of thinking.

New tools should be tested in small environment like blog to avoid problems.

 

Day 3 – Presentation 1

„Exploring the universal library” – Szymon Kaliski

Visualization help to better understand the data.

Visualization data helps to shape thinking.

For everything you do you should make a tool, don’t hardcode things.

There is a language to create visualizations:

Processing is an open source programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks.

Also available in JS as library: http://processingjs.org/ You can write in js or include processing *.pde file

Links/libraries:

Summary:

Couldn’t find presentation

Visualization is a thing.

 

Day 3 – Presentation 2

„Pixel bonding” – Tammie Lister

Be more human in creating apps/websites because you don’t make it for machines.

Love and compassion are necessities not luxuries. without them humanity cannot survive.

trust + like + usable + right = cool

Links/libraries:

Summary:

Presentation can be found here:

https://speakerdeck.com/tammielis/pixel-bonding

Whole presentation was about same topic, just different examples.

 

Day 3 – Presentation 3

“Modern websites for the modern web” – Patrick Kettner

“It seems like new APIs for the web are released every week. It would be cool to be able to use them, but if you need to make websites for the average user, you won’t be able to use them for years – right? Wrong. Patrick will go over how creating feature rich and super fast front end applications, integrating over a dozen cutting edge web features, all while supporting even the oldest of web clients.”

Mostly it was presentation about modernizr v3. That it allows you to download only parts which you need. Please check https://modernizr.com/download You just selecting modules from modernizr you need. Profit is that custom build is a lot smaller than default.

In the meantime he mentioned a lot of different things like:

  • css font loading module level 3
  • Css – font-display:
  • localstorage.setitme(„font”,true)
  • serviceWorker
  • require.js
  • cache for font
  • Appcache vs webwspan>
    • appcache  – sux but have support
    • Webworker – offload tasks to background thread
  • zeroclipboard
  • clipboard.js
  • download attribute
  • Hapi.js

Links/libraries:

Summary:

Presentation can be found here:

https://speakerdeck.com/patrickkettner/making-modern-websites-front-trends-2016

Sorry for not describing these all mentioned things but i need to check it as well. For code examples check presentation.

 

Day 3 – Presentation 4

„Css for software engineers for css developers” – Harry Roberts

It’s about saving work not saving size.

Software engineers have been writing code for 37 longer than css we should get inspired from them.

DRY (don’t repeat yourself) – Every piece of knowledge must have a single, unambiguous, authoritative representation within a system. Every discrete piece of information should exist only once. You shouldn’t need to make the same change several times. Repetition is extra overhead: more to maintain, to go wrong.

Don’t repeat yourself – compiled code can be repetitive. It’s all about not repeating yourself in the meaning we shouldn’t do it manually. Automatic repetition is fine.

Subway example: By offering individual ingredients you can achieve 6,442,450,944 sandwich combinations.

DOM, Javascript and css should be separate from each other. Bind CSS onto CSS-based classes only. Don’t write DOM-like selectors. Don’t bind CSS onto data-* attributes. Don’t bind JS onto CSS classes.

Software entities classes modules functions etc.. should be open for extension, but closed for modification. (exception: bug fixing)

Links/libraries:

Summary:

Presentation can be found here:

https://speakerdeck.com/csswizardry/css-for-software-engineers-for-css-developers

Check this presentation!!! It’s really cool.

 

Day 3 – Presentation 5

„Can’t you make it more like bootstrap?” – Alice Bartlett

She is working at Origami. Origami’s front end modules contain Sass, JavaScript and markup templates to create great looking UI elements. The Sass and JavaScript needs to be ‘built’ into minified bundles that you can serve as subresources using <link> and <script> tags. The markup templates are there to help you generate the Origami HTML in your application.

They work is to create tools which can be used by people which are not developers.

Example:

 

So people creating html document just include css and js modules they need. She mentioned that: one thing is to create cool tools people can use, second is documentation which help people understand how to use it.

Documentation isn’t complicated. It’s just hard.

Documentation is an important part of the product/project. Example of good documentation is http://getbootstrap.com/ Bootstrap 3 where everything is easy to find and you don’t need to read it all to find information you looking for.

Links/libraries:

Summary:

Couldn’t find presentation

Nice presentation showing cool way of use modules to allow create different variables of pages. Documentation is also a big part in this case.

 

Day 3 – Presentation 6

„Building an Offline Page for The Guardian” – Oliver Joseph Ash

Native app vs Website

Native app

Content is cached

Experience:

  • Offline: stale content remains
  • Server down: stale content remains
  • Poor connection: stale while revalidate
  • Good connection: stale while revalidate
Website

Experience:

  • Offline: nothing
  • Server down: nothing
  • Poor connection: white screen of death
  • Good connection: new content

 

Service worker seems to be a solution.

  • Scripts that runs in the background
  • Useful for features with no user interaction, e.g:
  • Listen to push events, useful for pushing notifications
  • Intercept and handle network request
  • Future:
    • Background sync
    • Alarms (e.g. reminders)
    • Geofencing
  • A progressive enhancement
  • Trusted origins only (HTTPS, localhost)
  • Chrome, Opera and Firefox stable

Links/libraries:

Summary:

 

Presentation can be found here:

https://speakerdeck.com/oliverjash/building-an-offline-page-for-theguardian-dot-com-front-trends-may-2016

For more details check presentation.

 

Day 3 – Presentation 7

„The myth of the ’Real JavaScript Developer’” – Brenna O’Brien

Funny slides

Links/libraries:

Summary:

Presentation can be found here:

http://talks.brennaobrien.com/real-developer/myth-of-the-real-javascript-developer.pdf

Just enjoy slides from presentation 🙂 Motivation/funny talks

 

Day 3 – Presentation 8

„Don’t hate the player, hate the game” – Tim Holman

I had to go before it. According to Łukasz Majewski there was some funny talk.

Links/libraries:

Summary:

Couldn’t find presentation
pluswerk