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

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.

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.

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

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

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.

Day 1 - Lightning talks

Some interesting quotes from lightning talks

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

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.

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.

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.

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

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

mycomponent/

mycomponent.js

mycomponent.css

Mycomponent.svg

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

import styles from './table.css';
export default class Table extends React.Component {

 render () {

  return <div className={styles.table}>

      <div className={styles.row}>

          <div className={styles.cell}>A0</div>

          <div className={styles.cell}>B0</div>

      </div>

   </div>;

 }

}

Rendering the component will produce a markup similar to:

<div class"table__table___32osj">

      <div class"table__row___2w27N">

          <div class"table__cell___2w27N">A0</div>

          <div class"table__cell___1oVw5">B0</div>

      </div>

   </div>

THE END OF GLOBAL CSS

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.

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

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:

font-kerning: auto;

font-kerning: normal;

font-variant-ligatures: common-ligatures;

distrageture-ligatures;

font-variant-ligatures: contextual;

font-variant-calps: small-caps;

etc..

not all fonts have all features

Align for numbers:

font-variant-numeric: tabular-nums;

font-feature-settings: „tnum”;

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

Day 2 - Presentation 6

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

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.

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

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

Day 3 - Presentation 2

„Pixel bonding” - Tammie Lister

trust + like + usable + right = cool

Day 3 - Presentation 3

“Modern websites for the modern web” - Patrick Kettner

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

Day 3 - Presentation 4

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

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)

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:

<html>

    <head>

        <!-- build service links and scripts here -->

        <script async type="javascript" src="http://origami-build.ft.com/v2/bundles/js?modules=o-buttons"></script>

        <link rel="stylesheet" href="http://origami-build.ft.com/v2/bundles/css?modules=o-buttons" />

    </head>

    <body>

        Hello!

        <button class="o-buttons o-buttons-standout">Here's a button</button>

    </body>

</html>

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

Day 3 - Presentation 6

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

Native app vs Website

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

Day 3 - Presentation 7

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

Funny slides

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.