---
title: "HTML 5.2's new dialog element, an updated Speedometer benchmark and changes to Chrome's Autoplay policy"
publication: "Frontend Focus"
issue: 323
published_at: "2018-01-17"
canonical_url: "https://frontendfoc.us/issues/323"
---
HTML 5.2's new dialog element, an updated Speedometer benchmark and changes to Chrome's Autoplay policy
This Week's HTML, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/323)
Frontend FocusIssue 323 — January 17, 2018[How Big Is That Box? Understanding Sizing in CSS Layouts](https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/?utm_source=frontendfocus&utm_medium=email)A great introduction to the concepts around lengths, units, and content-based sizing with layouts based on Grid and Flexbox. Rachel Andrew
[Meet HTML 5.2's New 'dialog' Element](https://keithjgrant.com/posts/2018/meet-the-new-dialog-element/?utm_source=frontendfocus&utm_medium=email)An introduction to HTML’s new `dialog` element for adding native modal boxes. Keith J. Grant
[CSS Reference: A Visual Guide to CSS Properties](http://cssreference.io/?utm_source=frontendfocus&utm_medium=email)A well presented, visual guide to what different CSS properties do. Jeremy Thomas
[](https://welcome.linode.com/frontendfocus/?utm_source=cooperpress&utm_medium=sponsored&utm_campaign=frontendfocus-primary)[Linux Cloud Hosting Starting at 1GB of RAM for $5/mo](https://welcome.linode.com/frontendfocus/?utm_source=cooperpress&utm_medium=sponsored&utm_campaign=frontendfocus-primary)Get a Linode server up and running in seconds. Simply choose your plan, distro and location and you’re ready to deploy your server. Get $20 credit on a new account. Linode Cloud HostingSponsor
[Speedometer 2.0: A Benchmark for Webapp Responsiveness](https://webkit.org/blog/8063/speedometer-2-0-a-benchmark-for-modern-web-app-responsiveness/?utm_source=frontendfocus&utm_medium=email)An update to a benchmark for modern web app responsiveness that simulates user interactions upon a basic app. 2.0 better reflects the frameworks, tools, and patterns in wide use today. WebKit
[Changes to Chrome's Video Autoplay Policy Now Rolling Out](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes?utm_source=frontendfocus&utm_medium=email)Muted autoplay will be fine, but for audio to play some conditions must be met. Only in Chrome Canary for now, but if you use autoplaying videos you need to be prepared. Google Developers
[TOAST UI Editor: A Markdown WYSIWYG Editor for the Web](https://nhnent.github.io/tui.editor/?utm_source=frontendfocus&utm_medium=email)Works with GitHub Flavored Markdown (GFM) but can be extended with your own extensions. Supports all major browsers (IE10+). [GitHub repo.](https://github.com/nhnent/tui.editor) NHN Entertainment
Jobs
- [Senior Developer - React / Node (Boston or remote)](https://maxwell-health.workable.com/jobs/633862?utm_source=frontendfocus&utm_medium=email)Join our fast-growing startup to help people make better health, wellness and financial decisions. Maxwell Health
- [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q3-18)We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. [Join X-Team](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q3-18). X-Team
- [Front-end Dev Jobs at 4,000+ Companies](https://www.vettery.com/tech?utm_medium=cooper-frontendfocus&utm_campaign=ad-1713&utm_source=newsletter&utm_content=grouped&utm_term=tech)Try Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. Vettery
In Brief
[Frontend Developer Love Conference 15-16 Feb Amsterdam ❤️](http://www.frontenddeveloperlove.com/?utm_source=frontendfocus&utm_medium=email) news
Frontend Developer LoveSponsor
[How To Make a Drag-and-Drop File Uploader With Vanilla JavaScript](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/?utm_source=frontendfocus&utm_medium=email) tutorial
Joseph Zimmerman
['display: contents' is Coming](https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/?utm_source=frontendfocus&utm_medium=email) tutorial
Manuel Rego Casasnovas
[Small Tweaks To Make a Huge Impact on Your Site's Accessibility](https://css-tricks.com/small-tweaks-can-make-huge-impact-websites-accessibility/?utm_source=frontendfocus&utm_medium=email) tutorial
CSS Tricks
[Decorative Letter Animations with anime.js and Charming](https://tympanus.net/codrops/2018/01/10/decorative-letter-animations/?utm_source=frontendfocus&utm_medium=email) tutorial
Some fun shape and letter animation experiments.
Mary Lou
[Simplifying the Apple Watch Breathe App Animation with CSS Variables](https://css-tricks.com/simplifying-apple-watch-breathe-app-animation-css-variables/?utm_source=frontendfocus&utm_medium=email) tutorial
This goes amazingly deep on the CSS.
Ana Tudor
[Keeping Users Engaged Through Better Front End Performance](https://pantheon.io/docs/guides/frontend-performance/?utm_medium=Online%20Advertising&utm_source=Front%20End%20Focus&utm_content=Front%20End%20Performance%20Guide&utm_ad_group_name=Brief%20link&utm_campaign=2018%20Front%20End%20Focus) tutorial
PantheonSponsor
[Recording Video and Audio in Browser using the Web Media API](https://www.youtube.com/watch?v=_XF69WYZOSs) video
Tim Ermilov
[Zigzag Image–Text Layouts Make Scanning Less Efficient](https://www.nngroup.com/articles/zigzag-page-layout/?utm_source=frontendfocus&utm_medium=email) opinion
Nielsen Norman Group
[Building a Mind-Controlled HTML5 Video](https://www.castillo.io/blog/mind-controlled-html5-video?utm_source=frontendfocus&utm_medium=email) story
Alex Castillo
[Hey Meta: Website Meta Tag Checker and Builder](http://www.heymeta.com/#?utm_source=frontendfocus&utm_medium=email) tools
A tool to quickly check and (re)build some of your meta tags.
Igor Štumberger
[CSS Cheat Sheet: A Quick Go-To Reference for CSS Goodness](https://adam-marsden.co.uk/css-cheat-sheet/?utm_source=frontendfocus&utm_medium=email) tools
Adam Marsden
[Optimize Web App Performance with Datadog](https://www.datadoghq.com/dg/apm/lpg/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-FrontEndFocusS) tools
Collect and alert on real-time metrics from your web applications and infrastructure. Start a free trial.
DatadogSponsor
[canvas-area: Lightweight HTML Container Element for Canvas Elements](https://github.com/goessner/canvas-area?utm_source=frontendfocus&utm_medium=email) code
Stefan Goessner
[Crooked Style Sheets: How Pure CSS Can Track You on Web Pages](https://github.com/jbtronics/CrookedStyleSheets?utm_source=frontendfocus&utm_medium=email) code
It’s either a tutorial or a warning, depending on your inclination.
Jan Böhmer
[webshot-factory: Web Screenshots at Scale Based on Headless Chrome](https://github.com/ashubham/webshot-factory?utm_source=frontendfocus&utm_medium=email) code
Ashish Shubham
[InfiniteGrid: Arrange Card Elements Infinitely on a Grid Layout](https://naver.github.io/egjs-infinitegrid/?utm_source=frontendfocus&utm_medium=email) code
[GitHub repo](https://github.com/naver/egjs-infinitegrid).
NAVER
[Instagram.css: A Set of Instagram-style Filters Created in Pure CSS](https://picturepan2.github.io/instagram.css/?utm_source=frontendfocus&utm_medium=email) code
Yan Zhu
[CSS Background Patterns Found on CodePen](https://freebiesupply.com/blog/css-background-patterns/?utm_source=frontendfocus&utm_medium=email) code
Freebie Supply
[KaTeX: Fast Math Typesetting for the Web](https://github.com/Khan/KaTeX?utm_source=frontendfocus&utm_medium=email) code
Easy-to-use library for TeX math rendering on the web.
Khan Academy
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/323)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK