---
title: "#303: Bootstrap 4 Beta Released"
publication: "Frontend Focus"
issue: 303
published_at: "2017-08-16"
canonical_url: "https://frontendfoc.us/issues/303"
---

#303: Bootstrap 4 Beta Released

This Week's HTML5, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/303)

Frontend FocusIssue 303 — August 16, 2017[Bootstrap 4 Beta Released](http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/?utm_source=frontendfocus&utm_medium=email)Two years in the making, the popular front-end framework is taking some key steps forward. For starters, it’s switched from Less to Sass and is now Flexbox based. Mark Otto 
[Web Fonts: When You Need Them, When You Don’t](https://hackernoon.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae?utm_source=frontendfocus&utm_medium=email)David Gilbertson makes a plea that “if you’re making a site, and you’re just about to go searching for that perfect web font, please, at least consider using system fonts instead”. Hacker Noon 
[Performant Web Animations and Interactions: Achieving 60 FPS](https://blog.algolia.com/performant-web-animations/?utm_source=frontendfocus&utm_medium=email)A high frame rate often equals a high level of responsiveness and user satisfaction, but what’s involved in getting high frame rates for Web pages? Emily Hayman 
[![Google, Inc.\](https://copm.s3.amazonaws.com/b474fcf6.png)](https://summit.polymer-project.org/?utm_source=CooperPress&utm_medium=email&utm_campaign=polymersummit)[Polymer Summit 2017 is coming to Copenhagen on 22-23 August](https://summit.polymer-project.org/?utm_source=CooperPress&utm_medium=email&utm_campaign=polymersummit)The Polymer Summit will be taking place in Copenhagen, Denmark on 22-23 August! Attend talks and workshops with Polymer & Google engineers! If you can't attend in person, you can watch the livestream on the event site. Google, Inc.Sponsor
[Using the Paint Timing API in Chrome](https://css-tricks.com/paint-timing-api/?utm_source=frontendfocus&utm_medium=email)The Paint Timing API landed in Chrome 60 and allows us to gather paint timing metrics from end users. Jeremy Wagner 
[The Average Web Page Is 3MB. How Much Should We Care?](https://speedcurve.com/blog/web-performance-page-bloat/?utm_source=frontendfocus&utm_medium=email)Page size matters, but Tammy Everts outlines how it’s perhaps not in the way you think. Tammy Everts 
[Building a Simple AI Chatbot with the Web Speech API and Node](https://www.smashingmagazine.com/2017/08/ai-chatbot-web-speech-api-node-js/?utm_source=frontendfocus&utm_medium=email)A complete walkthrough of bringing together browsers’ speech recognition support with Node and a third party natural language processing service. Tomomi Imura 
[Chrome 61 Beta Now With JS Module Support, Web Share API, WebUSB](https://blog.chromium.org/2017/08/chrome-61-beta-javascript-modules.html?utm_source=frontendfocus&utm_medium=email)A lot of new features in this test release, including 8- and 4-digit hex color support in CSS, the Smooth Scroll API, and the [Device RAM API](https://github.com/WICG/device-memory). Google 
[Frame by Frame Animation with CSS and JavaScript](https://www.sitepoint.com/frame-by-frame-animation-css-javascript/?utm_source=frontendfocus&utm_medium=email)Michael Romanov explains how to build a frame-by-frame animation with just HTML, CSS and JavaScript which performs well and works great on all browsers. SitePoint 


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)

- [Lead Frontend Developer/React.js at Mosaic (New York)](https://lifecoded.com/#hiring?utm_source=frontendfocus&utm_medium=email)Be a cornerstone in the development of an innovative project management tool using cutting edge technology, React.js. Artificial Intelligence for Project Management
- [Front End Engineer at EDITED (London)](https://edited.com/jobs/engineering/?utm_source=frontendfocus&utm_medium=email)Join us to impact how the world's biggest retailers operate by making a web app with great UX and DX using React, Redux and Glamor EDITED
- [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

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

[Proposal to Republish Previous Versions of HTML and XHTML as Obsolete Recommendations](https://www.w3.org/blog/news/archives/6459?utm_source=frontendfocus&utm_medium=email) news
W3C

[Building a simple To Do web app with Stitch, React, and MongoDB](https://docs.mongodb.com/stitch/getting-started/todo-web/?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship_FY17Q3&utm_content=sponsored &utm_medium=display&utm_source=frontendfocus0816) tutorial 
This short tutorial will get you started with MongoDB Stitch.
MONGODBSponsor

[Drawing a Horizontal Tree Using CSS Pseudo Elements](https://igauravsehrawat.github.io/draw-a-horizontal-tree-using-css-pseduo-elements?utm_source=frontendfocus&utm_medium=email) tutorial
Gaurav Sehrawat

[The Difference Between Explicit and Implicit Grids](https://css-tricks.com/difference-explicit-implicit-grids/?utm_source=frontendfocus&utm_medium=email) tutorial 
Grids are flexible enough to adapt to their items, so just how explicit do you have to be?
Manuel Matuzovic

[Lazy Loading Images using Intersection Observer](https://deanhume.com/Home/BlogPost/lazy-loading-images-using-intersection-observer/10163?utm_source=frontendfocus&utm_medium=email) tutorial 
How you can lazy load images without tapping the scroll event.
Dean Hume

[Offline POSTs with Progressive Web Apps](https://medium.com/web-on-the-edge/offline-posts-with-progressive-web-apps-fc2dc4ad895?utm_source=frontendfocus&utm_medium=email) tutorial 
Providing a great offline experience in your PWA.
Andreya Grzegorzewski

[The Web Font Loading Glossary](https://www.zachleat.com/web/webfont-glossary/?utm_source=frontendfocus&utm_medium=email) tutorial 
A beginner-friendly glossary of terms relating to web fonts.
Zach Leatherman

[Designing The Perfect Feature Comparison Table](https://www.smashingmagazine.com/2017/08/designing-perfect-feature-comparison-table/?utm_source=frontendfocus&utm_medium=email) tutorial
Vitaly Friedman

[How to Create a QR Code Reader for Your Mobile Site](https://www.sitepoint.com/create-qr-code-reader-mobile-website/?utm_source=frontendfocus&utm_medium=email) tutorial 
..using just HTML, CSS and JavaScript.
Dmitri Lau

[WebAssembly: What Is It And What Does It Mean for the Web?](https://pspdfkit.com/blog/2017/webassembly-a-new-hope/?utm_source=frontendfocus&utm_medium=email) tutorial
Philipp Spiess and James Swift

[Using Passive Event Listeners for Better Scroll Performance](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md?utm_source=frontendfocus&utm_medium=email) tutorial
Web Incubator CG

[CSS Hex Colors Demystified](https://medium.com/dev-channel/css-hex-colors-demystified-51c712179982?utm_source=frontendfocus&utm_medium=email) tutorial 
In-depth but relatively beginner level.
Dave Gash

[SVG Can Do That?](http://slides.com/sdrasner/svg-can-do-that#/?utm_source=frontendfocus&utm_medium=email) slidedeck 
A great slidedeck exploring the possibilities of what SVG can achieve.
Sarah Drasner

[Don’t Mistake Common UI Patterns for Best Practices](https://medium.com/ruxers/dont-mistake-common-ui-patterns-for-best-practices-4a1c8d4bef9a?utm_source=frontendfocus&utm_medium=email) opinion 
A hard look at how the browse experience translates in the digital space.
Callie de Roussan

[$20 Free on a new Linode account](https://welcome.linode.com/frontendfocus/?utm_source=cooperpress&utm_medium=sponsored&utm_campaign=frontendfocus-sponsored) 
Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.
Linode Cloud HostingSponsor

[Online WebP Converter](https://webp-converter.com/?utm_source=frontendfocus&utm_medium=email) tools 
Convert your image files into the more efficient WebP format.

[Gradient World: CSS Gradients Generated From Nature Photographs](https://gradient.world/?utm_source=frontendfocus&utm_medium=email) tools
Charlie Clark

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

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