Next-generation remote debugging and proper mobile emulation
Updates to the Chrome Developer Tools: UI change, High-resolution JS profiling, Workspaces upgrades
Modern tools can help ease your cross-device testing workflow
Learn how North Kingdom built an immersive multimedia experience optimized for modern mobile browsers.
HTML Imports allows you to include HTML/CSS/JS in other HTML documents.
Allo? Allo?. Welcome to the first issue of the Yeoman monthly digest – a regular round-up of community articles, videos and talks to help you stay on top of what’s new with your favourite man-in-a-hat. We hope you find the articles, videos and updates below helpful!
Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year. What if however, you could automate a lot of this?
In the slides from my FOWA keynote, I walk through a landscape of tools to keep you productive on the front-end. Learn how to iterate faster, get real-time feedback, avoid bugs through tools and incorporate these into a functional developer workflow.
Some key points
Choose tools you’ll use
Front-end tooling has come a long way in the last few years. That said, it’s hard not to think that developing for the web today is awesome without thinking that it’s now more complex.
The key to staying effective is choosing tools you’ll actually use. Spend time analyzing your personal workflow and select those tools that will help you become more effective.
If you have any questions, comments or tooling suggestions you’d like to share, please feel free to let us know in the comments below!
One of the consistent questions I keep fielding over on Stack Overflow is “why doesn’t audio input work?” – to which the answer kept turning out to be “because you’re testing on Android, and we don’t have it hooked up yet.”
Well, I’m happy to announce that the Beta version of Chrome for Android (v31.0.1650+) has support for audio input in Web Audio! Check out my Audio Recorder demo on an Android device with Chrome Beta. We’re still testing it out with all devices; I’ve personally tested on a Nexus 4, a Galaxy S4 and a Nexus 7, but if you run into issues on other devices, please file them.
When I saw the support get checked in, I flipped back through some of the audio input demos I’ve done in the past to find a good demo to show it off. I quickly found that my Audio Recorder demo functioned well on mobile, but it wasn’t really designed for a good user experience on mobile devices.
So, I quickly used the skills I’m teaching in the upcoming Mobile Web Development course to whip it into shape – viewport, media queries, and flexbox to the rescue! Be sure to preregister for the course if you’re interested in taking your web development skills to the mobile world, too!
TL;DR: Old flexbox (display: box) is 2.3x slower than new flexbox (display: flex).
A bit ago, Wilson Page wrote a great article for Smashing Magazine digging into how they brought the Financial Times webapp to life. In the article, Wilson notes:
Wilson's comments were about the original (legacy) flexbox that used
We asked Ojan Vafai, who wrote much of the implementation in WebKit & Blink, about the newer flexbox model and implementation.
To see the difference in numbers, I made a head-to-head comparison of old v new syntax.
Old v New Flexbox Benchmark
Old flexbox: layout costs of ~43.5ms
New flexbox: layout costs of ~18.2ms
Summary: Old is 2.3x slower than new.
What should you do?
When using flexbox, always author for the new stuff: the IE10 tweener syntax and the new updated flexbox that?s in Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+, and Blackberry 10+. In many cases you can do a fallback to the legacy flexbox to pick up some older mobile browsers.
Remember: Tools, not rules
What?s more important is optimizing what matters. Always use the timeline to identify your bottlenecks before spending time optimizing one sort of operation.
In fact, we've connected with Wilson and the Financial Times Labs team and, as a result, improved the Chrome DevTools coverage of layout performance tooling. We'll soon be adding the ability to view the relayout boundary of an element, and Layout events in the timeline are loaded with details of the scope, root, and cost of each layout:
Chrome DevTools can now tell you exactly what typeface is being used to render text.
Font stacks are a funny thing, more of a suggestion than a demand. Because the family you suggest may not be present, you're letting each user's browser handle the fall-through case, pulling something that will work and using that.
As a developer, you want to know what font is actually being used. Here's how it works:
Under Computed Styles, you'll now see a summary of the typeface(s) used for that element. There's a few things to note here:
Enjoy and please leave a comment if you have any feedback.
SEND A COMMENT: