Categories
Online Marketing

AWS Serverless Web App Tutorial

We will be covering a new concept in cloud computing, namely the serverless architecture. What does this mean? Well, essentially, server less computing allows you to build and run applications and services without the need to manage the actual server. It also provides flexible scaling under heavy load and automated high availability becoming a very versatile tool.

The AWS server less platform has many capabilities, as you can see, but for the purpose of this article we will be showcasing the creation of a server less web app from scratch. The structure of this project can be easily understood by following this diagram. All of the front-end code will reside in the s3 storage unit, which allows us to host the website publicly. Therefore, we start by creating an empty s3 bucket, like so give it a unique global name and click create and now to upload the static websites content into the bucket.

I simply click upload and drag and drop the build folder into here. Like so note that I am using react as a framework, so it might be a bit different for you. The next step is making the pocket public and for that we go into permissions and pocket policy and paste this bucket policy. In order now public reads: click save and do not forget to change the bucket name. Now this bucket has gained public access.

As far as configuration is concerned, the only thing remaining is enabling the website hosting in the S stream, which will allow the objects to be available at the website. Endpoint of the bucket click properties and select this card to do so. Check use this pocket to host the website and input a route for us. It will be index dot HTML. Furthermore, you can set up a custom domain for your s3 bucket by following the tutorial right here, which will be linked in the description anyhow.

Now you have the endpoint of the website and if you click it, you will see that the static website has come online. Going back to the diagram. There are a couple of things left to do. We should set up an instance of the Amazon Cognito user pool which enables us to register log in and authenticate securely. Then we will write the backbone of the serverless project that are the various AWS lambda functions which replace the server as they access and manipulate of Amazon DynamoDB now SQL database and respond to easy to use restful api calls.

But first the user pool head to Amazon, kognito and click manage Azure pools. Here you can create one or several. These are pools based on your application, for instance, one for regular users and one for administrator. You give it a name and click preview default settings here. There are various options: the password length, some type of restrictions, for it. Verification by email is a really important one, because you actually also gain a two-factor authentication while using the Amazon, Cognito and finally create the user pool.

You can find it under the user pools category and make sure you note down the pool ID that it has given itself as well as the previous endpoint of the website. The final step of configuring, the user pool, is creating an app client for your project. I already have one in here, but you can always add multiple ones, just give it a name and make sure you deselect the generate secret client option, because that means that it doesn’t support the JavaScript SDK.

You can also manage and configure every single user in your user group by clicking here and, for instance, having the option to disable delete users even creating or importing new ones as well, and most projects use JavaScript these days after that, leave the other options as default And click create app client make sure you save the app client ID for future use. Once you have the two IDs you can insert them into your application and benefit from the various cognitive.

A P is like the login and register ones. Let us test this new functionality into the website. Now we can register a new user, for instance, with this email password that satisfies the constraints and of verification code has been sent to the said email. It has sent this Jason using the user pool ID and client ID that we have just provided it with, and we have already appeared as an unconformity in the user pool after user verifies himself.

He can also login by following the same procedure and of course you would get a warning if his password is incorrect, once kognito is out of the way. All that remains is the server less back-end. Aws lamda interacts with the database, so we must first create one head on to dynamo DB and click create table here, give it a name and the primary key you can choose between various types and then create.

For instance. Here is my database. I have events with various categories: DynamoDB is a non relational database and you can edit the data inside at any time as long as it is not the primary key of the item. For instance, here I have made a mistake. Event capacity should be a number and then click Save it successfully changed it. Furthermore, you can customize it by adding new fields inside it. Let’s say time of day morning, and then it would add that category now that we have the database, we need to create a role more specifically Identity and Access Management role for the future function, so that it has access to read and write to this database.

Specifically, so let us do just that: go on to the overview, tab and write down the Amazon resource name so that we know which database we’ll use then proceed to go to. I am and create a new role here: choose lambda as that’s the type of function that we will use in the filter, policies, search bar, begin typing, lambda and choose AWS lambda basic addiction role so that it will have permissions to write to cloud read logs so That you can see whether you have errors or not, then click Next provide a name for it and then you’re ready to create an actual role.

You can find it here in my case now to attach the policy for our specific database. Click here add inline policy for choose a service type DynamoDB actions. Let’s give it all the types of read rights and lists and for resources with specific option checked, go on to table and click. Add a RN here you can paste your your own database AR m and it will automatically fill in the fields, for you click Add, and then you can review the policy giving it a name as well once the role is created with both policies in place.

We are now ready to create the actual and the function. This is easily done by going to AWS lamda and clicking create function. I like living author from scratch. Option enabled for runtime give it the programming language of your choice, a name and the role. You can choose an existing role, and here you can see the one that we’ve just made. Example, lambda role create function and the base one will be created for you.

After we create a function. You can see that it already has access to the cloud read logs, as well as the Amazon DynamoDB database that we’ve just created the function itself is a hello world stub onto which you can build other functionalities in order to test it. You click here, give it a name and some parameters if needed. In our case it doesn’t use them, so it doesn’t really matter. Click create and again test.

As you can see, it says hello from lamda back. This is why we’ve added the cloud read logs policy. Now, on to a more complex example, we go into functions and get events. This is a lambda function which takes all of the events in the database. We’ve previously looked that that have reached past a certain hard-coded date due to this line here, using all the big land scan method, we click test and check out the results, seeing that it it does output all of the events.

In the same way, you can make a most event function, which takes into account the parameter is required to make a new entry in the database. Let’s name it test three in this case and click test. The function has added test three, so let us see that, and here it is going back to the function. Okay, I would have noticed that we have something called an API gateway here as a trigger what this does is.

It enables an URL which we can use in our application, on which we call witta get or post, for instance, and receive the result of the function back in JSON format. This is essentially the final piece of the puzzle that connects all of the services together. In order to create one remember, every function has one API gateway. We give it a name, a description if necessary and an endpoint type as choose edge.

Optimized in this case create the API. Go to actions, create a method of the type that your function is. Let’s put it at any select, lambda function, the region and the function that you’ve wanted. The API, for, let’s continue with the example function in our case, use the full time mode should be checked as well. You will land in this page and the API gateway is almost ready to be deployed. You’ll notice here in method, request, authentification is set to none.

What does this mean? Well, if we change that, we can make it so that, for instance, the view events viewing all of the events in the database is only allowed if you’re already logged in so after we do so only then we’ll be able to see the events. This is done by creating a new authorizer click kognito and give it a name. Let’s call it user select, the user pool that you’ve previously created and the token show source should be authorization create and then back in resources, click, any method, request, authorization refresh, and you can see the newly created user now only being logged in into that specific cognitive User pool, who will I allow you to access the specific function? Those being said, we are now ready to deploy the gateway API.

You should also note this option here enable cross-origin resource sharing. I recommend you to enable it if you like me, have opted to use Axios as a method of communication with the api, otherwise it wouldn’t work and finally deploy api, select a new deployment stage, with the name of your choice and clicking deploy. This will yield invoke. Url, which you will put in your application and don’t which will call with the get or post, depending on the function that you’ve wanted to call this server less web app functionality is now complete.

You have the static website sitting in the s3 storage in it with all the images CSS HTML, then the user pool uses kognito to manage the login register and authentication followed by the newly created database, which is populated and manipulated by the various lambda functions that you Will create which are called from the project through the Gateway API. Thus, they all amounts to a single web application which can be expanded upon easily.

Last but not least, regarding price. Well, the cost of creating the serverless web app is known as AWS accounts only for the time its service is actually run, which is mainly the amount of traffic and how many times the lambda functions compute. For me, personally, it has been less than 0.1 dollars and I have had the webapp on for a period of about two weeks time with extensive function tests. Ultimately, all of these resources are available in a github project and check the article description for more details.

Thank you for reading


 

Categories
Online Marketing

Web Payments (Chrome Dev Summit 2016)

But if you think registration forms are difficult, we should talk about. Checkout forms a lot more form fields, a lot more questions, but I think that you’re going to see a consistent theme emerging through, like our talks here today, which is this one of let the browser help you. There are certain advantages that we have as a browser, especially when it comes to reducing friction and making life easier for users, especially things around repetitive data steps, things that the users can store inside of the browser’s, but we’re trying to do our expose api’s and give You tools to reduce, friction and make things easier for your users.

We saw it in Koreans, while management and we’ll see a very similar theme with what we’re doing in payments, but first a little user activity just before we go off for lunch, which are some questions. Okay, great so first question just curious: how many people here actually enjoy the process of buying something on the web using their mobile device? Okay, good yeah and some people, but by large? No and whether we should come talk.

I’d love to hear like what is that you’d like about buying things on the mobile web and what it is that you don’t as much a second question, and I would be really impressed here how many people can remember all the details of their credit card. I’r talking full 60 digit number really CVC on expiration. Okay, it’s more than I expected. I got to be honest, like okay, we’re still like under 15 %, but okay cuz I’ve even payments out for like 18 months, and I think I have yet to remember a credit card number, that’s great and then okay final question: how many people enjoy the process Of handing over all their sensitive credit card information to a random third party server I’ll get one.

It’s almost like. I’r asking these questions to lead up to a particular point, and – and there was a points and the reality is that most users finds payment difficult. They find it insecure and scary and frightening and they find the process of doing it on the mobile web, particularly bad, and so we had this number. We talked about it at i/o as well, and it hasn’t really changed, which is that on average, we tend to see about 66 percent fewer conversions on mobile than on desktop and again we think there’s an answer to that, which is all around again high.

Friction the difficulty and issues around trustworthiness and security, and so we’ll talk about sort of how we’re addressing those today and how we’re trying to bring fast, simple and secure payments to the web platform. But this is a little I’m a p.M. It’s a little bit too PME for me actually, and so I have a much better mission for us inside of the chrome team, which is we’re trying to save the world from annoying check out forms.

So I’m trying to save the world from virtual keyboards and having to memorize and all of those terrible things. I actually started this joke of the better payments Bureau a couple of months ago, and now it’s become like a thing so anyway, but actually Chrome has been fighting the good fight against annoying check out forms for many years. Actually, we start with autofill back in the day, you guys are probably familiar with autofill.

This is my one slide on it. It’s not really the topic today, but consider this. My 10 second plea to say: if nothing else leave today and set autocomplete types on your check out forms. It helps us it helps. The users helps the browsers and it basically ensures a hundred percent accuracy on autofill. I’r not here to talk about that today. I’r really here to talk today about payment requests, which is this new API that we’re building for the web to really help solve a lot of the problems I’ve been talking about.

But before I talk about what payment requests is I want to talk about what payment request isn’t and that’s, because payment is complicated. There are a lot of players in this space and I just want to sort of set up fronts and sort of help alleviate any confusion. So the first thing payment request is not a new payment method, so we’re not trying to create Chrome pay or browser pay or yet another X pay button on your website.

That’s not fundamentally our goal. Our goal is to help users pay, that they went the way that they want to pay and do it quickly and efficiently. Secondly, we are not trying to become a gateway or a process or or some entity that literally moves money in the ecosystem. So it’s not we’re not trying to step on any toes here or like enter into this ecosystem. We think that the market has actually done an incredible job here.

Already players like stripe and Braintree and others have done a really stellar job over the last couple of years of taking the incredible complexity of accepting online payments and making it really simple. They’ve removed the burden of things like acquiring banks and all the couples of PCI, and they put it all into a easy-to-use API. And so our goal is to ensure that whatever we do plays really nicely with all these gateways and processors.

But that’s not fundamental goal to become one. The thing about all these great new services, though, is that they’ve really focused on developers, which is great they’ve made your lives easier and it made easier for you to accept payments, but the user experience has largely remained the same. You have to go from the state where you know nothing to a user to everything and formfields tend to be the way that we do this.

So payment request was fundamentally built for users. I mean we think it’s pretty good for developers too, and it’s pretty easy and we’ll sort of talk about code samples. But fundamentally, like my goal, I think about users and how I can help them and help them get through these burdensome flows on mobile, faster and more efficiently. So what exactly is payment request? Well, pay requests, like I said, is a new standards-based, API and standards-based.

I want to emphasize that we joined the web payments working group almost a couple years ago now and every major browser is a vendor. We have financial institutions from around the globe and we’re trying really hard to build something that everyone can integrate, that all forms of payment integrate with and all browsers can do so that users on a variety of devices and ecosystems can continue to leverage and have the Benefit of it, we’re just in the early stages of it and sort of will talk about where we’re at, but that’s sort of fundamentally our goal, and so when we started to think about what design this API looked like.

We had two high-level goals in mind and they sort of reference back to my original question set the first one is we to build a seamless, easy-to-use, checkout experience on mobile? In particular, we wanted to make sure that users like could minimize typing and minimize friction as much as possible, and the second thing is we really want to bring more secure payments into the web platform. In many ways like the web is one of the the last places where it’s very commonplace to exchange over all of your sensitive information to some unknown third party, and even though there’s an answer to this from the payments community.

With regards to tokenization, the web really didn’t have a great answer for that, which is why we’re really excited that we’ve brought Android pay into the web platform and again we’ll continue to expand that. But this brings tokenized forms of payment. So in the events of data breach or other problems, you as a users are protected, but also it also reduces the burden for for you, as developers and merchants, and so those are our two high-level goals that we had and again the idea here, just at a High level is that, if you think of your traditional checkout flow, it looks something like this.

It’s you know anywhere from like two to five pages, maybe one for single page things and you have somewhere between like 10 and 40 form fields where you’re asking a variety of questions. Things like what’s your name, what’s your shipping address, what’s remail, what’s your phone number? What’s yer credit card number, what’s your expiration and then you have users who are like you know trying to like do all this on their mobile device and at some point they’re, like man and I kind of give up, and maybe they go to desktop later or Most likely, they don’t – and you know and Aaron talked a lot about the growth of mobile right, and so we really think we need to fix this and make this easier and the way this happens with payment requests is you can imagine that the browser sort of Plays this role and and helps facilitate checkout across this, the the highest friction point.

So we take that common set of data, those common things that you request and sort of leverage our strengths to make it easier for users to to be successful. So before I could show you a demo, I want to talk about what types of data is actually supported by payment requests. So the first one is probably a little bit obvious, but it’s a form of payments. So, at the end of the day, you need a way to actually request money from the ecosystem, so it needs some sort of form of payments.

Right now in Chrome, we support we support credit cards and Android pay. I put etc on here, because the is to support more but we’ll talk about that a bit more later, and so you always have to request a form of payment. You can’t call payment requests and not want to form a payment that would just be weird and then would just be request: arbitrary user data API. So the other big thing that we allow you to request is shipping address and shipping options so for physical good purchases.

You can leverage the API to say, hey give me their shipping address and then there’s a dynamic mechanism for you to take that address and then populate shipping options that have updated pricing, etc. You can also request a phone number. You can request a an email address, of course, for like sending a receipt or even prompting sign up afterwards and coming soon, actually, but not quite there, but in a couple of months is payer name support, and these are all flexible.

You can request any of these or none of these, if you want the idea is to support a broad range of of use cases out there. So if you’re like a ride, pickup service, you probably don’t need you. If I don’t need everything, but you definitely need. Let’s say a location like an address and a name, let’s say or if you’re a physical good you may may or may not need their payor name because you’ll get that from the shipping address, so it’s flexible and you can sort of accommodate experiences as as fits Your the business, but the really important point here, is that all of these data points can be stored and returned by the by the browser, so users, by and large trust chrome to store this data.

They trust us to store their names, their emails and even their credit card data. And so the question is like: why put users through the burden of a form that they have to fill out manually and, like you saw like sabine slide about like fat, fingering and the difficulty of mobile keyboard typing and those problems were multiplied across all those form Fields, so if you can save them the burden of doing that, we think it’s worthwhile and sort of payment request is really designed to do that.

But let’s go ahead and just let’s just going to sort of see it in action switch over to a demo here see if we can see all right, excellent, I’m going to you open up, Chrome on stable and I’m actually going to use the exact same shop. Api, that’s, oh and you see it, it auto sign man, you have to love and a good demo goes right, and but otherwise it’s the exact same website, polymer shop demo, except I’m going to go a little bit further and actually just make a purchase.

So I hit the shop now button. You know, I definitely don’t have enough. Google hoodies so I’ll, just source wet shirt, so I’ll just buy it yet another one. So it standard shop. You see that there’s like size and quantity. I won’t affect those, but you see that there’s there’s two buttons at the bottom there’s a typical Add to Cart button, but there’s this also. This Buy Now button that Buy Now. Button is based on feature detection, so we’re checking to see if payment request exists and if it’s there great, let’s leverage it and if not it would.

You would just see an edit card, but I’m going to end use the rapid checkout approach, and so I tap on the Buy Now button and you see that this this payment sheet slides up from the bottom. This is a payment request in action, so you’re looking at sort of natively drawn UI, it’s controlled by us. We can through it, but it’s populated with data from the merchant. So you see that my total amount is there $ 22.

15. I defaults to my form of payment that I prefer, which is android pay. If it’s available only cuz, it’s faster and more secure. You see it they’re also requesting my email address for the purpose of sending a receipt, and the only thing I need to do here is select. The shipping address it’s very difficult to ship, a sweatshirt to someone. If you don’t know where it goes so I’ll tap on that you’ll see that the payment chief slides up to full screen – and it has my addresses, automatically populated for use.

These are our two Google offices here, so I’ll go ahead and shift to the one in San Francisco, where I work, you see that when I do that the shipping options are automatically populated there, and so we have a free shipping in California option or in Express Shipping, and if I change those it will dynamically change the price, so you can see here that express shipping changes, but of course, why would I pay more I’m going to go back to zero? That seems to make a whole lot more sense to me and now I’m ready to pay.

So we just have the pay button and then you’ll see the Android pay screen slide directly up we’re running the test app. So it says unrecognized ooh, you guys wouldn’t have that and because I’ve actually authenticated in the last couple of minutes. I don’t even have to do any extra authentication on Android pay I’ll literally just tap the continue button. A responses comes back and the transaction successful so pay with Android pay, no keyboard, no typing.

All I had to do was tap and select and confirm my shipping addresses so really great, really seamless, we’re really excited about it and just to show you that if you don’t have Android pay available no big deal, we can always change our form of payment and, If I didn’t have Android pay, I would just default back to my credit card, in this case, a Visa card that I have once again I’ll select my shipping address and options.

I hit the pay and the only thing the only keyboard we can’t get rid of is the CVC input everything else we have so I’m going to do one two three. I used to do like a live credit card on this and I discovered that what that didn’t work well for me, so I’ve switched to a demo card but either way the same. The same concept applies, we’ll talk about what’s happening behind the scenes, but this is all client-side basically, so it’s all happening super fast and pretty great they’re really excited about that.

And now maybe we can switch back to the slides and talk more about what it takes to make this actually happen. So how do you leverage payment requests? Well, it’s pretty simple. There are three parts to payment requests, two of which are that are required and one of which is completely optional, and so we’ll talk about them in order. The very first one are payment methods, so we need to know basically all the ways that you can get paid.

This could be a wide variety of things in the future, so it could be. I accept Visa and MasterCard and AMEX and Discover JCB UnionPay. It could be in the future, I accept Ally, pay or idea or PayPal, etc. As long as people are built into the ecosystem, like I said for now, Chrome we just launched so we’re, starting with credit card support, Android pay, and so it looks a little bit like this. So we basically pass in this thing called method.

Data and metadata is an array of objects and those objects. Each have a an array of supported payment methods. So you can see here that Mont. The first thing I support our credit cards. I support the standard for Visa Mastercard, Amex and discover. That’s it nothing else to do it, just as I accept this in the future coming out in a couple of months, we have added support for granularity for things like debit or credit or our prepaid, but for right now, essentially, when you say visa, we sort of Assume you can accept all visa and don’t make a strong differentiation there, but the second one is a little bit more interesting, and this is Android pay, there’s sort of an abbreviated version of this, but to support Android pay.

You see that there’s an additional key inside of that object, which is the data data, is sort of a generic object and it’s a payment method. Specific. The reality is that different payment methods out there have different dependencies different things that you’re going to pass in when you instantiate it by default, so for Android pay, for example, you always have to pass in like your merchant ID, you have to pass in what kind Of token you would like either network or gateway.

We don’t have a full example here, but and then what happens then is when a user chooses to pay with one of those forms of payment, we basically bundled it all up and pass it on to the payment. App so and then the payment app uses that data plus things like origin and assertions from chrome to basically verify that the payment app is the right one, and so the payment can can continue. So it’s pretty simple, but the idea here is that you throw everything you can at the browser for ways that you accept payment.

So if you can accept a like a hundred different ways of paying around the globe, tell us a hundred ifferent ways to pay, because what the browser does is we find that spot in the middle between the set of ways you can get paid and a way That a user can pay you and give a user an optimized experience about the ones that make the most sense for them. So you solve, for example, in the demo that Android pay and a Visa card were available, but let’s say that we had removed visa as an option, then visa just wouldn’t show up, because that doesn’t make any sense and so for, as you go across the globe There are wide variety of ways to pay, but we recommend giving us all to them and then we’ll find the best experience for the user to optimize around their preferences, their defaults and what? What is the best thing for them? The second bit of data is also quite important, so now that we know how I can pay you, we need to know how much money you wants to get paid, and this is what this looks like great.

So the first thing, the most important thing that’s required is this total attribute three parts basic. There are two parts really. The first ones are label, so we customize this. So if you tell us, total will display total, but you this could be like authorization donation. Whatever you want – and you have to, we have to know an amount and the amount is compose of a total amount of money and an underlying currency code.

So we know, for example, or the underlying payment app that we transferred to knows what currency to charge in we’re also to support display items. So, just like I showed you like when I tapped on the total those line items. I came down that basically told you how the total amount was reached this you can’t. We also support this. It’s a wholly optional. You can pass in. You can pass it if you want or ignore it.

We recommend it it’s nice to give a high-level overview to a user about the things that inform the total amount, things like the subtotal tax, shipping, cost, etc. Less of like a full itemized receipt and again in more of like a high-level overview, one important point payment request does not do math we’re not good at floating point math. So if you pass in, you know, you have two line items that sum to five and your total says four like we’re not going to throw anything so you’re totally in control of this thing.

So just keep that in mind and they’re by the way it might be some use cases where it makes sense for those not to a line, but by-and-large just want to point that out. The other point to note is that transaction details can also contain shipping options, and in this case, if you put them in there by default, we support default shipping options. We only recommend you use this if you’re highly confident that your shipping options will not change, then they’re not dynamic.

So if you support, for example, world wide free shipping and it never changes, no matter what the address is feel free to default populate this. But if your shipping is dependent upon a user address, then we recommend waiting until you’ve gotten a user, a user address event which we can talk about a little bit and then you can use that to dynamically query, against whatever service you use to calculate prices, and You can repopulate this and that’s the important point that basically the transaction details object can actually be updated and overwritten throughout the lifecycle of payment requests at certain events and points.

So if a user changes their shipping option, you saw like how, in my demo, when I changed my ship, the price change and the list items changed. That’s because when that event took place, we repopulated those set of transaction details, and so you have that flexibility in control on those events, and so that’s how we get sort of that dynamic pricing model that exists out there and so again don’t do default shipping options Unless you’re highly confident they aren’t going to change and the final piece is the extra information, the optional set of options, and that’s that things I talked about user address, shipping support, name, email and phone all entirely optional, but definitely useful.

I think there was like sort of this myth out there that the the only drop-off point in the funnel is the is the process of putting in your credit card, but really like the entire checkout. Funnel is well a funnel and so like wherever your users. Experience. Friction and there’s a step. Others are drop-off, so we highly recommend taking advantage of these these different pieces, and so there’s a few that we support, like I said, and it’s as simple as passing in just a bunch of boolean’s.

Basically, do I want shipping? Yes, do I want email, yes, etc, and you can again, these can be variable, so you can say I don’t want shipping, but I do want a name and phone number or you can say I just want an email address to send a receipt to. For example, it’s completely configurable and again. The idea here is to support a wide variety of use cases. Something funny that is minor that we have coming soon in the next couple of months is we’re adding support as well for a shipping type value.

It’s pretty simple, but the idea here is that let’s say you are buying a pizza, one does not ship a pizza right. That’s just weird like we deliver pizzas, and so it’s a very minor feature that allows you to actually specify shipping delivery or pickup. As like the address type, so we still call shipping address underlined in the system, but this way in the UI a user would see. Oh, I want my pizza delivered two three four five speed streets.

I don’t want it delivered or if you’re a ride-sharing service, for example, you can say pickup and it’s your pickup address where you’re currently at or located, and so that’s the value of that particular little thing again pretty minor but allows us to just have like a Better user experience underlining the whole system so now we just put it together basically, and we get that whole experience that we talked about, or I just showed you so.

The first thing we do is we instantiate payment requests and we pass in our method data way that we things that we support. We pass in the transaction details again how much money, what currency code, what line items do we once and then our optional options right? So in the case of our demo that I went through, that would be request, shipping, true and request email, true, but again that one’s completely optional um.

You see here. I’ve also added an event listener to my shipping address change and we support two events in the system: shipping address change and shipping option change. These are this: is that dynamic mechanism that allows you to receive the events parse out the new details? Let’s say so: if a user selects a shipping address that event fires, you can actually pull out that full shipping address.

We don’t do just the zip code because you can’t get fully accurate shipping information with just a zip code. So you get a full user address. You can use that at that time to call event update with this basically says: hey, you know browser, I’m thinking. I need to calculate this. You can call your back-end api’s and you can update resolve a promise with new transaction details. So again that updated transaction details object can now contain your updated set of shipping options, including the empty set of options and an error which says like opps.

Sorry, we don’t ship to you know wherever it is that you’re trying to ship to so that’s also supported and so and by instantiating payment request or not. There’s no UI. That shows it’s just instantiation when you want that actual payment sheet to slide up from the bottom. Oh, we called that show that show is actually our signal and we actually raised that payment sheet and put the user through the process.

That returns like a promise, and when that promise resolves you have a payment response and that payment response contains the entire set of data. It’s just a JSON object that contains the entire set of data that you requested so for a credit card. For example, you would know what the underlying network was so Visa, MasterCard, etc, and then you would see credit card number phone number, full, CBC, expiration, etc.

Think, like the same set of data, that a user would have typed out into your form, you’re now getting just from the browser as a JSON response, you can use that to basically send that response directly off to your gateway, your server or even let’s say in The case of like, like you know, scribe API is like directly to over to the API is for tokenization, it’s completely up to you, because it’s all plaintext these responses.

It’s important to note our our method specific. So if you selected Android pay as your form of payments, then when that response comes back, it’s going to look like an Android pay response. You’re going to be able to select this there’s a key and they’ll. Tell you that, oh there, the form of payment they chose was Android pay and then you’ll have to expect that the Android pay details object, looks different than a credit card, one which may look different than some other form of payment like an alley, pay, etc.

I mean in a good that’s because different payment methods have different requirements and are different systems and call things different things. The final step here is, we just need you to tell us to close the UI, because once you get this payment response back, we actually show us a little loading spinner and the little loading spinner is sort of waiting for you to come back and let us Know the the result of the transaction we highly encourage, but do not require that at the time that payment response comes back, you try to make the payment.

There are legitimate use cases where you can’t do this things like 3d 3ds flows, etc, but by and large, if you can submit, we recommend it, and so you call the complete you can call with success or failure, but you can also call it with nothing. This is basically an affordance for the browser to do like special UI considerations in the event of success. You know like a little animated check mark or something but yeah, it’s totally optional, but the important thing is that, when the UI closes will actually resolve that promise and that promise is your cue that the UI has been completely torn down.

So if you have animations or things that you’re trying to time with the close of that wait for that promise to resolve and then you’ll be guaranteed that any chrome UI has now been stripped from the page, and that’s it on with that. You basically have the hold experience, so in just a few lines of code, you basically get help user alleviate all that friction and difficulty I’ll type in all those annoying form fields, pretty simple, but also again, with Android pay and other future forms of tokenized payment.

You’re. Basically, getting easy tokenize forms a payment that reduced like the burden of CBC memorization, etc. So really excited about this, and this is all possible because the browser is sort of sitting as the middlemen. There proxying data back and forth between native apps on the device and and the underlying website and the developer. That’s requesting it. So my last few minutes here I want to talk about just a few UX considerations and forward-looking stuff.

So first one is my very bold. Hyperbolic statement to say, kill the cards, which is maybe a bit strong, but just sort of my way of saying if a user is coming to your site or you for a lot of users who come to your site on mobile, that only make a single purchase. Why put them through the burden of opening the page, adding it’s a card? Finding the cart page clicking the card page going to review page go to the checkout page, then.

Finally, starting the process there on mobile want to optimize their experiences. Payment requests allows you to do that quickly and immediately, so consider adding like Buy Now buttons directly to your product pages, especially on mobile, when it makes sense again. This moment won’t make sense for all businesses, but I would encourage you to go back and sort of check the numbers and see if, like this might be a powerful tool for you guys to leverage to help your users just a few other things really quickly that I’ve talked about – and you’ve heard mention here today – is thank progressive enhancement.

This is a new API. It won’t always be available, so you can’t necessarily completely depend on it, especially in a cross-browser way. Yet, although hopefully we’ll get there, so think what happens if it’s not available, you’ll still need a fallback flows etc. The second one, of course, is we encourage you to keep the set of list items high level, so don’t think of it like an itemized receipts. We don’t want the user to select this long scrolling list in the UI, if possible, try to keep it high level, subtotal tax things like that.

If it’s single item you can put it in there, but by and large we encourage high-level subtotals and things like that and then last one. Something to consider is that if you already have a user’s information – and you already have a credit card on file or some way to pay – I wouldn’t expect you to use. Don’t think you have to use payment requests like give the user the best experience they can and that means go ahead and just leveraging what you already have on file.

But if you don’t have anything and you don’t have the credit card or the credit cards expired, you need a new one, a consider payment request as a tool to help these users. You know we talked about. You know. We talked about sign up first right, but that might not always make sense for your business if you think about it, like maybe your your p0 or your most important thing is getting user through that checkout flow, then you can request an email address from payment requests And now all you need from them at the end of that funnel to sort of optimize.

The experience for next time is a password and so consider sort of leveraging this again. These are tools to help you be successful, so just a quick status update. So we are live in in Chrome as of m-53, so we’ve only been live for about, say, eight wait weeks now and it’s sort of a quiet launch. We had a great set of early launch partners that we worked very closely with and they integrated and tested and gave us a lot of great feedback again.

The API is still early. Chrome is the first browser to implements, and so we’re really thankful to all of these players for their great feedback and from it we’re actually making a lot of changes and improvements and enhancements to the underlining experience. And so I just want to talk a little bit about what you can expect to come soon, so the first one that we’re working really hard on is support for third-party payment apps.

As you go around the world. There are a lot of ways to pay in India. You know you have like paid TM and snapdeal, and all these other new emerging wallets and you go to Holland. You have ideal if you go into other countries, a whole new forms of payment that are not just credit cards and Android pay, and we want to be able to support all of this in a nice open way where we can support users from all over the Globe, no matter what, and so we’re really close to finalizing this and we hope to have support next year.

Secondly, we have a lot of spec and feature enhancements coming, so we have the shipping address types. I talked about you’ll, be able to call this within an iframe coming up soon, as well as much other small enhancements and improvements, and then we also have much of UX improvements, so we added a are scanning just recently, so you can now just like scan you. If you don’t have a credit card, you can just scan it directly into into the into the UI, so there’s things to make it faster, easier and fundamentally better onboarding flows and then just quick time lines here.

Just so you’re aware we’re sort of targeting in 56. That’s our January release as, like our next big major release. It’s going to have all these enhancements all these improvements and we’re really excited about it on you’ll, continue get updates along the way. This is all live in chrome, stable and we’d love to continue to work with you and get your feedback um everything I’ve talked about today is available online.

In a lot more detail, we have integration guides a bunch of examples in sample code where the phones come up, and then we also have a game start with Android pay. Android pay is really simple. With payment requests, it’s like less than ten lines. We do almost all the heavy lifting for you, so just a quick shout out there, but I’ll be around the rest the day I would love to chat with you learn about your challenges, things that you think you need from the browser ways that we can help.

You be successful, especially in checkouts, so thank you so much


 

Categories
Online Marketing

Payment Integration

This replaces the payment forms on a site with a much simpler experience on mobile devices. So let’s talk about paying for things on the web. This is a longer talk, so let me give you an idea of what’s coming up. First, we’ll talk about the user experience today and what could be better, we’ll look at the payment request, API twice.

First, to give you the big picture, then we’ll dive into the code. Finally, you’ll get the usual resources in lab. It’s no surprise, given the rise of mobile computing, that a majority of commercial traffic is coming from mobile devices, what is surprising is that 66 % of that mobile commerce is still happening on the web, even when people have native apps installed. Unfortunately, we also see a lot lower conversion rate on mobile web relative to desktop websites.

Mobile conversions are about one third of the desktop conversions. If you wonder why this is the answer is pretty simple. Checking out collecting payment from the user is still rather messy. People often give up while filling the checkout form some checkout forms have improved since the beginning of web Commerce. What hasn’t changed is you still have to manually input the same information credit card billing address and shipping address? Our first step to solving this problem is autofill, because autofill works on existing forms.

You don’t have to modify your site. Autofill just works to help users check out faster autofill alone increases conversion rates by 25 %. Autofill does a good job of identifying form fields, but it’s not perfect. If you want an even better experience, you can have the autocomplete attribute to your forms. In this example, we’ve annotated the credit card portion of a form using values such as CC name and CC.

Number autofill will know exactly where to place its information. If you want to learn more about autocomplete attributes search the web, using what WG autofill to find the specification, autofill gets rid of the manual nature of data entry and makes it much simpler for the user. The current checkout experience presents you with a form to fill out every time for users, though the ideal experience would be that, when it’s time to buy they just buy site should be able to focus on creating an amazing and engaging shopping experience without worrying about optimizing.

A long checkout form this is where the payment request API comes in, we’re going to look at it first from a user perspective and then look at the code. What if we could do away with the form using web payments when it’s time to pay the user? Just pays payment request is a simple JavaScript API that helps the browser collect payment information. Then it’s a simple one: tap checkout for the user and an easy way for a site to receive a payment.

With the payment request API, you can make the whole process much faster and simpler and since the browser is actually taking care of collecting payment information from the user, we go from end taps to one tap. Let’s take a quick look at the code flow here. First, the site initiates a payment request in this request. The website passes to the browser the parameters of the payment, for example, how much is being charged and the available forms of payment? Don’t worry about the details now we’ll come back in a few minutes and look at this in detail.

The browser then determines the intersection of payment methods from the site and what the user has. It then presents a selection UI where the user chooses their method of payment. You get the UI by calling show this displays a native UI over the browser within this UI, the user can change how to pay the delivery method and the delivery address. The payment method can be credit cards or one of the apps that’s installed on their device, such as Android pay and, finally, the user taps on pay.

Then the browser requests a response from the selected payment method. This might be an app on your device or going directly to a payment provider. The payment processor verifies the request by examining its details and then returns the response directly to the server and the website now has all the information it needs to process the payment. Is this safe? The API is more secure than forum based payments.

The new payments are based on modern cryptography. You don’t need to enter payment data that could be logged or observed at the point of entry. Autofill is safe from website access and is typically stored. An encrypted storage on the hard drive to prevent disclosure, even when the OS is compromised payment request, is not just a chrome only API. The API is currently under development in the w3c web payments working group.

The goal is to create a universal cross browser standard for any website to accept any form of payment so to review payment requests, eliminates manual and tedious entry by storing the user’s information securely in the browser. The browser passes, addresses and credit card details immediately and securely to the site, and since the browser is collecting payment information from the user, we go from end taps to one tap: you’ve seen how payment request works for the user.

Now, let’s go over the code in more detail. First, a quick review. The site initiates a payment request in this request. The website passes to the browser the parameters of the payment, including the price and the payment methods accepted. The browser determines the intersection of payment methods for the site and the user and presents a selection. Ui payment can be anything from a simple credit card payment to a payment application installed on the user’s device.

The browser requests a response from the selected payment method and returns the response directly to the merchant. There are multiple code samples for this on: Google, Chrome, github, dot, io. Let’s start writing some code. Step 1 is to tell payment requests. All the ways you can get paid. Step 2 is to define the details about the actual transaction cost items, currency, shipping options and so on.

Here’s an example of how you would define shipping options notice. The selected bit you can include this: if you have multiple options, the browser will tell you which one the user selects step 3 is to define what information you want. The API to collect. Take the three data structures you just created and pass them to the payment request. Constructor. You often do this when the user indicates they’re ready to pay, take the request and call it show method.

This returns a promise and opens the user interface. The UI shows the details of the purchase and collects payment information when the user approves the prom resolves with a payment response object. Next, you should check that the payment is valid. Send the information to your payment processor for processing the UI will show a spinner while the request takes place when a request comes back, call complete to close the UI.

The complete method tells the user agent that the user interaction is over. The payment response object contains everything needed to submit a payment for credit card payments. The response is standardized for non credit card payments such as Android pay. The response will be documented by the provider. There’s one loose end to tie up what happens if the user changes their shipping address or options.

This may change the total cost and in some cases, may change the shipping options. Payment requests can omit shipping address, change and shipping option change events. You should add event. Listeners for these and update the payment details. Accordingly, the sample code will show you how and that’s it. You can find a full set of resource links on this final slide. You may have noticed. I didn’t mention a lab, we’re just finishing it up at the time of filming, so check your lab notebook for a complete ecommerce example.


 

Categories
Online Marketing

Implementing the Web Payments API – Progressive Web App Training

Api is a w3c standard to eliminate payment forms for users and standardized payment collections for sites. It allows us to request payment and shipping information with a single API call.

This knows how to run Apple pay on iOS Safari and Google pay on Android. It’s not limited to those to any payment provider can write a plug-in. It’s not even restricted to one browser. It’s probably in the browser you’re using right now the browser simply acts as an intermediary collecting the information we need in a consistent way. Then returns a JSON object with the results that we can use to collect the payment.

If you have used a pay with Apple pay or pay with Google pay button in the browser, you already know what the experience will be, like developers previously used custom libraries to implement this, such as the Apple pay, API or the Google Wallet API, and if you Want to do that too great, but if you want to work with whatever payment system, the user has payment request. Is your friend, let’s take a quick look at the code flow and user experience? We want to buy this jacket, what happens when we tap buy now? This is an ordinary button with an ordinary event handler.

First, the site creates a payment request, object and populates it with some details. It typically has the price, a list of items being purchased and the available forms of payment. This is all invisible to the user. We need to trigger the payment user interface, you get the UI by calling payment request, dot, show this displays a native UI over the browser and returns a promise. The next few steps are all happening inside this promise.

The first screen is a summary of the information supplied by the app tapping on an item opens it the EPI stores, addresses and payment options securely. In this example, Larry can select his shipping address with one tap edit. The address or add another need to change. The shipping option no problem: it’s just kappa way note that changing this option may change the total price. The payment request api can handle this with a little help from your app notice, the multiple payment options, the api also handles country, specific payment methods and, finally, the user taps on pay.

At this point, the browser runs the selected payment service. This might be an app on your device or going across the network to a payment provider. The completed payment returns a special token that you can send to your server. The server has ways of verifying this token. Is this safe? The api is more secure than form based payments. The new payment instruments are based on modern cryptography. You don’t need to enter payment data that can be logged or observed at the point of entry, so to review payment requests, eliminates manual and tedious entry by storing the user’s information securely in the browser.

It works across browsers across OS platforms and can work with any payment service that wants to write just a little code now that you’ve seen how payment request works for the user, let me show you how to code it remember that the payment UI contains multiple sections. We need to populate these sections before making the request. The request needs at least three data structures, the payment options, the order, details and shipping options so we’ll create those then generate a payment request.

We will call show and get back a promise that resolves when it’s time to contact the payment processor, finally notice that we may want to or three event handlers. These are called while the UI is visible and can trigger updates when the user changes addresses or shipping options. Let’s walk through the steps in the UI and the corresponding code. First, the user taps by now. So we want to set up a payment request.

Remember that we need some data structures before we can create the request. The payment methods lists all the payment services that your site understands. It’s an array of payment method, objects and each method may have its own specific properties here. We’re listing the basic credit card method and Google pay note that I’m leaving out the details of the Google pay object as it’s pretty involved.

We want the user to know what they’re buying. This includes the core details of the transaction, how much money? What currency? And what list items you want displayed? Keep the line items fairly high level. It isn’t meant to be used as an itemized receipt. If you want more than one shipping option, you can define this structure notice, it’s a property on the transaction details. If you have multiple options include a selected bit, the browser will highlight the selected option and fire an event when it changes.

Now you can define what information you want from the API by default. Payment requests will only return the payment info if the user is logged. In you may have the rest of their information. If you need more these options, let you collect what you need. Take the data structures, you’ve just created and pass them to the payment request constructor. This should happen in response to a button tap or other user initiated action.

Now so far the screen hasn’t changed. We need to trigger the UI, take the payment request and call the show method. This returns a promise and opens the user interface notice. There’s a big block of code. After this, we still have a couple of steps until we’re done. The UI shows the details of the purchase and collects payment information when the user approves the promise resolves with a payment response object.

The payment response object contains everything needed to submit a payment for credit card payments. The response is standardized for non credit card payments such as Google pay. The response will be documented by the provider. Next, you should check that the payment is valid. Send the information to your payment processor for processing the UI will show a spinner while the request takes place. Okay.

So how do we remove the payment UI after we click payment? Even if it fails call payment response, not complete. You can include a message to the user. This tells the browser that the payment is complete and allows the app to notify the user of the result. Now, there’s one loose end to tie up what happens if the user changes their shipping address or options. This may change a total cost and, in some cases, may change a shipping options.

Payment requests can omit shipping, address, change, shipping, option, change and payment method change events. You should have event listeners for these and update details accordingly. Remember we’re making the update in the middle of a promise, just as we do installing the Service Worker, so we use a similar bit of code. We get the event and call update with on it. This takes a promise that resolves to a new transaction details record.

It’s not all that different from calling cache at all from the service workers install event that also returns its result via the event. The get new info method is something that you would write. It takes some data from the request and builds a new transaction details. Object. Here’s a reminder of what goes in the transaction details. Your code probably needs to copy from the old object to a new one.

We resolve the promise with the new details, update with then updates the payment request and the screen, and that’s it. You now have a seamless, easy to use checkout experience now that was a bit of a long example, but most of it is boilerplate check out the payment request. Samples at Google, Chrome, github, io, remember the process for easier payments starts with autofill. If you want more payment request, is there to help? You can also check out specific libraries for Apple pay, Google pay, Samsung pay and others they put up a pay with button on the screen.

They usually fall back to the payment request interface, but they may be an easier option for your users. The only way to know is to try them for yourself thanks for hanging in there through web payments. This is one of the most complex parts of building a PWA, yet it’s really satisfying and could be great for business. Take care and I’ll see you again soon.


 

Categories
Online Marketing

Google Sign-In for Websites: Authentication with backends

Let’s learn how to integrate with the backend. This will allow you to keep sessions and store user data in a database on the server. When I wasn’t caring with backends, you deal with something called ID token. It contains the issuer of this token, which app this is for an expression date and so on.

You can verify the user’s identity and its integrity by examining the ID tokens content. Let’s get started, you can obtain an ID token upon the successful authentication and then send it over to the server using a secure, HTTPS connection on the server side. The retrieved ID token will look pretty cryptic, but don’t worry you can decode verify and extract this information without a network call by using the Google provided.

Client libraries like this note that the client libraries verify most of the information, but you still have to check if AUD, which indicates audience matches your client ID and ISS, which indicates issuer matches either of following strings. Now you can retrieve the users profile information to be used in your app. This ID token includes the same profile information you can get using the JavaScript library on the client.

