Is Your Freemium Strategy Harming Your App’s UX?
The word “free” is often music to our ears. Free trial, free download, free music, we will take it all as long as there are no strings attached. This tangled web of strings, however, is…
© 2018 Pixel Forge
Powered by ONCALL Solutions
The word “free” is often music to our ears. Free trial, free download, free music, we will take it all as long as there are no strings attached. This tangled web of strings, however, is…
Every couple of days, search engines update their algorithms and marketers respond by forming new SEO guidelines. So as technology continues to advance, SEO strategy needs to adapt ever faster….
In user experience, not all tasks are created equal. Think of the tasks you associate with being exciting. Prototyping, designing a user interface, working on a slick product upgrade, and generally,…
Web and mobile push notifications are one of the most efficient and handy tools that can help you increase your conversion rates and engage your audience in real time and with actual results….
Recently, I have written about different, often unexpected sources user experience designers can mine inspiration from. Whether you are stuck in a creative rut or want that motivational spark that…
What makes a website’s design genuinely effective? Is it the way it looks or the way that it works? In truth, it is a little bit of both. Both the aesthetic and the functionality of a web page…
Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 70 on ChromeStatus.com. Chrome 70 is beta as of September 13, 2018.
The Shape Detection API makes a device’s shape detection capabilities available on the web, letting you identify faces, barcodes, and text in images. It does this without the use of a performance-killing library. As Chrome 70, this API is available for experimentation through a Chrome origin trial.
The Shape Detection API consists of three APIs: A Face Detection API, a Barcode Detection API and a Text Detection API. Given an image bitmap or a blob, the Face Detection API returns the location of faces and the locations of eyes, noses, and mouths within those faces. To give you rudimentary control of performance, you can limit the number of returned faces and prioritize speed over performance. The Barcode Detection API decodes barcodes and QR codes into strings. (There is a QR code demo at https://qrsnapper.com/) The value can be anything from a single set of digits to multi-line text. The Text Detection API reads Latin-1 text (as defined in iso8859-1) in images. All of these APIs only expose what’s supported in the underlying device.
A short example will give you a taste of these APIs, all of which work in a similar fashion. The code below finds all barcodes or QR codes in a given image and prints their values to the console.
const image = document.getElementById('someImage');
try {
const barcodeDetector = new BarcodeDetector();
const barcodes = await barcodeDetector.detect(image);
barcodes.forEach(barcode => console.log(barcodes.rawValue));
} catch (exception) {
console.error('Boo! Barcode detection failed:', exception);
}
Chrome 70 has two updates to the Web Authentication API related to the PublicKeyCredential
type.
The Credential Management API, enabled in Chrome 51, defined a framework for handling credentials that included semantics for creating, getting, and storing them. It did this through two credential types: PasswordCredential
and FederatedCredential
. The Web Authentication API adds a third credential type, PublicKeyCredential
, which allows web applications to create and use strong, cryptographically attested, and application-scoped credentials to strongly authenticate users. The PublicKeyCredential
type was enabled by default on desktop in Chrome 67. In Chrome 70 it is also enabled by default on Android.
Also enabled by default are macOS’s TouchID and Android’s fingerprint sensor via Web Authentication. These allow developers to access biometric authenticators through the Credential Management API‘s PublicKeyCredential
type.
![]() |
A Web Authentication verification screen |
Dialog boxes, specifically authentication prompts, payments, and file pickers require context for users to make decisions. Fullscreen, by definition is immersive, and removes the context that a user needs to make a decision. Chrome now exits full screen whenever a page shows a dialog box.
Many resource-fetching elements have support for the referrerpolicy
attribute, which lets developers provide a keyword to influence the value of the Referer HTTP header that accompanies a request. The <link>
element already has support for this, so it is technically possible to preload a script with a developer-set referrer policy. Starting in this version of Chrome, the <script>
element supports the referrerpolicy
as well.
The default style of the <rp>
element is changed to display:none
instead of display:inline
even if it is not inside the <ruby>
element as defined in the HTML specification. This behavior is implemented in the user agent stylesheet, but the web author can override it.
An intervention is when a user agent does not honor an application request for security, performance, or annoyance reasons. With this change, Chrome can be configured to send intervention and deprecation messages to your servers using the Report-To
HTTP Response header field and surface them in the ReportingObserver
interface. This is the first of several proposed uses for the Report-To header. Follow these links to learn more about the header and the interface.
This change adds the SourceBuffer.changeType()
method to improve cross-codec or cross-bytestream transitions during playback with Media Source Extensions.
Opus is an audio codec already supported by the HTML5 src
attribute on <url>
elements. It is now supported by Media Source Extensions.
Dedicated workers now have a name
attribute, which is specified by an optional argument on the worker’s constructor. This lets you distinguish dedicated workers by name when you have multiple workers with the same URL. Developers can print name
in the DevTools console which will make it easier to debug workers. When the name
parameter is omitted, an empty string is used as the default value. For more information, see the discussion on GitHub.
To avoid confusion on touch feature detection, ontouch*
members on window
, document
, and element
are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as addEventListener("touchstart", ...)
is not affected.
An optional PostMessageOptions
object has been added as an argument to postMessage()
for 6 of the 7 interfaces where it’s supported, specifically, DedicatedWorkerGlobalScope
, MessagePort
, ServiceWorker
, ServiceWorker.Client
, Window
, and Worker
. This gives the function a similar interface on its definitions and allows it to be extended in the future. Because broadcastChannel.postMessage()
doesn’t take additional arguments (such as transfer) it is not being changed.
This getConfiguration()
was implemented according to the WebRTC 1.0. Specifically it returns the last configuration applied via setConfiguration()
, or if setConfiguration()
hasn’t been called, the configuration the RTCPeerConnection
was constructed with.
A description property is being added to Symbol.prototype
to provide a more ergonomic way of accessing the description of a Symbol. Previously, the description could only be accessed indirectly through Symbol.protoype.toString()
.
TLS 1.3 is an overhaul of the TLS protocol with a simpler, less error-prone design that improves both efficiency and security. The new design reduces the number of round-trips required to establish a connection and removes legacy insecure options, making it easier to securely configure a server. It additionally encrypts more of the handshake and makes the resumption mode more resilient to key compromise.
Percentage row tracks and gutters in grid containers now have indefinite heights. Previously, these were behaving similarly to percentage heights in regular blocks, but the CSS Working Group has resolved to make them behave the same as for columns, making them symmetric. Percentages are now ignored when computing intrinsic height and resolved afterwards against that height. That way both column and row axes will have symmetric behavior to resolve percentages tracks and gutters.
Web Bluetooth allows websites to communicate over GATT with nearby user-selected Bluetooth devices in a secure and privacy-preserving way. In Chrome 56, this shipped on Android, ChromeOS, and macOS. In Chrome 70 it is shipping on Windows 10. For earlier versions of Windows and Linux, it is still behind a flag (chrome://flags/#enable-experimental-web-platform-features).
WebUSB is enabled inside dedicated workers. This allows developers to perform heavy I/O and processing of data from a USB device on a separate thread to reduce the performance impact on the main thread.
Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes.
AppCache
is now removed from insecure contexts. AppCache
is a powerful feature that allows offline and persistent access to an origin, which is a powerful privilege escalation for cross-site scripting. This removes that attack vector by only allowing it only over HTTPS. Developers looking for an alternative to AppCache are encouraged to use service workers. An experimental library is available to ease that transition.
The anonymous getter for HTMLFrameSetElement
is non-standard and therefore removed.
The legacy item()
accessor is removed from the Gamepads
array. This change improves compatibility with Firefox which is so far the only browser to implement GamepadList
.
Custom Elements are a web components technology that lets you create new HTML tags, beef up existing tags, or extend components authored by other developers. Custom Elements v1 have been implemented in Chrome since version 54, which shipped in October 2016. Custom Elements v0 is now deprecated with removal expected in Chrome 73, around March 2019.
HTML Imports, which allow HTML to be imported from one document to another, are now deprecated. Removal is expected in Chrome 73, around March 2019. Sites depending on HTML imports already require a polyfill on non-Chromium browsers. When HTML imports is removed, sites that have the polyfill should continue to work on Chrome.
Shadow DOM is a web components technology that uses scoped subtrees inside elements. Shadow DOM v1 has been implemented in Chrome since version 53, which shipped in August of 2016. Shadow DOM v0 is now deprecated with removal expected in Chrome 73, around March 2019. Sites depending on HTML imports already require a polyfill on non-Chromium browsers. When Shadow DOM v0 is removed, sites that have the polyfill should continue to work on Chrome.
The speechSynthesis.speak()
function now throws an error if the document has not received a user activation. This API is being abused by sites since it is one of the only remaining APIs which does not adhere to autoplay policies in Chrome.
* { line-height: 1.38 !important; white-space: initial !important; } ul { font-size: 11pt !important; } li { line-height: 1.38 !important; } img { margin-bottom: 0 !important; } i { text-align: center !important; }
Many components in the browser contribute to speed
V8 Bench scores for a range of Chrome releases over the years. V8 Bench is the predecessor to the old Octane benchmark. We’ve used it for this chart because unlike Octane, it can run in all Chrome versions, including the initial Chrome Beta.
Give web developers more power to measure and optimize their web pages
Together, these changes help developers and businesses deliver useful content to their users sooner. We know there’s still work to be done. Here’s to offering improvements to page load performance over another 10 years!
* { line-height: 1.38 !important; white-space: initial !important; } ul { font-size: 11pt !important; } li { line-height: 1.38 !important; } img { margin-bottom: 0 !important; } i { text-align: center !important; }
In the beginning, there was Firebug
Firebug was a Firefox extension that let you debug, edit, and monitor pages in real-time. As a web developer suddenly you went from having no visibility into your pages to having what are essentially the core features of modern developer tools. The ability to understand exactly why Firefox was behaving as it was unleashed a flood of creativity on the web. Without Firebug, the Web 2.0 era wouldn’t have been possible.
WebKit Web Inspector
The “Inspect Element” era
An early prototype of Device Mode
Up until 2014 or so, we mainly thought of DevTools as a tool for building great experiences on Chrome. The rise of Node prompted us to rethink our role in the web ecosystem.
For the first few years of Node’s existence, Node developers were in a situation similar to that of web developers before Firebug, or Gmail developers before the Timeline panel: the scale of Node apps outpaced the scale of Node tools. Given that Node runs on Chrome’s JavaScript engine, V8, DevTools was a natural candidate to fill the gap. Support for debugging Node with DevTools landed in 2016 and includes the usual DevTools features, such as breakpoints, code stepping, blackboxing, source maps for transpiled code, and so on.
The name Chrome DevTools Protocol (CDP) suggests an API that only DevTools can use. The reality is more general than that: it’s the API that enables programmatic access to Chrome. Over the last few years, we’ve seen a few third-party libraries and applications join the protocol ecosystem: