The FrontEnd team of Venere.com in mid November took off for Paris to attend two dotConferences organized in spectacular locations, with high level speakers and contents that have proven to meet expectations, in short an experience worth to be repeated.
dotCSS
Despite the important role that CSS plays in the construction of modern web applications the conference, held in November 14th, had difficulties in finding sponsors, problem that has resulted in a significant shortage of gadgets and the shortening of the conference from 8 hours to half day in the afternoon, but the welcome given to the audience in the Théâtre des Variétés located in Boulevard Montmartre was exceptional.
The theater inside is majestic, it barely contained all the developers that flocked to the conference in its comfortable seats. The organizers have done a great job in the division of time between the speakers talks and refreshment breaks with excellent meals.
But food aside, let’s talk about the conference’s contents.
Daniel Glazman
Co-chairman of the CSS Working Group, Daniel has exposed how the group that sets standards for the future of CSS does his job, using an horizontal structure where the voice of each one has the same weight, a group whose fundamental purpose is to orchestrate the different interests of the big techcompanies which preside the group.
With ill-concealed impatience he also explained what problems are more frequent in the group during the decision-making process that involves also creating new properties names, in an attempt to create semantically valid and short names in the attempt of avoiding acronyms that are difficult to understand, citing as bad example the flex property that is undergoing several revisions to reach a good compromise.
We’re talking about compromises here, because this work requires mediating different interests to reach reasonable agreements that are able to meet the needs of all participants, which is why the result will never be perfect, and the work will remain a perpetual flux.
Kaelig Deloumeau-Prigent
FrontEnd Developer at FT Labs, Kaelig described the work he has done with his team in the creation of the new website of The Guardian building a grid system with breakpoints for an RWD layout (Responsive Web Design).
Beyond the interesting technical details exposed for the definition of breakpoints what was most interesting to learn is the workflow established between the various stakeholders who cooperated on the project, with the focus put on the design being at the center of the process with continuous feedbacks between developers and creatives.
The most important part is the definition of a shared vocabulary between the parties, in order to facilitate developers and creatives in the discussion of the different parts of a project, also in order to create structures SASS which reflect as much as possible this vocabulary making even the future changes much easier.
Harry Roberts
Working in contact with many developers and business for several years allows to encounter problems that are not always directly linked to the code but to how developers relate to each other, to the perception of their own work and other people involved in the projects, experiences that Harry has codified in its 10 principles to develop efficiently a FrontEnd project.
These are tips that can be applied in various ways to other types of projects, in a broad sense the advice is to encode your own principles according to your experiences.
- The simplest option is usually the best
- Reduce the amount of moving parts
- Understand the business
- Care less, care appropriately
- Pragmatism trumps perfection
- Think at product level
- Do not design systems around edge-cases
- Do not make decisions based on anecdotal evidence
- Don’t build it until you’ve been asked for it
- Expect and accommodate change
Lightnings talks
Another interesting aspect of the dotConferences is the fact that in addition to the slots reserved for the official speakers of the conference a small session is reserved for spectators who may send their presentation to the organizers for review and if accepted be present on the stage, and in this session there have been four interesting presentations.
Maxime Thirouin
A brief summary of what all FrontEnd developers feel with CSS has been offered by Maxime : frustration. It is a powerful tool but sometimes frustrating, preprocessors like SASS have improved the situation by introducing many of the elements that all major programming languages have such as variables to avoid repetition and basic mathematical operations, things that are useful to better organize even a declarative language.
Maxime tries to bring this concept to a more advanced level trying to precede the times with CSSnext, a preprocessor that allows you to write inCSS4 syntax which is then compiled to selectors that are compatible with current browsers imprementations.
Victor Brito
Web apps are becoming more and more visually appealing but Victor wanted to remember the importance of accessibility in the development of applications, because if we concentrate solely on visual specifications of a project we’ll end up with HTML structures that do not accord with the bare minimum accessibility requirements for people with disabilities, making future refactoring incredibly expensive. WAI-ARIA attributes are already available and ready to use, let’s not ignore them.
Gregor Adams
In some contexts it is possible to build an HTML page with a minimum of functionality without JavaScript, Gregor shows us in his presentation how to create elements that follow a logic with CSS only, in this case an instrument to draw with colors similar to paint.
Guido Boman
Similarly to Gregor, Guido has exposed how to achieve a parallax effect without JavaScript using a smart combination of CSS three-dimensional properties, a technique he learned from an article by Keith Clark.
Hugo Giraudel
In his presentation entitled Keep calm and write Sass Hugo has focused on the auxiliary role that SASS plays in CSS development, which should not monopolize the mind of the developer leading to write the entire style sheet only with SASS syntax.
Also like Kaelig he wanted to focus on the importance of collaboration when it comes to defining names for mixin and functions, and how writing self-explanatory names helps developers who collaborate on a project to have a greater understanding of the codebase.
Another key element is the documentation which, even in presence of sufficiently clear function and variable names, helps a lot in the long run to maintain a project that grows over time. He illustrated how SassDoc can help, a project carried out by Hugo that allows to build a web documentation generated by parsing properly formatted comments in SASS, just like JSDoc for JavaScript.
https://speakerdeck.com/hugogiraudel/keep-calm-and-write-sass
Estelle Weyl
Author of several books about FrontEnd development, Estelle has exhibited in her presentation several underused features of CSS, such as the counter property that is useful to enumerate content, and how to overwrite the specificity of the !important keyword by repetiting a same class or using an empty keyframe animation describing the property to be overwritten without the keywork itself.
Nicolas Gallagher
FrontEnd Developer at Twitter, in his presentation Nicolas presented how the UI infrastructure of Twitter was designed by having in mind the scalability of the code so that developers are able to work in a sufficiently independent from each other, avoiding as much as possible useless selectors nesting in such a way that each component can be included in any part of the page without breaking.
Bert Bos
He can be defined as the father of CSS, explaining the main purposes for which CSS was born, Bert exposes some of the challenges that internationalization poses in order to semantically formatting content, highlighting some differences between various human languages in the placement of punctuation for questions, quotes and exclamations.
The purpose of the talk was not to give an absolute solution to the problems exposed but to solicit the audience in taking part to the decision-making process, because the only way to influence the evolution of the tools we use every day is to make our voice heard.
Ana Tudor
Like most of her experiments concerning CSS, Ana was able to surprise us with a highly technical presentation where she outlined how to make arithmetical calculations using Compass to layout a configurable amount of points on a circle, having few known elements then calculating the missing ones with different mathematical formulas.
dotJS
Due to a series of unfortunate events that will be discussed later I could not attend the full conference, however, that much that I was able to see was worth the run.
Held two days later, on November 17 in the even more majestic Théâtre de Paris in an area further north in Rue Blanche, with 900+ spectators, dotJS has had much greater success with sponsors, with WordPress, Zengularity and many other companies that in addition to location financed a remarkable refreshments for the big audience.
The format was identical to dotCSS, with 15-20min for each speaker and up to four presentations in a row, enough to keep high the attention level of the audience, the talks contents ranged between very technical details to inspirational quotes, followed by a short break that this time was a little more difficult to handle due to almost twice the number of spectators.
But again, food aside let’s go the contents.
James Halliday
With a shell projected on the big screen behind him, James did a live demonstration of how to make a web application usable even without connection once downloaded the core content using HTML5 cache and managing the authentication system using the asymmetrical crypto HTML5 API, to allow offline work and then synchronize data on the server as soon as possible.
Everything is shown in its open source project on GitHub called KeyBoot combining these elements.
Charlie Robbins
On the topic of the dependencies jungle for modern web apps, Charlie has exhibited his work of analysis about what are the feedback systems used by the modules authors to interact with their user base, the dev community, and how developers keep updated their dependencies illustrating how the npm outdated command works and how to extract usage statistics about what are the most adopted packages in production.
Justin Meyer
Co-author of various open source JavaScript libraries and currently CEO of Bitovi, Justin explains why the idiomatic expression “best practices” may be synonymous of “checklist“. Taking as an example the incident of the B-52 in 1994 and the fact that the introduction of checklists to control adherence to security protocols before any surgical operation reduced postoperative issues by 50%, he explains how sticking to a simple list of done/not done questions can help to mitigate risks due to trivial oversights. He then formalized his own checklist based on past experience of the projects he worked on, and for each point you can assess the risk factor with the following formula:
(checked/success) + (unchecked/fail) - 1
if the value is less than 0, the choice involves potentially more risks than benefits, if equal to 0 it would be neutral in terms of costs, above 0 would be optimal for the project; for example, user testing have a positive weight of 0.45.
Domenic Denicola
Member of the Chrome developer team, Domenic began his talk with a joke that explains well his project:
When you want to understand something, reimplement it in JavaScript
jsDOM, open source project on GitHub, replicates the structure of the DOM of a web page and makes it accessible for Node.js, without requiring intermediate tools like VM, selenium or phantomJS.
A note that was interesting to learn is how the JavaScript specifications are defined, with WEBIDL standard which is a programming language that is easy to read but can be compiled directly in C ++, a system that Domenic replicated to bring the DOM in Node.
Lightning talks
After the rich lunch break, four presentations have followed related to:
- JSON Web token: an authentication system based on JSON developed by Auth0
- meteorJS: an open source framework for building modern web app in JavaScript that is becoming very popular
- pouchdb: a JavaScript system for quick data storage to be used in single page applications to facilitate states synch while working offline
- npm package quality: an instrument to measure the “quality” npm packages
Julien Lecomte
Team lead of YUI at Yahoo!, Julien started his takl with emphasizing the oxymoron of his job title because in the period in which he joined the company YUI was starting to enter in its deprecation process, he explained what his migration strategy is and how Yahoo! will adopt it in 2015 to abandon the old library to migrate to a much more modular and streamlined modern system.
The new version of this library will be based from the start on ES6, and polyfill CDN will be created in order to serve fixes based on the browser user agent when necessary, using as support library ReactJS.
To prevent the news of the imminent deprecaption from generating panic among the all the FrontEnd developers of the company, leading to a fragmentation determined by the blooming of a constellation of uncoordinated initiatives, Julien created an internal woking group before the formalization of the decision, in order to lead a well thought transition and allow shared decisions for the future of the library.
FormatJS will be the main tool to manage the internationalization of the UI, open source on GitHub and written in ES6, but not all of Yahoo! web apps will use the same stack, for example in the B2B apps Ember will continue to be used.
Angus Croll
Without detracting nothing from the other speakers, for me thethe most interesting talk was Angus one. Making a parallel with classic literature he questioned one of the die hard trends in the field of programming, which is to demonize in alternate periods certain parts of a language by pointing them out as “harmful“, a topic that I covered for CSS table.
Over time JavaScript constructs that are potentially harmful have grown in number, such global variables, the usage of the keyword this , that according all these indications we would end up not being able to write even one line of code.
Instead what literature teaches us is to embrace the whole language, an not to be limited to few default ways, because the best way to learn is by experiencing new things in a playful way.
In exploring this theme Angus wrote his book entitled If Hemingway Wrote JavaScript, a collection of common problems from JavaScript that are resolved with the style of many famous writers referring to their literary works.
Why attending?
Having never attended a conference like this, I did pose this question to myself, in the end I got my anwser by going there.
Within a few months the video footage from the conferences will be available on The dot Post website that will collect all the materials of dotConference organized in Paris, and many of the slides presented on stage are already available online, most of them incorporated in this article, so why pay the price of the conferences in addition to the travel and accommodation expenses?
It may sound like a silly answer, but the key value is exactly to be there, if I was to make an example the difference is like the one between a show at the theater and watching a movie at home. Seeing so many people, who share my same profession, my doubts and my interests, so many in the same place, creates a strong sense of community and sharing.
The information you get while seeing the speaker who juggles live in front of a crowd of people with lights blinding him and several small technical issues (that in the footages that will be posted online will not be present), remain imprinted in a more vivid way in your memory.
A tendency of many, if not all, developers is to pass a very long time, even after work, studying new frameworks or programming languages to be constantly updated, forgetting to devote sufficient time to “offline” activities or simply rest. For a person that is unaccustomed to travel abroad, not used to schedule visits to museums and monuments, this can be a good way to take a break, but not too much.
Also the best way to get the most out of this type of events, where many programmers from different companies gather together, is to network, meet people. In reality it is a more difficult goal than it seems because:
- Participants usually come from different countries thus speak different languages
- Approaching strangers can make you feel intrusive, especially if you’re an introvert type, like me
Putting together these problems of character and language, some of which can be resolved with english, it’s easy enough that each “travel group” interacts only with itself. To better prepare the ground it may be worth trying to catch people on social networks where these conferences gets advertised, generally on twitter, in order to “plan” in advance to meet some of the developers attending the conference where you will go.
The cost factor clearly cannot be ignored, a conference in a foreign country that requires flight and hotel is clearly a major expense, but technology conferences are spreading almost everywhere and it is possible that such meetings are being held in places right within your reach by train from your home, in fact most of the audience at dotCSS and dotJS was from Paris and surrounding cities.
A site to visit to look for affordable conferences in terms of distance/cost is Lanyrd.com where you can filter by different criterias ranging from topics covered, date an location.
The bummer™
About the series of unfortunate events that led to my late arrival to the conference, the facts went as follows:
Returned to the hotel 15th evening after a full day out walking to visit the city, dead in the bed at 21 o’clock.
Waking in the morning 16th : wallet 404 not found, and with it my ID card, credit cards, airplane and dotJS tickets for the next day, probably “lost” on the way to the hotel the night before.
Phoned my bank callcenter to block and reissue all cards, went to the reception to print the copy of my ID made upon checkin and the plane and conference tickets, holy Google Drive.
First stop to the French police, with the help of my colleague Claudio (third from the bottom near me) who does not hesitate an instant to lend me a large sum to cope with the disappearance of my cards and cash, we went to make the loss report with which then I could make the request of the temporary boarding paper, the cop writes down the address of the embassy, which will be open only Monday (day of the conference).
Monday 17th, I wake up early to make a stop at the Italian embassy, an imposing building with tall gates, only to find that they perform only political/institutional tasks, it seems that the police often make confusion between embassy and consulate, it’s 8:10, the conference will start at 9 o’clock and I have to go across the other side of the town, I fear that the I’ll have to skip the conference, my return flight is scheduled at 18 from Orly airport.
Headlong rush to make three lines changes of subway to reach the Italian consulate, which seems an old school during election period used as a polling office, where a doppelganger of Lino Banfi barks at me from behind a soundproof gatehouse, ordering me to leave out my hand luggage, in a courtyard with open gate without any apparent surveillance. Puzzled and confused I obey just to not create unnecessary angst, he hands me a form to fill out, I ask if I can have a pen but he beckons me to come so I enter.
Past the booth I’m inside what looks like a rather small post office with five windows, a few chairs and really short queue, I’m confident to make it in time. I get back to Lino to ask again kindly for a pen to fill the form, answer: “Whad ya want? Ah pen? You could v’asked it eh!”.
As I divert all of my mental energy on keeping up the pieces of my courtesy mask forthcoming to crumble to pieces, I draw a bright smile on my face as he hands me gruffly that damn pen, compile the form and I start waiting, I did it, I stayed polite, didn’t rage quit.
In just a few minutes I am called to a window, but a step away from completing the coveted paper for boarding the teller stops because he noticed that the company for the in and back flights is the same and EasyJet made international agreements that in case of theft/loss of ID the loss report made to the police is enough to board. I stated that while talking on the phone the day before with the customer care of EasyJet I had been advised that it is at the discretion of the airport to accept the passenger with only the loss report while for mathematical certainty of boarding I’d need that pass, but the teller does not want to give it to me.
Doubtful and worried about what will happen to the gate I look at the watch, it’s 9:35, if I run I can still make it to the conference, another race with the trolley to get back in the subway, arrived at the Théâtre de Paris, it’s 10:10, conference saved 🙂
After attending the talks discussed above, I had to flee heading to Orly for the return flight, passed all the security checks with only the loss report in my hand I finally arrived at the gate, it’s the moment to discover the truth, I ask if there is any problem … and there is none, I managed to kiss Fiumicino’s airstrip at 20:30.
How to avoid being stranded abroad
As usual life first gives you the test so you learn the lesson as you take the hit, what follows is the lesson I learned “the hard way” on how not to remain blocked abroad when things get bad:
Do not carry your wallet, phone or other highly sensitive objects in the back pockets of your pants, always and only carry them in the inside pockets of your jacket or other place that is not easily accessible by intrusive hands. Five years in Rome never happened a thing, five days in Paris and my wallet didn’t make it …
Keep in the wallet only the essential, an identity document, a debit card and some cash, everything else should remain either at home before departure or in your suitcase at the hotel.
In your suitecase there must be at least a second debit card and a second valid ID.
If you used for boarding your identity card then carry with you the passport and viceversa, so that if it manages to get “lost” you’d still retain the document you signed for your airfare ticket so you can return safely, same goes for the cards, and both of them must be two prepaid.
Reissuing the card of a bank account is a diabolic procedure and without it you will be unable to perform basic operations such as bank transfers, for withdrawals I must go to the post office with the checkbook linked to my account and make a check to myself to withdraw, as of now after one month of wait my new card is nowhere to be seen.
Last but not least, always check the information you are given even if the source is “authoritative“, a phone call to the embassy would have saved me running like crazy with a trolley the next Monday morning to reach the consulate.
Photos of Paris
Using the two-day gap between the two conferences I had the opportunity to make some nice walks around the city some nice walks around the city, for better or for worse, au revoir Paris!
