June 7, 2017 This week’s HTML, CSS and browser tech news — Read this e-mail on the WebFrontEnd Focus Issue 293 — June 7, 2017 Designing Efficient Web Forms: Structure, Inputs, Labels & ActionsUsers can be reluctant to fill out forms, so make the process as easy as possible. Usability testing can help you find out how usable a particular form really is. Nick BabichChrome 59 Released to Stable ChannelHere’s what’s new in Chrome 59, including cross-platform Headless Chrome support (tutorial here) and Image Capture API support. There have also been DevTools updates, including code coverage reports and full-page screenshots. GoogleLeveraging the Web Perf Metrics That Affect User ExperienceA 40-min talk looking at the metrics and platform APIs that enable user-centric performance measurement and how devs can use this data to improve end-user experiences. Shubhie Panicker and Philip WaltonForwardJS Tickets on sale todayAttend full-day hands-on React workshops and dozens of talks at ForwardJS San Francisco this July. ForwardJS SponsorThe State of CSS: 5 Things You Don’t Need Anymore?Five supposedly ‘old-fashioned’ CSS practices that you may not need anymore (like using floats or grid libraries) and what you can use instead. Ryan OglesbySafari 11 To Introduce WebRTC and WebAssembly SupportAt this week’s WWDC, Apple announced support for WebRTC in Safari 11 on both desktop and iOS, as well as improved perf metrics tools and WebAssembly support. AppleFun with Viewport UnitsViewport units (e.g. vw, vh, vmin, vmax) have been around for a while, and are well supported. Here’s a look at various uses for them. CSS TricksHow CSS’s New minmax() Function WorksIntroduced with the CSS Grid Layout Spec, the minmax() function “opens the door to us being able to write much more powerful and succinct CSS”. Ire AderinokunAsync Cookies ExplainedThe Chromium team have expressed an intent to implement an asynchronous cookie API, which is particularly useful for Service Workers. Benjamin C. Wiley SittlerJobs Full-Stack Developer @ Workday (San Francisco)Build interactive video learning tools used by the world’s largest companies. Work with kind people in TypeScript (browser/Node). Apply here. Workday Principal Front End Engineer at Mondo Robot (Boulder, Colorado)We’re seeking an engineer to take ownership of big opportunities, set standards and be a mentor to junior members of the team. Mondo robot Front End DeveloperBooking.com is looking for Front End Developers all around the globe to join us at our beautiful headquarters in Amsterdam. Booking.comCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefTracking Prevention Coming to Safari news Safari to reduce cross-site tracking by limiting cookies and more.John WilanderWake Lock API: An API to Let Webapps Keep a Device Awake newsW3CWhat’s The Stuff at the Top of an SVG? tutorialPeter NowellBeautifully Animate Points with WebGL and regl tutorial How to draw and smoothly animate 100,000 points in the browser.Peter BeshaiHow to Build Web Form Layouts With CSS Grid tutorialAhmad ShadeedLocally Scoped CSS Variables: What, How, and Why tutorial CSS Variables are super powerful, and scoping them locally makes them an even more powerful tool for clean, modular design systems.Una KravetsNon-Linear Interpolation in CSS tutorialMike RiethmullerAn Intro to Web Components (with Otters) tutorial An introduction for absolute beginners.Monica DinculescuLearn Flexbox in 10 Minutes tutorialJustin YekMasking vs. Clipping: When to Use Each tutorialSarah DrasnerWhy IT Consulting and Developer Services Companies Love Compose opinion Software firms and app developers love using Compose to manage data for their clients – find out why.Compose SponsorDesigner vs. Developer #1: Creating a Collaborative Environment video Mustafa Kurtuldu (a designer) speaks to developer Jake Archibald about communication and the assumption that designers and developers sole role is to either make things look pretty or to be a cog in a machine with no soul.Google Chrome DevelopersSandcat: A Lightweight Multi-tabbed Web Browser tools Features include live HTTP headers, an extensible command line console and more.Felipe Daragonsvgi: An SVG Inspection Tool toolsÁngel M Migueltaxi-rank: A JSDom-Based Selenium Webdriver API code Uses Zombie under the hood.Forbes LindesayLQIP-Loader: Low Quality Image Placeholders (LQIP) for Webpack codeZouhir Chahoud$20 Free Credit on a new account. Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.linode SponsorCurated by Peter Cooper and Chris Brandrick and published by Cooperpress.Stop getting FrontEnd Focus : Change email address : Read this issue on the WebCooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK Source link