We look forward to receiving your signal!
Frontend Conference Zurich 2013: new technology and innovations
The Frontend Conference Zurich 2013 offered interesting new approaches on both design and technology. A recap of the highlights of the technology-oriented talks.
Innovative new technologies and improvements
From the 29th to the 30th of August, the third edition of the Frontend Conference Zurich took place. The presentations were grouped into two streams of talks: one focussing on design, the other on technology.
Further useful tools are Require, which can automatically load dependencies in the right order, as well as Component or Bower, which automatically update third-party libraries, making it easy to check that all your dependencies are still up to date.
Roger Dudler - Building the Web in 2018
Roger Dudler held a visionary talk about the future of web design, daring to muse what our work might look like in five years. “Today, everyone expects everything to be up-to-date everywhere.” So where are we heading from here?
In-browser design is already a hot topic today. Tools like Webflow or Divshot allow us to depart from Photoshop and explore new approaches. While it might not yet be applicable to large, complex projects, it is certainly an interesting approach for small websites. But it is not just the design that’s moving into the browser, in-browser development might soon become reality as well. Examples like Trivid, allowing you to create 3D models directly in the browser, show that we can already create comprehensive applications in the browser.
Regarding backends, there seems to be a tendency towards the abstraction of backends. Firebase, offering a real-time scalable backend, and Parse, offering a similar service focused on mobile, enable you to focus solely on your application while they take care of the complete infrastructure. This shows that in the future, we might not have a backend any more, or have backend as a services provided by another party.
Another trend are web components, which allow us to handle modules and components in the web more easily and give us more freedom regarding visual richness and interactivity. Roger mentioned the Polymer project, a library based on web components which enables you to get to know and test web components, as well as Brick, a bundle of reusable UI components which enable quick and flexible building of HTML5 applications.
Roger further envisioned the future of screens. In a few years, we may have gone beyond single-screen devices and design for instance for smart phones whose sides are used as a secondary screen, where additional, secondary information could be presented. Furthermore, it is likely that our screens will be interconnected, so when using one device, additional information will be displayed other devices which are around: For example, whilst watching television, your smart phone would automatically display background information on the programme you’re watching.
The great challenge ahead of us is to find out how we can prepare ourselves for these coming trends. At the moment, this means that we need to deal with the constantly rising variety of devices. Thankfully, there seem to be promising tools out there, and in the meantime, we can prepare ourselves by keeping up to date. Kickstarter, the world’s largest funding platform for creative projects, is a great source of inspiration. Web and Mobile TRENDS 2013 is another great resource for keeping up with trends. Furthermore, we need to look beyound our product and observe what is happens around them. Read, learn, experiment, use, teach – with your own ideas and actions, you can help build the future!
Rodney Rehm – Coping With The Broken Web
As the web is growing rapidly, we constantly face the challenge of new proposals, specifications and implementations. Browser differences are growing rapidly, as are the inconsistencies between the different browsers. We make assumptions, but we have to make sure that we check those thoroughly and in advance, especially if we are dealing with new specifications.
To figure out if our solutions are holding, we need tests. You could use any testing framework, Rodney recommends using testharness.js, W3C’s framework. To aggregate the collected data, he proposes Firebase. It is of course always of benefit to use real devices for testing, but you can also draw back on virtual machines like BrowserStack if needed.
While we are facing many problems with the web today, there is also hope: We are not alone. WebPlatform.org is an open community of developers who build resources for a better web. Sauce Labs is another interesting reference, offering cloud-based testing tools. And Test the Web Forward is an initiative to make the web better involving the community in web standards. The movement aims to move the web forward with better tests: The tests contributed are run by W3C and browser vendors. The web may not always behave the way you want it to and appear to be broken, but you yourself can get involved and change it!
Getting rid of Images using CSS3
Images may be pretty, but they are quite inflexible and HTTP-heavy. Back in the days, they were our only option for creating shadows, round corners or gradients. There was also a lack of fonts, meaning that we had to use image replacements techniques like SiFR and Cufòn instead. Thankfully, we now have new tools and features which make live easier.
With SVG, Web Fonts, CSS3 and the like we have the option to move away from images and towards the browser, which allows us to create scalable, flexible assets. Web Fonts enables us to include whichever font we want on our website. SVG, allowing you to create vector images using markup, is a further new option. Gradients, multiple background, border-images and shadows are just some of the possibilities which no longer require images, and to put the cherry on top, we mostly have great cross-browser support with these new approaches.
CSS3 gives us further new ways of dealing with images and visuals. We can create fragments of images, use filters on them, blend modes – all without actually having to change the original image. We obviously cannot do anything yet, but it appears to be very likely that even things like masks can be done with a simple CSS declaration in the future. Other than images, this way of dealing with visuals allows us to create responsive solutions which can be scaled according to the accessing device and gives us the opportunity to guarantee great experiences everywhere.