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 . Allows you to package your website and it allows it to be shared offline. Web Package (Don’t confuse it with Webpack) Web Policies. Baked-in platform for linting HTML CSS a la . I mean, you can limit the animations used, which image sizes are allowed. The max CSS that it’s going to pass, etc. JavaScript CSS 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 . This is a site list that are hardcoded into Chrome as being HTTPS only. preload list 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 attribute to the manifest.json!! Not adding it, will bounce you off from the app to a browser tab if you change URLs. “scope” Add Trusted Web Activity. are a new way to integrate web-app content such as PWA with Android app using a protocol based on Custom Tabs Trusted Web Activities your your your 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 ! It’s super helpful! this video 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 . Check this out. URL $_ 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. . (YOU HAVE TO CHECK THIS — BRUTAL) Behind a flag in Chrome Canary. Eager Evaluation 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 (I personally didn’t know about this). This is isn’t new Preload the modules by doing: (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 and flags for regex. S U New for your regex: /(? \d{4}). This is going to be super convenient, as you can access the RegEx in the following manner (Source from ): name captures this link const pattern = /(? \d{4})-(? \d{2})-(? \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 . This works like a padding mechanism. String.trimStart() string.trimEnd() Adds finally to the promise (Vs then, catch). It also works in the try catch block. (ECMA 2018) — . This would be equivalent to doing a shallow copy. Object spreading in object literals 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. in Chrome 67. WebXR Device API. (See link for more info) Origin Trial 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() s XRView An describes a single view into an XR scene. Each corresponds to a display or portion of a display used by an XR device to present imagery to the user [XRView](https://immersive-web.github.io/webxr/#xrview) view WASM Uses as a compiler to compile C and C++ to WebAssembly. Emscriptem Emsc — s WASM=1 -o Emcc gives us 2 files. Module object allow us to call our compile function EM_JS Wasm Threads . 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 . SharedArrayBuffer 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 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. Chrome User Experiene Report 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!