--- title: "#291: A Chrome DevTools 'State of the Union' with Paul Irish" publication: "Frontend Focus" issue: 291 published_at: "2017-05-24" canonical_url: "https://frontendfoc.us/issues/291" --- #291: A Chrome DevTools 'State of the Union' with Paul Irish [Read this e-mail on the Web](http://frontendfoc.us/issues/291) Frontend FocusIssue 291 — May 24, 2017[Chrome DevTools: State of the Union 2017 [video\]](https://www.youtube.com/watch?v=PjjlwAvV8Jg)Filmed at Google I/O, Paul Irish runs through new Chrome DevTools features in 41 minutes. Google Chrome Developers [Fluid Responsive Typography with CSS Poly Fluid Sizing](https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/?utm_source=frontendfocus&utm_medium=email)How to create scalable, fluid typography across multiple breakpoints and predefined font sizes using ‘Poly Fluid Sizing’. Jake Wilson [![ForwardJS\](https://copm.s3.amazonaws.com/3097dd5c.jpg)](https://forwardjs.com?utm_source=frontendfocus&utm_medium=email)[ForwardJS Tickets on sale today](https://forwardjs.com?utm_source=frontendfocus&utm_medium=email)Attend full-day hands-on React workshops and dozens of talks at ForwardJS San Francisco this July. ForwardJSSponsor [Better Form Design with One Thing Per Page](https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/?utm_source=frontendfocus&utm_medium=email)Love or hate it, it seems having a checkout or similar process split across multiple pages instead of in one big form works better. Adam Silver [':focus-within': For When An Element or Child Gets Focus](http://www.scottohara.me/blog/2017/05/14/focus-within.html?utm_source=frontendfocus&utm_medium=email)The `:focus-within` property is now supported in a few major browsers and there’s [a polyfill](https://allyjs.io/api/style/focus-within.html) to use for full coverage. Scott O'Hara [What's New in Chrome 60's DevTools](https://developers.google.com/web/updates/2017/05/devtools-release-notes?utm_source=frontendfocus&utm_medium=email)There’s a new ‘Audits’ panel showing quality measurements for various aspects of your page and easier tracking of third party resources. Google Developers [4 CSS Filters For Adjusting Color](http://vanseodesign.com/css/4-css-filters-for-adjusting-color/?utm_source=frontendfocus&utm_medium=email)An easy way to make color adjustments to an element in a non-destructive way. Steven Bradley Jobs [![Supported by Hired.com\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter) - [Senior Front-End Developer at Refuel4 (Singapore)](http://frontenddeveloperjob.com/job/59253614f44e9c0004b81c14?utm_source=frontendfocus&utm_medium=email)Relocation assistance and visa provided. Refuel4 - [Senior Front-End Developer at Series Eight (Remote, Europe)](http://frontenddeveloperjob.com/job/591af2ac31b32e00042d28e4?utm_source=frontendfocus&utm_medium=email) Series Eight Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend) In Brief [Payment Handler API: First Public Working Draft](https://www.w3.org/TR/2017/WD-payment-handler-20170518/?utm_source=frontendfocus&utm_medium=email) news Provides a standard way to initiate payment requests from Web pages. W3C [ActivityStreams 2.0 Now a W3C Recommendation](https://www.w3.org/blog/news/archives/6321?utm_source=frontendfocus&utm_medium=email) news For representing common online social objects, activities, and their relationships. W3C [This is What Microsoft Said About Progressive Web Apps at Build](https://www.thurrott.com/windows/windows-10/116101/microsoft-said-progressive-web-apps-build?utm_source=frontendfocus&utm_medium=email) news Paul Thurrott [$20 Free Credit on a new account.](http://welcome.linode.com/frontendfocus/?utm_source=cooperpress&utm_medium=sponsored&utm_campaign=frontendfocus-sponsored) Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code `HTML520` and get $20 credit. linodeSponsor [The Tools of an HTML Email Workflow](https://css-tricks.com/tools-html-email-workflow/?utm_source=frontendfocus&utm_medium=email) tutorial Chris Coyier [Shape Detection API: Detecting Faces and Text Inside Images](https://deanhume.com/Home/BlogPost/shape-detection-api--detecting-barcodes--faces-and-text-inside-an-image/10158?utm_source=frontendfocus&utm_medium=email) tutorial A look at a new and very experimental API currently only available in Chrome and Opera behind a flag. Dean Hume [Ordered Lists with Unicode Symbols for Bullets](https://css-tricks.com/ordered-lists-unicode-symbols/?utm_source=frontendfocus&utm_medium=email) tutorial Steven Estrella [Some Handy `:nth-child` Recipes as Sass Mixins](https://css-tricks.com/extremely-handy-nth-child-recipes-sass-mixins/?utm_source=frontendfocus&utm_medium=email) tutorial Adam Giese [The Future of Audio and Video on the Web](https://www.youtube.com/watch?v=z9unKFzAj1w) video John Pallett and Francois Beaufort [Monitoring Jank: How We Found The Slowest Parts of Our UI](https://fulcrum.lever.co/monitoring-jank-how-we-found-the-slowest-parts-of-our-ui-b6ffd7386896?utm_source=frontendfocus&utm_medium=email) story Gaining visibility into how an app performs _after_ it has been loaded in the browser. Leighton Wallace [The Making of Freeciv WebGL 3D: An Open Civilization Clone](http://play.freeciv.org/blog/2017/05/the-making-of-freeciv-webgl-3d/?utm_source=frontendfocus&utm_medium=email) story Freeciv [Go Long on Web Components](https://medium.com/@velmu/go-long-on-web-components-b1e0689f64e4?utm_source=frontendfocus&utm_medium=email) opinion Jani Tarvainen [GetImageColors: Get Colors From Your Images](https://www.getimagecolors.com/?utm_source=frontendfocus&utm_medium=email) tools Extract colors and generate CSS, Less, SCSS or Sass variables. Avraam Mavridis [9 Top Animation Libraries for Web UI Designers in 2017](https://www.sitepoint.com/our-top-9-animation-libraries/?utm_source=frontendfocus&utm_medium=email) tools Alex Walker [A Collection of Sublime Text 3 Plugins for Frontend Devs](https://github.com/jfilter/Sublime-Text-Plugins-for-Frontend-Web-Development?utm_source=frontendfocus&utm_medium=email) tools Johannes Filter [SQL Source Control: Track each change to your SQL Server database](http://www.red-gate.com/products/sql-development/sql-source-control/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=track_every_change_v2&utm_campaign=sqlsourcecontrol&utm_term=email-25722) tools Get a full history in your source control system. See who made changes, what they did & why. [See how](http://www.red-gate.com/products/sql-development/sql-source-control/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=track_every_change_v2&utm_campaign=sqlsourcecontrol&utm_term=email-25722). Red GateSponsor [Workbox: Google's Libraries for Progressive Web Apps](https://workboxjs.org/?utm_source=frontendfocus&utm_medium=email) code _“Workbox is a rethink of (Google’s) previous service worker libraries with a focus on modularity.”_ [GitHub repo.](https://github.com/GoogleChrome/workbox) Google [Birdview.js: A UI Experiment to View an Entire Page at Once](http://achrafkassioui.com/birdview/?utm_source=frontendfocus&utm_medium=email) code Fits a visual ‘birds-eye’ overview of a web page into your viewport. Achraf Kassioui [Interactive Dynamic Depth of Field with CSS and JS](https://codepen.io/Trinca/pen/dWejMB?utm_source=frontendfocus&utm_medium=email) demo CodePen [A Water Droplet Effect WebGL Shader](https://codepen.io/stefanweck/pen/Vbgeax?utm_source=frontendfocus&utm_medium=email) demo CodePen Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/). [Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/291) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK