Get started with GPU Compute on the Web
This article is about me playing with the experimental WebGPU API and sharing my journey with web developers interested in performing data-parallel computations using the GPU.
Audio/Video Updates in Chrome 75
A round up of the audio/video updates in Chrome 75: predicting whether playback will be smooth and power efficient for encrypted media and support of the video element's "playsInline" attribute hint.
Audio/Video Updates in Chrome 73
A round up of the audio/video updates in Chrome 73: Hardware media keys support, HDCP policy check, Picture-in-Picture origin trials, and more.
Lightning-fast templates & Web Components: lit-html & LitElement
lit-html and LitElement are two new libraries for building fast, interoperable components. lit-html provides lightning-fast templating. LitElement is a lightweight base class for building Web Components with lit-html templates.
news
webcomponents
polymer
lit-element
lit-html
Web Audio, Autoplay Policy and Games
A recap of our Web Audio autoplay policy changes which are rolling out soon in Chrome.
Watch video using Picture-in-Picture
Control Picture-in-Picture for video elements on your website.
Audio/Video Updates in Chrome 70
A round up of the audio/video updates in Chrome 70: AV1 decoder, cross-codec and cross-bytestream buffering and playback, Opus in MP4 with MSE, and protected content playback allowed by default on Android.
Audio/Video Updates in Chrome 69
A round up of the audio/video updates in Chrome 69: AV1 and HDCP policy check.
Present web pages to secondary attached displays
Chrome 66 allows web pages to use a secondary attached display through the Presentation API and to control its contents through the Presentation Receiver API.
An update on Better Ads
Yesterday, the Coalition for Better Ads announced the "Better Ads Experience Program." This Program provides guidelines for companies on how they can use the Better Ads Standards to help improve users' experience with ads on the web.
Audio/Video Updates in Chrome 63/64
Predictable media playback, HDR on Windows 10, offline playback with persistent licenses, and more are waiting for you in Chrome 64.
news
chrome63
chrome64
media
audio
video
origintrials
WebVR changes in Chrome 62
Learn about what is changing in the WebVR API
Sensors For The Web!
Sensors are used in many native applications to enable advanced features. Wouldn't it be nice to bridge the gap between native and the web? You can do it with Generic Sensor API, which is enabled by default in Chrome 67 or later.
sensors
chrome63
chrome67
news
Autoplay Policy Changes
Learn best practices for good user experiences with the new autoplay policies in Chrome, coming April 2018.
Picture-in-Picture (PiP)
Let's discuss a Web API that would allow websites to create a floating video window over the desktop
Audio/Video Updates in Chrome 62
Offline playback with persistent licenses and Widevine L1 on Android, video track optimizations, automatic video fullscreen when device is rotated, customizable seekable range on live MS streams, FLAC in MP4 with MSE are here!
Audio/Video Updates in Chrome 61
Background video track optimizations and automatic video fullscreen when device is rotated are here!
Audio/Video Updates in Chrome 58
Media controls customization, Autoplay for Progressive Web Apps added to the home screen, pause the autoplaying of muted video when invisible, and color-gamut media query are there!
Customize Media Notifications and Handle Playlists
Finally! We can customize web media notifications (title, artist, album name, artwork) and respond to media related events such as seeking or track changing with the new Media Session API.
news
chrome57
media
notifications
play
Get Ready for the Chrome Dev Summit 2016
Chrome Dev Summit 2016 is coming Thursday, Nov 10th and 11th. This year's summit will focus on key themes that matter to you: Progressive, to build high quality web apps; Performance, to increase user engagement; and What's Next, a look at how the Chrome team is thinking about the future of the web. Learn how you can tune in and see what's going on!
chromedevsummit
news
video
announcement
Creating a Web-Enabled IoT Device with Intel Edison
Internet of Things is really on everyone's lips these days, but what if you could create an IoT device which you accessed from your web browser? In this article we look at how you can do exactly that using Physical Web, Web Bluetooth as well as Node.js, running on an Intel® Edison Arduino breakout board.
news
iot
webbluetooth
physicalweb
edison
Record Audio and Video with MediaRecorder
The MediaRecorder API enables you to record audio and video from a web app. It's available now in Firefox and in Chrome for Android and desktop.
audio
codecs
media
news
recording
video
webrtc
chrome49
VP9 Is Now Available in WebRTC
From Chrome 48 on desktop and Android, VP9 will be an optional video codec for video calls using WebRTC.
audio
codecs
media
news
video
vp9
webrtc
Google Cast for Chrome on Android
Chrome on Android now allows mobile sites to present to Google Cast devices using the Presentation API and the Cast Web SDK.
news
audio
video
media
secondscreen
cast
Chrome 47 WebRTC: Media Recording, Secure Origins and Proxy Handling
Chrome 47 has several significant WebRTC enhancements and updates including audio and video recording, proxy handling and mandatory secure origins for getUserMedia().
news
audio
video
media
webrtc
getusermedia
Manage the Triggering of Touch to Search
Understanding when and how Touch to Search is triggered
Input Device Capabilities
A simpler method to rationalize your mouse and touch logic for when there is no PointerEvents
Choose Cameras, Microphones and Speakers from Your Web App
The MediaDevices interface gives access to input and output devices available to the browser including cameras, microphones and speakers.
news
audio
video
media
webrtc
getusermedia
The EME Logger Extension
EME Logger is a Chrome extension that logs Encrypted Media Extensions (EME) events and calls to the DevTools console.
Updates to the Service Worker Cache API
Chrome 46 brought new methods to caches, as does Chrome 47, and probably 48. It never stops.
History API: Scroll Restoration
An update to the History API to prevent unsightly scroll jumping.
Tab Discarding in Chrome: A Memory-Saving Experiment
Reducing Chrome's memory footprint is one of the team's top priorities this year.
Automating Resource Selection with Client Hints
Image optimization is hard and automation is the key to success.
Rolling out Public Key Pinning with HPKP Reporting
Chrome 46 ships with a feature called HPKP reporting, which can help you roll out a stricter form of SSL for your site.
Using the web app manifest to specify a site wide theme color
Set a theme-color in the manifest and have it available to all pages on your site when launched from the home screen.
Using requestIdleCallback
requestIdleCallback is new performance API for scheduling work when the browser is idle.
New Release of Material Design Lite - 1.0.4
There is a new release of Material Design Lite, bringing a host of bug fixes and improvements to the build process.
Using poster images on plugin content
Chrome can now add custom poster images to object elements to improve perceived loading performance of plugins such as Flash.
MediaStream Deprecations
The MediaStream API represents synchronized streams of audio or video. MediaStream.ended, MediaStream.label and MediaStream.stop() are being deprecated. Use MediaStream.active, MediaStreamTrack.label and MediaStreamTrack.stop() instead.
news
audio
video
media
mediastream
mediastreamtrack
getusermedia
rtcpeerconnection
webrtc
Measuring Performance in a Service Worker
If you can't measure the performance of your requests in a service worker, how can you say it improves performance? Now you can answer that question with recent changes in Chrome.
news
performance
serviceworker
Using rotationAngle and touchRadius
A small set of changes have landed in Chrome 45 that will make it easier for developers to build better touch based apps
Media playback notifications for Chrome on Android
When audio or video is playing on a web page, a notification showing the page title and a play/pause button is displayed in the notification tray and on the lock screen. The notification can be used to pause/resume play or return to the page playing the media.
news
audio
video
android
media
notifications
Media Source Extensions for Audio
Media Source Extensions (MSE) provide extended buffering and playback control for the HTML5 audio and video elements. While originally developed to facilitate Dynamic Adaptive Streaming over HTTP (DASH) based video players, MSE can be used for audio; specifically for gapless playback.
Help users checkout faster with Autofill
Help users checkout faster with Autofill. We’ve found that by correctly using autocomplete attributes on your forms, users complete them up to 30% faster!
news
forms
autofill
monetization
mobile
Notifying you of Changes to Notifications
2 new API's have been added in Chrome 44 which makes using Notifications with push easier to work with and customize.
news
webpush
notifications
data
High performance video with hardware decoding
Hardware video support brings efficient decoding to plugins as well as HTML5 video. Flash users should switch from the old style Video to the StageVideo object.
news
video
flash
shaka-player
eme
mse
hardware-decoding
codecs
Autocapitalize for mobile
Another text entry frustration for users is being removed.
Cut and Copy Commands
The support for cut and copy commands allows you to programmatically cut and copy selected text to the users clipboard
DOM Attributes now on the prototype chain
Chrome is becoming in line with the spec. Check your sites if you are assuming the WebKit logic for attribute propagation
Permissions API for the Web
The Permissions API gives you a central place to check the permission status of an API.
Simplified Concepts in Web Animations Naming
In response to developer feedback, some upcoming features of Web Animations are being renamed.
A new home for DevTools
We've moved into a shiny new home at developer.google.com/web have great new tutorials and tips for you.
Push Notifications on the Open Web
Push Messaging and Notifications are Landing in Chrome 42.
news
webpush
notifications
serviceworker
Introduction to fetch()
The fetch() API is landing in the window object and is looking to replace XHRs
Creating semantic sites with Web Components and JSON-LD
Add schema.org markup to your components and make them search engine friendly.
Offline-first, fast, with the sw-precache module
Add service worker-powered offline capabilities to your site with the sw-precache module.
news
serviceworker
offline
cache
performance
Getting Literal With ES6 Template Strings
Template String literals with embedded expressions. We've been waiting for this for ages. Literally
news
es6
javascript
ecmascript
Chrome Dev Summit 2014: Let's build some apps with Polymer!
Building apps, the Polymer way.
news
webcomponents
polymer
chromedevsummit
What the Virtual Viewport?
The virtual viewport separates layout and viewing of the viewport.
image-rendering: pixelated
Pixelation of the nation. Now in Chrome 41
news
css
pixelated
image-rendering
Chrome Dev Summit 2014: Polymer - State of the Union
The state of the Polymer Union.
news
webcomponents
polymer
chromedevsummit
Chrome Dev Summit 2014: The Applied Science of Runtime Performance
The story of building the Chrome Dev Summit site.
news
performance
chromedevsummit
frontend
Web Animations Playback Control in Chrome 39
Learn about Web Animation Playback
Fundamentals of Mobile Web Development
A quick look at some of the efforts the Chrome team are doing to helps developers get started with Web Development and iterate on their sites.
news
fundamentals
mobile
frontend
Developer feedback needed: Frame Timing API
A brand new API is in the works to help measure frames per second in the wild, but it needs your feedback.
news
performance
testing
frontend
Support for theme-color in Chrome 39 for Android
Use theme-color to set the toolbar color in Chrome for Android.
Generators: the Gnarly Bits
An exploration of ES6 Generators.
Send beacon data in Chrome 39
Chrome 39 implements the Beacon API, which allows to send small async HTTP requests during the page unload events.
Precision Touch for Precise Gestures
TouchEvents have changed in Chrome to return float values, instead of integers, to account for varying screen densities. This leads to more detailed feedback during slow gestures.
Collecting and Iterating, the ES6 Way
Maps, Sets, and for...of iteration are ES6 features that can change the way you work with collections of data.
news
iterators
es6
sets
collections
maps
Easier ArrayBuffer to String conversion with the Encoding API
The native Encoding API offers a straightforward way to convert between raw binary data and JavaScript strings.
news
arraybuffer
decoding
strings
unicode
encoding
Web Audio Changes in m36
Description of Web Audio standards cleanup work in Chrome 36
deprecations
removals
news
webaudio
dialog element shipped in Chrome 37 Beta
Chrome Beta has landed its native support for <dialog> element
Blob support for IndexedDB landed on Chrome Dev
Long awaited feature for Chrome, Blob support on IndexedDB landed in Chrome Dev.
Automating Web Performance Measurement
Use PSI to get web performance metrics into your build process.
news
gulp
performance
pagespeed
node
buildprocess
Web Animations - element.animate() is now in Chrome 36
Web Animations define a model for supporting animation and synchronization on the Web platform. element.animate() is the first of those pieces landing in Chrome.
news
elementanimate
webanimations
A More Compatible, Smoother Touch
You and your users want mobile web apps that react and scroll smoothly to the touch. Developing them should be easy but, unfortunately, how mobile web browsers react to touch events during scrolling is left as an implementation detail in the TouchEvent specification.
Get on the CSS Grid!
CSS Grid Layout is a new CSS3 module that provides new layout primitives that are ideal for web applications.
The Yeoman Monthly Digest #3
A monthly digest of high-quality Yeoman articles, generators and project news.
news
frontend
scaffolding
yeoman
tools
Yo Polymer – A Whirlwind Tour Of Web Component Tooling
A whirlwind tour of Web Components, Polymer and front-end tooling for them.
news
frontend
polymer
webcomponents
tools
Web apps that talk - Introduction to the Speech Synthesis API
Introduction to the Web Speech API's synthesis feature.
news
multimedia
voice
webspeech
synthesis
Chrome Dev Summit: Platforms Summary
Platforms
Chrome Dev Summit: Open Web Platform Summary
The capabilities of the Open Web Platform is accelerating at a pace that has never been seen before. At the Chrome Dev Summit we talked about how we are working on improving Blink, Security and Media for the platform
Chrome Dev Summit: Performance Summary
Performance Matters
Chrome Dev Summit: Polymer declarative, encapsulated, reusable components
Polymer is a gateway into the amazing future of Web Components. Learn more about Web Components and Polymer from the Chrome Dev Summit
news
mobile
polymer
webcomponents
Chrome Dev Summit: Mobile Summary
Here's the first in a series of reports from Chrome Dev Summit. There was a strong emphasis on Mobile and Cross-device development, so we'll kick off with that!
news
ux
workflow
mobile
webview
grunt
serviceworker
The Yeoman Monthly Digest #2
A regular round-up of articles, videos and talks authored by the Yeoman community.
news
frontend
workflow
tools
yeoman
DevTools Digest December 2013
The latest update for changes to the Chrome DevTools.
New Web Animations engine in Blink drives CSS Animations & Transitions
An implementation of Web Animations 1.0 has landed in Blink powering CSS Animations and Transitions.
300ms tap delay, gone away
Every click interaction in mobile browsers is hampered with a 300ms delay, but that's gone in Chrome 32 for mobile-optimized sites!
news
mobile
performance
touchevent
The Yeoman Monthly Digest #1
A regular round-up of articles, videos and talks authored by the Yeoman community.
news
frontend
tools
yeoman
automation
The Landscape Of Front-end Development Automation (Slides)
Learn how to improve your front-end productivity with tools for workflow automation.
news
frontend
productivity
tools
Web Audio live audio input - now on Android!
Chrome for Android (v31.0.1650+) has just landed support for audio input via the Web Audio API!
news
webaudio
input
android
audio
beta
Flexbox layout isn't slow
Good news: new flexbox (display: flex) is 2.3x faster than old flexbox (display: box)!
DevTools answers: What font is that?
Ever wondered which font is actually being used to render text? Wonder no more as Chrome DevTools reveals all!
dialog element: Modals made easy
Have you ever created your own modal dialog box? Soon, you won't need to ever again; dialog boxes are becoming a part of the web platform.
Alpha transparency in Chrome video
WebM just added alpha transparency, and support for it has landed in Chrome 31.
sourceMappingURL and sourceURL syntax changed
Introduction to Custom Filters (aka CSS Shaders)
news
webgl
shaders
css
filters
What's the CSS :scope pseudo-class for?
Visualizing Shadow DOM Concepts
news
shadowdom
webcomponents
semantics
Profiling Long Paint Times with DevTools' Continuous Painting Mode
WebRTC: RTCDataChannel demo, API changes... and Chrome talks to Firefox!
CSS Background shorthand coming to mobile WebKit browsers
Voice Driven Web Apps: Introduction to the Web Speech API
news
voice
multimedia
webspeech
Screensharing with WebRTC
news
getusermedia
screenshare
webrtc
Canvas-driven background images
Powering a css background using canvas or webgl
WebRTC hits Firefox, Android and iOS
news
video
webrtc
getusermedia
Respond to change with Object.observe
Content Security Policy 1.0 is officially awesome.
news
content-security-policy
security
Interactive Globe with CSS shaders & Google Maps
Live Web Audio Input Enabled!
news
webaudio
multimedia
getusermedia
audio
Stacking Changes Coming to position:fixed elements
Stick your landings! position: sticky lands in WebKit
Integrating input[type=file] with the Filesystem API
When milliseconds are not enough: performance.now
[datalist] for range/color inputs offer some default choices
Quick FAQs on input[type=date] in Google Chrome
Drag and drop a folder onto Chrome now available
How to measure browser graphics performance
Arrived! xhr.send(ArrayBufferViews)
Taking advantage of GPU acceleration in the 2D canvas
Writing a flippable book using CSS Regions and 3D transforms
The amazing powers of CSS
How to convert ArrayBuffer to and from String
How to convert ArrayBuffer to and from String
Don't Build Blobs, Construct Them
requestAnimationFrame API: now with sub-millisecond precision
Websocket Frame Inspection now in Chrome DevTools
datalist landed in Chrome Canary
Processing XHR2 file uploads in PHP
WebRTC Protothon
Big boost to DOM performance - WebKit's innerHTML is 240% faster
Round-up of Web Browser Internals Resources
Taking an Entire Page Offline using the HTML5 FileSystem API
CSS layout gets smarter with calc()
Optimizing JavaScript
A New Experimental Feature: scoped stylesheets
WebGL and Web Audio API demo roundup
news
webaudio
webgl
multimedia
SwiftShader brings software 3D rendering to Chrome
Detect DOM changes with Mutation Observers
An introduction to Mutation Observers.
Getting Gmail to handle all mailto: links with registerProtocolHandler
news
registerprotocolhandler
mailto
Chrome for Android: Accelerating the Mobile Web
Pointer Lock API Brings FPS Games to the Browser
news
pointerlock
fullscreen
games
HTML5 audio and the Web Audio API are BFFs!
news
webaudio
multimedia
audio
Getting Rid of Synchronous XHRs
news
xhr2
binary
deprecations
removals
Web Audio FAQ
Introducing Video Player Sample
CSS Filter Effects Landing in WebKit
news
presentation
css
filters
graphics
Transferable Objects: Lightning Fast!
news
binary
performance
workers
Use mediump precision in WebGL when possible
news
mobile
performance
webgl
graphics
Chrome Developer Tools for Speed
'Stream' video using the MediaSource API
WebGL demo roundup
App Cache Tools and Auto-Generators
Defining Scope In IndexedDB Transactions
Spooktacular HTML5 Pumpkin
Let Your Content Do the Talking: Fullscreen API
Intro to the Full Screen API
news
games
multimedia
fullscreen
WebSockets updated to latest version in Chrome Canary
Keeping up with HTML5 and browser support
Having a ride with Three.js
New Game Conference for HTML5 Game Developers Coupon
7 minute videos: JavaScript Console Protips & newish DOM APIs
Workers ♥ ArrayBuffer
What's different in the new WebSocket protocol
insertAdjacentHTML Everywhere
Debugging the Filesystem API
Saving generated files on the client-side
Seek into local files with the File System API
Downloading resources in HTML5: a[download]
HTML5 Libraries/polyfills - Mid July
Announcing New Game, the conference for HTML5 game developers
Don't Miss a Frame: Using the Page Visibility API + HTML5 Video
Multiplayer Audio Fun
news
webaudio
websockets
connectivity