Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 20 2017


Chrome 62 Beta: Network Quality Estimator API, OpenType variable fonts, and media capture from DOM elements

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.

Network Quality Estimator API

The Network Infomation API has been available in previous versions of Chrome, but has only provided theoretical network speeds given the type of a user's connection. In this release, the API has been expanded to provide developers with network performance metrics as experienced by the client. Using the API, a developer can inspect the current expected round trip time and throughput and be notified of performance changes. To simplify application logic, the API also summarizes measured network performance as the cellular connection type (e.g. 2G ) most similar to it, even if the actual connection is WiFi or Ethernet.

Using these network quality signals, developers can tailor content to network constraints. For example, on very slow connections, developers can serve a simplified version of the page to improve page load times .  These signals will also soon be available as HTTP request headers and enabled via Client Hints .

OpenType Variable Fonts

OpenType Font Variations bring new typographic capabilities to the web. Previously, one font file contained just a single instance of a font family, including only one weight (Regular, Bold, Black…) or one stretch (Normal, Condensed, Expanded…).
Figure: Animated Amstelvar and Decovar variable font examples

With variable fonts, responsive design on the web now extends to typography. OpenType Variations provide a continuous spectrum of stylistic variations while saving space and bandwidth, since they all load from a single compact font file. Stretch, style, and weight can be adjusted using the respective updated CSS properties which now allow numeric values. Fine tuning of variation axis parameters, such as weight or width, is possible using the font-variation-settings CSS property.

Media Capture from DOM Elements

The W3C Media Capture from DOM Elements API now allows sites to live-capture content in the form of a MediaStream directly from HTMLMediaElements (i.e. <video> and <audio> ). By invoking the captureStream() method on HTMLMediaElements , streamed content can be recorded and sent remotely using WebRTC, processed with WebAudio, or manipulated in various other ways .

Sorry! Your browser does not support the video element. View animationhere.
Figure: A 3D rendering being live-captured and streamed to a peer connection using WebRTC.

Other features in this release

Deprecations and interoperability improvements

  • Following an update to native button appearance on macOS, the appearance of <input> buttons and the <button> element have been similarly changed , affecting the default values for the background-color ,   border ,   border-radius , and padding CSS properties .
  • The ability to request permission to show notifications has been removed over HTTP connections and within cross-origin iframes , in line with our policy on restricting powerful features to only HTTPS.
  • To increase accuracy and ensure that users receive content in the language they expect, base language is now added immediately after language+region when generating accept-language headers from language settings.
  • To improve UX and browser consistency, transitional mouse events will now be dispatched , and hover states will now be updated more quickly after the intended layout has been modified.
  • OfflineAudioContext now accepts a dictionary argument, in addition to the existing constructor that takes three separate arguments.
  • In line with other browsers, the getStreamById method on RTCPeerConnection has now been removed .
  • SharedWorker.workerStart has been removed, following its deprecation and removal from other major browsers.
  • To better conform to spec, the default value of <ol>.start has been set to 1 .

Posted by Ben Greenstein and Tarun Bansal, The Network’s Watch

September 14 2017


Unified autoplay

Users watch and listen to a lot of media, and autoplay can make it faster and easier to consume on the web. However, one of the most frequent user concerns is unexpected media playback, which can use data, consume power, and make unwanted noise while browsing. To address this, Chrome will be making autoplay more consistent with user expectations and will give users more control over audio.

Starting in Chrome 64, autoplay will be allowed when either the media won’t play sound, or the user has indicated an interest in the media. This will allow autoplay to occur when users want media to play, and respect users' wishes when they don't. These changes will also unify desktop and mobile web behavior, making web media development more predictable across platforms and browsers.

Not all users have the same preferences for autoplay media, so Chrome 63 will add a new user option to completely disable audio for individual sites. This site muting option will persist between browsing sessions, allowing users to customize when and where audio will play.

These changes will give users greater control over media playing in their browser, while making it easier for publishers to implement autoplay where it benefits the user. For more details, please see the autoplay roadmap.

Posted by Mounir Lamouri, Software Engineer

August 21 2017


Run multiple versions of Chrome side-by-side

By default, when users install Chrome, they receive the most stable and supported build available. However, Chrome fans and web developers have long been able to opt into new Chrome features by installing pre-release packages such as Chrome Beta and Dev. Historically it's been impossible to install these pre-releases on the same computer as stable Chrome, forcing developers to choose between testing their site in the next version of Chrome and experiencing their site as users see it now.

