https://developers.google.com/web/updates/2018/03/smooshgate

 
Web

  * Web

Fundamentals Tools  

  *  
    Chrome DevTools
  *  
    Lighthouse
  *  
    Puppeteer
  *  
    Workbox
  *  
    Chrome User Experience Report

Updates Case Studies
[                    ]
[Language          ]

  * Updates

Featured By Year By Tag
 
Web

  * Web

  * Fundamentals
  * Tools
      + More
  * Updates
      + Featured
      + By Year
      + By Tag
  * Case Studies

  * Capabilities
  * Web Updates (2021)
      + All Articles
      + March
          o Adding Rank Magnitude to the CrUX Report in BigQuery.
  * Web Updates (2020)
      + All Articles
      + December
          o Deprecations and removals in Chrome 88
      + October
          o Deprecations and removals in Chrome 87
          o Gaining security and privacy by partitioning the cache
      + September
          o Deprecations and removals in Chrome 86
      + July
          o A new default Referrer-Policy for Chrome:
            strict-origin-when-cross-origin
          o Deprecations and removals in Chrome 85
          o Using Custom Tabs with Android 11
      + May
          o Deprecations and removals in Chrome 84
          o Handling Heavy Ad Interventions
      + April
          o Deprecations and removals in Chrome 83
      + February
          o Deprecations and removals in Chrome 81
          o Adding notification permission data to the Chrome User
            Experience Report
  * Web Updates (2019)
      + All Articles
      + December
          o Deprecations and removals in Chrome 80
          o WebVR 1.1 removed from Chrome
      + October
          o Deprecations and removals in Chrome 79
      + September
          o Deprecations and removals in Chrome 78
          o Fresher service workers, by default
      + August
          o Get started with GPU Compute on the Web
          o Deprecations and removals in Chrome 77
      + July
          o Audio/Video Updates in Chrome 75
          o Web Components update: more time to upgrade to v1 APIs
      + June
          o Deprecations and removals in Chrome 76
          o Updating WebAPKs More Frequently
          o Address Bar Install for Progressive Web Apps on the
            Desktop
          o LayoutNG
          o How do I notify users that my PWA is installable?
      + May
          o In Chrome 76 you can hide the Add to Home screen
            mini-infobar
          o Augmented reality with model-viewer
          o Paint Holding - reducing the flash of white on
            same-origin navigations
          o Deprecations and removals in Chrome 75
          o Low-latency rendering with the desynchronized hint
      + March
          o Deprecations and removals in Chrome 74
          o KV Storage: the Web's First Built-in Module
      + February
          o Web Dev Ecosystem team - February wrap up
          o Exploring a back/forward cache for Chrome
          o Replacing a hot path in your app's JavaScript with
            WebAssembly
          o Get Ready for Priority Hints
          o Constructable Stylesheets: seamless reusable styles
          o Deprecations and removals in Chrome 73
          o Making wheel scrolling fast by default
          o Better match results with String.prototype.matchAll()
          o The model-viewer web component
          o Rendering on the Web
          o Audio/Video Updates in Chrome 73
          o Lightning-fast templates & Web Components: lit-html &
            LitElement
      + January
          o RTCQuicTransport Coming to an Origin Trial Near You
            (Chrome 73)
          o Prototyping Stack Packs for Lighthouse
          o Emscripten and npm
          o Making user activation consistent across APIs
  * Web Updates (2018)
      + All Articles
      + December
          o Deprecations and removals in Chrome 72
          o Introducing Background Fetch
      + November
          o Web Audio, Autoplay Policy and Games
          o Unlocking new capabilities for the web
          o Signed HTTP Exchanges
      + October
          o WebAssembly Threads ready to try in Chrome 70
          o Deprecations and removals in Chrome 71
          o Watch video using Picture-in-Picture
          o Tweaks to cache.addAll() and importScripts() coming in
            Chrome 71
          o Chrome 69 Paint Timing Issues
          o Houdini's Animation Worklet
      + September
          o Inside look at modern web browser (part 4)
          o Inside look at modern web browser (part 3)
          o Audio/Video Updates in Chrome 70
          o Deprecations and removals in Chrome 70
          o Inside look at modern web browser (part 2)
          o Asynchronous Access to HTTP Cookies
          o Inside look at modern web browser (part 1)
          o The Reporting API
      + August
          o Extending the browser with WebAssembly
          o Web Performance Made Easy: Google I/O 2018 edition
          o Emscripten's embind
          o OffscreenCanvas -- Speed up Your Canvas Operations with a
            Web Worker
          o Custom site performance reports with the CrUX Dashboard
          o Deprecations and removals in Chrome 69
          o Audio/Video Updates in Chrome 69
      + July
          o ReportingObserver: know your code health
          o Speed is now a landing page factor for Google Search and
            Ads
          o Page Lifecycle API
          o Well-Controlled Scrolling with CSS Scroll Snap
          o Introducing NoState Prefetch
          o PWACompat: the Web App Manifest for all browsers
          o Site Isolation for web developers
          o Experimenting with First Input Delay in the Chrome UX
            Report
      + June
          o Introduction to Feature Policy
          o More native echo cancellation!
          o Audio Worklet Design Pattern
          o Augmented reality for the web
          o Chacmool: Augmented reality in Chrome Canary
          o Deprecations and removals in Chrome 68
          o Bring your payment method to the web with the Payment
            Handler API
          o Changes to Add to Home Screen Behavior
      + May
          o Beyond SPAs: alternative architectures for your PWA
          o Enabling Strong Authentication with WebAuthn
          o Welcome to the immersive web
          o Using Lighthouse To Improve Page Load Performance
          o Announcing Lighthouse 3.0
      + April
          o Deprecations and removals in Chrome 67
          o Loading WebAssembly modules efficiently
          o Present web pages to secondary attached displays
      + March
          o Working with the new CSS Typed Object Model
          o Deprecations and removals in Chrome 66
          o macOS native echo cancellation
          o #SmooshGate FAQ
          o Credential Management API Feature Detection Check-up
          o Emscripting a C library to Wasm
      + February
          o Lighthouse 2.8 Updates
          o Deprecations and removals in Chrome 65
          o Meltdown/Spectre
      + January
          o Chrome User Experience Report: New country dimension
          o CSS Paint API
  * Web Updates (2017)
      + All Articles
      + December
          o Disabling hardware noise suppression
          o An update on Better Ads
          o Enter Audio Worklet
          o Preloading modules
          o Chrome 64 to deprecate the chrome.loadTimes() API
          o Chrome User Experience Report: expanding to top 1
            Million+ origins
          o Deprecations and removals in Chrome 64
          o Lighthouse 2.6 Updates
          o Audio/Video Updates in Chrome 63/64
          o The Device Memory API
      + November
          o Take control of your scroll: customizing pull-to-refresh
            and overflow effects
      + October
          o Removing ::shadow and /deep/ in Chrome 63
          o Deprecations and removals in Chrome 63
          o Exceeding the buffering quota
          o Lighthouse 2.5 Updates
          o Animating a Blur
      + September
          o Abortable fetch
          o WebVR changes in Chrome 62
          o An event for CSS position:sticky
          o Deprecations and Removals in Chrome 62
          o Autoplay Policy Changes
          o Picture-in-Picture (PiP)
          o Audio/Video Updates in Chrome 62
          o Introducing visualViewport
      + August
          o Deprecations and Removals in Chrome 61
          o Estimating Available Storage Space
      + July
          o Audio/Video Updates in Chrome 61
          o Upcoming regular expression features
      + June
          o Aligned Input Events
          o Supercharged Live Stream Blog: Code Splitting
          o DOMException: The play() request was interrupted
          o Automated testing with Headless Chrome
          o Latest Updates to the Credential Management API
          o Deprecations and Removals in Chrome 60
          o Introduction to the Budget API
      + May
          o Deprecations and Removals in Chrome 59
      + April
          o Getting Started with Headless Chrome
          o Moving to the Native Notification System on macOS
      + March
          o Chromium policy on JavaScript dialogs
          o Building performant expand & collapse animations
          o CSS Deep-Dive: matrix3d() For a Frame-Perfect Custom
            Scrollbar
          o Audio/Video Updates in Chrome 58
          o We'll Cross the (Media) Streams, Ray
          o Deprecations and Removals in Chrome 58
          o Background Tabs in Chrome 57
          o What's New In DevTools (Chrome 58)
      + February
          o Speed up Service Worker with Navigation Preloads
          o Lighthouse January 2017 update
          o Customize Media Notifications and Handle Playlists
          o API Deprecations and Removals in Chrome 57
      + January
          o Changes in the Payment Request API
          o CSS Grid - Table layout is back. Be there and be square.
          o Making touch scrolling fast by default
          o Web Components v1 - the next generation
  * Web Updates (2016)
      + All Articles
      + December
          o Building a Better Web with Lighthouse
          o URL Bar Resizing
          o Chrome DevTools: JavaScript CPU Profiling in Chrome 58
          o API Deprecations and Removals in Chrome 56
          o position:sticky is back in Chrome
          o Take Photos and Control Camera Settings
          o Performant Parallaxing
      + November
          o Get Ready for the Chrome Dev Summit 2016
      + October
          o Avoiding the Not Secure Warning in Chrome
          o DevTools Digest, October 2016
          o Manage Hyphens with CSS
          o Pointing the Way Forward
          o API Deprecations and Removals in Chrome 55
          o Capture a MediaStream From a Canvas, Video or Audio
            Element
          o Once Upon an Event Listener
          o Touch Action Options
          o auxclick is Coming to Chrome 55
          o Updates to developers.google.com/web
      + September
          o Re-rastering Composited Layers on Scale Change
          o API Deprecations and Removals in Chrome 54
          o Cross-origin Service Workers: Experimenting with Foreign
            Fetch
          o CacheQueryOptions Arrive in Chrome 54
          o DevTools Digest, September 2016: Perf Roundup
          o Options of a PushSubscription
          o BroadcastChannel API: A Message Bus for the Web
      + August
          o Intervening against document.write()
          o Web Animations API Hits Cross-browser Milestone
          o API Deprecations and Removals in Chrome 53
          o DevTools Digest, August 2016
      + July
          o Bringing Easy and Fast Checkout with Payment Request API
          o Muted Autoplay on Mobile: Say Goodbye to Canvas Hacks and
            Animated GIFs!
          o Web Push Interoperability Wins
          o Offline Google Analytics Made Easy
          o Complexities of an Infinite Scroller
      + June
          o Goodbye Short Sessions: A Proposal for Using Service
            Workers to Improve Cookie Management on the Web
          o ECDSA for WebRTC: Better Security, Better Privacy and
            Better Performance
          o Flexbox Gets New Behavior for absolute-positioned
            Children
          o Service Worker Caching, PlaybackRate and Blob URLs for
            Audio and Video on Chrome for Android
          o CSS Containment in Chrome 52
          o API Deprecations and Removals in Chrome 52
          o Performance Observer: Efficient Access to Performance
            Data
          o DevTools Digest: DevTools in 2016 and Beyond
          o Improving Scroll Performance with Passive Event Listeners
          o Stream Your Way to Immediate Responses
      + May
          o Houdini: Demystifying CSS
      + April
          o DevTools Digest: More Power with the New Command Menu
          o Geolocation API Removed from Unsecured Origins in Chrome
            50
          o IntersectionObserver's Coming into View
          o API Deprecations and Removals in Chrome 51
          o What's New with KeyboardEvents? Keys and Codes!
          o Streamlining the Sign-in Flow Using Credential Management
            API
          o Experiment Time: Scroll Anchoring
      + March
          o A New Device Mode for a Mobile-First Generation
          o Creating a Web-Enabled IoT Device with Intel Edison
          o Removing Headaches from Focus Management
          o Media Source API: Automatically Ensure Seamless Playback
            of Media Segments in Append Order
          o API Deprecations and Removals in Chrome 50
          o Web Animations Improvements in Chrome 50
          o Canvas toBlob() Support Added in Chrome 50
          o Chrome Supports createImageBitmap() in Chrome 50
          o DOMTokenList Validation Added in Chrome 50
          o FormData Methods for Inspection and Modification
          o Web Notification Improvements in Chrome 50: Icons, Close
            Events, Renotify Preferences and Timestamps
          o Web Push Payload Encryption
          o Device Orientation Changes Are Coming to Chrome 50
          o Prioritizing Your Resources with link rel='preload'
          o HTMLMediaElement.play() Returns a Promise
      + February
          o Supercharged Remote Debugging, Class Toggles and Our Own
            Late Night Show?!
          o DevTools Go Dark, @keyframe Editing and Smarter
            Autocomplete
          o Web Audio Updates in Chrome 49
          o Smooth Scrolling in Chrome 49
          o Introducing ES2015 Proxies
          o API Deprecations and Removals in Chrome 49
      + January
          o Controlling Font Performance with font-display
          o CSS Variables: Why Should You Care?
          o Record Audio and Video with MediaRecorder
          o VP9 Is Now Available in WebRTC
          o Notification Actions in Chrome 48
          o High Resolution Timestamps for Events
          o Easy URL Manipulation with URLSearchParams
  * Web Updates (2015)
      + All Articles
      + December
          o Google Cast for Chrome on Android
          o Getting Started with Progressive Web Apps
          o Security Panel Debuts in Chrome DevTools
          o Introducing Background Sync
      + November
          o Chrome 47 WebRTC: Media Recording, Secure Origins and
            Proxy Handling
          o DevTools Digest (CDS Edition): A Glimpse into the Future
            and RAIL Profiling
          o Instant Loading Web Apps with an Application Shell
            Architecture
      + October
          o DevTools Digest: Efficient Element Edits, Service Worker
            Debugging, and Material Design Shades
          o Web Animations Resources
          o Manage the Triggering of Touch to Search
          o Notification requireInteraction - A Smoother Notification
            UX on Desktop
          o DevTools Digest: Tab Reordering, Console is #2 and
            Framework Event Listeners
          o Input Device Capabilities
          o Choose Cameras, Microphones and Speakers from Your Web
            App
      + September
          o The EME Logger Extension
          o Updates to the Service Worker Cache API
          o History API: Scroll Restoration
      + August
          o Automating Resource Selection with Client Hints
          o Tab Discarding in Chrome: A Memory-Saving Experiment
          o Rolling out Public Key Pinning with HPKP Reporting
          o Using the web app manifest to specify a site wide theme
            color
          o Using requestIdleCallback
          o The larger-than advanced Network Panel filter, and a few
            others
          o Simple keyboard tricks to use in the Styles Pane
          o DevTools Digest: Aggregated Timeline Details, Color
            Palettes and More
          o New Release of Material Design Lite - 1.0.4
          o Using poster images on plugin content
          o Easily duplicate DOM nodes
          o Edit HTML in the Console Panel
          o Five tricks to use in the Console Panel
          o A new home for DevTools
      + July
          o Improved DOM breadcrumbs
          o Live-edit CSS in Sources
          o DevTools Digest: Film strip and a new home for throttling
          o Add a new custom device as a preset
          o MediaStream Deprecations
          o Measuring Performance in a Service Worker
          o Using rotationAngle and touchRadius
          o Media playback notifications for Chrome on Android
          o Inspect and trigger CSS media queries
          o Shortcut to select the next occurrence
          o Select and execute a block of code in the Sources Panel
          o Set a breakpoint based on a certain condition
          o Quickly cycle through the DevTools panels
          o Print out a quick stack trace from the Console
          o Who inspects the inspector?
          o Trigger a pseudo class on an element
          o Project wide search with optional file scope
          o Network color groups
          o Preview JavaScript values inline while debugging
      + June
          o Quickly edit/view resources from the Elements panel
          o Media Source Extensions for Audio
          o Help users checkout faster with Autofill
      + May
          o Notifying you of Changes to Notifications
          o Some UI and feature enhancements to the Color Picker tool
          o Alt + Click to expand all child nodes
          o Better Incognito DevTools
          o Command click to add multiple cursors in the Sources
            Panel
          o Copy image as data URI
          o Quick-edit element tags
          o Quickly monitor events from the Console Panel
          o Reveal in Elements panel
          o See matching selectors
          o The currently selected DOM node
          o The easing editor
          o Toggle the DevTools dock state with a keyboard shortcut
          o Unfinished network requests
          o Use keyboard to navigate through callstack
          o Get and debug event listeners
          o Automatically pause on any exception
          o Quickly change CSS values
          o Autocomplete for bracket notation
          o Replay a network request in cURL
          o View and change your DOM breakpoints
          o Scroll elements into the viewport
          o Film strips in Network panel
          o Triggering of pseudo classes
          o Expand CSS shorthand properties
          o Port forwarding
          o Search DOM tree by CSS selector
          o Get notified of JS errors while you type
          o Easy timeline recording
          o Go to a line number at a specific column
          o Easily jump to event listeners
          o High performance video with hardware decoding
          o Granular statement highlights
          o Local Modifications
          o Hard reload
          o Cycle through editing locations
          o Copy the response of a network resource to your clipboard
          o Perform a column selection by by dragging
      + April
          o Predefined snippets
          o Quick-edit element tags
          o Copy image as data URI
          o Reveal in Elements panel
          o See matching selectors
          o Quickly monitor events from the Console Panel
          o Command click to add multiple cursors in the Sources
            Panel
          o Better Incognito DevTools
          o The currently selected DOM node
          o Alt + Click to expand all child nodes
          o Toggle the DevTools dock state with a keyboard shortcut
          o Unfinished network requests
          o The easing editor
          o Autocapitalize for mobile
          o Cut and Copy Commands
          o DOM Attributes now on the prototype chain
          o Permissions API for the Web
          o Simplified Concepts in Web Animations Naming
      + March
          o A new home for DevTools
          o DevTools Timeline: Now Providing the Full Story
          o Push Notifications on the Open Web
          o Introduction to fetch()
          o Creating semantic sites with Web Components and JSON-LD
      + February
          o Offline-first, fast, with the sw-precache module
      + January
          o Getting Literal With ES6 Template Strings
          o Chrome Dev Summit 2014: Let's build some apps with
            Polymer!
          o What the Virtual Viewport?
          o image-rendering: pixelated
          o Chrome Dev Summit 2014: Polymer - State of the Union
          o Chrome Dev Summit 2014: The Applied Science of Runtime
            Performance
  * Web Updates (2014)
      + All Articles
      + December
          o Web Animations Playback Control in Chrome 39
          o Fundamentals of Mobile Web Development
      + November
          o Developer feedback needed: Frame Timing API
          o Support for theme-color in Chrome 39 for Android
      + October
          o Generators: the Gnarly Bits
          o Send beacon data in Chrome 39
      + September
          o Precision Touch for Precise Gestures
      + August
          o Collecting and Iterating, the ES6 Way
          o Easier ArrayBuffer to String conversion with the Encoding
            API
      + July
          o Web Audio Changes in m36
          o dialog element shipped in Chrome 37 Beta
      + June
          o Blob support for IndexedDB landed on Chrome Dev
          o Automating Web Performance Measurement
      + May
          o Web Animations - element.animate() is now in Chrome 36
          o A More Compatible, Smoother Touch
      + March
          o Get on the CSS Grid!
      + February
          o The Yeoman Monthly Digest #3
      + January
          o Yo Polymer - A Whirlwind Tour Of Web Component Tooling
          o Web apps that talk - Introduction to the Speech Synthesis
            API
          o Chrome Dev Summit: Platforms Summary
          o Chrome Dev Summit: Open Web Platform Summary
          o Chrome Dev Summit: Performance Summary
          o Chrome Dev Summit: Polymer declarative, encapsulated,
            reusable components
          o Chrome Dev Summit: Mobile Summary
  * Web Updates (2013)
      + All Articles
      + December
          o The Yeoman Monthly Digest #2
          o DevTools Digest December 2013
          o New Web Animations engine in Blink drives CSS Animations
            & Transitions
          o 300ms tap delay, gone away
      + November
          o The Yeoman Monthly Digest #1
          o The Landscape Of Front-end Development Automation
            (Slides)
      + October
          o Web Audio live audio input - now on Android!
          o Flexbox layout isn't slow
      + September
          o DevTools answers: What font is that?
          o dialog element: Modals made easy
      + July
          o Alpha transparency in Chrome video
      + June
          o sourceMappingURL and sourceURL syntax changed
      + March
          o Introduction to Custom Filters (aka CSS Shaders)
          o What's the CSS :scope pseudo-class for?
          o Visualizing Shadow DOM Concepts
      + February
          o Profiling Long Paint Times with DevTools' Continuous
            Painting Mode
          o WebRTC: RTCDataChannel demo, API changes... and Chrome
            talks to Firefox!
      + January
          o CSS Background shorthand coming to mobile WebKit browsers
          o Voice Driven Web Apps: Introduction to the Web Speech API
  * Web Updates (2012)
      + All Articles
      + December
          o Screensharing with WebRTC
          o Canvas-driven background images
          o WebRTC hits Firefox, Android and iOS
      + November
          o Respond to change with Object.observe
          o Content Security Policy 1.0 is officially awesome.
      + September
          o Interactive Globe with CSS shaders & Google Maps
          o Live Web Audio Input Enabled!
          o Stacking Changes Coming to position:fixed elements
      + August
          o Stick your landings! position: sticky lands in WebKit
          o Integrating input[type=file] with the Filesystem API
          o When milliseconds are not enough: performance.now
          o [datalist] for range/color inputs offer some default
            choices
          o Quick FAQs on input[type=date] in Google Chrome
      + July
          o Drag and drop a folder onto Chrome now available
          o How to measure browser graphics performance
          o Arrived! xhr.send(ArrayBufferViews)
          o Taking advantage of GPU acceleration in the 2D canvas
          o Writing a flippable book using CSS Regions and 3D
            transforms
      + June
          o The amazing powers of CSS
          o How to convert ArrayBuffer to and from String
          o Don't Build Blobs, Construct Them
      + May
          o requestAnimationFrame API: now with sub-millisecond
            precision
          o Websocket Frame Inspection now in Chrome DevTools
      + April
          o datalist landed in Chrome Canary
          o Processing XHR2 file uploads in PHP
          o WebRTC Protothon
          o Big boost to DOM performance - WebKit's innerHTML is 240%
            faster
          o Round-up of Web Browser Internals Resources
          o Taking an Entire Page Offline using the HTML5 FileSystem
            API
      + March
          o CSS layout gets smarter with calc()
          o Optimizing JavaScript
          o A New Experimental Feature: scoped stylesheets
      + February
          o WebGL and Web Audio API demo roundup
          o SwiftShader brings software 3D rendering to Chrome
          o Detect DOM changes with Mutation Observers
          o Getting Gmail to handle all mailto: links with
            registerProtocolHandler
          o Chrome for Android: Accelerating the Mobile Web
          o Pointer Lock API Brings FPS Games to the Browser
          o HTML5 audio and the Web Audio API are BFFs!
      + January
          o Getting Rid of Synchronous XHRs
          o Web Audio FAQ
          o Introducing Video Player Sample
  * Web Updates (2011)
      + All Articles
      + December
          o CSS Filter Effects Landing in WebKit
          o Transferable Objects: Lightning Fast!
          o Use mediump precision in WebGL when possible
      + November
          o Chrome Developer Tools for Speed
          o 'Stream' video using the MediaSource API
          o WebGL demo roundup
      + October
          o App Cache Tools and Auto-Generators
          o Defining Scope In IndexedDB Transactions
          o Spooktacular HTML5 Pumpkin
          o Let Your Content Do the Talking: Fullscreen API
          o WebSockets updated to latest version in Chrome Canary
          o Keeping up with HTML5 and browser support
          o Having a ride with Three.js
      + September
          o New Game Conference for HTML5 Game Developers Coupon
          o 7 minute videos: JavaScript Console Protips & newish DOM
            APIs
      + August
          o Workers  ArrayBuffer
          o What's different in the new WebSocket protocol
          o insertAdjacentHTML Everywhere
          o Debugging the Filesystem API
          o Saving generated files on the client-side
          o Seek into local files with the File System API
          o Downloading resources in HTML5: a[download]
      + July
          o HTML5 Libraries/polyfills - Mid July
          o Announcing New Game, the conference for HTML5 game
            developers
          o Don't Miss a Frame: Using the Page Visibility API + HTML5
            Video
          o Multiplayer Audio Fun
          o Using Cross-domain images in WebGL
      + June
          o Registering a custom protocol handler
          o HTML5 Libraries - Late June
          o Page Visibility API: Have I got your attention?
          o Contra in HTML5 + Web Audio API
          o navigator.onLine in Chrome Dev channel
          o Welcome to updates.html5rocks.com!

  * Chrome DevTools
  * Lighthouse
  * Puppeteer
  * Workbox
  * Chrome User Experience Report

It's a wrap for Chrome Dev Summit 2020! Watch all the sessions at
goo.gle/cds20-sessions now!

  * Home
  * 
    Products
  * 
    Web
  * 
    Updates
  * 
    By Year

[{ "type": "thumb-down", "id": "missingTheInformationINeed",
"label":"Missing the information I need" },{ "type": "thumb-down",
"id": "tooComplicatedTooManySteps", "label":"Too complicated / too
many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out
of date" },{ "type": "thumb-down", "id": "samplesCodeIssue",
"label":"Samples/Code issue" },{ "type": "thumb-down", "id":
"otherDown", "label":"Other" }] [{ "type": "thumb-up", "id":
"easyToUnderstand", "label":"Easy to understand" },{ "type":
"thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{
"type": "thumb-up", "id": "otherUp", "label":"Other" }]

#SmooshGate FAQ

Mathias Bynens
By Mathias Bynens
JavaScript whisperer

What the smoosh happened?!

A proposal for a JavaScript language feature called
Array.prototype.flatten turns out to be Web-incompatible. Shipping
the feature in Firefox Nightly caused at least one popular website to
break. Given that the problematic code is part of the widespread
MooTools library, it's likely that many more websites are affected.
(Although MooTools is not commonly used for new websites in 2018, it
used to be very popular and is still present on many production
websites.)

The proposal author jokingly suggested renaming flatten to smoosh to
avoid the compatibility issue. The joke was not clear to everyone,
some people started to incorrectly believe that the new name had
already been decided, and things escalated quickly.

What does Array.prototype.flatten do?

Array.prototype.flat, originally proposed as Array.prototype.flatten,
flattens arrays recursively up to the specified depth, which defaults
to 1.

// Flatten one level:
const array = [1, [2, [3]]];
array.flat();
// - [1, 2, [3]]

// Flatten recursively until the array contains no more nested arrays:
array.flat(Infinity);
// - [1, 2, 3]

Note: Since the publication of this article, flatten has been renamed
to flat to resolve #SmooshGate. The above example has been updated
accordingly, but keep in mind that the original name was flatten.

The same proposal includes Array.prototype.flatMap, which is like
Array.prototype.map except it flattens the result into a new array.

[2, 3, 4].flatMap((x) => [x, x * 2]);
// - [2, 4, 3, 6, 4, 8]

What is MooTools doing that causes this problem?

MooTools defines their own non-standard version of
Array.prototype.flatten:

Array.prototype.flatten = /* non-standard implementation */;

MooTools' flatten implementation differs from the proposed standard.
However, this is not the problem! When browsers ship
Array.prototype.flatten natively, MooTools overrides the native
implementation. This ensures that code relying on the MooTools
behavior works as intended regardless of whether native flatten is
available. So far, so good!

Unfortunately, something else then happens. MooTools copies over all
its custom array methods to Elements.prototype (where Elements is a
MooTools-specific API):

for (var key in Array.prototype) {
  Elements.prototype[key] = Array.prototype[key];
}

for-in iterates over "enumerable" properties, which doesn't include
native methods like Array.prototype.sort, but it does include
regularly-assigned properties like Array.prototype.foo = whatever.
But -- and here's the kicker -- if you overwrite a non-enumerable
property, e.g. Array.prototype.sort = whatever, it remains
non-enumerable.

Currently, Array.prototype.flatten = mooToolsFlattenImplementation
creates an enumerable flatten property, so it's later copied to
Elements. But if browsers ship a native version of flatten, it
becomes non-enumerable, and isn't copied to Elements. Any code
relying on MooTools' Elements.prototype.flatten is now broken.

Although it seems like changing the native Array.prototype.flatten to
be enumerable would fix the problem, it would likely cause even more
compatibility issues. Every website relying on for-in to iterate over
an array (which is a bad practice, but it happens) would then
suddenly get an additional loop iteration for the flatten property.

The bigger underlying problem here is modifying built-in objects.
Extending native prototypes is generally accepted as a bad practice
nowadays, as it doesn't compose nicely with other libraries and
third-party code. Don't modify objects you don't own!

