Categories
Online Marketing

Trusted Web Activities

We know that there are some use cases where it makes sense to integrate your existing web experience into your native app, I’m Pete a developer advocate on the web team at Google. Let’s take a look at how you can do this today and what we’re doing to make your web development experience better today, you can do this either using a webview or a custom tab.

Well, each of these has their own benefits. They’re also drawbacks to each with web views. The content runs fullscreen and supports many of the PWA features. It has the ability to use post message to send messages back and forth between the webview and your native code, which makes it possible to invoke certain native functionality that isn’t available on the web. On a flip side, web views our sandbox completely from the user.

They don’t share the same cookie, store or storage and they don’t have access to the users, safe passwords and so on. The other challenge that comes up is that web views may be out of date. Web views on devices running pre, lollipop, aren’t updatable custom tabs also support content in full-screen mode and because they’re powered by the user’s default browser they share cookies, storage, passwords and more.

It’s always up-to-date and supports the full gamut of capabilities required for progressive web apps. But there is that name and address bar across the top. The user knows that they’re looking at web content, which isn’t always what you want. We’ve heard from you that you want an easier way to launch full-screen web content from a native app, but do it using the users preferred browser at the chrome dev summit.

Last year we announced a new type of activity that Android developers can use to embed trusted. First party web content trusted web activities provide a new way to integrate parts of your web experience into your native Android, app they’re powered by custom tabs, which means the content is rendered by the users up-to-date browser instead of an out-of-date webview. It shares the same cookies and storage within the browser.

It has access to AP ice that aren’t available in web views. This isn’t designed as a mechanism to simply wrap your site and dump it in the Play Store. A simple mistake can cause some drastic problems. For example, the user installs your app from the store hops on a plane and launches your app. The user is going to see the dinosaur because the app hasn’t installed the serviceworker yet trusted web activities are designed to make it possible for you to use the investment that you’ve made in your progressive web.

App within your Android, app, similar to chrome, custom, tabs trusted web activities run full screen. Each activity of your app is either completely provided by the web or an Android activity. There’s no way to combine them. For example, you can’t use Android components for navigation and content, rendering via the trusted web activity. Transitions between web and native content are between activities trusted web activities do have some constraints, you can’t just show any content, it must be yours, and you must be able to prove that it’s yours by adding a set of digital asset links, you must include an intent Filter for the opened URL in your Android manifest your app must pass the chrome, PWA install ability, checks which includes being served over HTTPS, registering a serviceworker and including a manifest and very important.

Your app must still meet all of the normal Play Store guidelines. Let’s take a look at what’s involved in adding a trusted web activity to your Android app. There are essentially two steps that we need to complete to embed or progressive web app in our Android app. First, we need to add a set of digital asset links. These links establish a relationship between our web content and the trusted web activity.

By establishing this relationship, our android app can verify that the content is served is ours and meets that first party requirement. Then we can add the activity to our Android app and show our web content and our manifest file. We need to tell it about an asset statement by adding this metadata attribute. Next, we need to update the strings.Xml file and our Android app and tell it about our web content where it lives and give it the permission that it needs oh yeah and all those quotes there.

Sorry they do need to be escaped like that. Now we need to create and deploy the assets link JSON file, using key tool on the certificate that we use to sign our Android app, we’ll get the sha-256 hash so that later Android can verify the certificate and that hash, then, in the asset, links JSON file. Will include that hash, our package name and a few other boilerplate pieces and deploy it to the dot well-known directory.

The file makes it possible for Android to verify the relationship between what’s being served and our Android app. We’ve set up the digital asset links we need now. We can create the activity. There’s a bunch of boilerplate code required to launch the activity that I’ve kind of glossed over here, but we’re working on adding that to the Android support library, so that you won’t have to deal with it in the future.

Once the boiler stuff is complete, you can create the new intent set, the URL and open the web content in your trusted web activity. Today, this is available on android and chrome 68, which is currently chrome, dev and we hope to see it land and stable sometime in q3 of 2018 to learn more check out gqo slash trusted web activities. There’s a great post there with everything you need to know to get started and a sample that you can use to try it yourself.

Thanks for reading


 

Categories
Online Marketing

Chrome OS: Ready for Web Development (Chrome Dev Summit 2018)

Everyone I am Dan Tuscola school, I’m a developer advocate at Google and tonight we’d like to talk to you about why Chrome OS is an awesome choice as a web developer platform, and there are too many reasons for why you should develop on Chrome OS. The first is that Chrome OS is an unprecedented convergence of technology stacks.

It brings together web applications because it’s no less. That has a browser as its UI, but you can also run Android apps and with full Google Play support. You can install and reprocess that you can test your web apps on and starting with chrome 69. You can install Linux and you can run your familiar. Development will workflow there, and this is a sneak preview of. What’s coming into the talk, you can see here a terminal, an IDE, a couple browsers and, of course pwe.

So the second reason why you should develop on Chrome OS on target Chrome OS is that it powers a very wide variety of devices. You might have seen. Chrome, most laptops or Chromebooks from a variety of manufacturers, and also you might have seen some convertibles again from various manufacturers and also all in ones like the LG chrome base and small form-factor pcs. This is the chrome box, which was diluted by Samsung 2012 and then HP, asus and other manufacturers followed suit, and this is the mini form factor PC.

It weighs three ounces, you plug it into the HDMI port of a display, and it turns that one into a computer. You can attach a mouse or a keyboard via USB or bluetooth, and then there are mega displays. This is the chrome box, commercial, it powers, digital signage or qsr displays, and this summer we saw the first tablet powered by Chrome OS. This is the Acer chrome top ten and, of course, Google has our own language of devices.

This is the pixel book, the flagship device which is at 75 % off for you guys, yeah and our latest, offering the pixel slate, which was announced last month. So in one slide, what are you from os because of a large and increasing market share? You probably heard that we have a very extensive presence in the edu space. Condos are very popular there. Then, if you optimize for promise you’ll actually target a variety of these convertible form factors, devices that have or have not, that a keyboard or a mouse or a stylus or internal touchscreen.

So this could also future proof you from devices that haven’t been invented. Yet, though, after I put this slide together, Samsung actually released a foldable screen phone that becomes a tablet, so the future is here already so again in one slide, the reason is diversity. You can develop apps on Linux and test them on a variety of Android. Linux. Browsers so Chrome OS brings together your own development workflow.

The one you’re familiar with your own development tools, a variety of form factors from mobile to tablet, to convert the boat, to desktop and browsers on Android on Linux, and there are quite a few of them edge and Samsung. The internet work on the pixel slate. The others should be able to be installed on Google picture as well, and this is edge and you see browser and Firefox running going on the same Chrome, OS machine.

Then you can install so desktop browser, so you can test in full, desktop Firefox. You can install the Linux version of it. This is Firefox, and this is Epiphany okay, gnome web, and you can also install docker, which I’ve heard many of you are interested during the forum. This is I’m official support for it, but there is a thread on reddit if you search for on docker now working in the crostinis subreddit you’ll find this thread, try out your own risk, but it does work.

So how does it work? How does Chrome OS managed to stick to his principles, which are speed, simplicity and security? How can it run all these different web, apps and Android us from play, and Linux apps like GIMP, while staying fast, simple and secure? This boils down to the containers architecture, which shall let Steve tell you more about next n. So when we were bringing Linux apps to Chrome OS, it was really important that we maintain all of the things that make Chrome, OS, Chrome OS.

So simplicity was first, it shouldn’t feel like you’re running a separate OS, but instead have the Linux terminal and GUI apps seamlessly blend in with chrome and Android apps, and we’ve managed to do this while keeping things fast. So Android and Linux support. Don’t do any emulation by using lightweight containers and hardware virtualization support your code will run natively and, of course, security is always on the mind for Chrome OS, so crostini uses both virtualization and containers to provide security and depth so to expend a bit on security.

We’re starting from a secure foundation and we’re working our way up with features from there so right now, Linux is pretty isolated from the rest of Chrome OS, but we’re working on the ability to share files and folders with it and soon we’ll be adding support for Google Drive as well so you’ll be able to keep all of your dot files projects and other important work safe in the cloud. So let’s take a look under the hood real, quick.

The first time you launch a Linux app after logging in we’ll start up a lightweight, VM and container, so this VM is actually providing the outer security boundary and gives you a real Linux kernel and it’s actually a minim minimal version of Chrome OS. That was designed specifically to run containers, and the container inside is where you do all of your work. This container is very tightly integrated with the rest of Chrome OS, so things like launch icons and graphical apps work, just like any other Chrome, OS or Android app, and the most important thing, of course, is that you get a terminal.

So how does it actually feel? What’s it like, an answer should be like most of their Linux systems, so crostinis based right now on Debian stable, because a lot of developers are familiar with apt package management and Debian based systems and for now we’re starting out targeting web developers because Chrome OS is A web-based OS and we think it’s appropriate – that you should be able to develop web apps on a web-based OS.

So to do this, we provide some nice integration features like right now, we’ll do port forwarding. It doesn’t seem like you’re running a container. You get local hosts to connect to and that’s treated as a secure origin, just like it should be. But if you do want to treat your container like a separate system, you can and we provide a penguin Linux test. Dns alias and we do want to support more developer workflows than just the web, so we will be adding USB GPU audio support file systems in userspace and better file sharing and upcoming releases, and now dan will talk a bit more about using Chromebooks for web development And show us what crostini looks like in action.

Thank You Steen. So we know how it works. We know why it’s awesome. Let’s see how to actually use it for developing web apps. The goal is to let developers do everything they need locally and the crostini support is still in development, but most things work as expected. You can run editors, IDs databases like Mongo or my sequel, local servers and pretty much anything can install with apt to set up crostini search for Linux in settings and then you’ll see this dialog.

Once you tap install in about a minute or two depending on your network, speed you’ll have Linux installed on your Chromebook, and this is a terminal. So we have a terminal whoo-hoo, let’s build the desktop web app for it. So books write a bit about how these apps are usually built. A lot of development of desktop device is done with electron or node WebKit, but the problem with that is electron means chromium plus nodes.

So you ship a rendering stack along with your app, and that might be useful if you have needs for low-level access, but consider Carlo, which is a Google project that is essentially a headful node app framework and provides applications with chrome, rendering capabilities. So with Karl, you don’t have to ship chromium or any rendering engine with your app. It uses a locally detected instance of Chrome and it connects to a process pipe and then expose the high-level API for you to render in chrome from your node script.

But if you don’t need all this low level or as features, you can do something even simpler, which is to build a progressive by that, and this is what Spotify has done. You can see here that I’m going to open open the Spotify I’ll, come in a tab and click that install a button, and once I accept the install prompt, the tab becomes pwe without URL bar and it has its own buttons like close, and you can find It in the shelf, you can launch it from there and once you launch it, there is no more install app button because it’s an installed progressive web app and it’s also accessible from the shelf.

So this system level integration features are provided by Chrome and they are available on chrome, OS things from 67, which is Asian by now and Dorgan on some windows, starting with Chrome, 70, the current version stable and on Mac with chrome 72 or, if you wan na, Give it a sneak peek check the Enable desktop it always flag. This is thanks to Service Worker support, which has implemented by all major browsers, and they are also working on a stance features such as payment request.

Firefox is working on that age. Has both notifications and out of home screen now and Safari is also working on authentication api’s, so, ok, we’ve talked a lot, let’s try and do a demo and see if anything blows up, so I’ve set up Christine already, because that will take two minutes which I Don’t wan na waste we’re going to install node and you have already vs code NPM and then we’ll check out Skoosh.

You might have seen it in one of the earlier talks. It’s an imagery compression app will open that in vs code to check out the code run. The webserver and the most interesting part is we’re going to open Skoosh from an android browser on the very same device and if things work also going to do some remote debugging. So these are the instructions to install node. Now what would a random? Because it takes a bit and I’ve switched to the demo station, I’m going to run NPM install NPM build, does take a while, then npm start to start the web server for the Skoosh app, and you see that it tells you it runs at port 8080 heat Bound to all local addresses, so let’s run chromium for linux.

This runs in the reno’s container and once squash has started, which seems to be the case. Let’s go to a local host 8080 and there Skoosh an. Why is it failed, but it certainly works. You can open images or not. This is a live demo after all, the point here is that you have access to localhost from the Dinos container and now, let’s try running chrome, dev from play and then choosing chrome dev here to be able to distinguish.

The icons looks like we need to update it. Hopefully the update won’t break anything, so I’m going to launch it before it gets a chance to update now. Localhost’ here will not work and that’s a non-issue steve is working on it. We need to get even mean to put you on the spot if we need to get the IP address of the Android container, which is this one. There is this command IP address show. So I’m going to just copy that and paste it in chrome dev, which I thought I launched somewhere a quick.

Has it updated? Okay? Well, I hope you didn’t break anything. So this is who’s running in chrome and all let’s try something even more dangerous. Let’s try to remote the bucket with chromium on the same machine. I know it’s called remote debugging, but it’s on the same machine, because these are different containers. So to do that, we need to put a device in developer mode and then enable it to be debugging.

Here which I’ve done and then we need to run this command, that fixed IP is actually documented on our Android setup page, it’s the IP of the our container and we set up an ADB bridge to it. So now, if things are on my side, you’ll be able to go to chrome, inspect and see a number of remote targets here, and we actually see two of them. So it’s open the squash one, I’m not click inspect, and this appears to work surprisingly well for a demo, so I’m going to resize the window and try something really spectacular, I’m going to scroll.

So this is live, not an animated gifs. This is actually remote debugging and, whatever I’m doing here, whether this app works or not, you can actually remote debug it with chromium on Linux. Debugging an Android browser running your progressive web app doesn’t make sense. This is what I wanted to show and let’s get back to the slides. So these are the instructions for installing note, there’s nothing special here.

You follow what no publishes on their github. Then you check out who’s using it again. Your visual development, workflow and Oh something else, maybe Steve, has to show this. We can run vs code to check out the code so until we switch to the demo disk Rancher shows what we actually are going to do, but great. Why not do it live now? So still is going to double tap that after he copies it to the Linux container and in the Linux container.

If you double tap a Dib file, you are prompted to install it as a Linux. App so Chrome OS supports that out of the box and once the installation completes you should be able to see visual code in the launcher and even a cancellation, prompt will say, fine, visual coding, the launcher, and this is not network dependent. So we should be as fast as it was when we rehearsed, though 58 percent is not terribly fast.

Okay, 91 cool so show us some clothes. If I only wait one second for two seconds there it is had to search – and here we go yes, code yeah. I have a manifest: that’s why it’s a progress. App has a start: URL, ok! So let’s switch back to the slides for some best practices for on. Oh, No, let’s actually look at this once more. It’s really cool right. How you can draw those in sync yeah! I had to brag about that, so the way to set this up is not reveal, which is why I posted a medium post this morning with complete instructions.

It’s about 17 steps. You need to follow so check out bit: / b, dot li /, CR, OS remote debug, or take a picture of this line. Okay, I see the phones down next, how to actually optimize PW is for Chrome OS, which is not really a topic. It’s more of an on topic. You shouldn’t detect that running on Chrome OS. You should use lighthouse as used for any in PW. If you only have five minutes to spend on optimizing, your app check out lighthouse the auditing tool that will give you a checklist of what to do and make sure that your app installs.

This is one bit that might be different on Chrome OS. I, like on all the versions of Chrome on mobile, your users will not be prompted automatically at the bottom to install the app you need to catch it before install prompt and then save that front and call the prompt method. And this is the code to do that. So you add an event listener for before install front, then you prevent default for all the browser’s.

Save the prompt in this deferred variable and then show your install button. So here we just set a display to block and then, in the click listener for that install button, you hide it call the prompt method from that save variable, and then you check the user choice, property and particularly the outcome field, to see if the user has Accepted your installation, okay, so, as I said earlier, the answer to this question is no.

You have your app installed on Chrome OS, but you should not do browser sniff it, but doing instead feature detection and the reason is there is a wide variety of input devices and form factors that Chrome OS can run on. So you might have a touch screen hole. You might not some lower end devices, don’t have a touch screen, there might be a trackpad or you might be the Acer tab. 10 tablet that I mentioned earlier.

There might be a keyboard, so if your app can use keyboard shortcuts, it’s go to a support for them. There might be a mouse. So I support for that. If it makes sense, then also be a stylus useful for drawing apps also make sure to build, responsive and take advantage of all the screen real estate. This is an example of an app that supports a large or wide display rather and displays a number of days in the weather forecast, but also, if it’s resized to a phone size screen, it shows less information and you can even support a rolled up state.

If the user just wants to glance at the weather of continuously, but for a media player out to be more useful example, you can have previous and next controls, and this is an example from Starbucks. They found that building responsive pays off, because users would actually order. On the desktop and use their mobile device to pick up their order so build responsive. It also pays off to optimize your forms because nobody likes to fill in the forms, and we have some guidance that G dot cos.

/ amazing web forms and some amazing URL and if you want to handle, touch in an optimized fashion, check out G Delco slash web touch. There are also pointer events, and these are a unifying model for also two pointer. Input touch trackpad, Mouse stylus, and you have a lot of events that are supported in Chrome, Firefox, Opera, ie edge and Samsung such as pointer move. You simply add a listener for it or sorry.

You have a pointer, enter pointer down, pointer up, cancel out, leave and so on. More at G dot go slash, pointer events, and this is an example of code that distinguishes between the pointing device you can check if there is mouse or touch or pen or something that has not yet been supported by the browser. Okay. So, what’s going to happen in the future, we are working on improving a desktop PW support.

One improvement is keyboard shortcuts. Another one is badging for the lunch icon, so you don’t have notified the user for everything we can display a number of notifications just like for Android iOS, apps and then also link capturing, which should make Twitter very happy. They have a great little way, but when you click on a link is not captured yet so in the future. We hope to enable this such that, when you click on a link that I wrapped in handle your app will actually open and handle that link, and for that you need to define the scope parameter in the manifest and the scope parameter is used to determine when Your user has left your web app and needs to be bounced in a tab.

We are also working on low latency canvas contexts which are introduced in chrome 71 beta, and these are very useful for how interactive apps they use OpenGL ES for rendering for a string and how it works is that your pixels get written to the front buffer directly. So this bypasses several steps of the rendering process and chrome writes there in that piece of memory that is used by the Linux, rendering subsystem and is scanned out the screen.

So this low latency context run the risk of tearing, but if you don’t interact with the Dom, such as in a game or rather have interactive app, it’s useful to use it. This is an example of how to set up a low, latency canvas context. You pass the latency parameter through and also on. It needs to be opaque, so you pass alpha and false, and this is the last slide. I had no idea what to put on it, but I figured that I should add that Chromebooks are these Convergys machines that run Linux, Android and Google Play natively without emulation, so they run very fast.

You should totally take advantage of the 75 % off discount and please do explore Chromebooks and give us feedback. We love feedback. We have the chromium, OS death group in the Google Group and also the reddit, the subreddit crostini. If you find issues, please check it. They’re very reported at CR Balcom, otherwise file them using the shift out. I and add the crostini tag and we are done and Steve and thank you


 

Categories
Online Marketing

Sign-in form best practice

Type切换为文本或密码 请确保包含一个aria-label 以警告将显示密码, 否则,用户可能无意间泄露了密码 说到可访问性 请使用Aria-Describedby 以解释密码约束 并使用您用来描述密码要求的元素 屏幕阅读器会读取标签文本、 输入类型,还有描述 您也需要实时提交之前对数据输入进行认证 HTML表单元素和属性 具有用于基本验证的内置功能 但是在用户输入数据以及尝试提交表单时 还应该使用Javascript进行更强大的验证 请记住,这样做不代表您不需要 验证和净化后端的数据 该视频附带的登录表单Codelab 使用了广泛支持的 Constraint: Validation, API 使用内置的浏览器UI添加自定义验证, 以设置焦点和显示提示, 一件非常重要的事情是:, “, 您无法衡量的东西,您也将无法改善, ” 对于注册和登录表单尤为如此, 您需要设定目标,衡量成功,改善网站并重复, 可用性和实验室测试对进行更改的尝试非常有用, 但您还需要真实世界的数据,以真正了解, 您的用户如何通过分析和, Real User Measurement或Monitoring 体验您的注册和登录表单 您需要监视页面分析 包括注册和登录页面视图 跳出率和退出 请确保添加诸如目标渠道之类的交互分析 用户在哪里放弃注册或登录流程? 事件,您知道用户在与表单进行交互时 会采取什么操作吗? 最后,进行跟踪网站性能: 使用以用户为中心的字段指标 来了解真实用户的真实体验 您的注册和登录表单加载速度是否缓慢?, 如果是,原因是什么?, 最后,一些可帮助减少登录表单丢弃的通用准则, 第一:不要让用户搜寻登录!, 请使用易于理解的措辞 例如 “ 登录, ” , “ 创建帐户, ” 或 “ 注册, ” 在页面顶部放置指向登录表单的链接 功能要明确, 表单并不是用产品和功能吸引人们的地方, 最大限度地减少复杂性, 仅当用户看到提供例如地址或信用卡等 详细信息数据的明显好处时 才向用户询问该数据 在用户开始使用注册表单之前 明确价值主张是什么? 他们将如何从登录中受益? 为用户提供完成注册的具体激励措施 如果可能的话,允许用户使用手机号码 而不是电子邮件地址来标识自己 因为这就是有些用户希望的方式 他们可能不想使用他们的电子邮件 让用户轻松重置密码 并把, “ 忘记密码?, ” 链接放在明显的地方 请确保链接到您的服务条款和隐私政策文档 从一开始就让用户清楚了解 您如何保护他们的数据 最后 — 在注册和登录页面上 为您的公司或组织建立品牌 确保您的字体、风格和语音语调 与您网站的其余部分相匹配 某些表单感觉上与其他内容不属于同一网站, 特别是如果它们具有明显不同的URL 就是这样 这是登录表单最佳实践的基础 您可以从该视频随附的web.

Dev文章 以及代码实验室找到更多信息 我希望为您提供可加入您下一轮工作的一些要点 以改善您的网络网站的表单 当然,注册和登录 不是唯一涉及表单填充且需要大量改进的地方 敬请关注Eiji 他将在网上讨论一些新的付款方式 谢谢观看!


 

Categories
Online Marketing

Debugging JavaScript – Chrome DevTools 101

Debugging than you need to this tutorial shows you how to make the most of chrome dev tools so that you can debug your JavaScript as quickly as possible. I’r going to use this buggy demo here to demonstrate all of the debugging tools and dip tools. I recommend that you open up this demo yourself and follow along with each step.

The link is in the description. Whatever issue you’re debugging, you always want to start by reproducing the issue. You want to find a series of actions that consistently reproduces the book in this demo. When I add five and one the result down here at the bottom is 51. Obviously that should be 6. This is the bug that I need to check down at this point. You might be tempted to use console.Log to infer where the code is going wrong.

Sure it may get the job done, but it’s rather inefficient. First, you have to find the relevant code which could take a while on a big code base. Then you have to sprinkle constant log statements throughout the code. Then you got to reload the page and look at the logs, but maybe the logs didn’t give you all the information you need, so you got to go back and add more logs and so on with dev tools.

You can pause the code in the middle of its execution, inspect the variables that are in scope at that moment in time and walk through your code, one line at a time open, dev tools by pressing command option, J on Mac or ctrl shift J on Windows And Linux, then click the sources tab. The sources panel is where you debug JavaScript. It has three main parts at the top left. Here is the file navigator pane, where you can inspect the files that the page uses after clicking on a file.

You can see the contents of it here in the code editor pin and down here is the JavaScript debugging pane, which you’ll learn more about shortly. Note that when your dev tools window is wide, the JavaScript debugging pane moves to the right. If you take a step back and think about how the app works, it’s probably safe to guess that the incorrect sum gets computed in the click event listener that’s associated to the button.

Therefore, you want to pause code right when the eventlistener executes event.Listen their breakpoints. Let you do exactly that. Expand the eventlistener breakpoint section then expand the mouse category then check the click check, box, dev tools now pauses on the first line of any click event listener that executes back in the demo, click the button again and dev tools. Pauses on the first line of this on-click function, the blue highlight indicates what line of code you’re currently paused on, if you’re paused on a different line of code press resume script execution until you’re paused on the correct line you paused on the wrong line, because you Have a Chrome extension which registers click event listeners on every page that you visit.

If you try the workflow I’m describing in an incognito window, you can see that you always pause on the correct line of code event. Listener, breakpoints are just one type of a breakpoint. Dev tools offers many other types. For example, you can set a breakpoint on a specific line of code or when a Dom node changes or when an exception gets thrown and so on. After this tutorial, I recommend checking out our breakpoints guide, which teaches you when and how to use each type.

The link to that guide is in the description too, I’m paused in the click listener, and now I want to execute the code one line at a time. The code stepping control is right here. Let you do that click. The step into next function call button to investigate a function further. For example, when I step into the inputs our empty function, it jumps me to the first line of that function when I’m confident that a function is working as expected, I can click the step over next function call button the function executes, but I don’t walk through It line by line, for example, if I click to step into the next function, call this line here would be highlighted, blue meaning.

This is where I’m currently paused, but when I click step over next function, call the function executes to completion and I pause them. The next line of the function that I’m currently stepping through last suppose, I’m stepping through a function, and I realize it’s not relevant to my bug. In that case, I can press step out of current function and dev tools executes the rest of the function. If this doesn’t make complete sense right now, I recommend creating a snippet, which is a little block of JavaScript code, that you can execute at any time set a breakpoint and your snippet and play around with the code stepping controls yourself in order to understand how they All work back in the script, I can tell that the bug is probably somewhere in the update label function rather than stepping through a bunch of irrelevant code.

I can set a line of code breakpoint right around where the bug probably occurs to do that. I just click the line number next to the code. This blue icon indicates that there’s a breakpoint on this line when I press resume script, execution dip tools runs all the code up until that lime and then pauses before that line executes over here in the JavaScript debugging pane. I can see the call stack that caused this code to execute.

I can click on the functions to see where each one got caught. The scope section shows me all the local and global variables that are currently defined at this moment in time. I can click on values to edit them, but I’m not going to do that right now. However, when I look at these values, they look suspicious they’re, wrapped in double quotes, which means that their strings. This could be the cause of the book.

I’r going to investigate this further over in the read expressions section here. I can read the values of variables over time. You can store any valid JavaScript expression here, for example, I click, Add expression, then type type of sum then press enter, and I can now see the value of that expression, as I suspected sum is a string when it should be an integer. Now I’m going to open up the console to test out a potential fix for the book when I’m paused on a line of code, the console has access to all the variables that are currently in scope.

For example, when I evaluate addend 1, it returns 5. I think I can fix this bug by converting the addend 1 and adding two variables two integers before adding them. So let me try that now yep that fixes it. I can verify that this change fixes the bug by editing the code directly from dev tools. First I’ll resume script. Execution then make my change, save the change. I press command s on Mac or ctrl s on Windows and Linux.

Then I click deactivate breakpoints so that I can test out the app without triggering the breakpoints I’ve set. Now the app sums up numbers as expected, all right, you now have an excellent foundation and how to effectively debug JavaScript using dev tools from here. I recommend learning about all the breakpoints that dev tools has to offer. As I mentioned before, we also have a JavaScript debugging reference where you can learn about literally every feature related to debugging in dev tools.

Links to both are in the description thanks for reading and happy bug, hunting


 

Categories
Online Marketing

Web Fonts – The State of the Web

”, My guest is Dave. Crossland He’s the program manager For Google Fonts And today we’re Going to be talking about the state of web fonts –, what are they, how to use them? Effectively and what’s new, Let’s get started, [ MUSIC PLAYING ], So Dave. Thank you. For being here, My first question is: About why web fonts, What do they bring to a website? Beyond the standard fonts like Helvetica DAVE, CROSSLAND Well, Web fonts really express a certain kind of Feeling for organizations They express a brand And you can have a web Page without a article, but you can’t have a Web page without text You have to have fonts And so a brand at its core Would be like a logo, a color and a typeface or a font, And so web fonts bring The kind of rich design that we have in print Media to the web, RICK VISCOMI And according To the HTTP Archive nearly one third of Websites use a font from the Google Fonts API, So why are developers turning To the Google Fonts API DAVE CROSSLAND, I would say That Google Fonts is fast, easy and free And so on.

Our Analytics page we’ve clocked up over 22 trillion. Font views in total since the service Launched in 2010 – And I think that being on Google’s content, distribution networks, we benefit From cross-site caching, So when you visit the First website that uses a font like Roboto, it’s downloaded and you may see Some latency there, But then on all Subsequent websites, which use the font From Google Fonts, then it’s in a cache And loads instantly across the different websites, We also try and Make it really easy So the font’s API Abstracts, a lot of the complexities of web Font technology from you, So we serve different formats.

To different browsers, For example, with better Compression formats, like WOFF2, only the newer Browsers support those, And so we serve WOFF2 files. To those newer browsers And we serve other Formats to older browsers And then finally We make things free and we have a directory of Hundreds of choices which everybody can choose from Now, of course, if you Want a particular typeface, then it may not be Available in Google Fonts and you would go and license That font for your usage, But not everybody, has the Sophistication in design or the resources To license fonts And I think it’s important That everyone in the world is able to do typography, RICK VISCOMI, So I don’t Know if developers truly appreciate how complicated Web fonts are under the hood.

I got a taste of this when I Was at YouTube a few years ago, I helped change the Default font to Roboto, and it was not as easy as just Changing the font-family CSS style, There’s a lot you need to do to Make sure that it goes smoothly for the users and they Have a good experience, For example, like YouTube users, Are from all around the world, They have different languages. Different alphabets, What are some of the Things that developers need to be concerned about For an international audience, DAVE CROSSLAND International Users face a challenge because the file sizes Of fonts, for them can be larger than just For European languages Traditionally Google Fonts has done a kind of slicing of Fonts into language or writing system sets, So we might have, for example, Latin Latin Extended Cyrillic Cyrillic Extended Greek Greek, Extended and Vietnamese: That’s your current support for Roboto that’s used on YouTube.

We also support Other languages — Hebrew, Arabic, Thai, Many different Indian writing systems And the biggest Challenge has been for Chinese Japanese And Korean fonts, A typical font for Indian languages can maybe be two or three times Larger than a European font, But for East Asia it can Be a hundred times bigger And so we’ve been able to Use a number of technologies, for example WOFF2 Compression which is now a W3C standard this year, And also the @ font-face Css has a new aspect called unicode-range.

Unicode-Range allows us to Slice, the fonts into pieces, dynamically And the browser will Only download the pieces that it needs, So that means that We were able to slice a Chinese, Japanese or Korean Font into over a hundred slices And therefore the Latency of each slice is similar to your European font, This means that the experience Latency is much better And because the Slices are cached across different Domains then the font gets faster and faster To load over time, RICK VISCOMI Custom fonts have Also been used for icon fonts to show images And more recently, they’ve Been used for emoji as well, So we’re moving beyond just Text and on to these other ways that we’re using to communicate, But it’s not without its Own challenges, right, DAVE, CROSSLAND, That’s right! Font technologies are always Improving and evolving And the use of emoji as a kind Of special case of icon fonts is particularly interesting.

I think that there’s a Debate in the web development community about how To best approach this Using images for icons, whether That’s PNG or SVG vector images is –. There are some advantages there. One of the advantages To using icon fonts is that aligning icons with Text in labels is often is a common use case And getting the alignment Onto the baseline of text can be tricky when You’re dealing with two elements: — a text Element and a image element And so icon fonts can Play a good role there.

They also have good legacy. Support because obviously text systems work everywhere. Unfortunately, for Emoji and color fonts that’s a little bit. More complicated because there are Different color formats for different platforms, And so one font file needs To have a lot of data to support all of the Platforms at once And they can look different On different platforms, So yeah emoji as web fonts Is still I think, kind of — is a cutting-edge thing, But it can add.

Consistency – and I hope we see more developments – Of that in the future RICK VISCOMI And going Back to the Roboto at YouTube example: one Of the things I remembered that was kind of tricky Was when we would have font-weight bold in our styles, That would default to Weight 700 by the browser, But our designers decided that It looked best as weight 500, So we actually had to go back. And change all of our styles from font-weight, bold To font-weight 500 And it became kind Of a new way that we had to ingrain into Our style development, But there’s something new.

That’s Coming out called variable fonts, How would they help Address the situation, DAVE, CROSSLAND, Yeah Variable fonts can help a lot. It’s a very exciting. New technology, It’s part of the Opentype standard, which is the font format that that’s Widely supported in pretty much all platforms today And variations allows you To do runtime interpolation between different sort of styles, Or faces within a font family, So traditionally you would Have like a thin weight, a regular weight, a bold Weight and extra bold weight And in CSS you’ve only Had up to nine weights — 100 through 900 With variations, then you are Able to specify weight, 154 and dial in a very specific And dynamic weight You can animate these weight.

Changes using CSS animations And in CSS4 there’s more Direct support for this RICK VISCOMI So does that Mean that every font is now going to be able to be Completely customizable, Or are only a few fonts going To be eligible for this DAVE CROSSLAND Well, it is something that font developers Need to add to fonts, And so in that Way it breaks down the traditional wall between the Font maker and the font user And so variable Fonts create a kind of dialogue between the two, So as a font user, you Can customize the font, but only in ways which the Font maker has provided for, And so that means that you don’t Need to become a type designer yourself, but it means that you Have that flexibility that you didn’t have before And the variations are Not only for font weight, There’s, also font width, There’s slanting And there’s also optical size, And those are all part of The OpenType standard today Optical sizing, means that When you change your font size from 10 point to 70 Point then, the letter forms will actually react and Respond to that change, And so, as your font Size gets larger.

The letter forms will Become more elegant And as it gets smaller They can become more legible, more readable And there’s also all other kinds. Of variations, you can imagine, which aren’t part Of the standard and are specific to each font, Things like rounding and many creative options. Google Fonts is commissioned. To sort of experimental trial fonts from type designer David Berlow at Type Network.

The first is Decovar, which Has a lot of variations which are decorative so rounding Different kinds of serifs different kinds of Stroke patterns And this can be used as a Kind of graphical device, Because variations Can be animated, I think there’s a lot. Of potential there, The other typeface is Amstelvar And Amstelvar is A text typeface and it has a set Of parametric axes which go far beyond Just weight and width and into things like The ascender length descender length and A lot of variations which can be used together, To create more readable text, RICK VISCOMI, I’m Especially interested about variable fonts, We’re going to have to Have you back on the show once they’re a little Bit more established, Then we can talk about The state of them, But where could Developers go if they want to learn more about Any of these technologies DAVE CROSSLAND Microsoft Edge has on their developer site a Really good variable, fonts demo site That’s a great place to learn.

More about variable fonts, There’s also the Design.Google.Com/Fonts articles website, where the Google Fonts team publishes articles about type and Typography in collaboration with the Google Design team And then there’s Also material.Io, where you can get the Material Design, icons, font and learn more about Material Design guidelines, RICK VISCOMI, Well, there you go, The links are in The description so go check them out.

Share your web fonts stories. In the comments below Don’t forget to Like and subscribe so you can tune in For another episode of “, The State of the Web” Every other Wednesday, Thanks for reading and We’ll see you next time, [ MUSIC PLAYING ]


 

Categories
Online Marketing

Accessibility Testing – Totally Tooling Tips

It’s good. Did you get a haircut? I did a haircut new accent, new new new. Look. You feel it’s good! It’s good you’re, looking better than before. You feel better than before. You’re, not mad. I am NOT no hi, I’m Rob Dodson, I’m a developer advocate on the chrome team, sure Rob just just sell, sell yourself. I mean hello and also uh you’re selling stuff, also host a little show on the chrome Developers.

Youtube blog called alley cast world-renown. Is that what we’re calling it yes well world renowned, I see people around the world have renowned it. I think, okay, all right, believe what you want to believe, but today we’re going to be talking about accessibility, audit, Angley right. What is your workflow for that? Look? Like yeah, so over here on, my laptop I’ve got a site that I’ve been working on.

This is called lifestyle. It’s got some cool like hipster photos and stuff, like that people have styles of the accessible and famous all right yeah, and what I usually do when I’m you know working on improving the accessibility of a site is, I will use the new audits panel in chrome, Dev tools, which is very very nice if you go to create a new audit, you’ll, see that you’ve got like a number of options inside of there, so you could look at PW, anus, best practices, etc.

One of the topic areas is accessibility, so you can just go run, just an accessibility audit. If you don’t, you don’t feel like doing the other tests. Here’s one that I ran against the page and it’s doing pretty. Okay right. It’s got on anyone not so bad, but there’s definitely a few issues that we need to fix and in particular one that I see a lot is, is color contrast, so you’ve got your your your foreground text.

Maybe is a little too light on the background. Color one of the nice things that we can do with the audits panel is we can actually dive in and we can see which elements specifically have failing contrast. So here I can see that I’ve got this like product card price element and if I click on that and stretch this out a little bit, you can see. It’ll take me over to my elements panel and I can actually scroll in to view the actual element that is failing just this price right, y’all, nice and it already selects the domnode for you, that’s cool, yeah, and so one of the things that’s really helpful.

Is you know really this is this? Allow me to sort of quickly identify this node, but one of the things we’re working on, which is over here in Chrome, Canary right now, is actually a color picker. That will make it a little bit easier for you to fix those contrast issues. So if you’re in something like Chrome Canary, you can go into Chrome, colon, slash, slash flags, you can look for the word: developer tools, experiments, oh you’re, in flags and experiments.

You look like to live dangerously, oh yeah, oh yeah, so dangerously, so we enable the developer tools, experiments right. We step into the future, it’ll refresh our browser for us. We can go back over here pop up in as the dev tools click on this little Settings. Menu good, where it says experiments da da and here we can see, we’ve got accessible the inspection as well as color contrast ratio line.

So let’s see what that does so we’ll go, find that same node. That was giving us problems over here. Inspect it and then we can see in our Styles panel I got a little color sread and click on that and you’ll see that there’s this little line inside of my color palettes. This is actually a sea mmmmm-hmm. This was actually telling us like. Where are our colors needs to be in order to have sufficient color contrast? So, since we’re above the line, we get this little warning that says, we’ve got a little contrast.

I happen to know that this is not like the final look for this piece of UI. It’s still being iterated on, but it’ll be something like this, where you’ve got a line and you can sort of tell which side is the good side of the bad side. So I can actually just drag this below the line. That warning goes away. You can see over here. It’s also like updating my element live in the document and it’ll sort of tell me what the good color contrast ratio is.

So I can just grab that value right off here and then go back and just fix it in my CSS. That’s pretty neat, so I was trying this out the other week and something that occurred to me was that you know if, if you use a developer, realize that the contrast is a little bit off, do you need to go back to your designers at that point, And say: well, is this okay for our brand and thing is that’s when they should be factored in earlier on in the process I ideal.

Yeah like this is there’s, there’s definitely other design tools out. There there’s, I think, there’s plug-ins for sketch, and things like that, which will also help you look at the color contrast for your designs and make sure things are not too low. Contrast, anytime, you can catch that earlier in the process, make sure all the designers are on board and all the stakeholders are on board and and that sort of like makes it easier when those things come downstream for folks to implement it, and it doesn’t kind of, Like a contentious issue or anything cool, that’s that’s awesome.

The house audit also had some other accessibility stuff in there as well right. So it had contrast. No, I was highlighting all the tributes to alt attributes, yep yep, so yeah. If we go back to that report, let’s see here so yeah a few of the things that that this site was failing. It’s missing some alt attributes. We’ve got form elements that don’t have associated labels: the big problem there is you land on a control, and maybe it says that it’s a button, but it doesn’t tell you what kind of button right is it the you know, sin my social security number to hackers Button, I don’t want to click that button right.

I want to make sure that I’m clicking the right kind of controls. I know what I’m interacting with we’ve got over. I think 32 tests, or maybe even over 35 tests in in the lighthouse accessibility checker here and under the hood. These tests are all based on a library called axe core which is made by some folks at a DQ so yeah. We we work at the axe, core library we leverage to the test from inside of it and we sort of integrated into dev tools.

You can hop around and inspect the notes. Real, quick, that’s awesome, so this is great again for locally checking on your accessibility issues. What about CI and continuously monitoring your accessibility? Is there a story for that too yeah? Absolutely so the the lighthouse library itself can be used as a standalone node module. So you can pull that into your CI process. If you want to do that or alternatively, you could use the axe core library that is powering these tests and you could use that standalone.

The the nice thing there is, you can sort of decide which accessibility tests you want to turn on or off, depending on sort of the criteria that you’re trying to meet very cool. So we’ve got lots of great tooling for accessibility, auditing. What about docks or education material? Yes, we have that as well. So if you go to developers.Google.Com/live Sunda mental, slash accessibility, we have a whole section there on getting started with accessibility for the web, and it also includes links to our Udacity course.

So that’s like a multi-week kind of hands-on experience where you actually like build stuff and read a bunch of articles and kind of get up to speed on accessibility, very cool yeah. I feel, like my lifestyle, is more accessible, already yeah cool yeah, thanks for having me today, yeah thanks for coming down awesome yeah people should check out ala cast: oh yeah, oh yeah,


 

Categories
Online Marketing

How We Designed Chrome – Designer vs. Developer #20

What you want? It’s always they want more and more, but they never use those things, and it’s really hard and quite brave thinks they know we’re going to script stuff away. There was internal talk about how chrome is built, and I think back to that time, where Internet Explorer was the dominant browser, Firefox was just was fighting and like the developer, tools were becoming quite prevalent and Safari was was, was just released.

I believe and Google designs to build a browser. So how do you start in that environment? Where there’s so much competition chrome was released in 2008 yeah, but actually we started on it in 2006, oh wow and the team at Google that started on Chrome was actually we were all working on Firefox. When I first joined Google, the beginning of 2005. The idea was to work on making the web better. One way to do that is work on making browsers better.

So we started out as a team working on making Firefox better a year and a half into it. We made the switch to actually building our own browser, and that was a big, big, complicated decision right, because you know we had already. We had been going down a certain path right. So looking back, I think or a number of factors right. First off we thought we could do a really good job, so that had to be true yeah, but also you know there were a lot of things about browsers in those days that I think created, frustrating user experience.

Yeah you got to go about going back 2006. You know applications like Gmail, yeah Maps and YouTube, and so on. These things were becoming popular and other folks were building complicated web applications like this and your typical browser. In that day, if you were to leave Gmail running overnight, you come back the next day and your browser to feel pretty sluggish and bogged down because of just the weight of these applications and so way back then we we had the idea.

That would be really nice to split up the browser into multiple processes. Right operating systems had gone through a revolution from the days of windows, 3.11 to Windows, NT and so on. Yeah we’re pre-emptive multitasking was the thing OS 9 to OS 10. Could we use pre-emptive multitasking? Could we take advantage of actually multiple processes on these systems for web browsing and seemed pretty pretty pretty like, actually seem possible? If you are thinking about a browser from scratch? Yeah I mean in terms of like the UX of again is like going back to the beginning of like browsers or the browser’s of that time.

It reminds me a bit like search before Google’s like search was basically portal sites and the search input field was like almost the most least important thing, but then Google came along. It’s like Nana, that’s the wrong user experience with when chrome came about. It was quite radically different because I know remember this phrase is a Content, not crime, yeah um, so just making that kind of UX decision of like you know, because it was all toolbars and remember when you install anything everything.

It’s all fact you back, then, is very common to find a user with internet explorer and they had installed multiple toolbars. So it’s not just one tool: Bartlett, multiple tours and there’s it’s great absurd. Screenshots of people was, you know those browsers had like five toolbars and it’s not a lot of room for the content right. So one of the things with Chrome’s content now chrome idea was to really remember that the whole point is people want to engage with the web application of the website.

The web content and the browser site try to get out of the way just facilitate helping. You use the web, and so even when we designed the extension system, we resisted the idea of having a first-class way or proper way to do toolbars or sidebars. We really didn’t want extensions over you really. You know using up screen space when that screen space to users really want that for the content. So we designed things, like extension buttons.

That would be the primary access point tried to guide things in a way that would um preserve that notion and even the UI of chrome itself. We tried to keep it very minimalistic. We you know we spent a lot of time in the early days. Thinking, if we’re going to introduce another browser, it’s got to be so awesome right, it’s got it and what does that mean? It’s got to have like the most amazing features.

It’s got it like have a whole new take on browsers. It’s got to be radically different. Ui, surely that would be the reason why we’re doing this right yeah, but in and we tried many different things: putting tabs on the side. You know fancy user gesture kinds of things, Mouse gesture types of things I mean none of that really felt right, and we can do that process. We came to realize what what actually we were doing and what really would set chrome apart is that as a browser, just works better yeah like creating software.

That’s not frustrating is actually hard to do yeah, and I think users appreciate it and so started to think about it, and what does that really mean for us? It was like all products should be pretty simple right should try to try to come up with elegant UI choices. Keep it simple: it should be performant but, like I said, browsers, browsers, have a history of being janky and not well-behaved, and and and you, the user has an expectation when they click on something, especially when it’s the chrome of the UI and when it’s the the Browser UI, they click on it.

They say close this tab. It should close right away yeah, you know par for the course. Those days was. You click close that click to close that tab, and you see you might see a beach ball on Mac, os10, yeah or nothing happens on Windows. You start to see the application not responsive problem right, but in chrome, because we went with this multi-process architecture. We were able to guarantee that if you click close on the tab, it’s gone yeah and those are examples of like responsive UI that you know.

Sometimes, when we talk about performance speed, we mean like how did welded perform on a benchmark, but a lot of times. It comes down to like was experience, smooth, responsive to the user input. Did it actually do what the user wanted it when the user wanted it, that kind of thing, so, simplicity, speed. We also put a big focus on security and stability, so we had these four s’s yeah, and that was the thing that we just repeated to ourselves: if you’re not sure what to work on work on one of those things.

Yes, work on making a simpler design work on making a more performant work on making it. You know more secure so and really with security we mean making it so users feel safe on the web. I feel in control of their privacy. They understand what’s going on, but also that it’s the system is protecting you from malware and so on and again our multi-process architecture not only helped us make something more performant, but also something more secure, a browser more secure and, finally, it helped a lot with stability.

We knew that starting from scratch, with a browser that might actually be the biggest concern, is it going to just crash? Is how do you? How do you exercise enough of the browser in your testing to know that you’ve got it right? We based the browser on not on Firefox, and we based it on WebKit, which is what, at those days that was Safari 2.0 Safari, 3 had just come out and WebKit Safari was known to not necessarily be the most compatible with the web right.

Modern web standards, driven by Firefox, were just becoming a thing. Internet Explorer has had a lot of quirks about it. Internet Explorer 6.0. A lot of quirks, especially thinking about like flowed yeah, that with the flow, though we had a box model. All these things were very impactful to like how web pages were built. If a developer was testing a lot with Internet Explorer, there would be the quirks that they would code to if they were testing.

A lot was Firefox we’d, see that and the Safari it was like. Well, probably, they weren’t testing with Safari, and so it was a big challenge in a big fear. When we launched Chrome, is it going to just crash all the time yeah? How are we going to? How are we going to manage that? So we put a lot of effort and in fact that same issue in forms like our choice of the user agent string. If anybody’s seen the user agent string of Chrome, it’s kind of hilarious because it mentions ever every browser ever since chrome came along.

And that was part of navigating this whole like does it work conundrum we always taught in software development and UX, add more features, because more features means more value, so I mean: was there ever pushback or was there like a fair, maybe we’re taking away too much From the browsing UI, we certainly ugly launched, and it originally chrome, without an extension support, and even the bookmark manager when was was, was revised quite a bit.

I’m going to post the initial beta things like this, so we we intentionally went with a very minimal approach, but we also really encouraged the team to try a lot of things with the idea that, knowing going into it that we would probably throw away things that Aren’t good yeah, that was the I don’t know the mantra if you will like. Let’s just try a lot of stuff and if it doesn’t work it’s okay, we just throw died, it’s not the end of the world.

We don’t have to ship everything we dry. I think that was really liberating and really helpful, because there were a lot of folks on the team who had different had had interesting ideas and and it’s empowering for people to try stuff. But it’s also, you know appropriate that we, we don’t just say because we built it, we should ship it looking back. What would you say were the best decisions you made and also for two part.

What would you regret in terms of like oh yeah, things that you did, that you’d wish you hadn’t? I mean you can also I’m an engineer. I was definitely an engineer at those days and I feel really good about some of the decisions we made. As an engineer from an engineering focus, you know we really put a lot of. We talked a lot about how important was that we were building a product, not building a platform.

I mean ultimately is a product that carries the web platform, but what I mean by not building a platform is that sometimes there’s a temptation as engineers to go off and build framework and and tools for creating the product that you’re actually there to create you. And we really resisted that a lot tried to make sure that we focused all as much of our energy on like actually building a browser which was very helpful to make sure that that that’s what we did so, for example, we said first we’re just building a Windows browser – and that meant, let’s just use win32 straightaway, all the Microsoft API is not looking for any cross-platform toolkit framework to build our UI.

Yes, one day we’ll bring this to Mac one day, we’ll bring it to Linux. You know, and so on, but like for now we’re just building a Windows application and when we went to finally build a Mac product a product for us 10, we told some of the engineers at Google. We said hey, you want to come work with us. We’d love for you to build the best browser for OS 10, and we want you to approach it. The same way that we approached building for Windows, which is all the UI, should be cocoa.

It should all be native, and we want you to have the freedom and flexibility to both embrace the native operating system primitives, but also move quickly as those primitives change, as the iOS evolves. So, let’s build a Mac focused product again with this idea that it’s we’re building product on a platform for building browsers, but what ends up happening as you do this and we did the same thing with Linux.

What ends up happening as you do this? Is you know we start to realize. We were coding same thing three times, yeah right and later on. Things like Android came along and iOS and Chrome OS, and so our world got a lot more complicated and what we ended up doing is, or is this arc from the singular I’m building a product to I’m starting to build platform things that helped me build that Product across and different platforms, yeah and that came afterwards – and I think that was actually somewhat healthy in a bit it.

To a certain extent. I kind of have some regrets that we built Chrome so much as a monolithic product. So while there is some code structure, that’s healthy and good, and – and there is somewhat of a layer cake, if you will there are – there – are some cuts that some some extra layers in the cake that should have been there. And now we have a lot of complexity because we didn’t make some of those cuts earlier.

We didn’t modularize necessarily as much as we should have. But again I think that came from that that focus some were just building this product and he does. I don’t need to be extra. We don’t need all that extra modular modularity, and now we find ourselves wishing he had a maybe done a little more, a little more forethought on that. What would you say, the decisions that were made that were actually really good to the success of a break, yeah yeah, so design examples in engineering examples.

There was this one one concept that was came up very early, which was – and we wrestled with this a bit. So the content area of a tab right, we started with the idea that there are some. We will actually have some browser UI that lives in the tab. So, for example, when you open a new tab, page there’s there’s some content shown to you, suggestions about things. You might want to do yeah. We started out building that natively and we started to find ourselves discovering an uncanny valley, because development users have this expectation that things inside the tab behave like web pages.

But building that not using web technologies meant that some things were subtly not right: yeah selection, behavior, wasn’t there context menus? Not there and the same. You know just things were subtly different, and so we scrapped that and we built the new tab page using web technology, and now it fit better everything we didn’t have all those little niggling little bugs you just felt natural. It felt natural it fit with the product.

On the flip side, we had some dialogues and some of those dialogues, mostly they were built natively, but a few of them were built using web and they never felt quite right, and so then we came to this. Discover that, like, let’s be opinionated about this, if it’s a dialog, it’s done natively and if it’s in the content area, it’s done with the tab, and then we avoid this sort of uncanny valley situation.

When chrome came out, there was a designing for best viewed in Internet Explorer, 6 yeah, and it’s interesting. You say like at the time. Webkit was not the priority of web developers. Now, we’ve shifted 10 years later, we’re seen best viewed in chrome or best viewed in WebKit browsers. So there’s this constant fear that we’re possibly entering back to the past, where, if, if, if development stops, then users and like the web technology becomes like a stagnant, oh yeah, that’s a great question.

I think that oh there’s a couple different things that happen with ie6 right, so, first off Microsoft stopped evolving the guys and we’re not stopping evolving api’s. We our mission, is to make the web better, and so it continued invest in that and the way we invest in that is, it’s very important to work with the standards community, the other browser vendors in particular and web developers, so that we get it right.

One of the dangers of shipping an API, if you’re the only one, only browser shipping it is that you might come to find that there’s a better way to do that. Api, yeah, a better design and then the end result is we’ll be tempted to ship. The new design as well the better design, but we won’t we’ll – have trouble leaving behind the old design so now we’ll ship, two ways to do something yeah or in the worst case three ways to do something.

If you look at CSS gradients, you will see. There’s multiple ways: yeah – and this comes from this – this this phenomenon. Where browser ships it early, then they learn that oh gee. I wish I’d done it differently and then they ship it that way too, and then oh yeah. I wish they would do it differently and they ship it that. Finally – and so you end up with a multitude of ways to do things in the web platform, gets really complicated and we don’t want the bad develop web developer to be thrashed by all of that.

Right, we want to keep it simple and make sure the api’s work well, so we want to do our do a good job, and that means spending time with other browser, vendors spending, time with web developers, learning understanding all the use cases and being very deliberate in The standards process, but we should still be able to ship something. Finally, and sometimes we do have to take some calculated risk yeah right.

Sometimes we are the first browser to ship an API, but we hope to do that in a way that stands the test of time, you’re looking for pain, points and you’re, trying to understand the why it is that people have these problems so that you understand their Mental model and you avoidable, designing in that way again.