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

Discoverability & Analytics

Your PWA is still a webpage that customers can find in their usual ways. You want to apply reasonable search engine optimization and ensure the page is available to search engines. You can use JavaScript on your pages and Google will index it as long as you follow some best practices. You can use the fetch as Google tool from the Google webmasters site to see how your app looks when crawled discoverability helps get customers to your site.

But how can you measure their behaviors once they get there? That’s where analytics comes in Google Analytics is a service that collects processes and reports, data about an applications, use patterns and performance. Adding Google Analytics to a web application enables the collection of data like visitor traffic, user agent, the user’s location, etc. This data is sent to Google Analytics servers where it’s processed.

The reports are available in the Google Analytics web interface and through a reporting API, Google Analytics is free and highly customisable. Integrating Google Analytics is simple. First, you must create a Google Analytics account. Each account has properties, and these aren’t JavaScript properties, but refer to individual applications or websites. Google Analytics then generates a tracking snippet for each property.

This is a piece of JavaScript that you pasted into your page. It sends data to the Google Analytics back-end. You can also use the analytics library to create custom analytics, such as tracking specific user actions or tracking push notifications. I want to say a bit more about properties. An account has properties that represent individual collections of data. These properties have property, IDs, also called tracking IDs.

That identify them to Google Analytics if an account represents a company. One property in that account might represent the company’s website, while another property might represent the company’s mobile application. If you only have one app, the simplest scenario is to create a single Google Analytics, account and add a single property to that account. This is the key part of the tracking snippet.

The entire snippet needs to be pasted into every page. You want to track at a high level when this script runs. It creates an async script tag that downloads analytics AS the analytics library it defines the GA function called the command queue. It creates a tracker that gathers user data and it sends this data as a pageview hit via HTTP request to Google Analytics. This data is analyzed in stored in your analytics account.

In addition to the data gathered by tracker creation, the page view event allows Google Analytics to infer what pages the user is visiting, how long they are visiting them and in what order for simpler applications. This is the only coding required note. You can replace analytics GS with analytics underscore debug KS for console debugging. Using this version will log detailed messages to the console for each hit, sent it also logs warnings and errors for your tracking code.

The data is sent to Google Analytics backend where it is processed into reports. These reports are available through the Google Analytics dashboard. Here is the audience overview interface. Here you can see general information such as page view, records bounce rate, ratio of new and returning visitors and other statistics. You can also see specific information like a visitor’s language, country, city, browser operating system, service provider, screen resolution and device.

Here we are looking at the user City, it’s also possible to view the analytics information in real time. This interface allows you to see hits as they occur on your site. I encourage you to take some time and explore there’s an extensive set of features in the dashboard. You should explore the standard reports and look at creating your own. Knowing how to use analytics for improving your business or increasing revenue is a skill within itself.

Fortunately, the Google Analytics Academy offers a free set of online courses. Google Analytics supports custom events that allow fine, grained analysis of user behavior. This code uses the G a command Q, which is defined in the tracking snippet. The send command is used to send an analytics event. Values associated with the event are as parameters. These values represent the event, category event, action and event label.

All of these are arbitrary and used to organize events. These custom events allow us to deeply understand user interactions with our site. For example, here we are sending a view more event. This might be used to indicate that the user has viewed an item from our site. The event label tells us that it was a premium product. I mentioned earlier that you might use events to track push notifications.

You can add events to fire when users subscribe or unsubscribe to push notifications as well as when there is an error in a subscription process. This can give you an understanding of how many users are subscribing or unsubscribing to your app here. We send a subscribe event, letting us know that a user has subscribed to our notifications. Let’s talk about what happens when analytics meets service workers, they won’t work without a little help.

That’s because the service worker script runs on its own thread and doesn’t have access to the GA command queue object established by the tracking snippet code on the main thread. It also requires the window object. Service workers must use the measurement protocol API instead of the command Q. This is a simple set of HTTP parameters documented at the Google Analytics site. Here’s an example of recording when the user closes a push notification.

The service worker manages the notification lifecycle, so it receives a notification close event when the event fires, the service worker, sends a hit via post with tracking ID custom event parameters and the required parameters for the API. Remember that we don’t want this service worker to shut down before we complete the post, so we wrap this code in event. Wait until since hits are effectively HTTP requests, they can’t be sent if the user is offline using service worker and indexeddb hits can be stored when users are offline and sent it a later time when they have reconnected.

Fortunately, the SW offline, google analytics and PM package abstracts this process for us to integrate offline analytics, install the package in your project with the npm install command. Then, in the service worker script import, the offline, google analytics import, je and initialize. The google and google analytics object. This adds a fetch event handler to the serviceworker that only listens for requests made to the Google Analytics domain.

The handler attempts to send Google Analytics normally if the network request fails, it will be stored in indexdb. Instead, the stored hits will be resent when online. You can test this behavior by enabling offline mode in developer tools and then triggering Google Analytics hits on your app indexdb will show a list of urls that represent the unsent hit requests. You may need to click the Refresh icon inside the indexdb interface to see them.

If you disable offline mode and refresh the page, you should see that the urls are cleared indicating that they have been sent now. It’s your turn. Go to the analytics API lab in there. You will create an account, add analytics to an app look at the results and make this work in a progressive web, app good luck and have fun if you’re an instructor. This final slide links to more information on analytics.

If you’re a student, these links can be found in your textbook. You may want to use these while you are working on the lab. There are additional slides at the end of this presentation that show the major analytic screens and explain how to get there, use these to deepen your knowledge or create live demonstrations. You


 

Categories
Online Marketing

UI Elements at 60fps (Progressive Web App Summit 2016)

I kind of wanted to put that into a little bit of context when we talked about performance historically on our team. Last year year and a half we’ve talked about a thing called rail and rail stands for response, animation, idle and load, and it’s a way of thinking about performance that puts the user in the middle and lets us figure out what they expect from things.

So, for example, if you tap on a screen, you expect something to be coming back on screen in under a tenth of a second. If you scroll or there’s a transition, that’s an animation, and we want that at 60 frames. A second idle is a bit of a funny one, but the general idea is that you should do work when the user isn’t interacting and when there’s opportunity to do so when the main thread has some time and we do those in 50 millisecond chunks.

So we can keep responding to users and loading. You want to keep the user on their train of thought, and so you’ve got about a second to get something up on screen, whether that’s from a cache for the network. Now, when we talk about rail, this is the kind of world view. Then I think many of us have today we kind of go yeah responses. Ok, yeah! We don’t need to be lucky, that’s fair enough! It’s kind of important scrolling animation.

It definitely heard that’s a thing and that’s something I want to make sure is good idle. Yeah sure seems good load load, yes, whoo back in the safe, ok load, yeah man, if I can catenate all that good stuff, but here’s the thing this is kind of where we’re thinking of being on people’s home screens and a closer look at that home screen Raises an interesting question which of these is the progressive one up which of these is the native web app? The truth is users don’t care what they care about.

Is that the thing that they tap on works really well and they would never say something: oh wow. It skipped things there you go back would go rewind, okay, nobody ever going to say this, and if they did, it was something ice. That up looks like native. I hope it behaves like it. There you go, they expect it to behave like a native app. They expect your stuff to run. Well, I want to say, behaves there, we go hello behaves for me is like performance, and it’s about.

Does it behave as we expect? Is it do the things that you know and interact with it? Just do the right things right, since that’s the case, I think we can reevaluate rail to look more like back bad clicker more like this, the response part of rail. Well, we expect our responses to be instant like every time instant. So that’s just now more important. Animations yep they’re down there and there we go they’re going up there, because we expect again, we expect instant transitions.

We expect you know scrolling to be super smooth idle. Well now, if we’re doing more work, to make responses and animations good idle is something we’re going to have to be more tactical about we’re going to have to do some work when the user isn’t, and we have things like requests idle callback for that, so idle. Just went up good news, though I think, if you’re expecting somebody to add you to home screen and run your stuff lots of times.

Hopefully, you’re going to have a serviceworker, hopefully you’re, going to be running from a cache and therefore I think load drops down to here. I don’t think it’s unimportant. Don’t get me wrong. You still got to do a good job to get that first load there, but I think over time I think that’s what we’re talking about so, if you’re being home screen minded. I think it looks more like this and I think, if you think about the the native apps, that you run, you have a similar expectation.

You don’t ever sit there thinking about well, this APK took a long time. You know when you’re using it for the 50th time you’re thinking more about how this actually behaves, whether it’s got the features you want and so on. So with that in mind, I wanted to talk about three individual components, but they give me an excuse to talk about about a bunch of other things and I can explain, I suppose, the way I categorize my components from deterministic.

We know up front. We can hard code the values, those animations and interactions through something that’s a little bit less known upfront all the way through to something where we’ve got no idea about how it’s going to behave until somebody actually clicks on the thing, or we have a little bit Of an idea, but not much so those three components are a side, nav some swipeable cards and then expand and collapse view, let’s jump straight into the side navigation, which I think most of us I’ve seen before seen these you ever seen these quite a lot.

So what, although, for each one of these I’ll, explain the theory of how I would approach them to maintain performance and to kind of be performance minded? I will be leaving probably some glaring omissions in the area of accessibility, but just as well Bob Dodds coming on next and he’s going to talk about accessibility. Oh it all fits together wonderfully anyway, the theory for the side nav. What we’re going to do is we’re going to pop on a containing element over the top of all our content, into which we can place a semi-transparent black, a background to obscure our content and then we’re going to have this contents bit with our actual side.

Nav. In it, which will slide in from the side like so so, the CSS for something like that for that containing element, it’s going to be positioned, fixed left:0, top:0 width and height 1 %. Some people like to do write 0 bottom 0. That’s fine works just as well overflow, hidden because we don’t want any scroll bars, but the pointer events. One is a bit of an interesting side step that I want to take it lets me talk about something that’s kind of like a primed element, so these are elements where you you want that thing to be ready to go, and the sign now is one of Those because, when a user taps on the button, they expect the side nav to just come throughout right.

So the general idea behind a primed element for me is that it’s something that could be activated at any time: okay, like a side, nav yeah, it probably fits that bill and if you were to toggle its visibility, it would take more than 100 milliseconds, as in Because they’re, probably at a tap a button and you ray’ll, tells you you’ve got 100 milliseconds to respond if you take longer than that, it’s going to feel lucky.

So these are my sort of two criteria. As I say, I’m leaving a glaring omission where’s. The regards accessibility so hold on to your hats for that bit coming next, but all the same we have around on. I think this is a primed element. I think it fits and as such we can take a couple of shortcuts, one of which is we’re going to promote the content bit to its own layer and, if you’re not familiar with layer promotion.

The idea is, you want to separate out an element from the rest of the page so that when you paint it or move it around, you don’t affect any other element on the page. It’s the same kind of deal. Is you know if you are not packaged whatever you create a layer and you can mess with the pixels in it and you don’t mess with anything else now? The easiest way to do that today, to create one of these layers called a compositor layer, is to use, will change transform.

So if you imagine the simplest possible page with a photo of bald idiot and a nice guy – and you put will change onto said image now, you can move it around with a transform and you can see that it’s kind of separate from the page. Obviously, this isn’t happening in real time, but it’s it’s the idea of separating these things out now you may be sitting there thinking that seems like a great idea star.

Will change transform burn that from your mind? Okay, if I’m not clear, don’t do it! The reason you don’t wan na do it is twofold. Firstly, you’ll want to keep your memory usage down, especially on a mobile device. If you create layers you’re going to use memory, you’re going to have management you’re going to have textures on the GPU all that kind of stuff, so you want to do this as needed now with the primed element, I’m going to make the argument that you probably Want to do something like the will change in your CSS, but in other cases, where it’s not known until you start interacting, you probably do the will change in your JavaScript.

The other reason is you want to keep your time in compositing to a minimum. Compositing is where we take all those layers and we squish it back together and put the pixels up on screen now, of course, if you made lots of layers, that’s a lot of depth, sorting, it’s a lot of management, and it’s a lot of putting back together That takes time, so you want to be tactical about this, so we’ve got our promoted layer and, as you can see in the CSS I’m going to put will change transform on it like so and then come back, then yeah I’m going to transform the contents off To the left, by a oddly specific 102 percent and if you’re curious about that is because I’ve got a shadow, and I just do an extra couple of percent to hide it, cheating, but that’s programming.

You know it’s just cheating right sometimes and I’m a cheat when it comes to programming, I’m very, very, not otherwise, especially not when playing little games with my kids, I’m very fair, never cheap anyway. Eventually, the user is going to tap on a button and that’s going to show the side nav, which in this case is just going to add a class in that class, is going to remove that 102 percent fairly straightforward.

And we get something like this, where it slides in from the side that semi-transparent black black background is the same kind of deal here. We’re going to do a will change of opacity from an opacity value of 0 to an opacity value of 1 and getting rid of it like so it’s just going to be the same in Reverse, we’re just going to remove that class. Everything goes back. It’s great and we could just do that, but it’s like hide side nav, which I put on the containing element.

So if you click anywhere, I’m going to hide the side nav, which is a bit bad, if you actually click on something in the side nav. So the way to get around, that is, to just add an extra handler for that particular situation, which cancels the click which is just a stopped propagation, so I’m kind of canceling the click and it works out really well, in fact so well, this is what it Looks like in reality, this is one that Surma and I built.

This is actually running on a nexus 5x and you can see you know slide out slide in. I actually added a bit of drag thing to it, which you can see if you want to afterwards. When you take a profile of this in the dev tools timeline, which is kind of what you want to be doing with all your UI elements, I have the side nav sliding in and sliding out, which doesn’t look very big. So, let’s zoom in you can see that green chunk is the frames per second and we’re hitting a nice comfy 60 frames a second on our Nexus 5x and below.

It is the amount of work frame which is pretty low because we’re not doing much we’re just using transform changes if you’re interested in seeing that actually being built for real there’s the TL DW and is also a live stream, which was about an hour long with Me and Surma, where we built the side, nav books and everything it was great, but you can catch that if you, if you haven’t seen it so, let’s move on since we’ve done the essentially done the fully deterministic hundred and two percent, nothing.

We can move on to this swipeable card, which is a little more interactive, a little more dynamic. So that’s this one you’ve seen it probably some that Google, now you know just ours and it slides up to take its place. The theory here is again. We want to promote to a layer for the thing that’s being interacted with, but we want to do that on demand. We don’t want to do this one ahead of time, because if you had a lot of cards, that’s a lot of layers and a lot of memory usage, not a good idea.

We also want to use transform and opacity as well, because we’re going to transform this thing off to the side and from a kind of behavioral point of view. If we want it to fade out, because that gives the idea of being dismissed, it’s it kind of something the user would expect now. At this point, I want to take a little bit of a detour and talk about kind of game loopy stuff, which is something that any game developer would be like yeah and it’s extremely useful in this situation.

What we want to do in these kind of cases is decouple our input, which can happen fairly, sporadically and whatever, from the actual rendering and drawing you bit. We should expect from a game because your character stood there. You don’t want to you know you want the kind of game to keep moving, even when you’re not moving the character right same kind of thing. We want this animation to keep going, even when we’re not actually doing touch.

Events, for example, and the way we do that is, we call requestanimationframe for every frame of the interaction and we’ll give it our update function, which you know the nice side effect, gives us a function that we can just call to be like just draw it. Even when there’s nothing else going on now, we’ve got a touch move at the start of the frame. Well, that’s, okay, we’ll just use it will distort its value and we’ll pick it up in the requestanimationframe.

If it comes in a little bit late or it doesn’t come in at all no big deal, we’ll just use the last known good value. If, by some weird weird chance, we actually got two or more well again we’re not doing work per input event we’re the only going to do it once per frame and we’re just going to use the last known good value, that’s good. So this is a model that you probably want to adopt. If you haven’t already for this kind of work now we get to the actually to adding the event listeners and fair enough, I’m going to share them between Mouse and touch.

I think pointer events might help a little bit here, but you know I’ve got this so touchstart touchmove touchend, so on and as a side note, the adding of these touch handlers to the document is bad. Generally speaking and the reason it’s bad is this: really? You have on the compositor thread, which gets the user touch. It’s the one that actually is told about the interaction first and by default. It would do something like scrolling.

It would just move the page up and down, but we registered a touch move, and that involves the main thread and if the main thread was busy or our touch move, just ran for a long time. For some reason, then, eventually to come back and the frame will be shipped, but in between that we’ve blocked the user oops. So that’s not as good, and there is a way around this it’s new as of I believe, chrome, 51 and it’s in opera and Firefox.

It’s in development, according to Chrome status, same with WebKit, but this is encyclopedia large, obviously, and I’m not sure about age. I can check with the folks on that team. However, what we do is we add this passive, true to the event listener. One that says is, I won’t call prevent default, I’m not going to do it. So don’t worry about waiting on me in order to do the thing you’re going to do still give me the events and give me the information, but I’m not going to prevent default.

Okay and then the browser goes cool. I won’t block then I’ll just get on with it. That’s great. So, anyway, back to where we were. We have our event listeners and we talked about what they are going to do. For example, we have this card, it’s in the start exposition. So what we’ll do is tapped on it we’ll go to our on start, which is going to basically ask for the position which lie to be paychecks or the first touch.

Events, page X and then we’ll add, will change on it dynamically, which will give us a bit of a hit because we have to create the layer and everything. But it’s probably going to be. Ok. Probably now you actually move your finger across and we have to category in what’s the new position, which is fairly straightforward, it’s the same kind of deal. We just tracked the page X or the first touch events page X and since we know where we were and where we are, we can figure out what the translation should be, such that in our update function.

We can say if you’re dragging the card, your translation is the current minus the start and what we will do is we will apply a transform with that value. Great stuff, that’s going to work, we’re going to be able to slide across. We can change the opacity and the same in the same kind of way, but we now need to think about the next part, which is I’m kind of dismissing the card right or I don’t go far enough and it comes back to the middle so kind of This is the behavioral bit, so if we consider a normalized distance, so it’s at 0.

If it was out to the side, we could say that’s position 1 or back in the other way. That’s also position 1. All we can do is we can come to throat. These thresholds, I put them in 0.35, when I was doing this, you could pick naught point 3, 6 or something else entirely. It’s very exciting. What will I choose today? Who knows that’s web dev, so I put an all point three five and if you don’t know, Pratt’s, not point three, five, I’m going to slide back to the middle.

If you do go past, not point three, five, I’m going to dismiss the card fair enough. Okay, so that’s in the the on end, like so oh yeah, threshold card width times by not 0.35, and it’s is this – is this target x value which we’re going to come on to in a moment it’s defaulting to zero? If you go past the threshold, we’re going to choose, either the card width or card with, depending on which direction you were going okay, and we can pick that up in the the else here, where we say translate x, plus equals target X minus translate X, all Over four and if you’ve been around for a while – and it done this kind of work – you probably recognize this if you haven’t very exciting little one-liner, that is incredibly helpful when you want to do what I call the easiest easing in the world or easy inning Easy takes always takes this form.

Okay, it’s value plus equals target value all over strength, and I genuinely have made other developers like memorize that, because it’s incredibly helpful, let me show you what I mean worked. Example. Let’s say you want to get this box from zero to a hundred and you basically target value. So it’s 100 zero all over strength, which is four we’ll move. It 25 pixels cool on the next iteration. It’s a hundred minus 25, which is 75 all over the strength, which is four, that’s 18 point, seven five and, as you build it up, you’re going to see that it’s going to slow down because there’s a nice kind of slowdown easing feel for this, so that Your box would go mmm sound effects, not included okay.

So that’s this one line, but it’s an incredibly helpful line. It’s either than that users back to zero, which can ease us to the card dismissal point now we need to detect doneness. There’s no better word for what we’re doing here. Is this animation done? Can I say that we’re finished with this? Okay? The way we do that is well, it’s either you go there and back to the middle, fair enough, in which case we can just say.

Are you nearly at the start? If so, yeah you’re probably done I’ll work that’ll get us most of the way there. If you are just reset the target allow the user to interact again. Other one is basically, you slide. You’ve done the slide out to the side like so, and we also know that we’re going to fade out the card. So I mean this is pretty cheeky, but we can just ask: is the opacity really really low if it is it’s nearly invisible? If it’s nearly invisible, it’s going, it’s going going gone and, in fact gone so much that we’re going to remove it from the Dom with remove child like so now that will cause all the other cards to jump up immediately, because the Dom yeah we took our Element until the other ones went full cool, there’s some space, let’s take it, which we don’t want.

We want them to animate. We have this function. That says, is what there’s and it looks like this. You know that kind of slide up there. You go. That’s the thing you want, so what we do is in our animator the cards into position. What we’re going to do is we’re just going to ask for the current card and we’re going to step through all the remaining ones like so and we’re just going to. Basically, push them down straight down by a cards height, so you go back down to where you were.

Please just ignore the fact that we just removed a card. You stay where you are, and then what we’re going to do is we’re going to wait a frame for that to take hold because styles will run after the end of our JavaScript cool and then what we’ll do is we’ll switch on a transition on transforms and We’ll get rid of it and that’ll cause all the cars to go and that’ll look great cool, and then, when we’re done, we can reset the target and in reality this is what it looks like.

This is another one that server and I built again. It took an hour there were bugs weird, so you go slide swipe it’s great. If you have two timeline and you were to take a recording of that again zoom in and it’s actually in two parts, this one the left-hand bit is the car dismiss. What are you doing slides? Don’t do that to me. I maybe it’s me and Jake. Maybe maybe we just there’s something bad going on, I’m blaming Jake.

It was all fine until Jake came on stage and everything broke for him. Interesting coincidence. Yes, so the car dismissal. That’s right there and then there’s the other bit here, which is sliding the card and you see, there’s a little dip at the start and that’s because that layer, promotion of there’s a bit of layer promotion, but the kind of setting up of those card animations did Cost us a little bit so, if you’re interested in nine, you want to see that one built.

What are you doing seriously? Okay, if you want to see that one built there’s a TL DW, there’s an hour-long livestream that you can catch of that one as well. So I football cards right. We can move on areas, I’m just going to stand around here. Okay, the exponent collapse is the final one and it’s the one. That is the kind of fully dynamic one, because you could pick any of those cards. They could be anywhere on screen and okay, in this case, in the mobile case, they might do a full screen takeover, but they might not.

They might just expand a little bit or something like that. We don’t really know ahead of time. We can’t hard-code those values and if we try it’s going to be pretty horrible, so how do we handle this situation? Well, the theory for this one is going to be a little more involved, but that’s fun. When I get something like this from a designer or I do it myself, I kind of read it over and over and over again it’s a thrilling few minutes.

But it’s a useful few minutes because it’ll as you kind of read something over and over again, your brain starts to notice the patterns and the patterns here are in this case. I think that thing is, is getting bigger and it’s moving. Yes, there’s the pink head a bit, that’s fading in, but predominately this is about a movement, it’s getting wider and taller and it’s moving and therefore I would normally go wow that feels like a width, height left in top moment.

Great, that’s probably what I would animate, except that that would be bad and the reason it would be bad is that in every browser you would trigger layout with a purple chunk at the top. There paint and composite layout is basically where the browser says. Where is every element? It’s basically a geometric process. Where is the remote element? Every element, what is its size and so on paint is where we fill in pixels and compositing is where we put the page back together all those layers.

Now, if you’ve got to do that for every single frame, when you might have a reasonable size that Dom you’re in trouble, you don’t want to be able to do under have to do this work on every single frame. Chances of getting 60 frames. A second slim to none – you may have noticed that I use transforms an awful lot and the reason it is their profile is different for an element. That’s got its own compositor layer.

Changing a transform is not going to trigger layout and it’s not going to trigger paint. It should only trigger compositing, which is something that we can probably get done comfortably at 60 frames a second, so this then changes the question to look like this. Can we do that effect with transforms? Can we remap this slow-mo? Can we do that with a transform? Well to me that looks like a scale and it looks like a translation cool.

My approach is called flip all right, so that’s the first last invert and play because there aren’t enough acronyms okay, so I’m adding another one cool, but it’s an extremely useful way to think about the animation. What we want to do is we want to essentially ask the question at room type. Where is the element that I’m interacting with so we record its first position on screen and we do that with something like get bounding, client rect, which is fun to say and has been around since ie for lint.

And it will tell you in relation to the viewport, where this element is its left, its height, its top its right, its bottom, all the stuff that we need to know know what we can do is we can actually snap the element in question out to its Final position, I’m doing this for the class. We could have manipulate the Styles. You could do whatever you need to do so now our card is going to be in its last position like so, and we can call get bounding, client rect a second time.

So now we know where you were now now. We know where you’re going to be that’s cool. That means we can start to kind of figure out our transforms that we might need dynamically. Now there is a word of warning here. Going from first to last is going to trigger styles and layout and the reason it’s going to trigger styles and layout is because the second gets bounding, client rect came after some style mutation.

We said: here’s a new class for you or here’s, some style changes, and then we asked for how wide and how high and where are you on screen and the browser goes. I don’t know you just moved everything hang on. Let me go and figure it out and I’ll come back with an answer and that’s exactly what happens. So you got to bear in mind that there’s the from this first class, I mean you might be sitting there going hang on a minute.

I’r sure you said trigger in layout was bad and I did, but the key is here: we’re not going to do it on every single frame. There are two things we need to bear in mind, one we’re going to do it once at the start, as a set up cost. Secondly, we have rail, which is going to be our friend here, bear in mind the user tapped on a card to get the animation. Therefore, in rail terms there here, we have a tenth of a second in which to respond.

We have a tenth of a second in which we can do some work and believe me, a tenth of a second is actually quite a long time, especially when it comes to this kind of work. It’s great. We should use it and we do so. When it comes to rail and flip, you can typically afford to do a single styles and layout. Pass then seriously one, but that’s cool. That’s often enough and in terms of flip, that’s a good set up time.

You’ll still need it to complete in less than 100 milliseconds, so you kind of have to be aware of how big the DOM is and if you’re able to use something like CSS containment to limit the scope of layout and paint. You should definitely do that and that’s really useful. However, we knew where we work. That was first, we know where we are that’s last and now we can transform. What we’ll do is we’ll just basically apply an inverse transform to take us back to here.

We can do that so first left, you know blah blah blah. Do that with a scale, apply a transform that uses those values. So at this point, we’ve done first last an invert – and it’s like this. So if I was the top on the card Ready, Steady, Go there, you go from the users point of view. Nothing happened. What’s really happening. Is this going first last and then we’re inverting and it feels like a lot of setup cost and it kind of is, but it gives us a huge advantage, because what we can do now is switch on transition on transforms and remove that transform and our card Will just go, we didn’t know where it was bit the stuff.

We didn’t hard code it we just said: where are you going? Where are you now I’ll figure out the transform and I’ll apply it for you, we’ve just most a remaps, something there was width, height, left and top, which wouldn’t have run at 60 frames. A second do something that definitely will hopefully all being well caveat. So because there’s always those if you’ve got some scale changes that are being applied.

They something like text, let’s say, you’re, doing something flipped like when you got something with text inside that might get squashed or stretched. So you might need to move the content to a sibling element so that it’s not affected and then just have faded in or something like that, but a sleight-of-hand. You might need to do that bit of gymnastics, but it’s well worth it like. I said the first to last does involve forcing Styles and layout, so you have to be careful with that, but this is what it looks like in reality there.

This is a little kind of expanded collapse, e-card thing, which you know that’s running on our Nexus 5x, and this screen doesn’t make a look at like it’s. 60 frames a second, but it is, and I can prove it because I’ve got timelines that show it and you can see it I’ll show you it’s great. It’s also responsive design friendly, like I said, we’re going to ask at room time what the first position is and what the last position is.

We don’t we don’t hard-code those values, which means the same animation on desktop, looks like this different position: different sizes, but still the same stuff, and this is what it looks like in timeline – will zoom in again to the top bit, and you see the dip at The start – and you see, there’s a red markers – that’s they’ve tools telling you your frames per second dipped below the comfortable point of 60, but we know that that was the setup of flipped.

That was the first lesson invert, which, on a nexus 5x on this case, was about 40 milliseconds. After that that is a steady, 60 frames, a second afterwards tremendous cool. I get to call this one a day in a moment. Some closing thoughts. You’ve noticed probably that I use will change, and I would suggest that you start doing that. If you haven’t already for elements that you intend to animate, you need to decide.

Is this thing primed? If so, I’m going to probably put the will change into my CSS. If not, I need to do it on demand, probably via JavaScript, but you want to use it sparingly, don’t go overboard. Transform and opacity are your best friends. When it comes to UI elements, running performant ly. I hope in the future to be able to say that you can get away with a lot more and actually we are heading for that world with things like Jeep, GPU, rasterization, CSS containment, lots of really good things that might help us limit the work, and I Mean that we can do more, but for today for the cross browser story, I would suggest that you stick here.

If you find yourself in the kind of dynamic and then something like flip, where you can remap expensive properties calculate your transforms at runtime is very useful. Now follow that’s news to you and you’ve never come across like layout, recalc style or anything here are some links, inbound phones out, don’t worry, you can get the slides afterwards as well. Other phones went down, don’t care anymore.

There’s the Google web fundamentals render performance section complete with Udacity course, which will take you through the same kind of content, very useful to get up to speed. Secondarily, if you want the source code for those elements, I showed you can get that at the supercharge. Do I wish to take you to the github repo? If you want to see me and Surma, where sermo basically spends an hour interrupting me and I try and code it’s like real life.

There are bugs as well. It’s just it’s every time. I don’t when it’s scary, but brilliant and there’s a TL DW, which is like five minutes. If you ever got that on that time right, I need to shut up and move on, but before I do, I just want to say this again. We are hopefully going to be here. This is the first time we’ve been invited to people’s home screens. That is incredibly exciting, but it’s also a huge responsibility.

We need to act like we deserve to be there, and that means taking a user interface work super seriously. The web is ready for us to do that. We can do that today with the tech. I’ve shown that you can. I hope that you go and give it a try, and with that I’ll say, thank you very much. You


 

Categories
Online Marketing

Gulp Setup – Progressive Web App Training

Modern web development involves quite a few tasks, running servers, optimizing images and processing source code. Now these are the kinds of manual tasks that you can automate with: gulp grunt make or other build tools. The world of build tools is constantly changing, but we chose gulp here for its relative longevity and its relative simplicity simply put gulp reads: a file called the gulp file to tell it what to do it then processes your source files, transforms them and writes the results To a build directory, this is a sample golf rjs file, it’s written in JavaScript with a couple of no js’ extensions for loading, other files, the require statements of the top load, the core gulp commands and the gulp interface to uglify.

These are known as gulp plugins and by the way, uglify is a program to compress and minify javascript. Now, gulp files are divided into a series of tasks. A task might run a server minify some code or even delete files. Each task should be one self-contained action. We define a task named uglify j/s and write some JavaScript to implement it. The gulp dots sauce task reads all the J’s files from source J s.

We then pass all those files into the uglify tool using the pipe command. Now the output of each command is ready to pipe into the next, so we use the gulp nest command to write the result into new files under dist J s. Snap formerly gulp is a cross-platform streaming task. Runner that lets developers automate many development tasks at a high level, gulp reads: files as streams and pipes the streams to different tasks.

These tasks are code based and use. Plugins the tasks modify the files building source files into production files to get an idea of what gulp can do check the list of gulp recipes on github gulp is an ode package and the plugins that it uses are also node packages. So you need to install node.Js first, this also installs the node package manager, and you should also enable gulp from the command-line and to do this install the gulp CLI package.

You can then go into your project or create a new one and have NPM install the gulp plugins. You need into your project right, your gulp file, j/s, and you can begin using gulp from the command-line here’s an example of creating a project and installing gulp plugins. The first line creates a new NPM project. This generates a package JSON file that lists your project’s plugins. The following commands install various example plugins, including gulp itself: the save dev flag updates the package JSON file with the corresponding plug-in the plugins are installed in a node modules directory with this method, you can easily reinstall all plugins and their dependencies later by using the package.

Json file, rather than reinstalling each plug-in individually, now note that plugins, a B and C a imaginary we’re just using those names to show how plugins work once the plugins are installed. They need to be loaded into the gulp file using require now you’re ready to define tasks. This task is named task ABC. It takes file from the some sources, files path and pipes and through functions from each of the plugins which modify the files.

The processed files are passed to gulp tests, which writes the files to some destination path. The task we just defined can be run from the command line by typing gulp space and the task name in this case. It’s gulp space task, ABC here’s a set of links for learning more about gulp ins. We’ve also built a code lab that takes you through common tasks, follow the link to get to the lab. Now don’t worry if you’ve missed any details, just look at the gulp documentation and our to find out more.

We supply gulp files with our code labs, so you’ll be all set for now. Let’s get back to writing PWA s and i’ll see you soon.


 

Categories
Online Marketing

Practical lessons from a year of building web components – Google I/O 2016

Thank you for coming to this 9:00 a.M. Session for the jet lag and insomniacs, and those of you often left from the party last night. So let’s talk about web components. We had a whole bunch of titles. For this talk, it doesn’t actually match. What’s in a program, my favorite was the me Annika school for kids, who went to web component good and do other things good too.

It was rejected and addy osmani suggested Miao Miao pro-tips Miao Miao, which is pretty much what’s going to happen here. So Miao Miao hi everyone, I’m Monica, I’m not Waldorf on Twitter and github in Internet places and officially at Google, I’m an Imagineer and that’s because I get very excited about emoji and I sort of like shout about it into the void that is Twitter, but what They actually pay me, for it is OH emoji, so fun thing about the slide.

I had to use Android emoji and not the Apple ones. It was mandated by legal and what I do is web components and for the four people in the audience. I think, as we did a raise of hands, we don’t know what that is. What components are a standard we’ve been working on so that you can write reusable widgets for the web, so you can make your own fancy parts and give it to people and everybody can use it.

I work on polymer, which is a library that helps you write. These web components, and in particular I write web components with polymer. We have elements like these ones that are like material design. For me elements we also have lemons. I don’t look like anything. We have a declarative, Ajax element that you can put in your page and get super easy, xhr requests and that’s kind of fun. So you might not think of yourself as an element developer.

You might think like you’re, a web developer, you make apps, but if you want to start playing with web components, I think thinking like an element. Developer is really important, so you might only make to make elements for your for your own application, but you’re kind of making them for future. You because future you is going to have to use these elements and if they’re crappy, future use going to have a hard time.

So I’m going to tell you basically all the mistakes I’ve made in the last year of making web components so that maybe you won’t have to do the same ones. So there’s like four things that I thought are kind of interesting about making web components you got to make an API that doesn’t enrage your users, and this is actually kind of interesting. You’ve got to maintain this element once you start giving it out people you got to make sure that’s fast and isn’t like slow like molasses and destroys everybody’s application, and you want to make sure that it’s accessible.

So these are the four things we’re going to talk about. So let me tell you a story in the 90s, we had HTML one and it was lovely and was basically like reading the paper on the internet. Things that you might see on a page were things like links and headers and images. If you were lucky and that’s all it happened, you opened a web page and you read it and I was pretty much it and in 1995 things got exciting.

We got HTML 2 and they Channel. We got three awesome elements, we got input, we got form and we got but and we got select and I think we found button well, input type equals buttons there. So now this meant that like websites could offer you interaction. You can type something in a text box and the website would react to you in some way and the reason why I think this is important is that these are basically like ogee web components.

There are little reusable widgets that the platform gives you and you can put in your application. That’s exactly what a web component is, and since 95, in the 21 years that we’ve had this we’ve come up with a couple of more web web components or like whatever you want to call them. We have article and audio, which are kind of awesome. Canvas is like an enormous framework in and of itself dialog in details, and things like that.

I’r really implemented in all the browsers and a lot of the input types aren’t implemented in all the browsers. So the reason why I’m telling you is that, even though we kind of had web components for something like 21 years, we’re not very good at making web components and I’m going to spend the next like 10 minutes telling you how input is really terrible. Because that’s one of my favorite things to do in life on the other side of the world, we have UNIX and here’s where, like begins to be a little bit of a flame war.

So we’ve had your NIC since the 1970s, and one of the things that UNIX is really good at is making reusable little programs that everybody knows how to use. These are the ones that I just like used, probably in the last week. These are the ones you’ve. Probably used ever in your life, maybe not till knit and lynx unless you’re playing a joke on somebody, but UNIX is really good at this. You use LS every day like if you use a terminal, you use LS every day and the reason why UNIX is so good at it is because UNIX has a philosophy about how to write these super tiny components, commands programs whatever you want to call them, and That’s what we’re going to talk about for a little bit, because, if you’re going to go ahead and right web components, I want you to think of what grep does and not what input does grep is a great example of our useable component.

Input is absolutely terrible. First thing so: yeah UNIX has like 17 bullets in their philosophy, and some of them are super meta, like value developers times over computers, which is great, and I don’t know what that means. But one of the ones – that’s the most popular one – is that your component should do one thing, and this is a hundred percent true of web components. If you build a component, it should be really tiny.

It should do the thing that it says it does and it shouldn’t do anything else. If you look at the cat command cat takes a file from your computer and spits it out to the terminal, it doesn’t try to print it. That’s what LPR is there for it doesn’t try to find a string in it. That’s what grep is there for it doesn’t try to sort it alphabetically, that’s what sort is there for cats takes a file and prints it to the terminal.

Input, on the other hand, has something like 21 types. I think today. Last time I checked, even when it started in 1995, it had eight eight types off the bat, that’s how he started the races and that’s really terrible, because they don’t really have anything in common. These input types others in they allow you to select a value. You have input type equals text ray just like mash keyboards and they appear on-screen.

You have the slider which, like you, drag a ball on a vertical slider and that magically picks a number. You have a color picker that gives you an RGB color. You have the map type, which is basically like an image map and where you click on that image is the thing that gets saved as a value. So again, all of these things they have in common the fact that they have a value. They shouldn’t be the same element.

They don’t even look the same, and then you start like painting yourself into a corner once this is your API that you started with. So here I’m creating input, it’s a by default of type equals text, so it’s an HTML input and because you can type in it – and it has a carrot, you can get where that carrot is and selection start is the property that you do this and then I’r going to change the value, the type to input type equals number I can still type.

I still have a carrot, but now, if I actually try to access that property, I get an exception. It’s not that it’s like a bad value. I literally get an exception. The browser panics this makes no sense from an API perspective. Both of these are an HTML input element. Both of these have the same prototype. They have the same property, and yet, if you access it on some types like most of the types to be honest, selection start just barfs on your console and the reason why this is happening is because input type equals text and imple type equals number should never Have been the same element, they were the same 11 because in 1995 we didn’t have JavaScript, we didn’t have polyfills, we didn’t know how to fall back to a default behavior.

So we’re just like we’re going to put everything in one element and it’s going to have a default value and it’s going to be great, but 21 years later, we’re still paying for these mistakes that we had to do in 1995. Because of what the platform was like, so this is why don’t look at input for API advice, because input makes mistakes all the time another one of the UNIX philosophies is composition.

Programs play very nicely with pro with other programs in UNIX. This happens with pipes, the output of any program can become the input of any program and everything works, magically and beautifully, and the way this works on the web is by sort of nesting elements together. So select is composable like select an option or composable. That’s how you can put elements in a checkbox and you can put in text and you can put in a button and you can put in an input and an image and can what do you think is going to happen here? Does anybody know what actually happens? Yeah, this happens, it’s amazing, so the input gets rendered outside of the select box, we’re not even trying there’s no image and with a button we’re just taking its text value.

This is not a composable element. This looks like it could be composable, and so I’ve had a chance to get it really right and they made a mess of it and the historical reasons here are again because in like 1995, when it came out, are you four on Windows didn’t know how to Draw select, select, combo boxes, otherwise, but 21 years later again we can do better and with polymer we did do better. We made our own select box, we called it paper because its material design and in the drop-down you can put on items.

So you can put in text, you can put in an input and you can put in a button and it looks like exactly what you would expect there is the text. There is the button there’s the lemon. I don’t know why you would put an input in a pop-up menu, but I mean you could nothing to nope nobody’s stopping you if you want to do that and that’s a composable element. So when you’re making your elements think about this, are you expecting to have children composed in there? And if you you, try not to make assumptions about them, try to expect sort of any types in there, because people are going to put inputs in your drop-down menus and you’re going to have to deal with it.

And this one leads me to extensibility, which is the code that you’re writing today should work in ten years from now, unless was written 40 years ago on a platform that is nothing like the Mac that I’m running it now and Allah still works. It probably had to be recompiled, but I don’t think anybody changed the source code dramatically. 20 years ago. We wrote forum and forum is the opposite of an extensible and plan for the future element, because forum only works with the input element and when I say it only works with the input I mean it is literally baked in the parser when the parser gets to The for form element: it only looks for input for elements that have the tag, input and skips everything else, and this blows for us as web developers, because what, if I make a super awesome input now that is like way prettier than the crazy native endpoint.

I can’t put it in a form because the form is going to ignore it altogether, so I have to like start hacking around it and make hidden input so that the form recognizes it. So, in contrast in polymer, we try to like not make assumptions about what sort of things again our element expects. We have the swipeable container, where anything that you put in it gets this like magical, Android, swipe, left or swipe right action, and this means that I can put in divs and I can put in inputs and I can put in polymer elements, and I can even Put in like web components that people wrote without polymer that a lemon doesn’t care, it accepts everything and that’s a really good element, because if it works today, it’s going to work in the same in the same way in like 10 years, when the Dom might change A little bit but the platform stays, but the elements stay similar.

So the point here is like to not make any assumptions when you’re making your relevance – and it’s very so. The way I interpret is that when you create your element, assume that it starts like sort of naked, without anything, it doesn’t have any property set on it. It doesn’t have any children, it’s just like born into the world, and then it starts reacting to things when properties change react to that.

Don’t assume that the properties are already set. If people add content to it, react to that assume that when your element starts up, it has nothing and you have to deal with everything that follows, and that means that pretty much in any way that people are going to use your element you’re going to be Fine, because you pretty much covered all your bases by just reacting to changes – and this also sort of leads me to this conversation about state, because, unlike UNIX and this is where UNIX wins, UNIX programs don’t really have any state, they start up.

You give them some input, they do something with the input and then they die and everybody’s happy, but on the web the input sort of lives there on the page, for as long as that page is open and you’re probably going to type in it, and it Has to somehow remember what you typed in it and that’s it isn’t, is internal state which isn’t necessarily bad, but what what you should do about it is that make sure that if your element changes the state internally, you communicate this to anybody.

Who cares you fire? An event every time this internal state changes and similarly you as a user, should be able to always change the internal state of this element in the same way that the element can do it and guess what guess? What input fails that so input type equals number? It’s kind of a good one, a good element, because in theory it lets you like validate when you type in it. So it lets you type in digits and a period for decimals and like the negative sign in a for exponents.

So it doesn’t. Let me type in Monaca emoji, which is great. I guess so, if I type in one two, three four, the internal value of the input is one two three four. If I type in nothing, the value is nothing, and if I type in junk the value is nothing wait what yeah. So it turns out, because this value is actually invalid. The input is going to secretly reset the value to the empty string, but don’t actually tell anyone.

This is going to do it internally and not fire an event about it and if you start with nothing and you type in junk, you as a programmer cannot detect this change, like nobody has told you that that anything has happened, but you with the eyeballs are Looking at that input and be like look there’s junk in it, you got to do something about it, but as a program where you can because input is like hiding, it stayed away from you.

So don’t do that don’t be input which is pretty much. The like point of the stock never be input, because nobody really likes surprises, like surprises in an API, are the worst they’re like finding that your cake is made out of kayo and not cake, and this is San Francisco. Everything is made out of kale. This is the new tragedy in my life, so remember how I said that the reason why we painted ourselves into a corner with input is because in 1995 we didn’t have polyfills.

We had to somehow have a default type on all these stupid inputs, and the only way we could do it is just jamming them into one object, but now we have polyfills, so we need to deal with polyfills, and the really important thing about polyfills is that If your element expects a polyfill, please for the love of God, do not include that polyfill with the element and here’s the story. So we have an element that uses the web animation polyfill with the web animation spec, which works on some browsers and not all of them.

So there’s polyfills for this and we were like we’re going to be so nice to our users and include the polyfill with this element and everything’s going to be grained you’re going to have a great time and then Chrome settings came around and they’re like. We would really like to use this element on Chrome settings, a page that runs on Chrome and no other browsers. Chrome has the web animation standard implemented, but because we jammed the polyfill in that element, chrome has to actually download the polyfill for something they already know.

How to do on every single page? That’s really great, so they don’t really want to use that element and they hate us for it um. So the moment you include the polyphen in your element, you take that choice away from the application developer. Maybe they want to use a different polyfill. Maybe they don’t even care about supporting Internet Explorer. Who cares? Don’t Jam the polyfill in there you’re not actually helping anyone document it, but it’s required, but let the user take care of that.

So what I hope you got from this last ten minutes is that input is terrible and you should not look at it for any API advice, and that group is kind of really good, because UNIX is actually really good at making this. So if you want to read the 17 full at least 17 bullets of UNIX philosophy, I strongly recommended they’re kind of really interesting and they’re, probably going to make you help better make you make better APs help you make better ApS, got it in the end.

Awesome. So we have an element: we’ve given it to people, it has a beautiful API, nobody hates us for it, and now we actually have to maintain it somehow. So the thing about maintaining your elements and why it’s important is that if you go on NPM and you download a package that hasn’t been updated in two years, this is going to give you like the creepy GPS like if nobody cares about this package – and nobody Is fixing it and I’m probably going to be running with a lot of bugs? This is the same with web components.

If you want people to use your elements, you got to keep your elements up-to-date, because that makes them cool and usable and one way we and polymer do. This is by making sure that we follow semver. Oh whoa, whoa, whoa whoa. That was exciting. We got there Samburu, I get excited with silver all the time, so silver stands for semantic versioning and it basically means that every of the every one of these numbers in these versions actually mean something they’re, not just random.

So the last number on the right here I have a tweet from Dave Mithen who makes fun of semver because no matter how what do you think you’re shipping you’re actually going to break your users. So you know keep that in mind. The last number means that this patch has a patch fix. It has bug, fixes it still backwards-compatible everything is a-ok. The middle one means that you’re shipping some features, but they still backwards compatible.

So if you’re using this version yesterday and then you update and you get the new version, your your app should still be fine you’re going to get new features, you don’t have to use them, but like everything that used to work should still continue to work. It probably won’t because you’ll write some bugs, but that’s a different problem and the first one is a major version. This means you’re actually introducing breaking changes.

So if somebody wants to pick up this new version, they actually have to do a little bit of work for everything to work in their application and there’s two things. I want to tell you about major version. Bums, one of them numbers don’t have meanings. Please do not think that increasing your major version is actually like a marketing ploy, or anything like that. Don’t get obsessed about this all you’re doing is communicating that this version has breaking changes, you’re going to have a bit of a hard time and the second one is just because you can communicate this breaking changes doesn’t mean you should have like really aggressive breaking changes.

Breaking changes are really terrible for your users. They have to do work. They have to like read the new API and figure out how you broke them and figure out how to like make their stuff work again. So I’m Palomar we try to be very deliberate. We haven’t shipped a major change yet because we want to make sure that, like the moment, we ship it. It’s like a write change and it’s going to not be actually very hard for users to update to it so be very deliberate about what you’re shipping.

In a major change, don’t just abuse it because you can’t communicate it. That’s what Ruby does um so now that we have cember, we can tell the users that you know this user. This version is going to break you or not, but the only way we’re going to figure out if we’re actually going to break users is by testing, and this should not be new to anyone. You’re right software, you tested duh, but testing.

Look. What is is kind of interesting, because what components are new, and I found that I had to test things that I did not expect that I had to test the first one is obviously the public API. If you pinky swear that a function exists, you should make sure the function exists and does what it says it should do. Duh umm and I’m trying to click now we’re having great times with this remote. I really like it.

So. The other thing is that you might want to start introducing this idea of like a private API. Javascript doesn’t care, so don’t worry about that one. But if you introduce a convent, couldn’t convention like underscore news private, you get to be responsible for less of that API. Like a lot of your configuration methods or any of like your internal functions, you don’t have to make them public because, if you’re making it public you’re responsible for them, but if you make them private, then anybody who’s using them.

You can be like listen you’re on your own. I told you not to use it. If you really want to use it can’t promise it’s going to be there same polymer, you use, underscores any functions or properties that start with an underscore or two underscores. If it’s a behavior, I private use them at your own cost. I might just delete them for shits and giggles. You should test your accessibility, so element should be accessible and I’m going to like rail on this one in about 20 minutes, but you should also test this.

You should unit test it because you don’t want to break it. We use the accessibility, developer tools. It’s on github under Google Chrome, that’s what this cryptic diagram means and they’re, basically an API that you can run as a unit test and every time you said something like roll on an element. It makes sure’s it like, runs 20 tests and make sure all the Aria labels are set up correctly and tab indexes are set up correctly and your contrast isn’t terrible.

So that’s really good. You can automate them. You should also test the look and feel – and this is where things get interested, because your vending elements that look like something the thing that they look like kind of becomes part of your cart. It becomes part of your contract with the API it with the element user. So I discovered this a super hard way where we had an element. It was a button and I thought, being extremely awesome and I changed the box sizing from content box to border box, and I was like everybody’s going to love this change and I broke like 15 people because it turns out if you change it to border box And somebody was sending a size on that element.

That side is now completely messed up and they’re going to have like adjust everything and add 20 pixels to everything, and I ship that as a bug fix – and it was actually breaking change. Go me and that’s because I don’t have any tests for the UI so make sure you actually test the UI, because you’re promising your user. That a thing looks like the thing. It should look like. Here’s a bunch of UI frameworks and libraries that let you make UI tests, I don’t care which one you use just use, one.

You don’t even have to you everybody’s, taking pictures of these nice. You don’t even have to use this one. You can literally do like get bounding client direct on your elements and make sure that the right size and like the font size, is the same. Do whatever you want as long as you test your and if I don’t remember, I told you, elements are composable and they like should accept children and they should like working other things.

So if your element should be composable and that’s the thing that you care about, make sure that you test it. If you’re writing something, that’s like a form put all sorts of things in that form and make sure it doesn’t crash. If you think is like an input, put it inside a form and see that works, fine test, your things, cool, we’re testing, we have silver, we’re telling the users we’re updating our elements.

Users, trust us they’re delighted with our elements are going to use them forever. We need to actually write documentation about it, um, because if you don’t WTF m, you can tell people to RTS em later so cover your bases. Now, if your element has any edge cases document them, I don’t care that your element is being weird if it’s in like RTL mode as long as you tell me about it, because otherwise, I’m going to write this like super-lonely stock over Stack Overflow post, that nobody’s Going to respond to I’m just going to be sitting there and be like it’s been 10 hours.

Why doesn’t this element work just document your is going to be great, we’re maintaining irrelevant. Everything is great. Let’s talk about performance, so performance has been a big topic at i/o performance. We want fast steps fast, apps, lead to user engagement, lead to more views, leads to me getting promoted and getting paid more. Everybody wants that. But when we talk about elements, performance is actually really important, because if you it doesn’t matter how fast I make my application, I can use rail and purple at everything if I’m building it out of really terrible and slow elements, there’s nothing that I can do, which Means that you, as an element developer, have to make to be very careful about what you put in an element because it’s going to screw somebody in a major way later.

So, if you think about your element, maybe it’s like 1 milliseconds fast. Let’s see it’s a checkbox and it takes 1 millisecond to paint because that’s what we really do, one thing: do it fast duh? So if you think about painting, if it takes one millisecond to paint your element, you might like high-five yourself and be like one. Millisecond is the fastest paint I’ve ever heard of in my life, I’m doing great, but if I have like a thousand pizza toppings on that page and they’re, all checkboxes you’ve now added a whole second to that page and a whole second to a web page is Actually enormous we’ve been trying to like save milliseconds out of pages, and you just made it so much slower, so focus on first paint and make sure that the first time your element shows up on the page is as fast as I can possibly be.

Steve are well on the polymer team. Has an amazing rule about this? The best to advise about how to make your element be fast is do less and be lazy. This applies to like any, that you want to be fast, do less be lazy? By do less, we literally mean that don’t do anything, you don’t need before. First paint, don’t like said magical handlers, don’t set magical Styles that are needed maybe later so we had this code a lot in a lot of our polymer elements were like when the element was being attached.

So when was actually inserted in the Dom, we were updating the pointer events to make sure you couldn’t click on disabled things, and we are, you know, adding click handlers, and this looks like very reasonable code right. It’s very short. It probably doesn’t take very long to run, but again, if you do it a thousand times, that’s a thousand event listeners you’re setting up before you’re painting the page, that’s enormous.

So what we do now is we wrap it in this like after next render? We do everything that’s needed for paint, this isn’t needed for first paint and everything that’s needed, like literally the tick right effort painted we do it after the next render – and this is really great because now my page paints really fast. My elements paint really fast and they’re interactable the milli site like instantly right after so everything is perfect and everything is fast.

Be lazy. Take sad one step, one step further, don’t do anything unless somebody acts chillie asks you for it. Don’t just like volunteer to do work, that’s bonkers! You would never do that in real life. I have nothing to do right now. Let me do some work. It’s great you’ll read Netflix. You know you do so in polymer. In polymer, we have a lot of polymer elements: they implement the material design, spec and the material design.

Spec. Has this thing where, like every time you click on something has like a really satisfactory poll that is a little jiggle and everything’s, really nice and fun. So the way we were coding it up is that literally every element had a ripple element inside of it check boxes buttons inputs. Everything had a ripple which sounds really great in theory, right like it should ripple, we should put a ripple element in there.

It turns out that’s crazy. Let’s go back to my pizza, topping analogy. I have a thousand pizza toppings, I’m probably going to click on like four of them, because I’ve tried to put all the pizza toppings on a pizza before and it is terrible. Don’t do it pineapple and mushrooms don’t go together. They go together with onions, though so, if you’re only going to like click on three things, you only need three ripples you’re now creating like 997 ripples.

You don’t actually need so we update our code and we do something else that where no element has a ripple when it starts up, but if you click on it, the first thing is going to do on that clicking will be like do. I have a ripple. No well, here’s a ripple make it jiggle. So now, in this enormous application, we’re only creating the ripples, we actually need or being incredibly lazy – and this makes everything super fast because I’m not just creating Dom nodes that are sitting on the page.

Doing absolutely nothing not even giving them access to Netflix do less be lazy, do less be lazy. This is your manager tattoo it somewhere and we didn’t just like come up with us one day. Well, Steve did he woke up he’s listening to like this weird podcast? I think that tells him that, but like we actually started writing tests for performance to figure out how this was going and there’s many different ways in which you can test performance and they’re all terrifying, because I’m actually terrified of everybody else’s frameworks.

So I have like two simple ones that I use and they work really well. The first one is console dot time so cause the whole time, takes a label and basically like between the first time. You call time and time end on that label. It calculates how much time does this cost and you can also nest them, so you can be like well. Creation took this long, but setting attributes took this long and the reason what causes all time is.

Nice is because you get dev tour. You get a timeline in the of tools and you can see like what’s actually happening here. This is incredibly fast because I was just doing random numbers in a loop you’re, never going to get code that runs in ten milliseconds like that, but yeah. So that’s constant load time. It gives you a time line if you’re even lazier than that, and you don’t want to don’t care about that aki-nee’s performance now, which literally just tells you milliseconds now milliseconds now, so you can do it before and you can do it after a task and see How long that took – and I think that you do inside, if you want to test your first paint – is that you want to create your element.

You want to attach it to the body and you want to do a giant hack. So let’s talk about this giant hack in the same way that we’re optimizing our elements, the browser has been optimizing itself because it assumes there were terrible developers which we are so just because you’re appending something to the body doesn’t actually mean chrome is going to paint It Chrome’s going to like wait to batch them.

If that’s the thing isn’t visible, chrome doesn’t even care if it doesn’t affect the layout, it doesn’t care and you can’t actually tell chrome to paint things so the only way we can we can time. This correctly is by sort of forcing chrome to relay out the entire page, which also forces it to paint offset with. Is one of these attributes that when you call it on a on an element, is a style attribute? It like has to recalculate the layout because it’s in reference to its parents, so that’s the one that I use pretty much anything with the word offset in it is going to cause a relay out.

You can Google for all the other ones. If you don’t like it, but the idea here is that, if you want to make sure your element has painted somehow trigger our relay out on the page and the follow up to that is don’t do this once do it like a thousand times, do it as Many times as you have time for, because if you only do it once anything could have happened in there, somebody could have sent you an animated gif to your slack blog, which slows down your computer.

The garbage collector could have run the garbage. Collector could have not run if you do it a thousand times you’ll get more accurate numbers. You actually get a good answer about how slow or how fast your element is at painting, and the reason why this is awesome is that now you can automate it. You can put this in a unit test. You can put it on a test that you run on every merge and then on every more.

You can be like well, this elementals, like 10 milliseconds fast yesterday and itself 15, and then you can ask yourself whether the feature you’re, adding or the bug fix, you’re adding, is actually worth this performance, constant you’re taking. So let’s talk about accessibility, there’s! This amazing quote about so anywho, but the conclusion here, just to like bring it home, is test your elements for performance make sure they are fast.

If your elements are have their ups really slow. I hate you and you’re going to slow down the web. Please don’t slow out. The web is really hard for all of us accessibility. So there’s this amazing quote by Cordelia Dylan, which is that accessibility is like a blueberry muffin. So the way you make a blueberry muffin isn’t by taking a plain muffin and a fistful of blueberries and jamming them in there and be like I made you a blueberry muffin, you made me garbage the way you make a blueberry muffin is by taking the eggs And the flour in the sugar and the butter and beating them together and adding the muffin the blueberries to this raw dough and putting them in the oven and waiting for 35 minutes, and then you get delicious blueberry.

Muffins accessibility is hard. You have to do it. The entire time from the birth of your element to the end of your element, in the same way that you make muffins, you can’t just make an element and the last day before you ship and be like, I didn’t, make it accessible. Let me jam some Eric: are your labels in there you’re going to make a terrible job about it, and the reason why this is important is that if you don’t have accessible elements, you’re not going to be able to make accessible apps? And if you don’t want to make accessible, apps you’re a terrible person, you should have meat making apps for anybody.

You should be doing something else. Thanks y’all Rob Dodson gave a really good talk yesterday at 9 a.M. On this stage about how to make your elements accessible, and I strongly recommend going and reading it at home. It’s an amazing talk and he tells you like proper, concrete things on how to make it better. I’r going to tell you two things that I got wrong because they were like kind of like really easy things for me to get right, and I didn’t focus dates.

Are only a big one, focus dates tell you, you know where the focus is on the page. It’s a really ugly outline that in the 2000s it was really cool to set outline none on focus because nobody really liked it and that’s really terrible, because if you’re not using the mouse and you’re just using the keyboard, you’re not going to know where you’re on The page, but even if you are a mouse user, if it’s just like you, remember the last time you had to buy something on the internet and at the end you get to the 15 field.

Visa credit form where you have to like fill in on your information. Your shipping address your mailing address, your name and your credit card number and you’re going to be tabbing to them. I promise you, you don’t actually click on every single field. I know you and if nobody is telling you where the focus is on that page you’re going to start typing your credit card number in your like address field, you’re going to get frustrated, it’s already frustrating experience buying things on the Internet.

Don’t make it worse, don’t make bad you eyes for people, I don’t care whether you use this outline or a different outline or you’re communicating focus in a different way. As long as you are communicating focus in someone, you can make like a nice ripple around it. Just make sure that if somebody is using the keyboard, they know where the focus is on that page and the platform helps you with this tap index equals zero.

Whatever you put it on, that thing becomes focusable and by default at least it gets the really ugly outline it’s ugly, but you’re doing better than not doing anything at all. And the other thing is that you have documented active element which tells you where the focus is on that page, which means now you can unit test this and automate. This make a test where you have 17 of your elements and simulate tabbing through it, and check that the thing is that the thing that is focused is the thing that you expect to be focused, and it’s styled, like you, expect it to be focused unit tests Are the best they make sure that your element doesn’t randomly break? The platform also gives you Aria.

Aria is what a voiceover application is used to read: HTML, there’s a whole bunch of like documentation. Aria, I’m not going to talk about Aria. I just want to mention that some elements have like built in Aria like nav and a have like extra Aria built in themselves, and that are you labeled by is this really awesome attribute? That is basically like Aria label on steroids, because if an element already has a built in Aria label like input the native input, does it uses the Aria label to read whatever you typed in it? You can’t put an extra Aria label on it.

You can only have one so if you want to make the native input more accessible, like say, with a label that describes what it’s for. Are you labeled wise, therefore, that it always adds more information to any element, so this is really important. Please make your elements accessible, because if we’re going to make accessible elements, we’re going to get accessible, apps and the same thing happens for performance.

If you have fast elements, you’re going to get a fast app and if you have maintainable elements, you’re going to get a maintainable app and that’s really our goal as element developers, we want to make the web better. We want to make amazing apps for other people, so that’s it. I hope you got something out of the stock. Please go home and make elements and if you do tweet them at me, so I can what remained thanks.


 

Categories
Online Marketing

Installing Google Analytics – Progressive Web App Training

We want to know what users are doing on our site, which pages are popular, whether users follow the paths we expect and if anything goes wrong. Analytics is all about collecting measurements of user activity on the site. Google Analytics is a service that collects processes and reports.

Data about an applications, use patterns and performance, adding Google Analytics to a web application enables the collection of data like visitor traffic, user agent, the user’s location, etc. This data is sent to Google Analytics servers where it is processed. The reports are available in the Google Analytics web interface and throw reporting API. Google Analytics is free and highly customizable.

Integrating Google Analytics is simple. First, you must create a Google Analytics account. Each account has properties, these aren’t JavaScript properties, but refer to individual applications or websites. Google Analytics then generates a tracking snippet for each property. This is a piece of JavaScript that you pasted into your page. It sends data to Google Analytics back-end. You can also use the analytics library to create custom analytics, such as tracking specific user actions or tracking push notifications.

I want to say a bit more about properties. An account has properties that represent individual collections of data. These properties have property, IDs, also called tracking IDs. That identify them to Google Analytics if an account represents a company. One property in that account might represent the company’s website, while another property might represent the company’s mobile app. If you only have one app, the simplest scenario is to create a single Google Analytics account and add a single property.

To that account. The analytics server will then generate a custom bit of JavaScript matching your account and property. This is the tracking snippets. This is the key part of the tracking snippet. The entire snippet needs to be pasted into every page. You want to track at a high level when this script runs. It creates an a syncs Tagg that downloads analytics is the analytics library defines the GA function called the command.

Q creates a tracker that gathers user data and sends this data as a pageview hit via HTTP request to Google Analytics. This data is analyzed and stored in your analytics account, in addition to the data gathered by tracker creation, the page view event allows Google Analytics to infer what pages the user is visiting, how long they are visiting them and in what order for simpler applications. This is the only coding required note that you can replace analytics j/s with analytics underscore debug KS for console debugging.

Using this version will log detailed messages to the console for each hit, sent it also logs warnings and errors for your tracking code. The data is sent to Google Analytics back-end where it is processed into reports. These reports are available through the Google Analytics dashboard. Here is the audience overview interface. Here you can see general information such as page view, records bounce rate, ratio of new and returning visitors and other statistics, it’s also possible to view analytics information in real time.

This interface allows you to see hits as they occur on your site. I encourage you to take some time and explore there’s an extensive set of features in the dashboard. You should explore the standard reports and look at creating your own. Knowing how to use analytics effectively is a skill in itself. Fortunately, the Google Analytics Academy offers a free set of online courses. I encourage you to install analytics on some of your sites.

If you haven’t already check out the free analytics Academy courses as well, then once you’re comfortable with analytics, come back and I’ll show you how to integrate analytics into a PWA. Thanks for reading and I’ll see you soon,


 

Categories
Online Marketing

Intro to AMP (Accelerated Mobile Pages)

The bad news, however, is that, even with these improvements, a lot of websites still won’t magically turn into speedy experiences. I mean think about it for a second, if you had a bus station and click on a link in your Twitter feed, you wait five seconds.

You wait. 10, you keep thinking. It must be amazing content. If it takes so long to prepare and write, then you get pulled back into reality. A full screen interstitial asking me to buy sunscreen, please, like me, dialog that’s, set to scratch from the content and make the page so small, you can’t even scroll and as if that was enough, a bunch of competing analytics scripts in the background at party hard.

Every second and kill your phone’s battery, or maybe the analytics scripts, just want to stop the phone from suffering and put it out of its misery quickly. I really don’t know in all seriousness, though: all of this wouldn’t be such a big deal for the publishers of those sites. If you were just willing to continue to suffer, but you don’t you’re furious about the current state so furious, then you either don’t bother and click off and studies to just a 40 % of users drop off after just three seconds or decide to install an ad Blocker clicking off is a lose-lose situation.

You are frustrated because you didn’t get to read the article. Your friends post it and publishers are frustrated because they didn’t get a chance to show you other great stuff and relevant ads to help pay to create that free content. An ad blockers might work for you as a reader, but hand the business model of many publishers that depend on ads to help pay for the content offered. But here’s the thing, publishers, obviously don’t – purposely – try to slow down pages.

They add all of these extras to try to increase the monetization of their site and attract more and more readers to help keep the site on business, and then they end up in a tough spot where they feel they need to decide between improving the user experience Or focusing on monetization and user acquisition, these overloaded user unfriendly web sites aren’t a new problem and some have tried to come up with solutions.

The FIR our walled gardens that lock you to a specific content distribution platform. Now you have to implement a custom solution for every single platform and your content cannot be discovered through search engines or link to from other websites by by open web, or you could create a native app and lose even more advantage. The web offers like effortless entry without install or easy distribution of content not terribly attractive either.

We felt this was a problem in need of a simple and elegant solution, a new way to implement an issue, a beautiful, streamlined, wicked, fast content web pages. Without all the extra clutter that is built on the openness of the web and doesn’t try to replace it, it allows everyone to participate and collaborate that publishes platforms and developers all stand behind and benefit from. That’s short.

What accelerated in the open the EM project dramatically improves the performance of mobile sites on the web, often to the point where their load appears to be instant. It’s an open source initiative that relies on existing web technologies and is built in collaboration with many different partners. Many technologies today come with super complicated, build processes, but not so with amp. In fact, an amp 8 is just a normal HTML website with a couple of restrictions and extras no build process, no extra step, because of that it doesn’t require a lot of additional work.

Unlike having to build custom, apps and products for a myriad of platforms and social outlets, in fact, if your website doesn’t use custom JavaScript and is mostly static, you probably don’t even have to create a second version of it for app. Every amp document includes the MJS JavaScript library that delivers optimum performance by adding and validating a few important rules in your markup when looking at an amp document.

The biggest difference you see is that some elements, like the image tag, are replaced with custom elements. That’s done to ensure staying in Fastlane in two critical situations. First, it allows MJS to control the entire load chain and prioritize certain elements and requests over others. In practice. This means that most third-party content and elements below default I’ll load it after the main content arise.

So your users can start reading as soon as possible. Second, ms custom properties strictly required a width, height or other aspect ratio defining attributes to be set. This way, mj’s knows exactly how your page will look like before any assets are loaded and can layout the page. In advance, this prevents the famous flash of unstyled content, the ugliness of a half lured website. That then starts to jump around by loading more stuff, as well as the need to re-render and do additional layout calculations, a browser task that can be very slow.

Every single imitational addition to amp documents is carefully designed to end up the speed of the page 211 and implement rail. A user experience focus performance model, but the chrome team came up with and because MJS comes with a built-in validator that locks to the console. It ensures developers Fastlane as nothing is more frustrating than a speed regression you discovering month later on an end page.

The content is always King and the user experience is Queen no compromises. But if you now say wait, a sec sounds great for users, but how does this help publishers, consider this users love fast content and amp allows platforms like Google, Twitter, Pinterest or LinkedIn to know for a fact that this content is fast, which they can then promise To users in return, if I know it only takes me five seconds to read that article, I do it much more often with many more articles, I’m happy.

The platforms are happy because I’m happy and the publishers is happy because they get to show me more content and just like that everybody wins get started. Writing your first and page today by checking out two tutorials in the description or head directly to am project org to learn more


 

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

Intro to Web Push & Notifications

This diagram gives an overview on the client side. Your webpage interacts with service workers which in turn receive push events via the user agent, also known as the browser and on the backend.

You send messages from your application server to the push service, which then delivers them to the correct client. Let’s look at the notification API first, this allows developers to display notifications to the user. Before we can create a notification. We need to get permission from the user. This code will prompt the user permissions to show notifications. You can try this out from the browser console as you’ll see later, permission is requested automatically when subscribing to a push service.

So there’s no need to call this function when using just push notifications. Let’s take a look at some examples for configuring and displaying a notification from a service worker. We first check that permission has been granted. Then we call show notification on the service worker registration object and pass in the notification title. You can also try this out from the browser console. Try it on the new tab page now for push notifications.

You call show notification in the service worker in response to a push event. When a message arrives, we can specify an optional options: object to configure the notification. This is passed in as the second argument. In the show notification function, the body property is the body text displayed below the title icon? Is the image displayed at the top of notification? Vibrate is the vibration pattern for phones, in this case 100 milliseconds on 15 milliseconds off 130 seconds on so on, data is the arbitrary data we can retrieve in the service worker when the user interacts with the modification.

In this example, primarykey allows us to identify which notification was clicked when handling the interaction in the serviceworker. Let’s try that out. We can add action buttons to the notification that we can then handle each in a different way. Here’s what that looks like notification, interaction events are handled in the service worker tapping clicking or closing the notification. There are two notification interactions you can listen for in the service worker notification.

Close the notification close event only triggers when the notification is dismissed via a direct action on the notification. If the user dismisses all notifications, the event will not trigger, and this is done to save resources, notification, click. If the user clicks the notification or an action button in the notification, the notification click event is triggered. If the user clicked on an action, the action is attached to the event object of the notification click handler.

We can check which action was triggered and handle it separately. Now, let’s see how the two handlers work in a service worker. First notification close: we access the notification, object from the event object and we can get the data from the notification object. We might use the primary key property from the data to identify which notification was clicked in a notification click handler. We can determine what action button.

The user pressed by inspecting the action property on the event object. Note that each browser displays notification actions differently and some don’t display them at all to compensate. We put a default experience in this example in an else block after checking which action was clicked so that something will happen on a simple click of the notification. Now, let’s see how you send push messages from your server and handle incoming messages on your client web app.

Each browser manages push notifications through its own system called a push service when a user grants permission for push on your site, you subscribe them to the brow. Push service: this creates a subscription object that includes a public key to enable messages to be encrypted and an endpoint URL for the browser’s push service, which is unique for each user from your server. Send your push messages to this URL encrypted with the public key.

The push service sends the message to the right client. Now the service worker will be woken up to handle incoming push messages when a push event is fired, and this allows your app to react to push messages. For example, by displaying a notification using service worker registration show notification, your app doesn’t need to listen to or Pole for messages and the browser doesn’t even need to be open.

All the work is done under the hood as efficiently as possible by the browser and the operating system, and this is great for saving battery and CPU usage. Let’s go through that step by step in the apps main JavaScript call push manager subscribe on the serviceworker registration object, get the subscription object and convert it to jason, get the endpoint URL and public key and save this to your server, for example, by using a fetch Request send the message payload from your server to the endpoint URL encrypted with the public key.

The push message raises a push event in a serviceworker which we can handle in a push event handler in push event handler. We get the data from the message and display a notification. The push API allows users to subscribe to messages sent from your app server that are sent via the push service used by the browser and subscribing, of course, is done in the JavaScript. For the page, responding to push events, for example by displaying a notification, is done in the serviceworker, just to repeat subscribing to the push service and getting the subscription object happen in the JavaScript for the page.

First, we check if the user is already subscribed and update the page UI accordingly, if they are not subscribed, prompt them to subscribe, if they are already subscribed, update the server with the latest since that may have changed by the push service, since it was last used When the user grants permission for push on your site, you subscribe them to the browsers push service, as I said before, this creates a special subscription object that contains the endpoint URL for the push service, which is different for each browser, along with a public key.

We send the subscription object for this user to the server and save it now before you subscribe a user check if you already have a subscription object, if you don’t have the object again update the UI to prompt the user to enable push notifications, and if you Do have the subscription object, update your server database with the latest subscription object. The ready property of the service worker defines whether a service worker is ready to control the page or not.

It returns a promise which resolves to a serviceworker registration object. When the service worker becomes active, the get subscription function returns the subscription object or undefined. If it doesn’t exist, we need to perform this check every time. The user accesses our app because it is possible for subscription objects to change during their lifetime. This is the process of subscribing to the push service register, the service worker from the main page main jeaious.

This request goes to the user agent. The user agent returns the service worker registration, object, use the service worker at registration, object to access the push manager API and from that requests are subscribed to the push service. This request is passed on to the push service. The push service returns. The subscription object, which includes the endpoint URL and the public key, save the subscription object data to your server and send push messages from your server to the endpoint URL encrypted with the public key.

Like I said now before sending notifications, we must subscribe to a push service. We call push manager subscribe on the service worker registration object to subscribe and the resulting push subscription object includes all the information. The application needs to send a push me such an endpoint and encryption key needed for sending data each subscription is unique to a service worker. The end point for the subscription is a unique capability.

Url knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret or other applications might be able to send push messages to your application. Here’s an example of the subscription object. This is the object returned from the push service. When we call reg push manage, add subscribe. The subscription object has two parts.

The first part is an endpoint URL. The address on the push service to send messages to this includes an ID that enables the push service to send a message to the correct client and service worker. The second part of the subscription object is the keys property. The p25 6d H key is an elliptic curve, diffie-hellman ECD H public key for message. Encryption. The earth key is an authentication secret that your application server uses in authentication of its messages.

These keys are used by your application, server to encrypt and authenticate messages for the push subscription and, let’s see how the process of sending a message is done. The server generates a message encrypted with the public key and then sends it to the endpoint URL in the subscription object. The URL contains the address of the push service along with subscription ID, which allows the push service to identify the client to receive the message.

The message is received in the push service which routed to the right, client and the process of sending a push message from the server works. Like this. A back-end service on your server sends a push message to the push service using the endpoint URL from the subscription object. The message must be encrypted with the public key from the subscription object. The push service uses subscription IDs encoded in the endpoint URL, to send the message to the right user agent.

The push event is picked up by the service worker. The service worker gets the data from the message and displays a notification in this example. We’re using Google’s web push library for nodejs to send a push message from a node.Js server. The TTL value in the options specifies the time in seconds that the push service should keep trying to deliver the message now. This is important to set correctly some messages.

Have a short life some may be valid for several hours or more. We then pass in the subscription object. Payload and options object to send notification. You need a way to ensure secure communication between the user and your server and between your server and the push service and between the push service and the user. In other words, the user needs to be sure that messages are from the domain. They claim to be from and have not been tampered with by the push service you need to make sure the user is who they claim to be valid, was created to solve this problem.

This vapid identification information can be used by the push service to attribute requests that are made by the same application server to a single entity. This can be used to reduce the secrecy for push subscription URLs by being able to restrict subscriptions to a specific application server. An application server is further able to include additional information. The operator of a push service can use to contact the operator of the application server in order to use vapid, we need to generate a public/private key pair and subscribe to the push service using the public key.

The public key must be first converted from URL base64 to a you in 8 array. This is then passed into the application. Server key parameter in the subscribed method. The web push library, provides a method generate vapid keys, which generates the keys. This should be used once in the command line when push generate vapid, keys, Jason and the keys stored somewhere safe. We can use the web push library to send a message with the required vapid details.

We add a vapid details, object in the options parameter. That includes the parameter required for the request signing now. Let’s look at messages from the receiving end in the web. App on the client handling push, events happens in the surface worker, the service worker will be woken up to handle incoming push messages and a push event is fired. This allows your app to react to push messages, for example, by displaying a notification using service worker registration, show notification to display a push notification.

You listen for the push event in the service worker. You get the push message. Data from the push event object in this example, we simply convert the message: data to text The Wrap, show notification in a wait until to extend the lifetime of the push event. Until the show notification promise resolves, the push event will not be reported as successfully completed until the notification has displayed.

You can practice working with the notification and the push API by following the lab that accompanies this article, one small gotcha, don’t use private or incognito mode for this lab for security reasons, push notifications are not supported in private or incognito mode. You


 

Categories
Online Marketing

HTTPS and Web Security – The State of the Web

My guest today is Emily Schecter who’s here to tell us about HTTP, you probably know of it as the thing you need to enable to make your site secure, but Emily’s here as product manager on Chrome security team, to explain how it’s so much more than that. Let’s get started so Emily. Thank you for being here. Thanks for having me, I’m excited to be here.

Can you start by telling us about what is HTTPS and why is it so important yeah, so HTTPS is actually just HTTP but over a secure connection and what HTTPS actually gives us is identity, encryption and integrity. So what that means is, if you type HTTP google.Com into a web browser, you can be sure that you’re talking to the real google.Com, not some fake google.Com and also means that no attacker on the network can actually see or modify any of the traffic.

And this is actually really important, because the collection of sites that you’re browsing actually says a lot about your intentions, your behavior and your identity and the web isn’t really continuing to get even more powerful, as chrome tends to add new features to the web platform. For example, the web now has the geolocation API, which means that sites can see where I live, where I work, maybe where my doctor is, or my kids go to school, and we really only want that information to be private between myself and the site that I Trust so HTTP gives us these guarantees, and this is why we think it’s really important for the whole web to be HTTPS by default, so it’s been around for a while and it has kind of accumulated some misunderstandings around it.

Can you kind of help dispel some of the myths around it sure yeah, so HTTPS has actually been around for quite a long time, but for many years it actually was very expensive and very slow and really hands-on and confusing to set up HTTPS. But the reality is that people all over the web have worked hard to make that change and it’s become a lot cheaper and a lot easier to set up. Https people still now think you know some of these myths about how it used to be are still true, but the reality is that that has changed.

So, for example, you should be really expense to set up HTTPS because you had to buy a certificate from what’s called a certificate authority, but now their certificate authorities out there that will give you a free certificate and make it really automatic and easy to set up. One of the examples is, let’s encrypt, so this is actually changed HTTPS and made it much easier to adopt. So what is the state if HTTPS? Now I look at HTTP archive data and it says that adoption is around like sixty percent and when you go back and look through like seven years of data, you can see it’s actually rising like pretty steeply.

So what are the tools that you use to understand? The state of HTTPS and what is it so Chrome, has a public transparency report where we published out about what we’re seeing in chrome in terms of the amount of HTTPS usage, that’s out there on the web. So, for example, what we’re seeing is the usage in Chrome on all of the different chrome platforms on desktop and on mobile is been rising over the years and if you go on to the HTTP transparency report, you can see chrome platform how the usage is increasing.

You can also see not only this in terms of the pages that are loaded over HTTPS, but also browsing time, because, as you might imagine, people are spending different amounts of time on different sites, and we can see that that across the different chrome platform is growing. As well, it’s also broken down by country, which is pretty interesting, because you can see how different countries all over the world are doing on their adoption of HTTPS.

Some other things that are on the transparency report are HTTPS adoption actually at Google. So you can see you know, Google, it is a big site, just like any other site. It took us a long time to actually get this ramped up, and so it’s pretty cool that the transparency report also shows how HTTPS usage has grown at Google. For all of our different products, so what kinds of things is chrome doing to increase HTTPS adoption? So I would say there are two main areas where chrome has made slow changes over time to encourage HTTPS adoption and the first is in Chrome’s UI for connection security.

So chrome shows an icon in the address bar that indicates connection security and we’ve actually changed this icon over time to help users understand the lack of security in HTTP connections. So chrome used to show just this plain circled, I icon for HTTP connections and we thought that was actually a problem because it really doesn’t indicate to people at all that there’s no security with an HTTP connection and what we’d actually like to get to for all.

Http connections is this kind of scary: read not secure warning, but we think that if we just roll that out for all HTTP sites right away, it actually could cause some panic right because we don’t want the web to seem scary. We don’t want people to see this morning all the time and we’ve also seen that people get what’s called warning fatigue, which is that if they see warnings too many times over and over, they start to ignore them.

They stop paying attention to them. So we want to be honest with users without sort of inciting chaos and panic. So what we’ve done is we’ve actually rolled out the warning slowly over time increasing, so we first started showing this gray eye not secured in the address bar just for HTTP pages with passwords or credit cards, and then, sometime later, we started showing the warning also when Users enter data or for incognito pages, and we actually just announced that in July of this year, we’re going to start showing it on all HTTP pages.

So we’ve actually rolled that out over time we’ve seen the amount of HTTPS usage increase and because HTTP unit has increased, then we’re not too scared about the warning fatigue that would be shown from the warning, and so what about the technical API is on the web. Right so another thing that we’ve done in chrome, to encourage HTTPS adoption and also to you know make the web more secure is to require HTTPS for web api s that are very powerful so for new api’s that have come out like service workers, because serviceworker is Such a powerful API we’ve actually required HTTPS to use it.

This also goes for HTTP two, which really improves performance, and it actually requires HTTPS, but we’ve also taken a look at api. Is that already exists on the web and we’ve actually deprecated usage over? Not secure connections for the api’s that are very powerful, so an example here is geolocation, there’s also getusermedia, which is about getting the photos on your phone, and so now sites can no longer use those overage.

This is like patching holes and security on exactly that’s great. So where do you think we’re heading with HTTP? Are we going to achieve a hundred percent adoption and we can all like go home or is our job not yet done? As we talked about earlier, adoption is still, you know not at a hundred percent, yet there. So we still definitely have you know a ways to go. I don’t know that we’re going to get to a hundred percent because I think there’s always some kind of driftwood sites on the web, things that people don’t maintain, but I do.

I would like to see us get close, so you know, if you know any sites out there that are still HTTP, you should go, tell them to turn on HTTPS. They said. No then tell them to come talk to me and tell them why they should, and you know users on the web can also vote with their feet if, like their bank, isn’t secure like go, find a secure banking website put your money somewhere else. So what are some of the knots that websites need to untangle when they need to make that switch from HTTP to HTTPS yeah? So you know migrating your web site to HTTPS.

It’s not as easy as just you know, putting an S on the end of the name of the web site. It’s not as easy as just getting a security certificate. You actually have to look and make sure that all of the services that your site depends on. Also support HTTPS, so, for example, a large complex site might depend on many ad networks, maybe analytics providers, and so the sites have to sort of take an inventory to first see what are all of these third-party dependencies that I have and then do.

They actually support. Https and then, if they don’t, they might have to go out there and actually convince them to start supporting HTTPS. So it can actually be sort of a project management type project as well to like make sure that you you’ve sort of done spring cleaning of the whole site. Well, Emily. Thank you so much for being here and telling us about HTTPS, and I learned that there’s so much more to it than just the S at the end of the URL, where at the end of the protocol in the URL and how it’s actually like deeply ingrained With the API is that people use for being Sheriff thanks for every week, so if you’d like to weigh in on the HTTP discussion, leave a comment below we’re going to have links to everything we talked about in the description tune in next time.

Thanks for reading