Why don't we just keep the existing name and break the Web?

In 1996, before CSS became widespread, and long before "HTML5" became
a thing, the Space Jam website went live. Today, the website still
works the same way it did 22 years ago.

How did that happen? Did someone maintain that website for all these
years, updating it every time browser vendors shipped a new feature?

As it turns out, "don't break the Web" is the number one design
principle for HTML, CSS, JavaScript, and any other standard that's
widely used on the Web. If shipping a new browser feature causes
existing websites to stop working, that's bad for everyone:

  * visitors of the affected websites suddenly get a broken user
    experience;
  * the website owners went from having a perfectly-working website
    to a non-functional one without them changing anything;
  * browser vendors shipping the new feature lose market share, due
    to users switching browsers after noticing "it works in browser
    X";
  * once the compatibility issue is known, other browser vendors
    refuse to ship it. The feature specification does not match
    reality ("nothing but a work of fiction"), which is bad for the
    standardization process.

Sure, in retrospect MooTools did the wrong thing -- but breaking the
web doesn't punish them, it punishes users. These users do not know
what a moo tool is. Alternatively, we can find another solution, and
users can continue to use the web. The choice is easy to make.

Does that mean bad APIs can never be removed from the Web Platform?

It depends. In rare cases, bad features can be removed from the Web.
Even just figuring out whether it's possible to remove a feature is a
very tricky effort, requiring extensive telemetry to quantify how
many web pages would have their behavior changed. But when the
feature is sufficiently insecure, is harmful to users, or is used
very rarely, this can be done.

<applet>, <keygen>, and showModalDialog() are all examples of bad
APIs that were successfully removed from the Web Platform.

Why don't we just fix MooTools?

Patching MooTools so that it no longer extends built-in objects is a
good idea. However, it doesn't solve the problem at hand. Even if
MooTools were to release a patched version, all existing websites
using it would have to update for the compatibility problem to go
away.

Can't people just update their copy of MooTools?

In a perfect world, MooTools would release a patch, and every single
website using MooTools would magically be updated the next day.
Problem solved, right?!

Unfortunately, this is unrealistic. Even if someone were to somehow
identify the full set of affected websites, manage to find contact
information for each and every one of them, successfully reach out to
all the website owners, and convince them all to perform the update
(which might mean refactoring their entire code base), the entire
process would take years, at best.

Keep in mind that many of these websites are old and likely
unmaintained. Even if the maintainer is still around, it's possible
they're not a highly-skilled web developer like yourself. We can't
expect everyone to go and change their 8-year-old website because of
a web compatibility issue.

How does the TC39 process work?

TC39 is the committee in charge of evolving the JavaScript language
through the ECMAScript standard.

#SmooshGate caused some to believe that "TC39 wants to rename flatten
to smoosh", but it was an in-joke that wasn't well-communicated
externally. Major decisions like renaming a proposal are not taken
lightly, are not taken by a single person, and are definitely not
taken overnight based on a single GitHub comment.

