|
You’re in a container element with a limited width but want to run a full-width image or other ‘breakout’. What are the options? Some clever tricks here.
Chris Coyier
A click-by-click journey, starting with a basic page, and progressing to consider content, spacing, color and contrast. This has been very popular online this week.
Jeremy Thomas
A look at how a service worker can help you capture offline analytics to send to Google Analytics later on.
Google Developers
If you're a HTML5/JS dev, maybe you have already jumped in on a responsive project and would like to learn more. If not, responsive web design will probably be a requirement in the near future. This whitepaper will give you the must-know responsive web.
Progress
Sponsor
An in-depth walkthrough, complete with code and examples, of pushing SVG for building advanced Web-based animations.
Michael Ngo
This mechanism prevents pages on other origins from accessing your page’s window object via window.opener.
Jake Archibald
A code review of some form elements led to deep thoughts on how to approach crafting frontend code overall, plus a neat 20 minute HTML code review by Jonathan Snook.
Brad Frost
Paul Lewis explains the new CSS Containment property (contain) which lets developers limit the scope of the browser’s styles, layout and paint work.
Paul Lewis
Jobs 
Can't find the right job? Want companies to apply to you? Try Hired.com.
In Brief
$20 Off Front-End Development and Node.js Workshops rawurl news
Upcoming workshops on Webpack, Creating Open Source, Node.js and Elm are all $20 off this week.
Frontend Masters Sponsor
:any-link CSS Pseudo-Class Has Been Unprefixed in Firefox news
Firefox Site Compatibility
New HTML5 'video' Element Policies for iOS news
Safari in iOS 10 will allow video to play inline and video can now autoplay if the media contains no audio track.
Jer Noble
How We're Bringing HTML5 Video Animations into Tellyo Pro news
Tellyo is a real-time video publishing tool.
Jan Pietek
W3C HTML5 Validator Enhanced with Language Detection Functionality news tools
Can now compare text language with HTML lang attributes, etc.
W3C
Final W3C Working Draft of Accessible Rich Internet Applications (WAI-ARIA) 1.1 news
W3C
W3C Candidate Recommendation of Resource Timing Level 1 Published news
Provides an interface for webapps to access complete timing information for resources in a document.
W3C
The Proposed CSS 'box-suppress' Property news
Rachel Andrew
Make a Morphing Play-Pause Button for HTML5 Video with SVG tutorial
Dudley Storey
requestAnimationFrame Scheduling For Nerds tutorial
A quick look at the scheduling of multiple requestAnimationFrame callbacks.
Paul Irish
Turning Off Autocomplete in Chrome with React tutorial
Getting Chrome to respect your autocomplete="off" property on form inputs.
Paul Matthew Jaworski
Neat Uses for CSS's Awesome Viewport Units tutorial
A look at vw and vh
Martin Falkus
A Tale of 'width' and 'max-width' tutorial
Comparing width: 600px; max-width: 100%; against width: 100%; max-width: 600px;
Chris Coyier
Client Side Performance from the Perspective of a Developer video
BlinkOn
Privacy Aspects of the W3C Vibration API opinion
Fingerprinting, identification and out-of-band communications issues.
Lukasz Olejnik
Lightning fast SSD hosts for your HTML5 project rawurl tools
Host your HTML5 site on Linode servers - the fastest VPS hosts available. Use promo code HTML520 for $20 credit.
Linode Sponsor
PWAify: Progressive Web Apps Running as Native OS X Apps tools
Vlad Filippov
apimock: A Mock API Server tools
Build your front-end without the backend being ready. Written in Node.
Pierre Prinetti
Howler.js: JavaScript Audio Library for the Modern Web code
James Simpson
Aquarelle: A 'Watercolor Effect' for The Web code
See a demo here.
Ramotion
Omnitone: Spatial Audio on the Web story
Google
WebGL Globe Viewer demo
Very smooth and fun to play with.
|