Starting today, Chrome Beta and Chrome Dev can be installed on the same Windows computer as stable Chrome and run simultaneously, allowing developers to more easily test their site across multiple versions of Chrome. This means side-by-side Chrome installation is available on Windows, Android, and Linux, and will be made available on other platforms in future releases.

Chrome, Chrome Beta, and Chrome Dev can now be installed side by side on the same Windows computer. 

To install Chrome Beta or Chrome Dev, visit the Chromium release channels page. If you already have Chrome Dev or Beta and wish to run it side-by-side with stable Chrome, you'll need to uninstall it and then reinstall from this page. To easily transfer your bookmarks, settings, and other data, sign in to Chrome before you uninstall. And if you see something not quite right in Chrome Dev or Beta, please send us feedback.

Posted by Greg Thompson, Bitmason

August 15 2017


Chrome 61 Beta: JavaScript modules, Payment Request API on desktop, Web Share API, and WebUSB

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.
JavaScript modules
Modules allow developers to declare a script's dependencies and are already popular in third-party build tools, which use them to bundle only the required scripts. This release adds native support for JavaScript modules via the new <script type=module> element.

Native support means the browser can fetch granular dependencies in parallel, taking advantage of caching, avoiding duplications across the page, and ensuring the script executes in the correct order, all without a build step.

Payment Request API on desktop

The Payment Request API is now available for Windows, Mac, Linux, and ChromeOS, following the announcement of Android support last year. Developers can now offer secure, seamless checkout experiences across platforms. To get started, “check out” our integration guide .
The PaymentRequest process throughout a transaction.

Web Share API

To allow users to easily share content on social networks, developers have had to manually integrate sharing buttons into their site for each social service. This often leads to users not being able to share with the services they actually use, in addition to bloated page sizes and security risks from including third-party code.

Sites can now use the new navigator.share API on Chrome for Android to trigger the native Android share dialog, allowing the user to easily share text or links with any of their installed native apps. In a future release, this API will also be able to share to installed web apps.

The navigator.share API allows the user to share content with a variety of native apps via the native Android share dialog.


Most hardware peripherals such as keyboards, mice, printers, and gamepads are supported by high-level web platform APIs. To use specialized educational, scientific, or industrial USB peripherals, users must find and install potentially unsafe drivers and software with system-level privileges.

Chrome now supports the WebUSB API , allowing web apps to communicate with peripherals given a user's consent. This enables all the functionality provided by these devices, while still preserving the security guarantees of the web.

Other features in this release

Deprecations and interoperability improvements

  • To increase security, resources with URLs containing both \n and < characters will now be blocked .
  • To increase security, support for the Presentation API’s start function has been deprecated and removed for insecure contexts.
  • To increase consistency across on<event> attributes, onwheel attributes have been moved from Element to Window , Document , HTMLElement , and SVGElement .
  • To better follow spec and provide more granular control over the flow of referred content, Chrome now supports three new Referrer Policy values, same-origin , strict-origin , and strict-origin-when-cross-origin .
  • Following the change in spec, the maximum value for colSpan has been decreased from 8190 to 1000.

Posted by Domenic Denicola, Maverick Modulator

July 25 2017


So long, and thanks for all the Flash

This morning, Adobe announced their plans to end support for Flash in late 2020. For Flash developers this will mean transitioning to HTML, as Chrome will increasingly require explicit permission from users to run Flash content until support is removed completely at the end of 2020.

HTML is faster, safer, and more power efficient than Flash and works across desktop and mobile. Three years ago, over 80% of Chrome daily desktop users visited sites with Flash. Today only 17% of users visit sites with Flash and we’re continuing to see a downward trend as sites move to HTML.

Over a three-year period, Flash usage has declined 80%.

We strongly encourage sites that still rely on Flash to make the move to HTML as there will be an increasing number of restrictions on Flash leading up to the end of support:

  • For sites that use Flash for gaming, a list of relevant APIs and demos can be found at OpenWebGames.com. We recommend exploring technologies like WebAssembly, which allows for high-performance computing.
  • For sites that use Flash for media, Mozilla’s media migration guide gives an overview of the APIs used to prepare, distribute and play media on the web.
  • Finally, for sites that use Flash for advertising, we recommend switching to HTML ads. Please work with your ad provider directly for this.
Flash helped make the web a rich, dynamic experience, and shaped the modern set of web standards. We recognize that any transition can have challenges, but we will continue to work closely with Adobe and the web community to ensure that users have a great experience and to help developers make the web transition to HTML.

Posted by Anthony Laforge, on behalf of the Chrome team

June 15 2017


Counting Gray Seals with Google Earth Imagery

We recently came across this article about a scientific study of the populations grey seals in the North Atlantic that used Google Earth imagery to do a census.

One of the locations mentioned in the article is Muskeget Island, Massachusetts. We did manage to find the seals, but were also impressed by how much the sand bars change over time:

.sliderInput{border:0; color:#006FBA; font-weight:bold;background-color: white;padding:0px;box-shadow:none;.slider{width:95%;}]]>

Speed in milliseconds per image:
Moving sandbars at Muskeget Island, Massachusetts.


June 14 2017

Direct your own movies in Toontastic 3D with our new Cars 3 and Fruit Ninja themes!
Direct your own movies in Toontastic 3D with our new Cars 3 and Fruit Ninja themes!

Excel to KML Two Way Converter

In January we created a simple KML converter that takes a KML file and produces a csv file that is easily opened with Microsoft Excel. Recently GEB reader David Kettle asked whether it would be possible to go both ways.

So, we have used an open source tool called SheetJS for reading and writing Excel files in JavaScript and have made a two way process.

To use it, simply upload a KML or KMZ file below and it will extract all the placemarks, paths or polygons into an Excel file. You can then edit the data in the Excel file then upload that and it will convert it back to a KML file.



All styles, folders etc are lost in the conversion.
It only extracts the outer edge of a polygon. If there are ‘cutouts’ then they will be ignored.
It doesn’t currently extract folder names. We will consider adding that as a feature in the future.
It extracts the longitude/latitude/altitude data in the format used in KML rather than separating them into columns. This was to make it easier to handle both points and polygons.
When we tried it on very large polygons, Excel gave an error – most likely caused by a limit on the amount of text allowed in a single cell.

The intent was not to create a universal converter but to provide a very simply utility, and to give those with some programming knowledge a starting point if they wish to create something more complex. Feel free to use any of the code used in the page. The original KML API can be found here The version used in the page was run through Babel to make it compatible with older browsers.

The post Excel to KML Two Way Converter appeared first on Google Earth Blog.

June 13 2017


Chrome 60 Beta: Paint Timing API, CSS font-display, and Credential Management API improvements

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.

Paint Timing API

While no generalized metric perfectly captures when a page is loaded in all cases, First Paint and First Contentful Paint are invaluable numbers to measure critical user moments during loading. To give developers better insight into their site’s loading performance, the new Paint Timing API exposes metrics that capture First Paint and First Contentful Paint.
Screen Shot 2017-06-08 at 8.57.03 AM.png
Stills of a First Paint and First Contentful Paint for Google.com, from “Web Performance: Leveraging the Metrics that Most Affect User Experience” at Google I/O 2017

CSS font-display

Downloadable web fonts are often used to create more visually rich web experiences. Historically, Chrome has delayed rendering text until the specified font is available, to ensure visual correctness. However, downloading a font can take as long as several seconds on a poor connection, significantly delaying the time until a user sees content. Chrome now supports the CSS @font-face descriptor and corresponding font-display property , allowing developers to specify how and when Chrome displays text content while downloading fonts.

Credential Management API improvements

In response to developer feedback and to make the Credential Management API easier to use for all sites, the need for a custom fetch() to access the stored password is now deprecated. Starting in Chrome 60, the user’s password will now be returned directly as part of the PasswordCredential .

In addition, we've made a series of changes to better align with the work being done in the Web Authentication Working Group . This includes the deprecation of requireUserMediation , which has been renamed to preventSilentAccess .

Other features in this release

  • The Payment Request API is now supported on desktop versions of Chrome.
  • Sites can now collect payments through native Android payment apps using the Payment Request API .
  • Object rest & spread properties are now supported, making it simpler to merge and shallow-clone objects and implement various immutable object patterns.
  • The new Web Budget API enables sites with the Push Notification permission to send a limited number of push messages that trigger background work such as syncing data or dismissing notifications the user has handled on another device, without the need to show a user-visible notification.
  • The new Web Push Encryption format is now supported and PushManager.supportedContentEncodings can be used to detect where it can be used.
  • PushSubscription.expirationTime is now available, notifying sites when and if a subscription will expire.
  • To improve performance and predictability,   pointermove and mousemove events are now delivered once per AnimationFrame , matching the current functionality of scroll and TouchEvents .
  • The :focus-within CSS pseudo-class is now available, affecting any element the :focus pseudo-class affects, as well as any element with a descendant affected by :focus .
  • The CSS frames timing function is now available, making it useful for animation loops where the animation should display all frames for exactly the same length, including its first and last frames.
  • To provide an enriched way to capture editing actions, InputEvent now allows user input to be managed by script, enhancing the details provided to editable elements.  
  • To increase security, a BeforeUnload dialog triggered when the user leaves a site will now only be shown if the frame attempting to display it has ever received a user gesture or user interaction, though the BeforeUnloadEvent will still be dispatched regardless.
  • VP9, an open and royalty-free video coding format, can now be used with the MP4 (ISO BMFF) container and requires the new VP9 string format mentioned below.
  • A new VP9 string format is now available and accepted by various media-related APIs , enabling developers to describe the encoding properties that are common in video codecs, but are not yet exposed.

Deprecations and interoperability improvements

  • getElementsByTagName() now accepts qualified names in response to an update to the DOM specification .
  • /deep/ now behaves like the descendant combinator , which is effectively a no-op.
  • To improve user experience , calls to Navigator.vibrate() now immediately return false if the user hasn't explicitly tapped on the frame or any embedded frame, matching existing behavior for cross-origin iframes .
  • WEBKIT_KEYFRAME_RULE and WEBKIT_KEYFRAMES_RULE have been removed in favor of the unprefixed standardized APIs, KEYFRAME_RULE and KEYFRAMES_RULE .
  • Support for non-standard WebKitAnimationEvent and WebKitTransitionEvent has been removed from document.createEvent() .
  • To better align with spec , NodeIterator.filter and TreeWalker.filter no longer wrap JavaScript objects, and .prototype has been removed from window.NodeFilter .
  • RTCPeerConnection.getStreamById() is being removed, and a polyfill is recommended as a replacement.
  • SVGPathElement.getPathSegAtLength() has been deprecated as it has been removed from the SVGPathElement spec.
  • Headers.prototype.getAll() has been removed from the Fetch API in line with its removal from the spec.

Posted by Shubhie Panicker, Paint Timing Promoter
Is Project Fi right for you?
Is Project Fi right for you?
More Levels, and more way to contribute for Local Guides
More Levels, and more way to contribute for Local Guides

Bidi Bidi Refugee Settlement in Google Earth

When looking through the latest imagery update in Google Earth, we came across some images in northern Uganda. They were captured by DigitalGlobe as part of their ‘FirstLook’ program and relate to the movement of refugees from South Sudan into Uganda. There is ongoing violence in South Sudan which has in turn created a famine in the region. The combination is causing many people to flee the country. According to Wikipedia, the refugee camp is named Bidi Bidi, and with over 270,000 residents is the largest refugee settlement in the world.

.sliders img{max-width:none; }]]>

