--- title: "#306: A Guide To Virtual Reality For Web Developers" publication: "Frontend Focus" issue: 306 published_at: "2017-09-06" canonical_url: "https://frontendfoc.us/issues/306" --- #306: A Guide To Virtual Reality For Web Developers This Week's HTML5, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/306) Frontend FocusIssue 306 — September 6, 2017[A Guide To Virtual Reality For Web Developers](https://www.smashingmagazine.com/2017/09/guide-virtual-reality-web-developers/?utm_source=frontendfocus&utm_medium=email)The state of browsers when it comes to virtual reality and a look at the state of implementing VR on the Web using WebVR’s APIs. Ada Rose Edwards [New in Chrome 61: JS Modules and WebUSB Support](https://developers.google.com/web/updates/2017/09/nic61?utm_source=frontendfocus&utm_medium=email)WebUSB allows web apps to access user permitted USB devices. There’s also support for importing JavaScript modules within script tags. Google Developers [Flat UI Elements Attract Less Attention and Cause Uncertainty](https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/?utm_source=frontendfocus&utm_medium=email)A usability study into the use of ‘flat’ elements on the Web, as opposed to buttons and elements with shadows and bevels. Nielsen Norman Group [![Bugsnag\](https://copm.s3.amazonaws.com/69c97747.png)](https://www.bugsnag.com/platforms/javascript/?utm_source=cooperpress&utm_medium=cpc&utm_content=free-trial&utm_campaign=javascript&utm_term=frontend-focus-20170906)[Bugsnag: A Modern Way to Monitor JavaScript Errors 🚀](https://www.bugsnag.com/platforms/javascript/?utm_source=cooperpress&utm_medium=cpc&utm_content=free-trial&utm_campaign=javascript&utm_term=frontend-focus-20170906)Automatically detect and diagnose JavaScript errors impacting your users with Bugsnag. Get instant diagnostic reports, know immediately which errors are worth fixing, and debug in a fraction of the time compared to traditional tools. [Try it free](https://www.bugsnag.com/platforms/javascript/?utm_source=cooperpress&utm_medium=cpc&utm_content=free-trial&utm_campaign=javascript&utm_term=frontend-focus-20170906). BugsnagSponsor [Building a Trello-Style Layout with CSS Grid and Flexbox](https://www.sitepoint.com/building-trello-layout-css-grid-flexbox/?utm_source=frontendfocus&utm_medium=email)Giulio Mainardi shows you how to build a Trello-like layout using new Grid Layout Module features and Flexbox, along with some Sass for efficiency. SitePoint [Yes, That Web Project Should Be a PWA](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa?utm_source=frontendfocus&utm_medium=email).. and here’s why. Most sites can benefit from becoming a PWA — and your users will benefit too. Aaron Gustafson [Introducing 'visualViewport' to Access Viewport Info](https://developers.google.com/web/updates/2017/09/visual-viewport-api?utm_source=frontendfocus&utm_medium=email)The visual viewport API, in draft but now supported by Chrome 61, gives access to details on how the user zooms and scrolls around the page. _A neat little [demo here](https://twitter.com/jaffathecake/status/905404171024814080)._ Google Developers [Form Validation with Web Audio](https://css-tricks.com/form-validation-web-audio/?utm_source=frontendfocus&utm_medium=email)Could audio feedback improve the user experience of filling a form? Ruth John takes a look. CSS Tricks Jobs [![Supported by Hired.com\](https://s3.amazonaws.com/s3.cooperpress.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q3-17-frontend-focus%29&utm_content=newsletter) - [Frontend Developer at X-Team (Remote)](https://x-team.com/frontend-developer/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q1-17)We are 100% remote. We'll work with you 1-on-1 to motivate and fund you to learn, grow and build a legacy. [Join X-Team](https://x-team.com/frontend-developer/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q1-17). X-Team - [Front-end Developers at Devhouse Spindle (Groningen, The Netherlands)](https://wearespindle.com/join-us/?utm_source=frontendfocus&utm_medium=email)Ride your bike to work. Develop awesome projects. We are a holacracy and push each other to develop ourselves as well as our code. Devhouse Spindle - [Senior Developer - React / Node (Sofia, Bulgaria)](https://www.jobs.bg/job/3936067?utm_source=frontendfocus&utm_medium=email)If you’re looking to work in an exciting startup and have the opportunity to define the company culture, check this role out. Automio 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=q3-17-frontend) In Brief [CSS Grid to Ship in Microsoft Edge on October 17](https://twitter.com/gregwhitworth/status/903616284998254595?utm_source=frontendfocus&utm_medium=email) news Greg Whitworth [Typekit Now Serving Web Fonts With No JavaScript Required](https://blog.typekit.com/2017/08/30/css-font-loading/?utm_source=frontendfocus&utm_medium=email) news You can now add fonts to your web site using only CSS. Persa Zula [It’s easy to version control your database alongside your application](http://www.red-gate.com/products/sql-development/sql-source-control/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=version_control_3rd&utm_campaign=sqlsourcecontrol&utm_term=email-25954) Connect your database to your version control system with SQL Source Control and keep track of every change. RedgateSponsor [Prefilling Date Input Fields](https://css-tricks.com/prefilling-date-input/?utm_source=frontendfocus&utm_medium=email) tutorial Chris Coyier [A Very Basic Introduction to HTML Components](http://blog.mecheye.net/2017/08/introduction-to-html-components/?utm_source=frontendfocus&utm_medium=email) tutorial Jasper St. Pierre [Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins](https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/?utm_source=frontendfocus&utm_medium=email) tutorial Farley Reynolds [Two Approaches to Removing Unused CSS Rules](https://falkus.co/2017/09/remove-unused-css-rules/?utm_source=frontendfocus&utm_medium=email) tutorial Falkus [How to Create Fancy Revealing Animations with Simple CSS Tricks](https://hackernoon.com/how-to-create-fancy-revealing-animations-with-these-simple-css-tricks-5b34614ae69a?utm_source=frontendfocus&utm_medium=email) tutorial Carlos Roso [9 Things You Didn’t Know About Firefox Dev Tools](https://webdesign.tutsplus.com/tutorials/things-you-didnt-know-about-firefox-dev-tools--cms-26331?utm_source=frontendfocus&utm_medium=email) tutorial Kezz Bracey [Exploring Bump Mapping with WebGL](http://apoorvaj.io/exploring-bump-mapping-with-webgl.html?utm_source=frontendfocus&utm_medium=email) tutorial Apoorva Joshi [Designing for Great Web Performance, with Addy Osmani](https://www.youtube.com/watch?v=551nfxay-M4) video Google Chrome Developers [A much faster way to debug code than with breakpoints or console.log](https://wallabyjs.com/docs/intro/advanced-logging.html?utm_source=cooperpress&utm_medium=email&utm_content=nodeweekly&utm_name=nodeweekly#live-comments) tools Wallaby.js features allow you to inspect the result of any JavaScript expression execution in your editor. Wallaby.jsSponsor [Flexbugs: A Curated List of Flexbox Issues & Cross-Browser Workarounds](https://github.com/philipwalton/flexbugs?utm_source=frontendfocus&utm_medium=email) code Philip Walton [asm-dom: A WebAssembly Virtual DOM to Build SPAs in C++](https://github.com/mbasso/asm-dom?utm_source=frontendfocus&utm_medium=email) code Matteo Basso [Lozad: Performant Lazy Loading with the Intersection Observer API](https://github.com/ApoorvSaxena/lozad.js?utm_source=frontendfocus&utm_medium=email) code Apoorv Saxena 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/306) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK