Few days ago (on May 25, 26 and 27), we* attended Frontend United Athens, a conference with a broad focus on web design and development.
Here are our notes and thoughts:
Vitaly Friedman: New Adventures in Responsive Web Design
Vitaly’s talk about responsive web design was amazing!
He started talking about the process of internationalizing a website and how anyone can architect CSS/JS in a codebase with more than 1 languages. The crucial asset, he said, is building “neutral” configurable components which can be easily extended and adjusted.
Vitaly Friedman on stage. Photo source
Then he talked about typography. In order to achieve fluid responsive typography and modular scale with CSS, we can combine the calc() function, viewport units (vw, vh, vmin, vmax) and some maths. In the following CodePen you can see the demonstrated example of such a module (open it up and resize your browser window. It works!), or feel free to read the post over at Smashing Magazine about this technique here.
See the Pen Poly Fluid Sizing using linear equations, viewport units and calc() by Jake Wilson (@jakobud) on CodePen.
“Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.”
Images, on the other hand, make up a large portion of bandwidth payload. Images have to render fast. Techniques like blurring unimportant parts of an image, compression and optimized progression via http/2, delivery networks (cdn) and multiple images in an svg for the same scene, may have a really great impact regarding the users experience!
The more invisible the loading of the asset is, the faster the overall experience feels. By providing the browser some resource hints - in order to prompt and prioritize the download of assets - we can speed up delivery effortlessly , or even render silently in the background. Such hints are
<link rel="preload"> <link rel="prefetch"> <link rel="prerender">
Last but not least, Vitaly talked about design and branding.
“The design process is weird and complicated because it involves people and systems which are often weird and complicated”
- à la Mark Boulton
In order for a website (or even a product) to differentiate from the others, it has to follow a different path. This is more important nowadays, where the vast majority of the websites are based on 3 or 4 layout patterns.
This part of the talk, the most enjoyable in my opinion, was about the art of storytelling on the web.
After shock event (a bit excessive conference site), Volks hotel and Hans Brinker Hostel, were great examples on this. Specifically Hans Brinker Hostel is an amusing example of telling a story and pushing the boundaries: its website reflects the fact that it’s the worst hotel in Amsterdam. At least you know what you’re signing up for!
Hans Brinken hostel website preview: At least you know what you’re signing up for!
Lea Verou: CSS Variables: var(–subtitle);
You may have heard about CSS variables (aka CSS custom properties), but if you thought that they aren’t ready for prime time yet, think again!
In this talk, Lea Verou showed us how CSS variables are much more powerful than static preprocessor variables and can be used today without compromising progressive enhancement.
Furthermore, she talked about several creative tips and tricks in order to take full advantage of them. Definitely, one of the most inspiring talks of the conference!
You can see the slides of the presentation here, or a video of the presentation from 2016 Web Unleashed here.
Rachel Andrew: Start Using CSS Grid Layout Today
Rachel Andrew on stage. Photo source
2017 is the year of the Grid, with the long awaited CSS Grid Layout landing in browsers.
Rachel Andrew is definitely one of the best regarding CSS Grid! In her talk, she demonstrated with practical examples what the grid layout is all about, the basics of how to use it and how to start using it right now - without leaving older browsers out in the cold.
Rachel has a huge collection of resources about Grid. You can see her slides here, the code examples showed here, or if Grid Layout is new to you, here is a super guide for Grid with a lot of examples.
Denys Mishunov: Debugger; for developer
Denys Mishunov on stage. Photo source
Denys talked us about “Debugger for developer”. If you thought that was a talk about development you’re wrong! In fact there are a lot of things that we developers tend to do wrong.
Denys encourage us to set a debugger to ourselves instead of our code, in order to analyse bugs in our day-to-day developer life.
The key problems we have to fight against, according to Deny, are:
In short, to overcome imposter syndrome, you have to embrace your imposterism. To fight burnout try not to work long hours. Lastly if you’re trying so hard to achieve perfectionism, it’s time to stop that and embrace imperfectionism.
Via great graphical stories (which are nicely created by Denys himself), like children’s book, we learned about psychology, neuroscience and work quality and listened about the importance of finding the things that really matter and make us more productive and happy.
You can see the slides of this talk here.
Natalya Shelburne: Art of CSS
Natalya Shelburne on stage. Photo source
The introduction of this talk was about the distinct separation that one is either creative or anybody else. She pointed out the false dichonomy that exists between designers and developers, while stating that anyone can cultivate different ways of thinking.
She then made an introduction to color theory. She prompted us to ask questions like why did I pick this color and matched with another color? Why do we associate bright colors with children?
“Color theory has patterns and information, we don’t code or color in random.”
- Natalya Shelburne.
She concluded with some basic color relationships and a great demo in which she showed us how to mix colors in a progressive manner.
Avraam Mavridis: Webpack: Core Concepts and Advance Topics
The session about Webpack was sold-out. Literally, all of the 110 seats of the amphitheatrical Danaos 2 room were taken. And even there were people sitting at the side-stairs.
Speaker, Avraam Mavridis, seemed to know the subject. He talked mainly about the core webpack concepts (loaders, plugins, input, output, dev-server) and some other technics like code-splitting.
With the integration of webpack still fresh here at Skroutz, the session looked as a great opportunity to familiarize ourselves even more with the tool and discover cool hidden features.
Dan Mall: Should Designers…
…learn to code?
Dan Mall on stage. Photo source
According to Dan, this title should be completed with ‘blank’ - put anything you want there. The answer is probably yes because it’s the same thing as saying, should you be getting better as a human and always trying to learn more things? Absolutely.
So, should designers learn to code? Why not. After all, is not that hard to translate your design documents into code, is it?
Following that, Dan believes that everybody’s daily work can benefit a lot from this in terms of collaboration and speeding up at their workflow. A lot of work that designers do, can be translated to code easier than they actually think. A typical day for a designer could be a new color palette in Sketch or Photoshop. If you think about it, it’s jut a document of some names and values, nothing more.
So, a color palette doesn’t have much of a difference of a JSON file after all, does it?
Bottom line, dear developer, please give 1 minute of your time to explain to your fellow designers what a JSON file is and dear designer, please listen to him. Your life would be much easier.
Dan is the founder of SuperFriendly, a company where he is the only employee! That means he has to work with different freelancers and other small or big teams effectively in order to deliver.
He stated that it’s by far more productive to spend most of your time thinking, writing and whiteboarding before designing anything. The more time you spend on planning, the easier and faster it becomes to actually design.
An effective way of keeping all teams synced, is the RACI matrix. RACI stands for Responsible, Accountable, Consulted and Informative. Splitting tasks like that, you know exactly who is working on what, which role(s) are assigned to each person/team and finally whom you may need to inform about your progress. An example could be the following:
The Responsible is the Doer, the Accountable where you have to take the OK in order to proceed, Consulted might be a person/team which you should have them “in the loop” and finally Informative should be kept in the picture.
Great tips from an inspiring creative director.
We think that Frontend United Athens was a very nice conference with world-class personas of the web design and development world.
The fact that it took place in Athens, Greece, makes us even more happy, since Skroutz’s headquarters are there as well.
As for us, we feel happy about having had the opportunity to attend one more world-class conference.
You can see some photos and leave a quick comment below.
Frontend United Athens 2017. Photo source
Virtual Reality demonstration by Mozilla. Photo source
Mozilla gift. Photo source
Frontend United Athens 2017. Photo source