Front Fest 2017

February 18 2017 was a date marked in red for the whole Spanish Front community. The first Front Fest, was being celebrated, mainly dedicated to web technologies such as CSS, HTML and Javascript, but without excluding any others!

There was a desire for a concentration of these characteristics in our country, in a profession that is booming and maybe not so well known. More than once, it happened to me, when someone asked me: "what's your job about?", I answered, in order to be understood by someone strange to this world, saying:

I make web pages
¡Nice! You make webpage design!

or like:

And do you program with Java code like my cousin?

Clearly, you can meet different types of front-end profiles. In my case, I started as a designer, but I've come to work with graduates on biology, journalism or psychology, that were turned into frontenders. For this work, either by it's short life or by the lack of specialization, the Front Fest is a good bet to make it bigger and better known. Besides, for those of us who are already in it, it's an oportunity to grow.

The event was experienced with a lot of expectation from its beginning. Proof of this, was how fast tickets were sold-out, but we didn't run out of them and we were present there.

ticketea front-end team and friend

Thanks to the initiative of communities like Angular Madrid, Front-end Developers Madrid, HTML5 Spain and MadridJS, we were able to know and learn many things about "our world", increasingly between design and back-end; For you to understand me, it wouldn't have been strange to had talked about Color Theory, HTML5 and Python in a talk focused to the front-end, for example.

All this, had been coordinated in such an excellent way, in which they cared at all times for attendees, providing us with food and drinks, and for us not to lack anything. Ten points about that too.

And Front Fest day arrived

We arrived some time before 9 a.m. to Google's Campus Madrid and there were already some people anxious to go in. We passed ckeck-in accreditations quickly, where we were given a bag with gifts from the event and from collaborating companies, and we passed straightly to the conference room.

As soon as we got in, we saw familiar faces and ex-colleagues, with whom we chatted about our lives and work until the first talk began at 9:45 a.m. with Eduardo Sada and his Máxima performance.

Máxima performance by Eduardo Sada @aeroalquimia

Eduardo was the brave exposer at the first talk, in Front Fest's history. His pulse didn't even shake a bit, he seemed secure and nerveless.

He firstly had introduced us his friend "fantas-min" and he told us how to get CSS animations with maximum performance; And how important it's to know if you are using the CPU or GPU for its painting in the browser.

During his 45 minutes, he illustrated us with nice animated examples of his codepen, done exclusively in CSS, showed us the guts of what is a CSS animation with Chrome's Web Developer Tools, the Layer View option in the same tool, and a few CSS tricks for the much-awaited performance improvement, objective of his presentation.

The beginning couldn't be better, we had learned something that in your day to day you can make it work, but you really don't know how or why this magic happens, if you don't go deep enough into the subject.

Animación avanzada con CSS en HTML y SVG para mejorar la UX by Ángel Corral @ancoar

Next, and to continue with above's thread, Ángel Corral told us about animations to improve UX.

He also showed with his demos, that he's an artist giving life to elements using CSS, and how you can influence on users' reactions to animations, giving feedback, directing their attention, etc...

We were shown how to work with SVG's animations, pseudo-elements and sprites, how to use 'animation-timing-function' to get different effects, how to layout correctly before performing animations... He even made a very cool animation of the Front Fest logo layout.

Let's code a game in JavaScript by Belén Albeza @ladybenko

After the coffee break, Belén Albeza came to show us how difficult it sounds to "Make a video game in javascript" and how fast and easy it seemed to be by seeing her explaining it.

With HTML5 and Phaser library given possibilities, she created a classic space shoot'em up, with its background music, their 'payun, payun' and 'boom!' sounds included.

Accesibilidad web, ¿cómo hacer un front para todos? by Juanjo Montiel @kastwey

At 12:35 a.m. the best day's talk began.

Web accessibility, that big forgotten in many times, but so important that you don't realize it until you don't suffer it. Juanjo, himself, put us in evidence when he asked how many of us had no disability, and he challenged us to resolve a Captcha in which we had to solve a musical notes sequence. Anyone of us couldn't do it. He could.

Juanjo spoke us about web accessibility, with the precision of being an expert in it and with a lot of funny moments. We got to understand the importance of HTML code semantics, the sense of headings order and good practices on online projects.

He also showed us how the screen reader is used, leaving us with our mouths open with the high speed that he uses the voice assistant.

Workflows sanos y funcionales entre equipos (UX, UI, Front) by Juan de la Cruz @elhombretecla

Before having lunch, Juan de la Cruz, presented us how to get a functional workflow between teams from beginning to end, and day to day problems arising from their communication.

A pleasant and interesting talk in which we concluded that all teams have to be in the whole project process, with more or less action measure depending on which stage they are.

Take a look at his presentation to find out more stuff!

Escribiendo estilos para componentes de React by Javier Velasco @javivelasco

Javier Velasco, React Toolbox's author, brought to the Front Fest how to write styles for React components and what could be or will be React Toolbox 2.

His speech, despite it was just after lunch, it didn't let attendants to fall asleep, since he came with controversy included with several fors and againsts direct questions. It seems a bit more complicated to write CSS in the way that he explained it (although he said that that would be the core of next React toolbox), but it would solve many shortcomings of the lack of CSS solidity, without having to wait years until it is implemented by all browsers.

I am in favor of all things that help writing better CSS, depending on what level of difficulty we are willing to tackle, that's true. And... who hasn't written an "!important" in his/her life, raise your hand.

As a funny moment of what can be CSS, Javi said:

"Two CSS selectors go into a bar and a third one gets drunk two streets beyond"

Aplicaciones offline en un mundo online by Sergio Zamarro @zamarrowski

With his experience on a wine tasters website developing, Sergio Zamarro began to explain how to make an application to work offline and its benefits.

Terms such as Cache Manifest, data persistence, cache update, LocalStorage or WebSQL were described in his essay, which in the end, showed us an offline application demo made by himself.

Cosas increíbles que puedes hacer con una web by Ramón Guijarro @soyguijarro

Already in the final stretch, Ramón gave us a nice list with examples of what we can or will be able to do with Web APIs.

Vibration or camera mobile access, voice synthesis, geographic location... were some of the demos that he presented in his time, all made by himself, highlighting light bulb control with his phone, which took a great ovation. :D

After seeing so many incredible things, it makes you want to play around with all of them! Although some, still don't work well at all... :(

Tecnología por el cambio climático by David Inga @davidsingal

Finally, David Inga showed how to use the front-end (and also back-end) to raise awareness of climate change, with examples of projects in which he participated with his company and team, together with others such as Carto, Google or Nasa, in which he listed used technologies in each one.

Being the last and not so didactic as the other papers, he had harsh criticism and I had hoped he would have talked more about D3.js, Tres JS, React... but it was interesting.

Conclusions

As I said before, we needed an event like Front Fest in Spain, and it has fulfilled expectations, both at the level of organization and speakers, so we are looking forward to going to next 2018 edition.

Thanks to the organization and the collaborators, that without their work, none of this would have been possible.

Concluding, I leave you a video playlist containing some day's talks. We would like to thanks Paradigma Digital for that.

And to know more about Frontfest, you can follow their Youtube channel and their Twitter account @frontfest.

Long live Front Fest!