HTML 5.2's new dialog element, an updated Speedometer benchmark and changes to Chrome's Autoplay policy

Frontend Focus Issue 323 — January 17, 2018 How Big Is That Box? Understanding Sizing in CSS Layouts 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 An introduction to HTML’s new dialog element for adding native modal boxes. Keith J. Grant CSS Reference: A Visual Guide to CSS Properties A well presented, visual guide to what different CSS properties do. Jeremy Thomas Linux Cloud Hosting Starting at 1GB of RAM for $5/mo 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 Hosting   Sponsor Speedometer 2.0: A Benchmark for Webapp Responsiveness 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 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 Works with GitHub Flavored Markdown (GFM) but can be extended with your own extensions. Supports all major browsers (IE10+). GitHub repo. NHN Entertainment Jobs Senior Developer - React / Node (Boston or remote)Join our fast-growing startup to help people make better health, wellness and financial decisions. Maxwell Health Frontend Developer at X-Team (Remote)We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team. X-Team Front-end Dev Jobs at 4,000+ CompaniesTry 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 ❤️ news Frontend Developer Love  Sponsor How To Make a Drag-and-Drop File Uploader With Vanilla JavaScript tutorial Joseph Zimmerman 'display: contents' is Coming tutorial Manuel Rego Casasnovas Small Tweaks To Make a Huge Impact on Your Site's Accessibility tutorial CSS Tricks Decorative Letter Animations with anime.js and Charming tutorial Some fun shape and letter animation experiments. Mary Lou Simplifying the Apple Watch Breathe App Animation with CSS Variables tutorial This goes amazingly deep on the CSS. Ana Tudor Keeping Users Engaged Through Better Front End Performance tutorial Pantheon  Sponsor Recording Video and Audio in Browser using the Web Media API video Tim Ermilov Zigzag Image–Text Layouts Make Scanning Less Efficient opinion Nielsen Norman Group Building a Mind-Controlled HTML5 Video story Alex Castillo Hey Meta: Website Meta Tag Checker and Builder 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 tools Adam Marsden Optimize Web App Performance with Datadog tools Collect and alert on real-time metrics from your web applications and infrastructure. Start a free trial. Datadog  Sponsor canvas-area: Lightweight HTML Container Element for Canvas Elements code Stefan Goessner Crooked Style Sheets: How Pure CSS Can Track You on Web Pages 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 code Ashish Shubham InfiniteGrid: Arrange Card Elements Infinitely on a Grid Layout code GitHub repo. NAVER Instagram.css: A Set of Instagram-style Filters Created in Pure CSS code Yan Zhu CSS Background Patterns Found on CodePen code Freebie Supply KaTeX: Fast Math Typesetting for the Web code Easy-to-use library for TeX math rendering on the web. Khan Academy

by via Frontend Focus