---
title: "Boosting front-end perf, The IFRAME element, Using CSS feature queries"
publication: "Frontend Focus"
issue: 254
published_at: "2016-08-24"
canonical_url: "https://frontendfoc.us/issues/254"
---

Boosting front-end perf, The IFRAME element, Using CSS feature queries

[Read this e-mail on the Web](http://frontendfoc.us/issues/254)

Frontend FocusIssue 254 — August 24, 2016[A Case Study on Boosting Front-End Performance](https://css-tricks.com/case-study-boosting-front-end-performance/?utm_source=frontendfocus&utm_medium=email)Declan Rek shares real-world advice on boosting front-end performance from static site generation and the `picture` element to lazy loading CSS and caching. CSS Tricks 
[A 40 Minute Deep Dive Into the IFRAME Element](https://vimeo.com/177103832?utm_source=frontendfocus&utm_medium=email)How IFRAMEs are used, where they came from, and what the specs have to say. Peter van der Zee 
[Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/?utm_source=frontendfocus&utm_medium=email)Using `@supports`, you can include a small test in your CSS for whether or not a particular CSS property or value is supported and apply styles conditionally. Jen Simmons 
[![Frontend Masters\](https://copm.s3.amazonaws.com/f29c4bef.png)](https://frontendmasters.com/courses/react-intro/?utm_source=frontendfocus&utm_medium=email)[New Course: Complete Intro to React (feat. Redux & Router)](https://frontendmasters.com/courses/react-intro/?utm_source=frontendfocus&utm_medium=email)Brian Holt (Netflix) introduces you to React plus surrounding ecosystem including: Redux for state management, React Router for navigation and more! Frontend MastersSponsor
[How To Use WebPageTest and its API](https://css-tricks.com/use-webpagetest-api/?utm_source=frontendfocus&utm_medium=email)A handy tutorial digging into [WebPageTest](https://www.webpagetest.org/), a site speed test tool, its RESTful API, and how to use it to optimize your own sites. Eduardo Bouças 
[8 Clever Tricks with CSS Functions](https://www.sitepoint.com/8-clever-tricks-with-css-functions/?utm_source=frontendfocus&utm_medium=email)Some neat tricks you can use today in CSS, from fancy CSS animations and a frosted glass effect, to using `calc()` for grids and aligning with `position:fixed` items. Anselm Urban 
[Flexible Typography Formula with CSS Locks](http://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/?utm_source=frontendfocus&utm_medium=email)Adobe Typekit’s Head of Typography shares some interesting ideas on dynamically calculating typography variables (e.g. font size or line heights) independent of media query breakpoints. Tim Brown 
[An Introduction to CSS Grid's 'fr' Unit](https://www.youtube.com/watch?v=emPrqS3e_nE)A quick 2 minute video intro to a new unit in the CSS Grid Layout Module - the ‘fr’ unit which represents a fraction of the available space. Rachel Andrew 


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)

- [29 Front End Developer Jobs](http://frontenddeveloperjob.com/?utm_source=frontendfocus&utm_medium=email)Our free front-end developer job site currently including frontend jobs from as far afield as Zurich and Malaysia to London and Silicon Valley. Cooper Press
- [Stop Applying to Jobs - Let Companies Come To You](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_campaign=q3-16-frontendfocus)On Hired, engineers typically get 5+ job offers in 1 week. Find that new opportunity you've been craving and get access to 4,000+ companies instantly. Hired.com

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

[Flash Is Dying in December: Long Live HTML5 Video Player](http://blog.peer5.com/flash-is-dying-in-december-long-live-html5-video-player/?utm_source=frontendfocus&utm_medium=email) news 
_“TL;DR: if you play HLS, it’s time to add MSE playback.”_
Hadar Weiss

[Micropub is Now a W3C Candidate Recommendation](https://aaronparecki.com/2016/08/23/2/micropub-cr?utm_source=frontendfocus&utm_medium=email) news
Aaron Parecki

[Polymer Summit 2016 Arrives in London on 17-18 October 2016](https://www.polymer-project.org/summit?utm_source=frontendfocus&utm_medium=email) news 
Join the second Polymer Summit at Tobacco Dock, London for two full days of talks, codelabs, and breakout sessions from the Polymer team and major companies using Polymer and web components in production.
Google, Inc.Sponsor

[Using CSS3 Counters for Figure and Table Numbering](https://olivierpieters.be/blog/2016/08/23/using-css3-counters-for-figure-table-and-numbering.html?utm_source=frontendfocus&utm_medium=email) tutorial
Olivier Pieters

[A Few HTML Tips](https://hacks.mozilla.org/2016/08/a-few-html-tips/?utm_source=frontendfocus&utm_medium=email) tutorial
Mozilla Hacks

[Bootstrapping Progressive Web Apps with amp-install-serviceworker](https://mobiforge.com/design-development/bootstrapping-progressive-web-apps-with-amp-install-serviceworker?utm_source=frontendfocus&utm_medium=email) tutorial 
How to build a seamless bridge between AMP pages and Progressive Web Apps with [amp-install-serviceworker](https://github.com/ampproject/amphtml/blob/master/extensions/amp-install-serviceworker/amp-install-serviceworker.md).
Ruadhán O'Donoghue

[How to Use the Module Pattern in your SCSS/Sass Stylesheets](https://medium.com/@marcmintel/how-to-use-the-module-pattern-in-your-scss-sass-stylesheets-89fe38a6e1f3?utm_source=frontendfocus&utm_medium=email) tutorial
Marc Mintel

[`font-display` for The Masses](https://css-tricks.com/font-display-masses/?utm_source=frontendfocus&utm_medium=email) tutorial 
`font-display` is a new CSS property for controlling how Web fonts display.
CSS Tricks

[Auditing the US Presidential Candidates Websites for Accessibility](https://www.lullabot.com/articles/auditing-presidential-websites-for-accessibility?utm_source=frontendfocus&utm_medium=email) story 
An accessibility audit on Hillary Clinton’s and Donald Trump’s campaign sites.
Helena Zubkow and Mike Herchel

[Offline Content with Service Workers](https://madebymike.com.au/writing/service-workers/?utm_source=frontendfocus&utm_medium=email) story 
A look down the ‘deep rabbit hole’ of how powerful and versatile service workers are for delivering offline content.
Mike Riethmuller

[Building a Web Audio Experiment: Detecting Piano Notes](https://medium.com/@david.gilbertson/a-web-audio-experiment-666743e16679?utm_source=frontendfocus&utm_medium=email) story demo
David Gilbertson

[Headings and Semantic Structure for Accessible Web Pages](https://egghead.io/lessons/html-5-headings-and-semantic-structure-for-accessible-web-pages?utm_source=frontendfocus&utm_medium=email) video
Marcy Sutton

[Getting Started with CSS Transitions (a very simple 2 minute video)](https://channel9.msdn.com/Blogs/One-Dev-Minute/Getting-Started-with-CSS-Transitions?utm_source=frontendfocus&utm_medium=email) video
Channel 9

[Photoshop Etiquette For Responsive Web Design](https://www.smashingmagazine.com/2016/08/photoshop-etiquette-for-responsive-web-design/?utm_source=frontendfocus&utm_medium=email) opinion
Dan Rose

[Lightning fast SSD hosts for your HTML5 project](https://welcome.linode.com/html5-weekly/?utm_source=cooperpress&utm_medium=sponsored&utm_term=html5&utm_campaign=html5-weekly) tools 
Host your HTML5 site on Linode servers - the fastest VPS hosts available. Use promo code `HTML520` for $20 credit.
LinodeSponsor

[Surfingkeys: Expand Your Browser with JavaScript + Keyboard](https://github.com/brookhong/Surfingkeys?utm_source=frontendfocus&utm_medium=email) tools 
Write JS to do things in the browser when triggered by the keyboard.
Brook Hong

[25 Essential Chrome Extensions for Web Designers](https://envato.com/blog/chrome-extensions-web-design/?utm_source=frontendfocus&utm_medium=email) tools 
A good round-up of tools for devs and designers.
Paul Andrew

[Push.js: JavaScript Notifications for (Almost) Every Browser](http://nickersoft.github.io/push.js/?utm_source=frontendfocus&utm_medium=email) code
Tyler Nickerson

[Animate.js: A Tiny Script to Trigger Animations on Elements When In Viewport](https://github.com/jshjohnson/animate?utm_source=frontendfocus&utm_medium=email) code
Josh Johnson

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/254)

Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK