Front Trends 2016 Highlights

Last month, Project A sponsored the 2016 Front Trends conference at the Space Club in Warsaw, Poland. Our Frontend Labs team had the opportunity to attend the three-day event and learn from industry leaders about a variety of topics including JavaScript, CSS, and digital design.

Read below to find out which where some of our favorite takeaways!

Leadership in an Ever-Changing Industry

Meri Williams’ talk took place at the end of the first day and was one of our favorites. She presented the idea that as a leader in tech, your job is not to know what to do. In our industry things change so fast, leaders can’t possibly always have the right answer. Instead, Meri recommends focusing on creating a space in which people can be awesome, and figure out what to do, how to do it, and then get it done. According to her talk, the four pillars to create an environment of success are:

• Purpose, do I believe in why?
• Autonomy, do I get to say what?
• Mastery, am I proud of how?
• Inclusion, do I belong here?

This talk is a must-see! We highly recommend looking for it when it becomes available online.

Untangle Your Code with Yield

Stas Malolepszy, frontend developer at Mozilla, talked about a lesser-known but incredibly powerful ES2015 feature: generators. Using generators custom objects can be implemented as iterables and therefore directly be used with another ES2015 feature: the for-of loop. He went through many examples demonstrating possible applications of generators and the new yield operator. Besides creating iterables and infinite structures, generators can also be used to control asynchronous operations and to handle side effects in an elegant, maintainable, and perfomant way.

Side note: Stas does all his talks using VIM as his presentation tool. Fun to watch this amazing guy!

Once More with Feeling

Tim Kadlec’s talk focused on how we can enrich a web experience by speeding it up or slowing it down. A user’s perception frames their experience, so ultimately the actual speed of a site is not as important to the user compared to the feeling that the experience creates. Meaning: faster is not always better.

For example, a small delay during the payment process in the checkout of a web shop makes the user feel trust, whereas if a credit card number went through immediately, the users might feel a lack of trust (the site should have to “think” about this type of information). Another example talked about a tax app in which the whole procedure was so fast, users felt distrust (again, related to the fact that users feel that these transactions are difficult and therefore should take a while to process). By adding an artificial lag, the distrust issue was solved. Although this talk wasn’t very technical, it provides a good introduction to the topic and could be used as a communication tool with designers, product managers, and other departments throughout a company.

Syntax Highlight Everything

For typography nerds, Kenneth Ormandy from the Lost Type Co-op, presented Utility OpenType which is a small CSS library for advanced typography use in the web. This library is a compilation of the best techniques to use swashes, standard and discretionary ligatures, contextual and titling alternatives, small caps, and a variety of improvements for numbers.

The examples below, for instance, are made using typography-specific CSS with the same web font, “Lavanderia” by the Lost Type Co-op. Their fonts are worth checking out — they’re very high quality and the cost is “pay-what-you-want” with a personal license.

Clean And Scalable CSS Code

In his talk, frontend architect Harry Roberts explained the reasons why it is advisable to apply best practices from traditional software engineering to CSS development. While starting to work with CSS is quite easy because of its declarative nature, scaling CSS for large projects can become a real challenge. So learning from a much older discipline that had decades to evolve cannot be a bad approach. He explained the benefits of following naming conventions like BEM (base, element, modifier) and principles such as DRY (do not repeat yourself), single source of truth, single responsibility, and separation of concerns. Furthermore, he pointed out how immutable declarations and applying the open-close principle help to increase maintainability of constantly growing projects.

API Contracts

Aligning front- and backend development can be a time-consuming task. Having in mind that there are always dependencies between those two, it is mandatory to streamline communication and to decouple development processes as much as possible. An interesting approach to achieve this was presented in one of the lightning talks given by developers of PGS software: implementing API-driven development along with API contracts. As part of the feature specification process APIs are defined, e.g. using a specification language such as RAML, and both parties agree on conforming to these definitions, the contract. As APIs can be easily mocked by third-party tools such as Osprey, there are no dependencies left blocking frontend development while guaranteing API compatibility. In addition to improved development speed an API documenation can be generated from the specification with no extra effort, allowing other developers to grasp available services and their usage in a potentially large the system with ease.

Our Recommendation…

Unfortunately, the talks are not yet available online, but check out the Front Trends YouTube channel in the near future to see the full presentations.

For now, catch a glimpse of the conference as a whole:

---