Before and after of one of the Bidi Bidi camps showing that it was not there in 2013.

Unfortunately the DigitalGlobe image does not capture the full extent of the Bidi Bidi camps and only shows the southern edge of one new section that has appeared since


Before and after of another of the Bidi Bidi camps showing that it appeared between August 30th, 2016 and December 11th, 2016.

So, we downloaded a recent Sentinel-2 image of the region and were able to identify a number of camps that have appeared at various times starting in 2014. We also had a look at this list of the worlds largest refugee camps and were able to locate most of them.

Refugee camps are quite distinctive in satellite imagery. They typically have a large grid pattern of road networks which are not typical of that part of Africa. Small towns in the region typically grow slowly and more organically resulting in a less ordered layout than refugee settlements which are planned and built in short bursts.

Some of the largest refugee camps are a collection of five camps in Kenya near the border with Somalia. The southernmost camp was clearly over-planned with a vast network of streets laid out but only a small portion ever occupied:

One of the refugee camps near Dadaab, Kenya. The whole grid is 5 km x 4 km

To see all the camps we found in Google Earth, download this KML file

You may also find this YouTube video on various conflicts and famines in the region interesting.

Using data to change the conversation about race in America
Using data to change the conversation about race in America

June 12 2017

Finding the Qibla in augmented reality
Finding the Qibla in augmented reality
Four signs you’re wasting time at work and how G Suite can help
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!