TC39 operates on a clear staging process for feature proposals.
ECMAScript proposals and any major changes to them (including method
renaming) are discussed during TC39 meetings, and need to be approved
by the entire committee before they become official. In the case of
Array.prototype.flatten, the proposal has already gone through
several stages of agreement, all the way up to Stage 3, indicating
the feature is ready to be implemented in Web browsers. It's common
for additional spec issues to come up during implementation. In this
case, the most important feedback came after trying to ship it: the
feature, in its current state, breaks the Web. Hard-to-predict issues
like these are part of the reason why the TC39 process doesn't just
end once browsers ship a feature.

TC39 operates on consensus, meaning the committee has to agree on any
new changes. Even if smoosh had been a serious suggestion, it seems
likely that a committee member would object to it in favor of a more
common name like compact or chain.

The renaming from flatten to smoosh (even if it hadn't been a joke)
has never been discussed at a TC39 meeting. As such, the official
TC39 stance on this topic is currently unknown. No single individual
can speak on behalf of all of TC39 until consensus is reached at the
next meeting.

TC39 meetings are generally attended by people with highly diverse
backgrounds: some have years of programming language design
experience, others work on a browser or JavaScript engine, and an
increasing number of attendants are there to represent the JavaScript
developer community.

How was SmooshGate resolved, eventually?

During the May 2018 TC39 meeting, #SmooshGate was officially resolved
by renaming flatten to flat.

Array.prototype.flat and Array.prototype.flatMap shipped in V8 v6.9
and Chrome 69.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates
in your favorite feed reader!

[{ "type": "thumb-down", "id": "missingTheInformationINeed",
"label":"Missing the information I need" },{ "type": "thumb-down",
"id": "tooComplicatedTooManySteps", "label":"Too complicated / too
many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out
of date" },{ "type": "thumb-down", "id": "samplesCodeIssue",
"label":"Samples/Code issue" },{ "type": "thumb-down", "id":
"otherDown", "label":"Other" }] [{ "type": "thumb-up", "id":
"easyToUnderstand", "label":"Easy to understand" },{ "type":
"thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{
"type": "thumb-up", "id": "otherUp", "label":"Other" }]

Except as otherwise noted, the content of this page is licensed under
the Creative Commons Attribution 4.0 License, and code samples are
licensed under the Apache 2.0 License. For details, see the Google
Developers Site Policies. Java is a registered trademark of Oracle
and/or its affiliates.

Last updated 2021-05-18 UTC.

  * Chromium Blog Chromium Blog
    The latest news on the Chromium blog.
  * web.dev web.dev
    Useful guidance and analysis from web.dev for web developers.
  * Twitter Twitter
    Connect with @ChromiumDev on Twitter.
  * Videos Videos
    Check out our videos.

  * Key Topics

      + Web on Android
      + Chrome Extension Docs
      + Site-Kit Plugin for WordPress
      + How to file a good browser bug
      + Progressive Web Apps
  * More Topics

      + Search Console Help Center
      + Search Console Community
      + Instructor Led Training
      + Agencies
  * Contribute

      + File an Issue
      + View Page Source

Google Developers

  * Android
  * Chrome
  * Firebase
  * Google Cloud Platform
  * All products

  * Terms
  * Privacy
  * Sign up for the Google Developers newsletter Subscribe

[Language          ]