What’s new for the Web — Google I/O 2018

Google finished up wrapping it’s annual conference for Developers, the Google I/O 2018. While you may not have the time to go through all the announcements, I made a short bullet-summary list of what happened for the web.

I apologize beforehand if I left something behind. There was a lot (small yet important things) going on. I’m more than welcome to get feedback from the comments to see what are the things that this post is missing!

Web

• Web Package (Don’t confuse it with Webpack). Allows you to package your website and it allows it to be shared offline.
• Web Policies. Baked-in platform for linting HTML CSS a la JavaScript. I mean, you can limit the CSS animations used, which image sizes are allowed. The max CSS that it’s going to pass, etc.
• Layered APIs.

.app Top Level Domain (TLD)

Introducing .app domain names and how to secure them (Google I/O ‘18)

See the video here.

• .io Top Level Domains (TLD) is an Internet country code top-level domain assigned to the British Indian Ocean Territory! (It’s fine, I just thought that it was made for developers… It isn’t)
• All .app domains must be served over HTTPS.
• Implements HSTS.
• HSTS Prevents HTTP downgrades attacks. The ISP may downgrade the HTTPS to HTTP. This is prevented by using HSTS
• You also prevent from ad injection.
• You can also preload the domain.
• The .app Top Level Domain is Preloaded.
• You don’t need to config it in Nginx or .app
• Submit your topdomain to the preload list. This is a site list that are hardcoded into Chrome as being HTTPS only.

PWA — Progressive Web Application — Some Caveats.

• For making the App installable, you’ll have to execute Window.addEventListener(‘beforeinstallprompt’), as Chrome won’t display the installation prompt by its own.
• Add the “scope” attribute to the manifest.json!! Not adding it, will bounce you off from the app to a browser tab if you change URLs.
• Add Trusted Web Activity.

Trusted Web Activities are a new way to integrate your web-app content such as your PWA with your Android app using a protocol based on Custom Tabs

• Setup digital asset links
• Update AndroidManifest.xml
• Update res/values/strings.xml
• Create & deploy assetlinks.json
• Create the activity
• https://g.co/TrustedWebActivities

The Chrome DevTools Console

What’s new in Chrome DevTools (Google I/O ‘18)

I strongly recommend checking this video! It’s super helpful!

• Search through all the files that are loaded:
• Ctrl+Shit+P to have the selector open.
• Go to “Changes” in the 3 dots to see all the changes you’ve performed.
• New search in Network tab in console, press ctrl + F.
• Performance.getEntriesByType is a Chrome DevTools speicifc API that allows you to fetch things from the URL. Check this out.
• $_ means the previous result of the console in Chrome DevTools! E.g. it gets the previous output from the console (Can be a variable, string, array, anything)
• Debug() on devtools allow you to stop on a function.
• Monitor()
• You can use queryObjects to query from class objects as well!
• You can use Boolean constructor in filter.
• Eager Evaluation. (YOU HAVE TO CHECK THIS — BRUTAL) Behind a flag in Chrome Canary.

More Chrome DevTools

I decided to make this new section, because the ones below are not part of the actual video.

• Chrome DevTools let you see the element’s contrast by acquiring the background color of the element is sitting on top of.
• If you have text on top of an image, Chrome DevTools isn’t going to pick it up for you. But, you can click on the Pick Background color and let it do its magic.

Good to know

• To autoplay on an iFrame the parent needs to have autoplay enabled and it has to have allow=”autoplay; fullscreen” Check more here.
• You can use Picture in Picture by requesting requestPictureInPicture (This is for Android 8.0 onwards)
• Presentation API to present through a wired connection HDMI. This will make your browser ready for presenting in projectors or external screens.

Video

• AV1 Video Codec by AOM (Alliance for Open Media) — Google. There’s a close to 30% of savings over VP9!
• Shaka Player. Adopt the best practice.
• You can see the coverage of the application.
• navigator.connection.effectiveType
• Avoid costly round-trips by adding preconnect to the link tag.
• Experimental: Priority Hints
• Guess.js

Wordpress

• Making a wordpress site responsive:
• Matthew Accumulated Advantage
• 50% of the web is powered by some sort of CMS.
• Wordpress power 30% of the Web.
• AMP Themes support:
• AMP Plugin 0.7 released
• AMP Plugin 1.0 (IN Progress)

Accessibility In The Browser

• Accessibility in the browser:
• Use lighthouse to test Accessibility. There’s an accessibility panel that lets you check how friendly your application is to screen readers.
• New CSS Pseudo Class, :focus-visible.
• Accessibility Object Model

Modern JavaScript

• Build the future of the web with modern JavaScript

• This is isn’t new (I personally didn’t know about this). <script type=”module” src=”/mypath_to_js_module.mjs”></script>

• <script nomodule src=”fallback”></script>

• Preload the modules by doing:

• <link rel=”modulepreload” href=”lib.mjs” > (modulepreload is not a typo) Check the link here.

• The .mjs extension isn’t required in the browser. People just use it because NodeJS does enforce the extension. The browser will read it as a JavaScript file since you specified its type as a module.

• The .meta is not part of the standard and it will give you a different result whether is on the browser or on Node.

• Now you can group JavaScript number in the thousands by using underscore (TypeScript supports this, since 2.7):

• Instead of 1000000000, you can type: 1_000_000_000.

• It also works for hex.

• It’s still being standardized.

• There’s a new data type, called BigInt.

• For await of loop.

• New S and U flags for regex.

• New name captures for your regex: /(?<year>\d{4}). This is going to be super convenient, as you can access the RegEx in the following manner (Source from this link):

  const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;const result = pattern.exec('2017-07-10');// result.groups.year === '2017'// result.groups.month === '07'// result.groups.day === '10'

• This RegEx works with Babel and Polyfills

• You can now use RegEx in Unicode. This also works in HTML tags!.

• Negative LookBehind

• String.matchAll(RegEx) — For Of loop

• String.trimStart() string.trimEnd(). This works like a padding mechanism.

• Adds finally to the promise (Vs then, catch). It also works in the try catch block.

• (ECMA 2018) — Object spreading in object literals. This would be equivalent to doing a shallow copy.

• You can prevent from accidentally mutating objects by adding the spread operator to the objects! Vs Object.assign

WebXR

• The immersive Web VR + AR. It’s now called WebXR
• Chrome was able to achieve 2x the pixel at the same framerates.
• Origin Trial in Chrome 67. WebXR Device API. (See link for more info)
• Chrome://flags/#webxr
• Magic Window. The effect that is created when you have a mobile device (smartphone) and loads a web app with WebXR content in it. You can see how, by panning your phone around the XR (AR And/Or VR) application moves with it.
• Navigator.xr.requestDevice()
• XRViews

An [XRView](https://immersive-web.github.io/webxr/#xrview) describes a single view into an XR scene. Each view corresponds to a display or portion of a display used by an XR device to present imagery to the user

WASM

• Uses Emscriptem as a compiler to compile C and C++ to WebAssembly.
• Emsc — s WASM=1 -o
• Emcc gives us 2 files.
• Module object allow us to call our compile function
• EM_JS
• Wasm Threads
• SharedArrayBuffer. This applies to Web Workers. This is important because WebWorkers used to copy information from the main thread to the worker, you don’t have to do it anymore with SharedArrayBuffer! It now shares it with the main thread! This is a work-in-progress.
• Webassembly can run through reference to the DOM.
• Import foo.wasm
• Managed Object Proposal

More Lighthouse and Chrome UX Report

• Use Lighthouse and Chrome UX Report to optimize web app performance
• Using Lab (Metrics) + Wild (Field — From users) data.
• Devices, network they’re on.
• Interactivity Metrics: TTI
• Visual Metrics: FCP
• First Input Delay: It’s the Latency of the user’s first interaction with the page. measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that that interaction.
• g.co/dev/SpeedToolsOverview
• Chrome User Experiene Report to optmize web app performance. It allows you to compare from data from Google Chrome users on how well does your site compare to others. It updates monthly.
• Google BigQuery
• Speed Scorecard
• Use CSP With the right security. (Check Google Web Standards post)

Headless Chrome

• Headless Chrome with Puppeteer
• You can use it to automate test.
• Front end of the front end.
• Use it with any platform and non-platform features.
• You can launch Chrome in Headless (No UI) and non headless.
• You can get the graph of a page. Like all the links and everything.
• The Google Crawler uses Chrome 41, and you need to polyfill for that!

Recaptcha V3

• It has a score based system.
• It doesn’t display anything to the user.
• One Time Passwords can be phished as easy as passwords by using a Man in the Middle Attack.
• Use Security Keys instead. They speak directly to the browser.
• What’s new with sign up and sign in on the web (Google I/O ‘18)
• makeCredential.js

That’s it! I missed out some information! I’d love some feedback from the community!