HTML linkovi broj 250

CHRIS COYIER

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.

JEREMY THOMAS

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.

GOOGLE DEVELOPERS

A look at how a service worker can help you capture offline analytics to send to Google Analytics later on.

PROGRESS  SPONSORED

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.

The Illusion of Life: An SVG Animation Case Study

The Performance Benefits of rel='noopener'

This mechanism prevents pages on other origins from accessing your page’s window object via window.opener.

A Code Review, or Yet Another Reason to Love the Web

CSS Containment in Chrome 52

In brief

• $20 Off Front-End Development and Node.js Workshops 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 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.