Few months ago I found an information about a „3-day conference for web and mobile developers to discover the latest trends, technologies, and ideas in front-end development”. Than I checked speakers' list and was very impressed. I told Michał about it. He said somtehing like: „Yes, it looks nice, maybe we will go”. I almost forgot about it and than one day he asked my via Slack if I want to go. Didn’t have to ask me twice! Front-end conference? Yes, please!
One of the biggest advantage of Front-Trends was the fact that you separated scheduled talks into few thematic groups. For me it meant that organizers knew what they wanted to show. And apparently this is not so obvious when you check other conferences - even not tech related. I have a strong humanistic background and had attended a lots of conferences related to various topics. Sometimes it’s really hard to say what’s the main idea, especially when you watch another lecture that has nothing to do with the conference title. But going back to Front-Trends, I divided Front-Trends program into few groups and want to write a little bit about each of them.
For me it was the main topic. There were lots of lectures that were related to accesibilty in various ways.
Trine Falbe in her great speech „Designing web interfaces for kids” was talking about the way kids use interfaces differ from adult interaction patterns and what that means for web developers and designers. You can see a lots o children playing with their parents' tablets or mobile phones these days. I remember how funny it was to watch my cousins’ daughter trying to slide a tv screen. For her it was natural that you can change image on the screen with simple swipe. Kids younger than 7 years are mostly using tablets. At 10 years they can operate interfaces like web browser. After 12 years old we can say that they act like adults, but they ability of abstract thinking is still very low. Trine create guideline on how to design web interfaces for kids:
1. Simple data entry ( motor skills are not fully development until the age of 10) 2. Use buttons not text links for navigation 3. Use icons and images (icons should be very similar to real world) 4. Don’t reposition key navigation 5 Use voice-over sound for small kids 6.Search: use auto complete and visual search for small kids 7. Design for social.( kids like to play together with others. ) 8. Provide instructions on demand 9. Design for play 10. Test
In my opinion her presentation was definitely one of the best. And do you know that loading spinners don’t irritate kids? They will just start doing something else, instead of watching the screen – totally different than adults.
Shaun Dunne in his speech said
accessibility === usability. As he stressed out by quoting wiki definition,
accessibility means that ALL users have equal access to information and functionality. I really like the idea, that instead of thinking offline-first or mobile-first, we should always think accessibility-first. Apparently, it’s not so hard! Shaun showed some simple tricks, that we can use in our workflow to make our pages more accessible by people with disabilities (or keyboard-only-vim-users:) You can find them in his blog post and presentation he published just after speech. It is really worth reading. Shaun last „tip” was to speak more about accessibility - I totally agree. We should finally start thinking about accessibility as a normal thing, not a special feature.
This idea got even clearer to me after Leonie Watson presentation about Accessible Rich Internet Applications (ARIA) and Accessibility APIs. In her lecture she showed how important it is for people that use screen readers and others assistive technologies, to have interfaces that are accessible. She also spoke about technologies, which can help us to create that kind of interfaces, without compromising on functionality or design. After presentation like that you will think twice before using
<span> instead of
<button>. And it’s so great that using accessibility technics makes your code cleaner in semantic meaning.
Peter had familiar idea - he wants to make development workflow simple by creating tool that will make web developers work faster. Marco Cedaro funny speech (with zombie content) was more about writing clean code, but still clean code means that it could be well understood by other people, also newcomers. He gave 3 simple tips:
1. code should be appealing, 2. code should talk to you (don’t use comments as an excuse to write bad code), 3. code should have personal boundaries.
Zach Saucier's talk about animation was also strongly connected to accessibility and maybe even more with UX. What I really liked about his presentation was the fact that he showed real life examples of bad and good animation usage. He talked about animation principles and how to achieve them. Basically we really don’t need animation in every single page element and adding animation only for meaningless effect is really bad idea. We should always think about user and try not to distract him. That means also, that your animations should be well coded and loaded fast. You don’t really want the user to search for panic button :)
How cool is CSS
If you are a fan of CSS (as I am), you should probably add Mark Robbins and Gregor Adams codepens into your bookmarks. Maybe you did it already? I absolutely love people who show me amazing things done only with css. It’s not even important if you can use this knowledge in your everyday projects – what matters is they can be done purely in CSS.
Another CSS passionate, Gregor Adams talked about his CSS fractal art experiments and showed step-by-step guide on how to start making them. The effect is great, you should check his codepen to see how complicated structure you can build only with css. You can even connect these fractals to webAudio API to create music generated visualizations, which is cool:)
How web (or browser) can be used
We all know how web browsers are complex these days. Actually you can only use web apps and get ride of all desktop application (if you really want.) The last group of speakers was trying to show what we can do with browsers APIs or how we can connect browsers with some cool hardware.
Phil Nash, developer working for Twilio, talked about WebRTC (Real-Time Communications). In his presentation he showed how easy it is to create real-time audio/video connection between browsers using WebRTC APIs. Twilio makes it even simpler - you need only few lines of code, and their infrastructure will do rest for you. It’s really impressive!
Felix Palmer in his presentation showed how WebGL could be used to manipulate 2D graphics by creating a simple image editing application. After short introduction to webGL basics and creating basic structure, he showed how easy we could manipulate images by passing data into program using uniforms and attributes. Basically you can rotate image, swap color channels and do some warpings. No wonder he called his program Photoshop built with JS and WebGL.
Conference started and ended with Tim Pietrusky NERD DISCO. What is Nerd Disco - you might ask - Well basically it provides music visualization in the browser using Web Audio API, html canvas and in the same time on the LEDs (utilizing NeoPixel created by Adafruit). Tims’ idea is to communicate browser with LEDs using node.js, socket.io and Fadecandy Server (USB-controlled driver for NeoPixels). Each LED has its pixels group on canvas, so when the canvas change color so does the LED connected with it. The colors are generated with js script, which use Web Audio API to read music frequencies. You should definitely watch youtube video from jsconf 2014 to see the effects of his experiment (or our video bellow, sorry for poor quality).
NerdDisco (Tim Pierrusky) and Glenn Maddern prepared something extra too:) Front-TrendsPosted by Visuality on Saturday, 9 May 2015
To sum up - Front Trends was really fun. It took place in a beautiful venue - Fabryka Trzciny is perfect for this kind of conferences. Did I mention that food was absolutely amazing ? Who needs more? See you next year☺