A quick tip to remember is that if the users email address is already verified by Google, you don’t have to verify it again in your app once the ID token is verified, use su B, which indicates subject as a user ID to store information. Remember don’t use the email address as a primary key for users as it might change in the future. Okay, now you are ready to integrate Google sign-in with back-end in the next article.

I will talk about how to authorize and access Google APs sucks for stopping by station.


 

Categories
Online Marketing

BUSINESS DEVELOPMENT STRATEGY

Today we are going to talk about the aerial matrix that is tensing a product portfolio or a strategic business unit. What are the model look like and how it works? It is for the board that is newly formed and aging whether it is strong or the weak business either it is a younger, a dominant. Anyone can use it strategies. Yes, business life cycle phases.

There are four phases: embryonic growth maturity, anti-aging business you need is in the youthful stage means it is an embryonic stage did need a strong financial support, because profit is not releasing yet. Coming to the second point, growth here, your business company takes off and showing a rapid growth expansion either it is from the front end or the back. Can you have? You are only concentrating on the need of production because you have to satisfy for the customer needs at that time in the growth figures coming to maturity and the aging stage maturity.

In this stage, you are concentrate on the brand positioning because satis, if occation is over now it time to maximize the profits. It is the time that you should concentrate on the brand value and brand positioning coming to the point aging here. Your sales, faraway stages of the profit harvested and computation may leave the market or they are trying to shift to the new trend. So it time to modify or time to change rates of the companies coming to next, we are going to talk about the strength of the company strategic business unit.

Here also, there are five phases: one is dominant, strong, favorable, tenable and weak in the dominant phase. You are a market leader and you are the monopolistic coming to the second. Strong strong phase is what having a strong force with the small number of companies, but there should be a competitor, but ok, you can make money in those competitor. Also, yes, you will be in the profit. This phase is called as a strong phase coming to.

Third, there is a favorable. What is favorable, it is a very fragmented market. There is no dominant player, there is no rivals, there is no clear header. This is what we called a favorable phase next enable 10 a bar is what company serves in each with its limited geographical area or maybe with a special product coming to next? It is a weak, weak phase. What is the weak phase? Poor financial status and very small position: this is what we called a very weak phase of a company success subdivision strategies.

We are going to discuss the six strategies for the week and staging business. These six shelter days will help you to better life cycle of the companies. One is the market Chaterjee that is moving into your new geography or developing the different segments building a new product. It will benefit. You, second, is the products energy launching the new product, finding ways of differentiating the product positioning the product against the need of a specific segment.

It will also be PQ, that is the profit product strategy management and the system strategies here. Finding the process that give you a competitive advantage, such as the production at low cost betterment in the customer service for these technology strategies, that is, investing in the research and development, to ensure that product portfolio is full of the new products with a high market. Appeal placement strategies, building a customer loyalty to rebuild the business and obtain the greater share of the valid or, at the higher prices, operational strategies, improving the logistic on gaining a competitive advantage through the foster deliveries and our more efficient operation.

Altium Arun action, the model in action, a company should apply area in the three steps. One is determine the position of the business in its life cycle where the company life cycle exists means either. It is exist in the embryonic stage or maturity stage or aging stage. So you should get a clear by following these four questions. One is how big is the market? How many companies supply the market? How big are those companies? How old are those companies? These are the four questions you have to clear and after this clearance, you should ask a question that a large number of small and the young company or businesses indicate as an embryonic stage point number to a small number of large companies suggests maturity and old age.

You should get clear of these two points. Step number two determine the competative position of the business, so this should be easier than determining the life stage. A company in the strong competitive position will have a distinctive product offer or a command premium prices. He enjoy a significant market share, good growth and a high profitability. These are the things which you can evaluate very easily than evaluating the stages of life cycle plot.

The position of the business on the mock matrix means it is, might find that it’s standing in two or three different positions. That is either it is standing in embryonic stage already standing on adult phase. Also, so you can’t decide in these questions. New are a growing company with a strong or a dominant position. If this is the case, then it am to defend this position is maturity or ageing company with a strong dominant position, it aim to defend the position and grow with the market or consider harvesting the profits.

Third Point: new are growing company with a weak position in the market, so this type of companies find their niche in which you can survive or if the business is not profitable, consider withdrawing from the market shear or aging company with a weak position in the market. It isn’t possible to improve the competitive position so consider withdrawing from the market. It is well and good for the company, it is the loss rate so analyzing.

These are the four points, and these are the steps that you have to follow before applying aerial into the matrix of the company yeah. Thank you very much for your support. Let’s take share and subscribe forget for more upcoming articles.

Starting a business is not easy! Think about who will be working on your digital image. Hiring a good webmaster will help!

 

Categories
Online Marketing

Solving SEO with Headless Chrome (Polymer Summit 2017)

If you manage to pick up on my accent in the last five words, I am indeed Australian and it’s honored to be followed up by Trey, my fellow Aussie, as well prior to joining this team. I’d worked on the beloved chrome dev tools, one of my smallest, but maybe my greatest contribution was adding the ability to rearrange tabs in dev tools, there’s probably the greatest five lines I’ve ever written.

I did work another five other features. So if you find me afterwards feel free to ask me about them, and I might share dev tools trickle to more recently, I’ve had the humbling experience of building web components at all and witnessing all the incredible components that all of you have built and published. For example, the one and only Pokemon selector and if you’re the person who says but there’s a Hanyu, only 151 pokemon in the original set well there’s even an option that lets you set that too, so all kudos to Sammy.

For this, it was, however, in the process of building web components at all, which brings us to what we’re here to talk about today. So, first I’m going to cover my story of how I came to encounter this SEO problem while building web components. Our dog will then look at how I used have less chrome to solve this before diving into all the details of how that actually works and how you can use it. So I’m going to take a step back for a moment and talk about what I learnt in the process of building web components.

A talk. The first thing I learned was how the platform supports encapsulation through the use of web components with this encapsulation comes with inherent code reuse, which leads to a specific architecture. I also learnt about progressive web apps and how they can provide us with fast engaging experiences. I learned how the platform provides api’s such as service workers, to help enable those experiences, as I learned how to compose web components, to build a progressive web.

App we’ve heard from Kevin yesterday about the purple pattern: push render precache lazy load as a method of optimizing delivery of this application to the user and one of the architectures which enables us to utilize. The purple panel is the app shell model. It provides us with instant, reliable performance by using an aggressively cached app shell. You can see that for all the requests which hit our server, we serve the entry point file which we serve regardless of the route.

The client then requests the app shell, which is similar, but because the same URL across the application, we can combine that with a serviceworker to achieve near-instant loading on repeated visits. The shell is then responsible for looking at the actual route that was requested and then request. The necessary resources to render that route. So this point I’d learned how to build a progressive web app using client-side technologies like web components in polymer and how to use patterns such as the purple pan to deliver this application quickly to the user.

Then there’s the elephant in the room SEO for some of these BOTS they’re, basically just running curl with that URL and stop right there, no rendering no JavaScript. So what are we left with with this PWA that we built using the app shell model? We’re left with just your entry point file, which has no information in it at all, and in fact it’s the same generic entry point file that you serve across your entire application.

So this is particularly problematic for web components, which require JavaScript to be executed for them to be useful. This issue applies to all search engine indexes that don’t render JavaScript, but it also applies to the plethora of link rendering BOTS out there. There’s a social BOTS like Facebook and to but don’t forget the enormous number of link renting BOTS such as slack hangouts Gmail, you name it.

So what is it about the app shell model that I’d really like to keep well? For me, this approach pushes our application complexity out to the client. You can see that the server has no understanding of routes. It just serves the entry point file and he has no real understanding of what the user is actually trying to achieve. This allows our server to be significantly decoupled from the front end application, since it now only needs to expose a simple API to read and manipulate data.

The client that we pushed out to the application that we pushed out to the client is then responsible for servicing. This data to the user and mediating user user interactions to manipulate this data, so I asked: can we keep this simple architecture that we know and we love and also solve this SEO use case with zero performance cost? So then we thought what, if we just use headless chrome to render on our behalf, so here’s a breakdown of how that would work.

We have our regular users who are making a request and they would like a cat picture because who wouldn’t and as part of this approach, we ask our robot and to answer this, we look at the user agent string and check if it’s an own bot that Doesn’t render in this case the user can render so we serve the page as we normally would. The server responds with the fetch cat picture function and then the client can go and execute that function to get the rendered result by the way.

This is one of my kittens, which I fostered recently, which is super adorable. Now, when we encounter a boss, we can look at a user agent string and determine that they don’t render, and instead of serving that fetch cat picture function, we fire for a quest to headless Chrome to render this page on our behalf, and then we send the Serialized rendered response back to the bar, so they can see the full contents of the page.

So I built a proof-of-concept of this approach for web components rock and it worked. I wrote a medium post about it, and people really interested in this approach and want to see more of it. So, based on this response, I eventually decided that instead of my hacky solution that I would build it properly but then came the most challenging part of any project and I know you’ve all experienced it as well naming.

So I asked on our team chat for some suggestions and I got a tongue, so these are some of our top ones. There’s some great ones in their power renders use the platform as a renderer. However, today I’m very pleased to introduce render Tron. Let me render that, for you. Brenda Tron is a doc arised, headless, chrome, rendering solution. So that’s a mouthful, so let’s break it down. First off what is docker and why did I use it? Well, no one knows what it means, but it’s provocative in all seriousness.

Docker containers allow you to create lightweight images and standalone executable packages which isolate software from its surrounding environment in render Tron. We have headless chrome packaged up in this container so that you can easily clone and deploy this to wherever you like. So what about headless chrome? It was introduced in chrome, 59 for Linux and Mac chrome 60 for Windows, and it allows chrome to be run in environments which don’t have a UI interface such as a server.

This means that you can now use Chrome as part of any any part of your tool chain. You can use it for automated testing. You can use it for measuring the performance of your application, generating PDFs amongst many other things. Headless chrome itself exposes a really basic JSON API for managing tabs with most of the power coming from the dev tools protocol. All of dev tools is built on top of this protocol.

So it’s a pretty powerful API, and one of the key reasons that headless chrome is great. Is that now we’re bringing the latest and greatest from chrome to ensure that all the latest web platform features are supported with render Truong? This means that net your SEO can now be a first-class environment which is no different, the rest of your users. So just a quick shout out. This all sounds really interesting to you and you would like to include headless chrome in some other way in your to a chain.

There’s a brand new library, node library that was published just last week, that exposes a high level API to control chrome, while also bundling all of chrome inside that node package. So you can check it out on github at google chrome, slash puppeteer, so we’ve looked at the high level of how headless chrome can fit into your application to fulfill your SEO needs now it’s time to dive to how it works.

But I’ve been talking a lot. So, who wants to see render tron in action alright. So this is the hacker news PWA created by some of my awesome colleagues and it’s built using polymer and web components. It loads really fast and all-round performs pretty well. We can see that there’s a separate network requests which loads the main content that we see and we can guess that it’s affected by this SEO problem, since it uses web components which require JavaScript and it pulls the in data asynchronously.

So one quick way to verify this is by disabling JavaScript and refreshing the page, and once we do that, we can see that we still get the app header, since that was in the initial request. But we lose the main content of the page which isn’t good. So we jump over to render Truong the headless chrome service that is meant to render and serialize this for you. So I wrote this UI as a quick way to put in a URL and test the output from render Tron so first off.

What are we hoping to see because these bots only perform one request? We want to see that whole page come back in that one network request. We also want to see that it doesn’t need any JavaScript to do this. So take a look, I’m going to put in the hacker news URL and tell render Tron to render and serialize this and that using web components, and it renders correctly I’m going to disable JavaScript and verify that it still works.

So you can see it’s still there and it all comes back in that single network requests render tron automatically detects. When your PWA has completed loading. It looks at the page load event and ensures that it has fired. But we know that’s a really poor indication of when the page is actually completed. Loading, so Rena Tron also ensures that any async work has been completed and it also looks at your network requests to make sure they’re finished as well.

In total, you have a ten-second rendering budget. This doesn’t mean that it waits 10 seconds, though it’ll finish as soon as your rendering is complete. If this is insufficient for you, you can also fire a custom event which signals to rent Ron that your PWA has completed. Loading serializing web components is tricky because of shadow Dom which it straps away part of the dom tree so to keep things simple.

Rennet ron uses shady Dom, which polyfills shadow Dom this allows render tron to effectively serialize the dom tree so that it can be preserved. In the output, so let’s take a look at the news PWA, which you’ve all seen – and it’s also built by some of my other colleagues and we’ll plug that in to render tron will then ask render tron to render this as well and that I’m also using Web components, and then we have it.

So what do you need to do to enable this behavior with polymer 1? This is super easy and render tron doesn’t actually need to do anything simply append D’Amico’s shady to the URLs that you pass to render Tron and polymer 1 will ensure that shady Dom is used with polymer 2 and with web web components. V1. It’s recommended you use web components, loader jeaious, which pulls in all the right polyfills on different browsers.

You then set a flag to render tron tell it that telling it that you’re using web components, and it will ensure that the necessary polyfills that it needs for serialization get enabled so another feature of render Tron is that it lets you set HTTP status codes, these Status codes are used by indexes as important signals, for example, if he comes across a 404, it’s not going to link to that page, because that will be a really poor search result.

Now server, though, it’s still returning that entry point bar with a status code of 200. Okay, so it looks like every URL exists. Rena-Chan lets you configure that status code from within your PW, a which understands when a page is invalid, simply add meta tags. Dynamically is fine to signal to render on what the status code should be render. Tron will then pick these up and return that status code to the bot, so this approach isn’t specific to polymer or even web components, let’s plug in Fahnestock google.

Com and sees what happens when we serialize it. So that looks pretty good. Who can guess what javascript library was used to build? Google fonts angular render Trond works with any and all client-side technologies that work in Chrome and whose Dom tree can be serialized. The render tron endpoint also features screenshot capabilities, so that you can check that headless, chrome and the load detecting function are performing as you expect.

Unfortunately, this service is not fast for each URL that we render we spin up headless Chrome to render that entire page, so performance is strictly tied to the performance of your PWA. Renat Ron does, however, implement a perfect cache. This means that if we have rendered the same page within a certain cache freshness threshold will serve the cached response instead of rear-ending it again. So how can you get your hands on this today and how do you use it? Well, first, you need to deploy the random tron service to an end.

You’ll need to clone the github repo at Google, Chrome, slash, magnetron, and it’s built primarily for Google cloud. So it’s easy to deploy there. But if you remember this is a darker container, so you can deploy this to anywhere, which supports a docker image. So to make things simple for you to test our. We have the demo service endpoint, which you can hit at render Tron appspot.Com and that’s the one with the UI that we saw earlier.

It is not intended to be used as a production endpoint. However, you are welcome to use it, but we make no guarantees on uptime. Having this as a ready to use service is something we might consider based on the interest receive. So, just in case you’re wondering my boss’s twitter handle is at met, Matt s McNulty, just in case. You want to tell him how awesome I am so once we have that endpoint up you’re going to need to install some middleware in your application to do the user agent splitting that I was talking about earlier.

So this middleware needs to look at the user agent figure out whether or not they can render and if not proxy, the requests through the render tron endpoint, if you’re using purple server, which is a node server designed to serve production applications using purple. You simply need to specify the bot proxy option and provide it with your rennet on endpoint, if you’re using Express, there’s a middleware that you can include directly by saying app, don’t use render on top make middleware with the proxy endpoint and whether or not you’re using Web components, if you’re not using either of these check the docs for a list of community maintained bit aware, there’s a firebase function there, as well as a list of existing middleware that render China is compatible with.

If it’s not listed, it’s also fairly simple to roll. Your own middleware by simply proxying based on the user agent string, and that’s it, that’s all the changes you need to make to use, render tron today and all these bots can now be happy. Brenda Tron is available to use today compatible with any client-side technologies, including both polymer 1 and polymer 2. Thank you.


 

Categories
Online Marketing

Google Sign-In for Websites: Authorization

Our current recommendation is To let users authenticate first and defer, asking Permissions until you need to access an API In order to use a Google APIs, you have to enable them from The [ BPI ] console Then looking at this page You can find the scope strings that correspond to the Apis, you have enabled Each one of these Represents an API so take note of the ones you need Now. You can make requests from The client or from the server, Let’s look at the client first, There are two steps.

You first need to get a Permission from the user Check if the user has already Granted access to the API using hasGrantedScopes, Otherwise request the Permission by calling grant Use the scope strings. You Obtained in the previous step, Once the permissions Is granted you can make API calls on Behalf of the user To send a request to the Google APIs, you can use gapi, For example, if you want To use a Google drive API at the client Module then drive module with the API version Using client drivers is simple In this case.

I’m grabbing The list of files and folders in the users root directory. Ok, let’s see how we do the Exact same thing: on the server side, Getting the user’s permission, Happens on the client side Use grantOfflineAccess To get a permission, Offline means that You can access Google APIs, even when the user Is not using the application Upon user’s consent, your Client will receive an object that contains authCode, And now you can send The authCode over to the server using a Secure HTTPS connection On the server side use a client Library to exchange authCode with a credential object: Which includes access_token, request_token and id_token, The access_token Is a primary key to access the user data? Through Google APIs, The refresh_token is a key To renew the access token, An id_token represents The authenticated user, as I mentioned in A previous article Remember that the Client libraries take care of refreshing, the Access token, if it has expired, For this reason, you should Store the credential object in your database.

After each request, This ensures you always have The latest credential object Once you’ve got the Credentials you can make API calls by using The [ INAUDIBLE, ] APIs, client library, OK, So we have gone Through the steps we recommend in order to use Google sign-in effectively, If you have any Questions ask them at stackoverflow with A tag Google sign-in and we will do our Best to answer them, Thanks for stopping by, I hope you will enjoy coding.

A smoother sign-in experience for your users with Google sign-in [ MUSIC PLAYING ]


 

Categories
Online Marketing

Intro to ARIA — A11ycasts #13

So, for instance, I’ve got this input here, wrapped in a label and that’s going to produce a visual UI like the one that you’re seeing here this radio button.

But that’s also going to create a spoken UI based on the built in semantics of those native HTML tags. Now, if you’re not quite sure how all of that happened, or why those semantics matter be sure to check out our previous episode on semantic. So I’ll include a link down in the show notes and we can also maybe drop in an annotation up here for you to click on. I just I have some background on how semantics work and why those are important in the first place now.

This is all good and everything, but there are instances where a simple layout in native HTML just aren’t going to cut it and so to handle these situations. We have the web accessibility initiative accessible, rich internet applications, spec, which is a bit of a mouthful. So you oftentimes see this referred to as wai-aria or maybe just Aria, so audio works by allowing you to specify attributes on elements which then modify the way.

Those elements are translated into the accessibility tree. So let’s take a look at a really basic example. Just to show how this works, so, if you create a a plain checkbox a screen reader is going to announce it. As you know, a checkbox it’ll tell you what its label, if it has one like we do in this case, where it says, receive promotional offers and it’ll also tell you the the state of the checkbox right, whether it’s checked or not, but let’s say you’re in A situation where, for whatever reason, you need to implement your own check box using something like like a div right, maybe you need to style it in a really special way.

So, in this case, we’ve got a div checkbox we’ve created here, and the screen reader is going to give the user really like no indication that this element is meant to be a checkbox. It might announce the the text inside of the div there, but it’s not going to tell you the role of the element. I can say it’s a checkbox. It’s also not going to tell you the state so excited you sure is going to be able to see these visual cues and they’ll be able to figure out that this is a checkbox.

But nothing is going to be announced to our screen reader users and that’s a really big problem. So using Aria, we can actually tell the screen reader about this extra information here up at the top, I’ve got some custom checkboxes just created using gives down at the bottom. I’ve got some checkboxes using the native input element so using voiceover. Let’s see how these are announced differently: voiceover, I’m chrome, custom checkboxes in custom check intense group with three items there and then slices group with two items: heading ten times check, check box and then slices uncheck, checkbox voiceover off.

So you see there that the the div elements just are announced as groups. It doesn’t indicate to the user in any way that these are checkboxes where it’s the native element. It indicates it’s a checkbox and it tells you the state whether it’s checked or not. So, let’s see if we can add some Aria to improve upon this so over in my dev tools, I will select these the checkbox elements and I’m going to start off by just giving them a role of checkbox and I’m also going to give them a state Of Aria, checked of either true or false, depending on you know the actual state of the element there.

So if a role checkboxes to the one Aria checked equals false and let’s try it again using the screen reader voiceover, I’m dropping custom. Checkboxes 10 pens check the checkbox and then slices contract checkbox always go over all. So adding that role and Aria checked attribute causes the middle Union accessibility tree to actually have the desired role and state without changing. You know anything else about the nodes, appearance or its behavior, which is pretty awesome right, we’re just adding in additional semantics using Aria.

So in terms of the accessibility tree, what ru does is it really allows you to subdue like tree surgery? So you take the accessibility tree as generated by plain HTML. You add Aria to that, and now you get a different accessibility tree and it may be subtly different or it could be radically different, depending on what attributes you use, however, keep in mind that this is really the only thing that ru changes.

It doesn’t change anything about how the element behaves on the page. For instance, it’s not going to suddenly make your element focusable, it’s not going to add keyboard event, listeners for you or anything like that, or you does not change behavior in any way. It really only is for adding in additional semantics. So if you, you know, if you’re making a custom control, it’s really on you to make sure you go back, and you also add in that keyboard support so you’re kind of like maintaining that that consistent experience for your users.

So now that you understand more about what ru is and kind of some of the basics of how it works, I want to cover some of the things that Aria will. Let us do in our application, as we saw in that check box example. Aria can add semantics to an element where no native semantics already exists. So, for instance, you take a div element, it has no built-in semantics, but we can use Aria to be able to role.

We can use already to give it a check State, for instance, build a custom check, box or radio button, or something like that, or you can also be used to modify existing element semantics. So, for instance, let’s say I’ve got a button element that I want to. Actually turn into more like a toggle button, so I can on/off switch type of control. I can give it a roll of switch. I’m give it an already check state of true or false, and now I’ve sort of modified the semantics of this control, and now it’s more of a even more specific kind of thing.

It’s like a toggle button right to switch button. It’s important to note here, though, that the switch rule is part of the newer aria 1.1 spec. So, as I’m recording this, you know there’s probably a number of assistive technologies which do not support this role. Just yet, just like all web standards. Aria is you know, constantly evolving and advancing to try and keep pace with new UI patterns, so that’s something important to realise as well right, if you, if you come across an aria rule, you also want to check for the support of that role in assistive technology To make sure it’s widely supported, and then you can use it another thing or you can do is it can express semantics and UI patterns which really like don’t already exist in HTML, and I think this is where Aria kind of comes into its own Aria.

Basically, will let you create accessible widgets, which are not possible using plain HTML. To give you an example. Here is like a tree: widget component, okay, we can take an unordered list and add all your rules of we tree item and group and add an already expanded attribute to a few those children and now we’re expressing the more rich semantics of this tree element and Again, there’s no tree tag in native HTML, so it’s something that you know we wouldn’t be able to build otherwise without aria, which is really important.

Another thing we can do and as we saw this in our previous episode on labeling or you can add extra labeling and descriptive text to an element right to give that element an accessible name. So, for example, if you have like an image only button which doesn’t use an actual image element, so you don’t have access to an alt attribute or anything like that to put alternative text on it. You can still use Aria.

You can use Aria label to give that element its own accessible name, and that way you can have it be announced properly by a screen reader to those users, or you can also express semantic relationships between elements which go beyond just like standard, dom parent-child sibling relationships. So, for example, a more complex relationship is something like this element controls that element over there.

Even if they’re not like you know, direct parent-child or anything. So in this case right here, I’ve got a button which controls whether a particular part of the page is visible or hidden, and it does this in the form of kind of a disclosure widget. You can see here where it shows advanced settings. We’ve specified using Aria controls – that’s actually controlling this group of elements down here for these Advanced Settings checkboxes.

So even though they’re not parent-child, they’re, actually sort of like siblings. We can create this new relationship indicating this element over here controls that elements over there, which is really cool and finally, Aria, can make parts of the page live, so they can inform assistive technology right away when something changes – and we saw this in our previous episode On building alerts, so we add role equals alert to some element.

We drop some new content into it and then it’s going to announce that immediately through assistive technology to the user. So are you giving you a lot of tools to make sure the experiences you build? Are semantically rich and can be easily understood by assistive technology? Now we’re definitely going to be diving into the subject more in the future, but that about covers it for today. So if you have any questions, you can always leave them for me down below in comments, or you can hit me up on a social network of your choosing.

As always thanks. So much for reading I’ll see you next time, hey. If you enjoyed this episode of Ally cash, you can always catch more over in our playlist or click. The little subscribe button and you’ll get an email notification whenever we launch new stuff on the blog. As always, thanks for reading


 

Categories
Online Marketing

Turn Clichés into Adventuring Gold in 5e Dungeons & Dragons – Web DM

Lord and you’ve once again saved Kingdom onea from a powerful threat today on web DM, we’re talking about cliches and in fifth edition Dungeons & Dragons, so we’re going to adventure in a dungeon and fight a dragon yeah and not be cliche about it.

Yes, we’re talking about those things and dungeons and dragons that have crept in over the years, those yeah meeting in taverns and the orc invasion, and all those things that veteran players will roll their eyes at snooze boring done this a million times yeah. What we can do to freshen those things up and maybe identify some of those cliches for the newer people who are, you know, coming into role-playing, games and Dungeons and Dragons the other first year they want.

They want to. You know, avoid some pitfalls or something. So I like a good cliche, because it’s classic you know well, I mean cliches early cliches because there’s something that people like they get told so many times that you just already know the story before it you’re like. Oh, it’s that one huh right, but we’ve been doing that with stories for thousands of years right. There’s a couple things going on number one: they’re cliches, because they’re done poorly and and if they take the easiest route to portray something or present a challenge or scenario or something it’s either done poorly.

It’s done haphazardly and this can be forgiven right, yeah, very few. Dungeon Master’s are professional, storytellers, mythmakers linguists. You know all these kinds of things: actors, improv actors, like all of these things – are kind of the job of the DM yeah, but we’ve got day jobs. We’ve got other things going on dungeons dragons is not our life as much as it really is kind of our lives. We can forgive the dungeon masters of the world in the 40 plus years that Dungeons & Dragons has been around for developing cliches.

That get used a whole lot because they’re convenient and that’s probably, why you want to use them. They are classic. They became cliches for a reason they were popular or they evoke some kind of emotional response from people they liked them, because you know everybody pretty much makes the the orphan. You know parents were killed right. I just blah blah blah right. I can’t tell you how many of my characters do that, but sometimes you know why not start the adventure with full family and that’s you got to support them and you know you’re a family man, let’s run through a couple of a couple of cliches and go Through different ways to subvert them, here’s the one I’m thinking of and maybe you’re thinking of something similar yeah starting in a tavern in a tavern beginning, your campaign in at average just having drinks having drinks sitting around yucking it up, mmm you’re gambling, maybe there’s some Carousing going on just fight and then somebody bursts in somebody bursts in the twit call.

The quest giver shows up right, it’s played out in display, and it’s a it’s a joke – that your character you’re, that they were in a tavern that they would meet and start in a tavern all right, let’s kind of think about it forum in taverns or places Where people gather yeah it’s perfectly natural and and and very relatable, a kind of beginning, it’s convenient yeah. I look at myself how many times have myself in a tavern at least three times a week at least right quiz, a quiz twice, and I played Indiana terrible.

So literally me, as a person goes to a tavern three days, seven days a week. Huh so am I living a cliche life, or am I just living? My life depends on how many mysterious Wizards come in and give you a quest that changes your life. Well, it’s happened a few times. It starts you out on the hero’s journey, cliche, here’s what you can do to liven it up. First off you can change the environment dub. The purpose of the tavern is that it’s a central location, that’s familiar to everyone.

It’s a touchstone, so maybe you don’t meet up in a tavern. You meet up at a fair or a festival or a town square, or something like that. The tammer is just a convenient excuse to have the characters together in one spot, relaxed they’re not expecting combat and, at the same time, there’s a lot of stuff that they can do as they’re working out who their characters are waiting for. The plot hooks and and everything to sort of draw switch that up.

Maybe it’s a tournament that they’re meeting at and the player characters, are either participants in the tournament or spectators or something like that. Yeah, someone or you can go back and you can say well what is it about meeting at the tavern that appeals to me? It’s rustic its familiar, it’s it’s, it’s close. It suggests characters who are low level who have concerns like eating and drinking and living in a place, the tavern kind of blogs, all that and and and you can have it – you know, be something that that leans into the cliche yeah.

That’s that’s perfectly fun. You guys are meeting in a tavern, that’s probably what you guys do three days a week or I could just be an alcoholic, that’s true, but you don’t have to you, don’t have to be in a tavern, though that is true. Thank you. Yes right. Another cliche, of course, there’s a tower and in that tower, is a princess, yeah and and around there, probably some kind of beast or drag some kind of beast or dragon or a wicked witch or stepmother, or somebody that’s keeping her locked in the the princess.

In a tower is one of those where I, you know a big surprise, surprise, a game like The Witcher or a setting like the witch or The Witcher stories which have just started to read sort of tries to subvert those things and says like all right. These are the fairy tales, but what if they were real and what, if they were real monsters and what? If there was a monster hunter out there to take care of them yeah, you know the princess in a tower.

It could easily be a prince or some other kind of redeployment or something the point of it is, is that it’s a it’s a person in a tower or imprisoned some way in which they can’t get out themselves, and maybe they’ve been unjustly imprisoned or maybe they’ve Been just the prison’s. What? If what? If the princess in the tower is there because she’s, not a particularly good person and keeping her locked up, is sort of keeping everyone else safe yeah, but her agents out in the wild have spread the rumor that the innocent princess has been wrongly imprisoned by her Wicked stepmother and she really needs to be set free, yeah cuz.

What, if she’s a little bit more in lines with? What’s name Elizabeth Bathory, Bathory, yeah yeah, I mean the bloody Duchess or whatever is correct. You know they can’t kill her because she’s somewhat royalty yasur’s. They can’t they have got to keep her the away from rebel right because she’s going to just keep bathing in the blood of milkmaids, and maybe the the characters catch wind of this rumors and as they get closer and closer to what they see is like well.

If we rescue the princess, then we’ll win her hand in marriage and become princes of the realm and blah blah blah blah blah things like that. But as you get closer, they sort of uncover the mystery and realize. Well, maybe this person that’s being imprisoned, isn’t quite so yea good or maybe maybe it is maybe the fact that they’ve been imprisoned. It suggests a problem in the kingdom or the realm changing something about it, changing either, who was imprisoned, why they were imprisoned or the conditions around that imprisonment or what about this? What if, yes, there’s a princess, there’s a tower and there’s a dragon, but the princess is an evil sorceress and she has imprisoned a silver dragon and keeps this story going out.

So adventurers show up just so. She has something to feed her dragon, that’s imprisoned, they get up they’re like oh we’re going to defeat this dragon to get there like. Why are you chained up and then she hits them right? Oh, thank you. I don’t have to go and find food to know. I have to go out and buy them food today, a lot of times you just hint at a cliche or something how players will run with it, expecting something going off of assumptions that they bring themselves.

This is meta gaming on the DMS part, oh yeah. It’s fine, it’s how you build interesting stories and met it, there’s nothing wrong with metagaming, and so the players start expecting something they bring their own assumptions. They vocalize those things while they’re discussing it, the DMS listening to what they’re having to say, adapting his campaign or her campaign to what the players are doing and now all the sudden the players are expecting.

One thing you flip it on them: they realize that they’ve been making the wrong assumptions about stuff that that the way that they’ve been approaching, this has been in error, the entire time and now they’ve gotten themselves in a sticky situation that it’s harder to extract themselves. From and that’s kind of how you is honestly how you deceive and lie to the players and make them make them their own worst enemies, sort of practicing diem judo against ya, you have you have to use their own expectations and assumptions against them, because if they Only have one clue yeah and they try to extrapolate to the end yeah.

Well, you might need to get on one or two more clues. You can triangulate that, yes, you need to feed them enough breadcrumbs that they keep going and feel like. They have information, but not so much that they have a full and clear picture about. What’s going on right, the gaps that they’re filling in or where they start to stumble and make wrong assumptions about things and then as they get to the climax of the particular adventure or campaign or whatever they realize that they’ve been making some wrong assumptions now? It’s that’s difficult to pull off.

You can easily get in a situation where the players like I have no idea. What’s going on and the DM z — being stingy with information, there’s a delicate act, yeah feeding the characters, misinformation and build and letting their own wild expectations get the better of them, but it can be done so sometimes the DM can do a bamboozle. So an another cliche, especially in this day and age of television, film uh-huh, the zombie horde good grief, everybody’s – got a zombie horde right, but he’s got his zombie whore and the fathometer slow, slow.

They puke, they run, they jump. They’ve got spikes they’re noxious. You know. I you know obviously they’re the one, interestingly enough, zombie horde that I’m less concerned about and actually kind of excited of seeing is the one that’s that appears in the later seasons of Game of Thrones. I’m I’m, I think, that’s a well done one just because the villains are interesting. The dilemma is interesting.

The world that it inhabits presents. This challenge is an interesting one. A zombie horde like that in Dungeons and Dragons is like well. We’ve got like 20 dragons on our side and a bunch of wizards that’ll come around and that kind of zombie horde and a typical Dungeons & Dragons setting is like a challenge for an afternoon. You know, let’s say an existential threat to all civilization itself and more the kind of a nuisance if they’re just regular as zombies like Walking Dead, and then you just drop some wizards and whatever in there like they’re, going to start mopping that up pretty quick they’re Going to start mopping it up, so how you? How do you do a zombie horde in Dungeons & Dragons? That makes it interesting or makes it you know a genuine threat and I have used them in the past in conjunction with something else.

So I’ve used a zombie horde in the past after the realm has been weakened by years of famine and drought, which has led to widespread death, which means there are a lot of unburied bodies and abandoned villages that there’s no one there to put up a defense Against this thing and every victory for the zombie horde feeds its army and the zombie horde is being led by vampires and Lich’s and ghosts and things like that.

It’s a whole necromantic threat, not just a horde of the shambling dead. You can do it sort of in the wake of a war or something you know, there’s a massive war. That’s come through. Untended, battlegrounds and dungeons and dragons would be terrible things right. A battlefield is already kind of a bad thing: medieval angels, disease, pickers that come by after the battle looters and Pickers that come by afterwards in Dungeons and Dragons.

It attracts carrion, eaters and other eaters of the dead ghouls, and things like that when what? If, in the wake of a massive war with all these unburied bodies or mass graves, or something like that, all of the death and concentrated you know dying and negative energy cause undead to spontaneously rise, and now the players have to deal with spontaneous pockets of undead. Rising up and it could quickly get out of control because, instead of one massive army of the Dead reading south, it’s a lot of little fires, yeah undead that keeps spreading you’re completely surrounded by that you’re, completely surrounded by and and if the army.

And if the realm has already been weakened by pervasive war and death, and things like that which usually comes with disease and famine and all those other fun things, that’s how you do it. So I find zombie horde is a good complication, not necessarily the centerpiece of a campaign, but something that rises as a consequence of some other kind of calamity. I remember you did that in in our fourth one of our fourth edition campaigns.

Yes yeah. This is a big problem with the undead, but they weren’t the problem, the people drumming and controlling them for the whole problem right, you know, so it became a thing about avoiding the zombies altogether cuz. There were just too many yeah like I mean they were literally everywhere right and it’s you know, a bunch of for three or third or fourth level characters aren’t going to take on an entire horde, but that one got drumming over there yeah, the one guy who Looks like he’s controlling them.

Yeah now becomes an exercise in getting to him right and around every other yeah. It was a lot of fun yeah, another one where we got the Dark. Lord, the Dark, Lord. Yes, the Dark, Lord, the evil, big bad evil, guy yeah rules from The Dark Tower and yeah. So why does this work in middle-earth? It works in middle-earth because Sauron is a part of the mythology and the creation or everything omnipresent across thousands of years and is the enemy right very often in Dungeons and Dragons.

That’s less the case and the Dark. Lord type characters, often they’re just for the campaign. They’re not embedded into the world and meshed in it yeah they’re more trying to become a Dark Lord trying to become a Dark. Lord, you know you can avoid that. I think, by by having the Dark Lord, be either a myth or a rumor or something that a cabal of equally nefarious, but maybe less mystical adversaries have concocted sort of a story that they’ve made to present and everybody’s afraid of this Dark.

Lord. But it’s really just a figment to fiction perpetuated by something else. You could lean into it and say yeah. This is a Dark, Lord and the kingdom that this this Dark. Lord rules, this realm, that it governs, is a nasty horrific place and the people there are oppressed and – and it’s not a pleasant place to be, but you need to take that seriously. How do they deal with the neighbors that they live with yeah? What did they do for trade for food? It still has to be a functioning society in some way, otherwise there that there would be no power base that this Dark.

Lord could draw no one there to feed its armies. No one there to you know to pay the taxes. You know it’s extracting from the from the populace. Also, the Dark Lord at some point needs to have experienced a defeat in the past and they’re just lying in wait lying in wait same with Sauron uh-uh, Voldemort Voldemort, another great Potter series. You know he was this thing he got defeated, oh he said.

Oh, don’t worry, he’s gone yeah, you know, or even the Emperor and Darth Vader from an oratorio. They have weaknesses. You know, maybe it’s weaknesses like Darth Vader has weaknesses which is like you know they. It’s. The weakness is the emotional attachment to to the people who stand against him: the there’s a magical weakness or something like the Horcrux that that the party needs to exploit and find in order to overcome the the Dark Lord.

But I think like having that one massive brooding kind of dark, evil figure, that’s irredeemably evil or wicked, or something like maybe they’re, not maybe in the best villains, don’t see themselves as villains and see what they do as a type of good. Yes, and so maybe it’s entirely possible – that the rumors coming out of the Dark Kingdom are of a horribly oppressive place where everything is terrible and horrible.

But when you visit it’s not set not that bad yeah and – and there is a reason for several of the things that are happening. Maybe there is a greater threat that that Kingdom is fighting often so that has to be a little harsher. It has to be a little bit more brutal or maybe they look at it and say like no well guess what I don’t see myself as a wicked person. I see myself as the lawful ruler of this land.

These are things they’re mine by right, and I have an obligation to the to the subjects of my land and I take care of them and in return you know they they give back the fruits of their labor kind of thing and making the villain more three-dimensional And its motivations, a bit more murky yeah, can can can really subvert that cliche. Well, yeah, I mean I mean hell, you can wrap them all up together and the party gets over there to take on a Dark Lord, but you find out that he’s just trying to protect his kingdom from an invading zombie army controlled by the dragon that stole His wife and his whore wage in a tower.

You learn all of that, while starting the tavern and you learn all that. One attack from my fairies, wizard from a mysterious, mysterious, wizard and the mysterious wizard is a great, is another great cliche. It’s the idea of the wizard who has all-powerful, but it’s just like, like whatever that kamek kamek is of the wizard like hand me that book, but the book is right. There give me the book just give me the book cuz that’s kind of what it’s like right right, but they have better to do.

They have better to do so. Why is that wizard running around all mysterious, like seeking aid from first level, characters to go? Do stuff well, there’s variety of reasons: maybe it’s busy, maybe it’s not the real wizard and it’s like a projected image or something like that and the real wizard is dealing with yeah elsewhere. Maybe the wizard is just powerful by reputation and not necessarily by actual deed.

Yeah there’s a lot of different ways that you can subvert it. This is one of those cliches that I don’t really can. I don’t like to use that much just because that kind of quest, giver, here’s the character, here’s the plot hook, I’m going to shove it off on the PCs, is not something I usually like to do. I usually like to include powerful NPCs that have some significant weakness that only the party can help shore up when you find yourself either as a DM or a player.

Saying like you know, one of the character I’ve got or the idea. I’ve got for a scenario or an adventure or something that’s kind of cliched. I find that it’s best to go back to the source. What is the origin of the cliche that that you’re, using or that you may have accidentally fallen into and examine that? Because I find very often when you go back to the source where these cliches originate, you find something fresh and new and interesting, something that’s multifaceted and with depth that, as it’s been copied over and over and over and over again ad nauseam that it’s lost.

That so in example, I’m thinking of his Conan Yeah right, like Conan for a lot of people less so maybe than in the past, is a dumb barbarian who has a great sword and a fur loincloth and grunts and punches camel, punches camels and hates magic. And it’s just kind of a big dumb bully you know, but reading the original Conan stories he’s much different and his savage upbringing born on a battlefield raised in the hills of of Samaria and and and that that upbringing that he has imbued him with a savagery That civilized men lack and yet he travels through the civilized lands getting into scraps and adventures and thefts and heists, and he’s a pirate captain one story and he’s a mercenary company.

The next and now he’s off here, fighting pics and other sort of other barbarians, and then the next minute he’s fighting Stygian, cultists and those stories are evocative and feral. And that primal and you see Conan in a variety of different ways. And if, if the Conan you’re thinking of is lumbering towards you muscles bulging with a giant sword, then the real Conan is lurking in the shadows behind you and you don’t see the knife that he’s got that you’re about to be gutted with right.

So Lord of the Rings is another great one: yeah it’s been copied so often and and the the amount of fantasy literature that has grown out of the middle-earth stories. It’s worthwhile to go read the stories. Don’t read the movies they’re great, I like them they’re fun, but they also have a style to them. That’s a little played out their action movies kind of write, fantasy action, movies, yeah, like going back in like rereading Fellowship, is it’s a fun movie, but at the same time it’s aged and yet going back and rereading fellowship is a different thing entirely and you spend Time with the characters – and you see the world-building going on yeah – don’t skip the songs read through those are the kinds of moments where, if you’re wanting to freshen up a cliche, going back to the source yeah using that original source as inspiration and forgetting all the Derivative stuff that’s come after can be a good way of livening up a cliche or giving you a fresh perspective on it, so that you can then subvert it in a different way than maybe it’s.

I don’t know. I don’t know if we might have to edit this later huh but kind of the the main hook of two of annihilation, that that’s what it is. I mean everybody kind of knows that there’s a magical disease and you can’t be brazed back right who were previously raised or being affected and they’re sick, yo. Guess what you get employed by a wizard who’s sick. I literally can’t go adventure can’t go.

Do that yeah! Normally, in any other day, they just go, do something about it, but no they’re, literally sick and losing hip hip points every day and they need someone to go. Do this thing go, do this thing and that’s a good way to to let the players expectations? Sort of propel the action of the story, because then it’s like the player should be thinking themselves. If this wizards so powerful, why does they? Why do they need us yeah, which must mean that they may be either are not as powerful or there’s something else going on, and so those are the kinds of questions that players should be then asking themselves yep.

Why in the world, is the this NPC? Acting this way and the DM, if they’re thoughtful, if they’ve, given their NPC’s, proper motivations and and flesh them out, they will be able to answer that question, and it’s in asking that question. Why is this powerful NPC approaching me for aid that they can start? The players can start to piece together clues about the threat that they face? Why in the world in the great city of Oracle, apollon teen what a lot? What a powerful wizard ask? A bunch of lowly six level people to help it kill a demon.

The answer to that question is obviously they cannot do it themselves, yeah. They could and revealing that information reveals a key weakness for them and that there’s something that the party or the players need to do need to help with and and it’s vital and maybe they you know the NPC’s, don’t want to reveal that information and reveal their Vulnerabilities but the players can piece together the clues and go okay, yeah uh, okay, and then they can start in piecing.

Those clues can learn more about the threat that they face, learn more about their allies and and sort of develop an appreciation for the campaign that the DM is trying to run for. Well there. You know

Need a logo????