Home
Videos uploaded by user “Google Chrome Developers”
Web App Manifest: Totally Tooling Tips (S3, E4)
 
04:05
Want to give your web app a spiffy splash screen when the user adds it to their home screen? Web App Manifest is the place to look. We cover what it is and how to add it in this Totally Tooling Tips with Matt and Addy. Web App Manifest: https://goo.gl/nQykpf Manifest Tool Validator: https://goo.gl/bRwxEa Support for installable web apps with Web App Manifest: https://goo.gl/5ttX4f Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7 Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Views: 105957 Google Chrome Developers
Controlling focus with tabindex -- A11ycasts #04
 
05:14
Whenever possible you want to use native HTML elements for your custom controls. The button tag, for instance, is very easy to style, and has built-in keyboard support and semantics. But there are times when you need to build something that doesn't have a corresponding native element. Sometimes you've just gotta build something new! In these cases it's important to remember to add in crucial keyboard support so all of your users can access your content. The first step is to make sure that a user can actually focus your control. To accomplish this you can use the tabindex attribute. Today on the show we'll cover the various states of tabindex, when and how to use it, and point out one very important gotcha! Watch all A11ycasts episodes: https://goo.gl/06qEUW Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf
Views: 153114 Google Chrome Developers
Instant Loading with the App Shell Model, Totally Tooling Tips (S3, E2)
 
04:25
In this episode, Matt and Addy talk about instant loading web apps with an Application Shell architecture. The Application Shell architecture encourages caching your application shell (the User Interface) so it works offline and populate its content using JavaScript. On repeat visits, this allows you to get meaningful pixels on the screen really fast without the network, even if your content eventually comes from there. This comes with significant performance gains. First Meaningful Paint: https://goo.gl/fQUVBK Application Shell Architecture: https://goo.gl/EhHZz5 Getting Started Guide: https://goo.gl/Xa3dhz Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7 Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Views: 160394 Google Chrome Developers
Resource Hints - Supercharged
 
01:37
Surma shows you how to use resource hints to make web apps perform better on slow networks. Code in Github repository: http://goo.gl/ZjzC8n Watch more episodes of Supercharged here: https://goo.gl/WFD8py Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Views: 120184 Google Chrome Developers
Introducing A11ycasts! -- A11ycasts #01
 
01:44
Hey folks! Accessibility is a topic very near and dear to my heart. And as I've spent the past year speaking about it I've realized that so many developers WANT to build accessible apps, but they're just not sure how to go about it. To help teach those fundamentals I thought it would be great to have a series dedicated entirely to the art of accessibility. Meet A11ycasts! A11ycasts is short for AccessibilityCasts (a11y is a common shortening of the term accessibility because there are 11 letters in between the ""A"" and the ""Y""). The goal of A11ycasts is to teach developers how accessibility works all the way down at the platform level, while also demonstrating real world accessibility problems and solutions to fix them. If you want to follow along be sure to click the subscribe button to be notified every time we roll out a new episode. Thanks and enjoy the show! -- Rob Watch all A11ycasts episodes: https://goo.gl/06qEUW "Over a billion people, about 15% of the world's population, have some form of disability." source: http://www.who.int/mediacentre/factsheets/fs352/en/
Views: 252721 Google Chrome Developers
Debugging JavaScript - Chrome DevTools 101
 
07:28
If you're still using console.log() to find and fix JavaScript issues, you might be spending more time debugging than you need to. This tutorial shows you how to make the most of Chrome DevTools so that you can debug your JavaScript as quickly as possible. Demo: https://goo.gl/MwytjG Doc version of this tutorial: https://goo.gl/NZxQdD Breakpoints Guide: https://goo.gl/9XYhhF JavaScript Debugging Reference: https://goo.gl/osaf2Q Subscribe to the Google Chrome Developers channel: http://goo.gl/LLLNvf
Chrome 52: Contain Property, the PerformanceObserver API & Service Worker Stream
 
02:47
Chrome 52 adds support for the CSS contain property, and can make rendering performance screamin’ fast! It’s easier to collect real user measurement data with the performance observer API. And, the browser can now progressively render content served from a Service workers, with streamed HTTP responses. Pete LePage has all the details and how you can use these new developer features in Chrome 52! Subscribe to the Chrome Developers YouTube channel and dive into What’s new for developers in Chrome 52! * CSS Contain Property - Post: http://goo.gl/9hX2A2 - Spec: http://goo.gl/AmLB8z * Performance Observer API - Post: http://goo.gl/gteR4E - Demo: http://goo.gl/wYwdY9 - Spec: http://goo.gl/TA9RtM * Service Worker Streamed Responses - Post: http://goo.gl/hrRUd0 - Spec: http://goo.gl/DgrjhH Subscribe to the Google Developers channel here: https://goo.gl/WkxCU5
Views: 132274 Google Chrome Developers
Introduction to Service Workers
 
12:54
Service workers are at the core of PWA techniques for resource-caching and push notifications. This video covers what a Service Worker is, what it can do, and the Service Worker lifecycle in the browser. Codelabs, slides and more information are available from the Progressive Web Apps Training home page: https://developers.google.com/web/ilt/pwa
Summit Report: What do I need to know about HTTP2? (Progressive Web App Summit 2016)
 
03:32
Rob sits down with Surma from the Chrome team to discover how HTTP/2 improves upon the current HTTP standard. Check out his talk from the Summit! https://www.youtube.com/watch?v=G62aCRIlONU Check out his simple HTTP2 Server: https://goo.gl/48Xkkn Watch Surma’s Progressive Web App Summit 2016 talk here https://goo.gl/Cr3vtq Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf Music by Terra Monk: https://soundcloud.com/terramonk/pwa-amsterdam-2016
Views: 106704 Google Chrome Developers
Containment - Supercharged
 
01:10
Surma explains the brand new containment feature of the web, allowing you to boost your web app’s performance. Watch more episodes of Supercharged here: https://goo.gl/WFD8py Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Side Navigation Bar: TL;DW - Supercharged
 
06:53
In this Side Navigation Bar TL;DW episode of Supercharged, Paul Lewis recaps what goes into building a side navigation component, warts and all! If you want to see the full build, check out the Live Code session here: https://goo.gl/cQn9Ay Find the code on Github here: https://goo.gl/SNOyUP Watch more episodes of Supercharged here: https://goo.gl/WFD8py Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Build the Next Generation of Mobile Web
 
01:32
There's a new way to deliver amazing user experiences on the web. Progressive Web Apps are fast, reliable and engaging. The future is here, go out and build it. For more information on Web Developer resources, please visit: https://developers.google.com/web Subscribe to the channel: https://www.youtube.com/chromedevelopers
Views: 242911 Google Chrome Developers
Dockerize your App - Supercharged
 
01:52
Surma shows you how you can use Docker to make sure you have a consistent runtime environment. If you have questions or suggestions, hit us up on Twitter! Surma: https://twitter.com/DasSurma Watch more episodes of Supercharged here: https://goo.gl/WFD8py Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Intro to ARIA -- A11ycasts #13
 
09:16
ARIA 1.1 Spec: https://goo.gl/1rGD7S ARIA Authoring Practices 1.1: https://www.w3.org/TR/wai-aria-practices-1.1/ Here on a11ycasts I always try to encourage developers to use native controls rather than roll their own mainly because you get semantics and keyboard functionality for free. But there are situations where you need to build something and there's no native analog in the platform. For these occasions when you need to go offroad and build your own control, the Web Content Accessibility Initiatives Accessible Rich Internet Applications spec (WAI-ARIA) can help you add in the semantics your new custom control is missing. Today on the show I'll cover what ARIA is from a high level and show off some of the features and relationships ARIA let's you take advantage of. Why do semantics matter? https://www.youtube.com/watch?v=g2tzEil5TL0 Watch all A11ycasts episodes: https://goo.gl/06qEUW Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf
What is Focus? -- A11ycasts #03
 
07:58
Focus is one of the main pillars of accessibility, but it's also an area that many developers are a little fuzzy on. Here's a good quote from Web AIM to help explain it: ""When an item has keyboard 'focus', it can be activated or manipulated with the keyboard."" In other words, if an element is currently focused, and you press a key on your keyboard, that keyboard event will be directed at that element. http://webaim.org/techniques/keyboard/#intro Users can change the currently focused element by pressing either the Tab or Shift-Tab keys. The order that elements receive focus is known as the ""Tab Order"". Making sure you have a consistent, logical tab order is extremely important, especially for users who rely on the keyboard as their primary means of navigating a page. In this episode we'll show off what it means for elements to be implicitly focusable, and correct some common mistakes relating to mixed up tab orders. Watch all A11ycasts episodes: https://goo.gl/06qEUW Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf
PWA Developer Spotlight: Building one of Africa's most successful PWAs
 
02:36
We caught up with Andrew Mori of Konga.com at the PWA summit in Amsterdam to discover how the leading e-commerce website in Nigeria built the first Progressive Web App at a major e-commerce website in Africa. Check out the PWA here: https://kongax.konga.com/ Watch Andrew's Progressive Web App Summit 2016 talk here https://goo.gl/7Ugr30 Subscribe to the Chrome Developers Channel at http://goo.gl/LLLNvf
Views: 106826 Google Chrome Developers
Chrome 64 - What's New in DevTools
 
03:36
New to DevTools in Chrome 64: the real-time Performance Monitor, easier filtering with the Console Sidebar, and automatic message groupings in the Console. 0:15 - Performance Monitor 1:08 - Console Sidebar 2:12 - Console Message Grouping 2:38 - Bonus Tip! (Hover Effects) Check out the blog version of these release notes here → https://goo.gl/KGvKij Discuss these features and changes on the mailing list → https://goo.gl/RvWtFx Or tweet us → https://twitter.com/chromedevtools Subscribe to the Google Chrome Developers channel → http://goo.gl/LLLNvf
Views: 139307 Google Chrome Developers
HTTP/2 101 (Chrome Dev Summit 2015)
 
27:58
HTTP/2 is coming. Actually, it’s here. Right now. It impacts not only your user’s experience but also the way you need to think about your website and webapps. Let’s see how HTTP/2 came to be and how it makes development easier. Surma is an engineer working with the Chrome team. He likes to cut himself on the bleeding edge, goes full-stack every once in a while and prefers good code over functional one. Watch more talks from Chrome Dev Summit 2015: https://goo.gl/e4c7vD Subscribe to the Chrome Developers channel at: https://goo.gl/OUF4e2
WeakMaps - HTTP203
 
06:31
Weakmaps are a way of associating an object with another object, allowing for garbage collection. Jake (@jaffathecake) and Surma (@DasSurma) discuss what they're useful for, and what the trade-offs are. #HTTP203 Subscribe to Chrome Developers here: http://goo.gl/LLLNvf Watch more HTTP203: https://goo.gl/bTQMrY Listen to the HTTP203 podcast for a full hour conversation & much more: https://goo.gl/LR7gNg Itunes: https://goo.gl/cf2yRq
Inert Polyfill -- A11ycasts #02
 
06:08
Keyboard focus is crucially important for both motor impaired users, and visually impaired users relying on a screen reader. One common UI mistake is to leave elements in the DOM that are offscreen but still contain focusable children. A responsive side nav is a classic example. So in today's episode we'll look at how we can solve this common gotcha with a new proposed HTML attribute: inert! Using the inert attribute you can take an entire tree of elements out of the tab order and the accessibility tree. It's an awesome feature that's totally missing from the web platform today, but we're working to change that! In the upcoming episodes we'll take a step back and explore the underlying concepts around focus and how it works in the platform, but if you're eager to play around with inert today you can find the polyfill up on GitHub. Enjoy! WICG inert polyfill https://github.com/wicg/inert Watch all A11ycasts episodes: https://goo.gl/06qEUW Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf
Layers for Composition (The Standard, Ep. 1)
 
01:57
Sam Thorogood discusses layers and how they're composed together on the web, the standard way. Stick to Compositor-Only Properties and Manage Layer Count: https://goo.gl/W3hmb0
Webpack Tips - Totally Tooling Tips
 
08:16
Learn how to keep your Webpack JavaScript bundles as small as possible in this new episode with Matt and Addy. They cover code-snippets for ensuring you're minifying and splitting up your bundles efficiently. Webpack for Real Tasks: Decreasing Front-End Size and Improving Caching: https://goo.gl/uhXaNa Getting the Most out of CommonsChunkPlugin: https://goo.gl/DfrVi7 Vendor and Code Splitting in Webpack 2: https://goo.gl/JlohdZ Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7? Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
IntersectionObserver - Supercharged
 
01:40
Surma introduces IntersectionObserver to build scroll-linked effects. Read more about IntersectionObserver in Surma’s article: https://goo.gl/R2NwMq IntersectionObserver polyfill: https://goo.gl/2Wi8yh If you have questions or suggestions, hit us up on Twitter! Surma: https://twitter.com/DasSurma Watch more episodes of Supercharged here: https://goo.gl/WFD8py Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Handle Back and Forwards (The Standard, Ep. 7)
 
01:29
Sam talks about using the History API to properly handle Back and Forwards in single-page web applications (SPAs). Manipulating the browser history: https://goo.gl/YYYW7t
Font-Display - Supercharged
 
01:39
Surma shows you how a new CSS directive allows you to improve loading performance when you use web fonts. Read more here: https://goo.gl/fO7L9e If you have questions or suggestions, hit us up on Twitter! Surma: https://twitter.com/DasSurma Watch more episodes of Supercharged here: https://goo.gl/WFD8py Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Online and Offline - (The Standard, Ep. 12)
 
02:35
You are probably familiar with the terms "online" and "offline" when it comes to internet connection, but did you know that Wi-Fi can also lie to you? Learn from Sam how to spot Lie-Fi and fix the error. Your network may also just be of poor quality rather than just being “unplugged”. You should read about all the cases your site might deal with, in Understanding Low Bandwidth and High Latency → http://bit.ly/2NlUOUA Background Sync API → http://bit.ly/2LnLu0O Watch more videos from the series → http://bit.ly/2OHyt42 Remember to subscribe to the Chrome Developers Channel for more updates→ http://bit.ly/ChromeDevs1
Testing: Mocha, Totally Tooling Tips (S3, E11)
 
04:51
In Testing, Mocha Matt & Addy talk over their tips on trouble shooting your way through Mocha. Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7? Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Class-based Tree Shaking - HTTP203
 
12:16
Jake Archibald and Surma talk tree shaking in this episode of HTTP203. And show you some code! For the first time. Lovely. Subscribe to Chrome Developers here: http://goo.gl/LLLNvf Watch more HTTP203: https://goo.gl/bTQMrY Listen to the HTTP203 podcast for a full hour conversation & more: https://goo.gl/LR7gNg Itunes: https://goo.gl/cf2yRq
Docker for WordPress: Commit Log - Supercharged
 
07:22
Surma is building a PWA using WordPress. In this series, he explains every step taken and every revelation had. If you have questions, feel free to leave them in the comments. This episode: How to use Docker to set up a development environment. Find the code here → https://goo.gl/Ykwhfr Follow Surma on Twitter → https://twitter.com/DasSurma Watch more episodes of Supercharged here → https://goo.gl/WFD8py Subscribe to the Google Chrome Developers channel → http://goo.gl/LLLNvf
Caching Headers - Supercharged
 
01:46
Surma shows how you can make your caching headers work for you and your content. Jake’s blog post on Caching Headers: https://goo.gl/1FXviv If you have questions or suggestions, hit us up on Twitter! Surma: https://twitter.com/DasSurma Watch more episodes of Supercharged here: https://goo.gl/WFD8py Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Offline Support, Totally Tooling Tips (S3, Ep1)
 
06:06
Learn how to take your web apps offline with Service Worker in this whirlwind tour of using the API with tech's most incompetent duo. Service Worker API: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API Offline Tutorial: https://developers.google.com/web/fundamentals/getting-started/ Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7 Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Push Notifications: Totally Tooling Tips (S3, E3)
 
03:25
In Push Notifications, Totally Tooling Tips, Matt and Addy talk about Push Notifications for web applications. These allow you to re-engage users with breaking news and information about new content. Push Notifications Tutorial: https://goo.gl/HFMmef Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7 Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
VDOM vs lit-html - HTTP203
 
08:04
Surma & Jake Archibald talk VDOM vs lit-html and evaluate the differences when it comes to developer experience and performance. #HTTP203 Subscribe to Chrome Developers here: http://goo.gl/LLLNvf Watch more HTTP203: https://goo.gl/bTQMrY HTTP203 podcast for the full hour conversation & much more: https://goo.gl/LR7gNg Itunes: https://goo.gl/cf2yRq
JavaScript Symbols - HTTP203
 
02:43
Jake Archibald explains JavaScript Symbols to Surma in 2 minutes. What do you use them for!? Why!? All will be revealed... #HTTP203 Subscribe to Chrome Developers here: http://goo.gl/LLLNvf Watch more HTTP203: https://goo.gl/bTQMrY Listen to the HTTP203 podcast for a full hour conversation & more: https://goo.gl/LR7gNg Itunes: https://goo.gl/cf2yRq
Chrome 61: JavaScript Modules, WebUSB, WebShare and more
 
03:42
Chrome 61 now supports JavaScript modules natively, unifying the way modular JavaScript can be written. You can now use navigator dot share to trigger the native Android share dialog. And the WebUSB API has landed, allowing web apps to access user permitted USB devices. Pete LePage has all the details and how you can use these new developer features in Chrome 61! Chrome 61 Beta blog post: https://goo.gl/1mpPoF Modules https://goo.gl/XO5nLF https://goo.gl/TvdUmD https://goo.gl/8GnbJu Web Share https://goo.gl/bHfO86 WebUSB https://goo.gl/Tb5zfq https://goo.gl/1ULm2v You can learn more about origin trials at https://goo.gl/6FP1a5 Subscribe to the Google Developers channel at https://goo.gl/WkxCU5
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
 
05:32
Windows Tooling: If you develop for the web on Windows, this is the tooling video for you. Addy looks at the web front end tooling landscape for Windows covering the tools he uses. Links: - 0.30 - Addy's Windows command-line notes: https://plus.google.com/+AddyOsmani/posts/91JeoX83S69 - 1:10 - Microsoft PowerShell. https://technet.microsoft.com/en-us/scriptcenter/dd742419.aspx - 1:44 - Doskey. https://gist.github.com/vladikoff/38307908088d58af206b - 2.05 - ConEmu. https://conemu.github.io/ - 2:39 - Cmder. http://cmder.net/ - 2:57 - Clink. http://mridgers.github.io/clink/ - 3:59 - PoshGit. http://dahlbyk.github.io/posh-git/ - 4:44 - Chocolatey. https://chocolatey.org/ Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7 Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Source Map Explorer, Totally Tooling Tips (S3, E13)
 
03:26
Learn how to audit what's in your JavaScript bundles that could use some trimming using tools like Source Map Explorer in a new episode of Totally Tooling Tips. Source Map Explorer: https://www.npmjs.com/package/source-map-explorer Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7? Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
The new way to test accessibility with Chrome DevTools - A11ycasts #23
 
05:02
Chrome version 60 ships with an exciting new DevTools feature called Audits 2.0. This panel replaces the previous Audits panel with a new set of tests powered by Lighthouse. Lighthouse is a tool which checks for various performance and best practice metrics, including accessibility. Under the hood, these accessibility tests are powered by aXe, the open source accessibility engine from the folks at Deque. Today on A11ycasts I'll show you how to get started with Audits 2.0 by checking a sample site for some common accessibility issues. It's important to note that a tool like the new Audits panel can only really check for a subset of accessibility issues (basically anything that can be automated). There are still a number of areas that this tool can't test, so make sure you're manually checking your site as well. Here's a helpful guide if you're not quite sure how to manually check for accessibility issues: https://goo.gl/2xUPh2 Command palette in DevTools: You can open this with cmd-shift-P or ctrl-shift-P on Windows. New Audits panel, powered by Lighthouse: https://goo.gl/Nsp7wB Automated testing with aXe: https://goo.gl/QmBy9d Note at around 3:23 I show a feature where you can click on a node in the Audits panel and inspect it in the Elements panel. This feature is still a little buggy. You can track the issue here: https://goo.gl/ugtVgu Watch all A11ycasts episodes: https://goo.gl/06qEUW Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf
Summit Report: Why's it called a Progressive Web App? (Progressive Web App Summit 2016)
 
03:24
Alex Russell, Software Engineer on the Chrome team talks about the origin of the "Progressive Web App" term, and business cases for Progressive Web Apps. Check out the Lighthouse Audit Tool: https://goo.gl/AZwxqL Watch Alex’s Progressive Web App Summit 2016 talk here https://goo.gl/F3qdsg Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf Music by Terra Monk: https://soundcloud.com/terramonk/pwa-amsterdam-2016
Views: 150418 Google Chrome Developers
Code-splitting your way to better perf with Webpack in Totally Tooling Tips (S3, E15)
 
06:33
Using Webpack want to learn more about code splitting? Then check out this weeks Totally Tool Tips where Addy gives you his top tips and Matt, unhelpfully, questions it.....totes a webpack noob. Links: webpack Code Splitting: https://goo.gl/AHiBwn webpack Code Splitting - Libraries: https://goo.gl/8QRh5N PWAs with React.js: https://goo.gl/IX57NE Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7? Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
ES6 Modules - Supercharged
 
01:45
Surma shows you how to progressively enhance for browsers with native module support. If you have questions or suggestions, hit us up on Twitter! Surma: https://twitter.com/DasSurma Watch more episodes of Supercharged here: https://goo.gl/WFD8py Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Key Moments In Web Page Loading, Totally Tooling Tips (S3, E9)
 
06:30
There are several key moments in the loading time of a web page. In this Totally Tooling Tips Addy & Matt look at time to first paint, time to first meaningful paint and time to stable layout. Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7? Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Your Audience, Your Content
 
02:58
How do you start thinking about building an app or a website? This video explores some of the factors you need to consider before building your app, such a as target audience, platforms, internet connectivity, data cost, and the usage context. Codelabs, slides and more information are available from the Progressive Web Apps Training home page: https://developers.google.com/web/ilt/pwa
WebPageTest - The State of the Web
 
03:44
WebPageTest is a laboratory-like environment that allows you to test websites while controlling exactly how the page loads. It allows you to adjust factors like the device type, browser, geographic location, connection speed, and cache state to see their effects on loading a web page. WebPageTest is a powerful tool for learning more about a web page as well as A/B testing for performance and optimization. Try WebPageTest here → https://www.webpagetest.org/ Watch more State of the Web episodes here → http://bit.ly/2JhAzsh Subscribe to the Chrome Developers channel to catch a new episode of The State of the Web every other Wednesday → http://bit.ly/ChromeDevs1
Creating a Collaborative Environment -- Designer vs. Developer #1
 
05:26
In this episode Mustafa Kurtuldu speaks to Jake Archibald about communication and the assumption that designers and developers sole role is to either make things look pretty or to be a cog in a machine with no soul. Welcome to Designer vs. Developer, a show that tries to solve the challenges faced in industry by opening a conversation between the two, providing take aways, solutions to workflows, tools & discussions on everyday struggles. You can listen to an extended version of our conversation in this podcast: https://goo.gl/wMKu70 Read our blog post here: https://goo.gl/Y8fgrt Learn more about the subjects mentioned in this video: Basics of UX: https://goo.gl/at8VLW Design Sprints: https://goo.gl/XBon9Q Performance: https://goo.gl/08igDR Subscribe to the Chrome Developers Channel: http://goo.gl/LLLNvf Watch the rest of the series: https://goo.gl/eIk8r6
Saving Bandwidth with Images (The Standard, Ep. 8)
 
01:26
Still serving users GIFs? In this tip, learn more about saving your users' bandwidth by serving better images - and only serving them when they're needed. Intersection Observer API: https://goo.gl/4uA1tf Saving Bandwith with Images, Medium article by @samthor: https://goo.gl/lTu5Ex
Async-Await - Supercharged
 
01:23
Mat shows you a small mistake that can sneak into your code when using async/await and how to fix it! If you have questions or suggestions, hit us up on Twitter! Surma: https://twitter.com/DasSurma Mat: https://twitter.com/wibblymat Watch more episodes of Supercharged here: https://goo.gl/WFD8py Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
JavaScript for-loops are… complicated - HTTP203
 
14:17
In this episode, Jake and Surma dissect how for-loops actually work and how they’ve evolved. Turns out, it got complicated. Subscribe to the channel! → http://bit.ly/ChromeDevs1 Watch more HTTP203 → http://bit.ly/2sPq2LB Listen to the HTTP203 podcast for more content! → http://bit.ly/2Kryv2y Itunes → https://apple.co/2IQagG6
Chrome 59: Headless Chrome, Native Notifications on macOS and the Image Capture API
 
03:00
With Chrome 59, you can run Chrome in an automated environment without a user interface or peripherals; notifications on macOS are shown directly by the native macOS notification system; you can now capture full resolution photos with the image capture API, and there’s plenty more! Pete LePage has all the details about how you can use these new developer features in Chrome 59! Native Notifications - https://goo.gl/84WSQp Image Capture - https://goo.gl/cN5JPp Headless Chrome - https://goo.gl/MI1kpq You can learn more about origin trials at https://goo.gl/6FP1a5 Chrome 59 Beta blog post - https://goo.gl/Mrao3t Subscribe to the Google Developers channel here: https://goo.gl/WkxCU5
How to use Redux in Polymer -- Polycasts #61
 
20:20
Grab the latest polymer-redux and give it a go! Click here: https://goo.gl/fGUSf4 How do you manage state in a large Polymer app? This is probably the most frequently asked question we get on Polycasts. Today we're going to start tackling this problem using the Redux library and an adapter written for Polymer called polymer-redux. Explaining all of the concepts in Redux are outside of the scope of this project but I've included some links down below to get you started. And don't worry, we'll be doing a number of follow up episodes on this topic so we'll be sure to cover our bases! polymer-redux https://github.com/tur-nr/polymer-redux Redux Docs http://redux.js.org/ (Note that the Redux docs assume you're using React so a lot of the example code doesn't apply to using polymer-redux) Polycasts playlist: https://goo.gl/r5fsMq Polymer Slack: http://bit.ly/polymerslack Polymer G+: https://plus.google.com/communities/115626364525706131031 Subscribe to the Chrome Developers channel: https://goo.gl/OUF4e2