Chrome 53: Shadow DOM v1, Payment Request API and more

Chrome for Developers · Beginner ·📰 AI News & Updates ·9y ago

Key Takeaways

Introduces new features in Chrome 53, including Shadow DOM v1 and Payment Request API

Full Transcript

you can now easily create encapsulated reusable web components with Shadow Dum V1 mobile payments become streamlined with the payment request API the web Bluetooth API is available experimentally on some platforms as An Origin trial and there's plenty more I'm Pete leage let's dive in and see what's new for developers in Chrome [Music] 53 HTML CSS and JavaScript are powerful development languages but they can be difficult to maintain in large code bases and if your app embeds third party content you need to ensure that its included styles do not affect other parts of your app Chrome 53 supports Shadow D V1 which allows an element to encapsulate its style and child Dum away from the main document Shadow Dom V1 has some significant changes from v0 and is broadly agreed upon by Major browser vendors Chrome will support both versions of the API until enough of you have moved to V1 Eric bidelman has a great primer on using Shadow Dom to create self-contained reusable web components on web fundamentals check it out completing payments on the web can be a cumbersome process for users autofill has made it easier to enter information but trying to complete a checkout form on mobile is still a challenge Chrome 53 on andro Android add support for the payment request API a new spec from the w3c that provides fast seamless and secure payments on the web using a credit card or other payment provider like Android pay it also lets users provide a billing address shipping details and other payer information without having to type anything expect to see support for more platforms coming soon but in the meantime check out EG's payment request API integration guide on web fundamentals at g.co request API the web Bluetooth API is available experimentally on some platforms as An Origin trial allowing sites to communicate with nearby devices using the Bluetooth generic attribute profile sites that send notifications to Android devices running marshmallow or later can now provide the badge shown in the status bar instead of the Chrome logo and finally Chrome on Android now allows muted videos to begin playing without user interaction if the video was marked as muted and has the autoplay attribute Chrome will start playing the video when it comes visible to the user these are just a few of the changes in Chrome 53 for developers check the description for more details and links to the documentation and specifications if you want to stay up to date with chrome and know what's coming click that subscribe button up there up there somewhere up there anyways I'm Pete leage and as soon as Chrome 54 is released I'll be right here to tell you what's new in Chrome [Music]

Original Description

With Chrome 53, you can now easily create encapsulated, re-usable web components with Shadow Dom v1; mobile payments become streamlined with the Payments Request API; the Web Bluetooth API is available experimentally on some platforms as an origin trial and there’s plenty more. Pete LePage has all the details and how you can use these new developer features in Chrome 53! Subscribe to the Chrome Developers YouTube channel and dive into What’s new for developers in Chrome 53! * Shadow DOM v1 - Shadow DOM v1: self-contained web components - http://goo.gl/htJsMj - Spec - http://goo.gl/CR7FQM - Fancy Tabs Demo - http://goo.gl/1X4k6L * Payment Request API - Payment Request Integration Guide - http://goo.gl/kgwIVp - Shim - https://goo.gl/jafCvD - Spec - https://goo.gl/hzFCh4 * Other Helpful Info - Auto Play muted videos - https://goo.gl/Goycxc - Setting the badge for notifications - http://goo.gl/Oznp4K Subscribe to the Google Developers channel here: https://goo.gl/WkxCU5
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Chrome for Developers · Chrome for Developers · 0 of 60

← Previous Next →
1 Polymer Performance Patterns (The Polymer Summit 2015)
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
2 Polymer Power Tools (The Polymer Summit 2015)
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
3 Chrome Dev Summit 2014 – Chrome Case Studies
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
4 Web Directions Code 2015 round up
Web Directions Code 2015 round up
Chrome for Developers
5 Maintainable Code - HTTP203
Maintainable Code - HTTP203
Chrome for Developers
6 iron-ajax… wat?! -- Polycasts #26
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
7 The Guardian - Supercharged
The Guardian - Supercharged
Chrome for Developers
8 ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
9 #AskPolymer: Rob answers all the questions ever -- Polycasts #27
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
10 The Future of JavaScript - HTTP203
The Future of JavaScript - HTTP203
Chrome for Developers
11 Data Binding 101 -- Polycasts #28
Data Binding 101 -- Polycasts #28
Chrome for Developers
12 The Guardian part 2 - Supercharged
The Guardian part 2 - Supercharged
Chrome for Developers
13 The Future of Web Audio: with Chris Wilson and Chris Lowis
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
14 Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
15 Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
16 #AskPolymer: How do you make the show? -- Polycasts #29
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
17 Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
18 Binding to Objects -- Polycasts #30
Binding to Objects -- Polycasts #30
Chrome for Developers
19 Player FM - Supercharged
Player FM - Supercharged
Chrome for Developers
20 Where’s the Designer? #AskPolymer -- Polycasts #31
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
21 Jake Beats Wikipedia - HTTP203
Jake Beats Wikipedia - HTTP203
Chrome for Developers
22 Supercharged Observers! -- Polycasts #32
Supercharged Observers! -- Polycasts #32
Chrome for Developers
23 Jai's Web blog - Supercharged
Jai's Web blog - Supercharged
Chrome for Developers
24 Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
25 What about internationalization? #AskPolymer -- Polycasts #33
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
26 Developing for Billions (Chrome Dev Summit 2015)
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
27 Google+ Performance Improvement Comparison
Google+ Performance Improvement Comparison
Chrome for Developers
28 Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
29 Progressive Web Apps (Chrome Dev Summit 2015)
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
30 Instant Loading with Service Workers (Chrome Dev Summit 2015)
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
31 Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
32 Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
33 Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
34 Polymer - State of the Union (Chrome Dev Summit 2015)
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
35 Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
36 Introduction to RAIL (Chrome Dev Summit 2015)
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
37 DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
38 RAIL in the real world (Chrome Dev Summit 2015)
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
39 #ChromeDevSummit talks are up - W00T! -- Polycast #34
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
40 V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
41 Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
42 Owning your performance: RAIL (Chrome Dev Summit 2015)
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
43 HTTP/2 101 (Chrome Dev Summit 2015)
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
44 Leadership Panel (Chrome Dev Summit 2015)
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
45 Build Processes, Totally Tooling Tips (S2, Ep 5)
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
46 Accessibility (Chrome Dev Summit 2015)
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
47 Binding to Arrays -- Polycasts #35
Binding to Arrays -- Polycasts #35
Chrome for Developers
48 HTTP2 - HTTP203
HTTP2 - HTTP203
Chrome for Developers
49 Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
50 Call For Submissions - Supercharged
Call For Submissions - Supercharged
Chrome for Developers
51 Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
52 Testing AJAX with Web Component Tester -- Polycasts #37
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
53 Slack: Extended Xmas Special - Supercharged
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
54 Browser testing with Travis & Sauce Labs -- Polycasts #38
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
55 Optimize for production with Vulcanize -- Polycasts #39
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
56 Highlights from Chrome Dev Summit 2015
Highlights from Chrome Dev Summit 2015
Chrome for Developers
57 Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
58 Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
59 How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
60 Colors – DevTools Tonight #0 (Pilot)
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers

Related Reads

📰
Musk thanks Micron for chips, and builds a $55bn fab to replace it
Elon Musk thanks Micron for providing Tesla with a significant allocation of memory chips, highlighting the scarcity of this crucial component in the AI boom
The Next Web AI
📰
Jensen Huang calls the AI jobs panic ‘complete nonsense’, and takes aim at his peers
Nvidia CEO Jensen Huang dismisses AI job replacement panic as 'complete nonsense', offering a contrasting view to his peers
The Next Web AI
📰
IMF says Africa has to keep lights on before it can bet on AI
Africa's AI ambitions are hindered by unreliable electricity, highlighting the need for basic infrastructure before investing in AI
TechCabal
📰
What Does Job Security Even Look Like In 2026? It Starts With Skills
Job security in 2026 requires adapting to AI and economic uncertainty by acquiring in-demand skills
Forbes Innovation
Up next
The Actual Metric to Track With AI | @SCALER
SCALER
Watch →