Video recording and production done by CSSConf
You've learned the concepts, now meet the tools. High-performance sites need to feel instant and deliver the goods in < 1000ms. In this talk, learn about the bleeding edge tools that can automate keeping your CSS on the fast path. Automate generating critical-path CSS, removing unused CSS, discovering duplicate selectors, colors and more.
Along the way, we might even optimize a well known conference site and send them a pull request to help keep the web fast ;) The tools we'll discuss can be used with Grunt, Gulp, Make or horse so strap yourself in and get ready for a ride into the crazier side of CSS performance optimization.
For a website to feel instant, a perceptible response to user input must be provided within hundreds of milliseconds.
This perceived speed of your website relies heavily on the browser being able to paint to your user's screen. For this they must construct a "render tree" which consists of the DOM and the often forgotten CSSOM. The critical path which the browser takes to gather this information is the only thing standing between your server and the user's screen.
Using new research and real world examples, Patrick will cover a range of techniques – from the controversial to bleeding edge – the Guardian are using to make their next generation website load as fast as possible, and ultimately breaking the news to the user within 1000ms.
During the talk you will discover why performance matters, what are the common performance bottlenecks in the browser from networking to painting and learn how to best optimise and monitor each stage of the critical path to create fast, jank free websites.
Product design and development can cover a range of devices and platforms: iPhone, iPad, Android phones and tablets, responsive web applications and web sites, desktop apps, and web-based prototypes… and if you work in a very large organization, you may have a range of products and features to add several variations or themes within each of these areas.
In order to stay productive and effective across teams, platforms, and devices, systemic design and development is imperative. UI Libraries and Style Guides are a great step towards keeping everything aligned. But how can this style guide be a maintainable, useful resource rather than a distraction?
Learn from a product designer's perspective from past and current projects ranging from small teams to large enterprise teams — how she and her teams have strived to maintain a "single source of truth" for a truly living spec through a living style guide and prototype — all of which can improve your product design and development lifecycle.
Rachel Andrew is a CSS Grid Layout module superfan. It's the layout method she’s been waiting for ever since she started dabbling in CSS for layout in the late 90s. Having tracked development of the module from the early days of the IE10 implementation, she is very excited to see it come to life in Chrome. In this talk Rachel will show you how Grid Layout works, and explain why you should become a fan of Grid Layout too.
As creatives we struggle with fair amount of self-doubt. How do we free ourselves from relying on external validation of our efforts? How do we fight impostor syndrome and confirmation bias? How do we prevent ourselves from falling into the burnout and depression pit, or more importantly how do we recover?
Lessons learned on cutting yourself some slack and surrounding yourself with people who will empower you to do so.
Google I/O 2014 featured an amazing experiment exploring the microscopic and macroscopic breakthroughs in technology, with the experiment itself being a CSS marvel. Built with CSS and CSS3DRenderer instead of WebGL or canvas, the complex 3D world works on mobile just as well as desktop, making it an experience anyone can enjoy. In his talk John Brown will tell you about how he and his team at Instrument built a framework to make SVGs move like origami, how they overcame 3D z-index issues (both in spec and out of spec), and show you the pitfalls and triumphs of working with CSS3D, Three.js, and motion.
In his talk Mathias will showcase a series of obscure CSS fun facts, such as CSS syntax gimmicks and quirks, weird tricks that involve CSS in one way or another, and security vulnerabilities that are enabled by (ab)using CSS in unexpected ways.
When not working on UNIQLO's upcoming mobile web site, Jed enjoys singing barbershop harmonies, competing in pun contests, and introducing conferences entirely in CSS.
In today’s abundance of CSS pre-processors that make the developer’s life easy, it’s equally important to pay attention to the post-processing. Fixing syntax errors, removing duplications, reducing bytes, and sending the bare minimum you possibly can – these all make a difference in the user experience.
In this session Stoyan will talk about the state of currently available CSS parsers and introduce you to a new modern best-of-breed open-source CSS minifier. He will teach you the details about the process of parsing, understanding and reducing CSS code, as well as how to write code that lends itself to better compression. From key-value parsing to full AST parsing, from delivering BSCSS (browser-specific stylesheets) to writing your own pre/post-processor to add missing or newly proposed CSS features, Stoyan will have your thirst for CSS minifier knowledge covered.
Scalable Vector Graphics, or SVGs, are the new big thing in web design today, and for a good reason. With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances. Since SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.
In her talk Sara will demonstrate how SVGs can be styled with CSS, and how they can be animated using CSS animations and transitions. She will share her knowledge about the gotchas, bugs, and tips to help you get started with CSS and SVGs and to save you moments of frustration as you deal with SVGs using CSS. Sara will cover responsifying SVGs and using CSS media queries with them. Last but not least she will dive into code and walk through it all the way from styling and animating to responsifying SVGs.