(upbeat techno music) - Hi, so I'm going to show mainly the things that I like about Chrome DevTools.
Some of them are old, some of them are new, so I hope you can find a couple of things you don't know, and you can take back home. I'm going to start with, we're going to use Web Direction Summit website to show some of the things, I hope John doesn't mind. So there are a handful of ways to get into DevTools, but let's start with some keyboard shortcuts. So to start, you can do command options I for inspector, and that opens that up, so i for inspect if you want to remember that.
If you want to start with a consonant, you can do command option j for the console. I remember that by JavaScript for j.
We can also do, if we close that for a second, and we'll do command option c, opens up in inspect element mode, so you see over here is the icon is what needs highlighted. Which pretty much we can click on something, and it'll take us to the element that we want to inspect. If we, in most cases, we want also see the console at the same time, you can just press escape, and it brings up the console in the bottom. Hold down escape back to hide that.
So let's start with the element step, which, I think it's one of the ones that, this one and the console is the ones that we use the most, and we'll look at a few other ones later.
So while we are here, we can navigate all the notes with arrows, so I can go up and down, and I can close them, and open them with the right and left arrows. I can actually drag elements around if I want to change the order of stuff, or if I don't like that, I can delete that note all completely.
We can do live editing, which, I guess most of us know already, and just type things, we can, or you can just right click that and select edit as html.
If we want to just edit stuff on the page really quickly, we can add to the html tag or the body tag, we can add content editable over here.
So if I do editable here, now I can come over here, and I can do, I want to select that, a different line, let's see, I can change that, I can change whatever I want it to be, and it's just easier to edit things on the page that you can work with.
If I have an element, and that's selected, and I can't see it on the page, I can again right click to select scroll into view, and it brings it back into view on our webpage, and another thing that's more, also for JavaScript, you know when we have, if we use, we can use, something quite magical, for each dollar zero to use the last element that we selected on the page, so if I use that in combination with jQuery, and I'll do a dollar, and then braces, with dollar zero, close enough, or not.
Let's have a look at just the dollar zero, and we get the element again, and then you can go with one, two, three, and four backwards with all the elements that you've been looking at. If we are moving to the styles pane, you know that we can change stuff in it, for example if you want the font size to be bigger, we can just make it bigger, or smaller, and do all kinds of things, the one things that I like about that is, for example, if we go to colour, if we click on that tiny thing, it brings you a colour picker, and you can actually select other things on the page, let's say I want a different colour to be whichever, and it will adjust the colour of what we are selecting, but the nice thing about one of the new things that you have in, we completely missed that, so let's start again. One of the things that I really like in the new release of Chrome DevTools is that we now have an option to have colour contrast.
It's called, colour contrast evaluation, so pretty much, to do, if we want to enable that, we need to pick the background, and this is our background, and then it tells us, it gives us a line that tells us where the low contrast is for accessibility. So if now, if I pick this colour, it will tell us, that yeah, it passes, but if I went, and chose a different colour, then it fails accessibility. So this is available, I'm doing that on Chrome Canary, so version 64, I think the latest release of Chrome is 62, so that's coming in the future.
Other things that we have here is we can force element, pseudo element states, so for example if we look at links, we have an options here that we can do active, or focus, or hover to see all the different states. The other thing that I like to look at is that we can look at all the event listeners that we have on the elements in the same pane. Before we finish with the styles pane, I want to look, you have, where is it? Missed that, we have an options to see computed styles, which somehow, I don't see it, but, which I think it's over here on the right, and you can see your box model representations, which we can actually edit here.
So let's pick something else, for example, and we inspect that, and we come over here, and we want that to be a bit bigger, and let's do this as 300, and we can do the padding over here on the bottom, that's on the top, it's a minus margin, but we can do that bigger, and it actually implemented in place, but you can see that they edit that in the Mac in the HTML, with all the changes we've been doing, so not ideal, but it gives you another place where you can play with the box model, that way.
If we want to see where the styles, where is it, are defined, we can actually go and visit the actual stylesheets by just clicking on the links and see where they are defined in our stylesheets.
The nice thing that you have, also in the recent versions of Chrome is they have better support for grades, so for example, this is a Monopoly that was published on CodePen a few days ago, and if we look at the structure, you can see that we have a class of board, which is display of grade, and when we hover on that, we can see all the different cells in the grade that we have.
If we want to adjust that, so for example, let's change the grade gap while we hover here, and we increase that, you can see the change live as well, so that's new in Chrome 64.
If we move to the console, and I have a different HTML page here, and the markup is just pretty much for the presentation, for example, so one of the things that I have in console, if you want to go to preferences, you can get to preferences by fn one, and one of the things that I want to look here is the option to preserve log, which I can't find that now, that's awesome, and the network, which is basically if you are changing, if you are redirecting pages, and you still want to keep your log for debugging, that's very useful, but, for example, if we look at over here, and we have a function, and we don't know where it's defined, and we want to find where it's defined, we can right-click that element, and we can do break on, and we can do attribute modifications, and if we look at my simple JavaScript, we have, when you find that element, we only have one p tag on the page, change the colour, so over here when we come back, if we do right-click, we do break on, and we go to attribute modifications, it will create a break point. I don't know if you can see over here, so now when I click on that, it takes me into debugger, and it stops at the place where that method has been defined, and then I can pretty much continue for now on that one, because I don't care about that as much.
Now we know a usual console log, okay.
So if we, where is my console, and we get a normal console log that's easy enough, but we can also in template things inside our console log by using percent s.
In this case, if I run that, and we refresh the page, you'll see that I'm interpolated string.
Let's look at the next example, in this case, we can do it styled, in case you want it big and ingrained.
So if we run this again, we get a console log that is styled, just because, yeah, many use cases for that. Console error gives us a completely different look for our error message, and then it shows us also the line in what we call that, and one of my other favourite is console table, so in this case I have a constant of cats, which is an array of objects, and if I run that now, I get a display of table, which, I think it's awesome. Ginger and Edwards are my cats, by the way. Gingy is seven, and Edward is two, obviously. We can also do things, we can also use the console for testing, so this will only call when it can't find that, so in this case, we are looking for a p element with class id that contains ouch, and then it will only be called because we don't have that on the page, so if I refresh that, it gives us the assertion it failed for wrong element, and again, it gives us where we called that console log from. One more thing that we have is yep, and then we get the element is with all the things that it has on it, thank you. Don't want that, but I want all this.
So for now, sorry for my commenting, but in this case, what I want to do is I group all the information in one, so in this case, I get my array of cats, and I group them together, and what I get in this case is Ginger and Edward, and you can actually collapse that, and get the information for each one.
You can count, and I'm only gonna do a couple of those, because I don't feel like un-commenting all of them, but basically it counts the number of times we call that, and it increments that every time we call that again, and the last thing that I want to show with console is you can time requests.
So in this case, I start with fetching data, and then I'm fetching from GitHub with promises, and all I do is I display the data, but I want to see how long it took me to fetch that data, and if I run that again, it shows me that fetching data took 928 milliseconds.
We all good, shall we continue? Cool, where am I? Yeah, source tab, let's go to the source tab. So we are back here, and if we look at sources, the one thing that I like, one of the things that I do want to mention about that is, for example, if you go to JavaScript, and it looks minified, and it's hard to read, we have a pretty print option on the bottom, and when we click that, it makes everything more readable and nicer. There is also a new thing in Chrome 64, so you can check that in Canary where we can go into local overrides, and to set local overrides, we'll start at we'll define a folder, a directory on our system, and let's say select documents, and in this case, I need to allow so it can create file, the files on my actual system, and in this case, if I'm gonna go to network now, and let's pick one of the stylesheets, and again, let's do pretty print here, and let's select this element, and what do you want to do with it, change colour, where am I again? So if, where is my colour, that's not my colour, but let's try that, let's do that this way, and we made the changes, and we go back to sources, and the change is made, and all we need to do is basically do control save, and as you can see, there is a purple dot next to the file, and now if I refresh the page, and I do empty cache with hard reload, we should still have changes in place, go on, do it, do it. If my network is gonna work, is it gonna work? Yes, also so you can change JavaScripts, stylesheets, extra tools, text on the page, and you make all this changes and just keep them for later. Another nice thing that you can do about it as well is once you have all your changes, you can right-click, and then you can save as any CSS file that you can use in your project, something different. I want to work to the network tab.
So the network tab, in this case, shows you how long it takes to load all the files, and on the bottom, you can see the 78 requests, and how much they all took to download, and how long it took to run, but the other things that I like is that you have here, which is, you can throttle the speed of how quick, or slow the page loads, so if you want to, and I don't want to do it now, but you can do a slow three g so you don't have to guess how long it takes to download, to load the page, you just have to see that in real life. The other thing that I want to see, to show you is you have, I don't know if you know that, toggle device. Toggle, So we did network throttling, devising relations, and then we can choose the device that we want to have a look and see how the layout is, and it will actually emulate touch events as well for you, and the last thing that I want to talk about is the audits. Let's get out of this and get back to normal, and I want to talk about the audits tab.
There's a few more, but this one is integrated with Lighthouse.
So Lighthouse is an open-source automated tool for improving the quality of web pages.
You can run it against any web page public or requesting authentication.
It has audits for performance, accessibility, while I do this, let's do this and see how long it takes. So it has audits for performance, accessibility, progressive web apps, and more. You can run Lighthouse in Chrome DevTools all from the command line, or with a nod module, and it used to audit about 50 different metrics and params, but now it has more than 100 things that it does. It makes recommendations about caching, compressions, content to app accessibility, loading performance, unused JavaScript, slow server responses, caching headers, I see all recommendations, legible font sizes, and etcetera. So all kinds of things that you can look, and it also gives you suggestions, and recommendations of how to improve what you have, and I think that's it for me. I hope you found a couple of things useful. (applause) (upbeat techno music)
$%^&Erwin van der Koogh-'Serverless' Back-end Development for Front-end Developers.srt#$%^
(energetic, rhythmic electronic music) - Alright. So, like I said, I have a confession to make. The confession that I have is that the last bit of front-end code I wrote would've looked something like this.
It had tables and spacer GIFs, and it would've looked like this if you would've had syntax highlighting because it probably actually looked more like this. So, like I said, I'm a back-end dev.
I've been writing sort of back-end stuff for a long, long time and I would like to apologise for our sort of role in the sort of schism of software development because what happened is that we sort of went for sort of front-end developers and we...
We went from developers to sort of front-end developers and then we went to the back-end developers, and then we sort of didn't really have our act together so we got sort of C++ developers and Java developers and sort of Dell Net developers. Luckily, you guys didn't sort of sit still for very long either, so you had sort of web and Native, and then Native became iOS and Android, and now it's become we've got Angular developers and React developers.
We've all sort of schismed into our small little corners of sort of software development. It's sad. I know we teased you guys with things like Rails and PHP, like, "Oh, sure, it's easy. You can do this sort of stuff," and then sort of when you went like, "Oh, this is good. I've learned some cool stuff in it," and then it got more than four users and it sort of fell apart again.
I'm sorry. But what I'm here to do today is sort of reach out the olive branch to sort of you front-end developers.
A sort of olive branch because I think we should all get along again.
I think it's time to sort of stop doing this. And one of the most sort of recent sort of things that I'm extremely excited about is a technology called AWS Lambda, and I think that's going to sort of save the profession of software development and sort of reverse the course that we've sort of been on with this sort of hyper-fragmentation. And so extremely cool stuff is coming out of that. That? Yeah, not going to happen, which is great because it saves us the sort of two minutes it was going to take, but what I was going to show you is how easy it is to write a Lambda, and you can write Lambdas in many, many different languages. Of course, you wouldn't choose any one but JavaScript, but it's literally an event handler.
So if you sort of look at event handlers that you write and some of the code that you write, it's a very similar thing. It gets an event and it replies and sort of do something with that event, and it takes you about four or five minutes to set up after you've invested the sort of 12 hours to figure out how to do that. It's Amazon.
But once you've figured out that you have to configure the body templates in the bottom there and sort of make sure you do applications or something even, then everything works fine. So once you sort of get past the sort of first hurdles, writing one of these things is extremely quick. The other thing I was going to show you is just how easy it is to sort of scale that up. Now, the HellaWorld example that I just didn't show you is obviously very trivial, but what we're going to be seeing is you can compose small bits and pieces instead of more serious things.
So basically, with Lambda you have access to all of the APIs, all of the sort of manage servers that AWS has, such like DynamoDB, which is a seriously amazing key value store.
This is the sort of thing that, over Black Friday, did a couple millions of requests per second. Mind-blowing.
Or maybe you want to do S3 or maybe you want to do the sort of RDS, their sort of relational database.
Or we're going to still talk a little bit about that image recognition software, or LEX, or any of the other sort of things that I have. Really, really powerful.
And the fun thing is you can not just push these things, you can push them real good. (audience laughter) - You can push them real good.
There's a lot of old people in the room.
Hello, fellow old people. But yeah, so the thing is because they're tiny bits of JavaScript, Amazon takes cares of scaling this thing out for you.
It takes all the scaling out of it.
You can do one request at a time, you can do ten requests at a time, 20 requests at a time, or 100.
Now, if you want to do more than 100 confirmed requests, you have to do this sort of really tricky thing.
It's called emailing Amazon, and then they'll give you 1,000 confirmed requests.
It's the only thing you have to do to scale up, beyond the 100 confirmed requests, is send Amazon a polite email, "Could I please have a little bit more?" And they're like, "Sure." And there's a couple of really amazing sort of advantages; the first and most obvious that sort of people talk a lot is about sort of cost. If you want to sort of do... And if you have a semi-serious application and you want to do some sort of availability zones and some...
So you've got two M3 Large instances with some load balances in front of it will set you back sort of a little under $1,200 per year if you pay up front.
If you want to make one million sort of typical API-Gateway and sort of Lambda requests, it's somewhere between five and eight bucks. Orders of magnitude, big difference.
Massive, massive change. Not having to worry about servers? Priceless.
I was giving a talk and someone was like, "So, but what do you do if the thing's down?" And you're like, "I go and grab another drink." There's nothing I can do, right? "Wow, that's really scary." I'm like, "Well, if you think that you do ops better than Amazon, you could be Google or delirious. Either of those two things is true." It's just not going to happen.
But what I'm most excited about is that convergence of development.
The convergence of development is what I'm most excited about.
First of all, because we can write JavaScript. Now, JavaScript is really easy to make fun of. Does anyone have a guess what the type of null is? Object, yes. This is my favourite.
The type of is not a number. Is a number.
Does anyone know what happens on the last, the last line? It's actually undefined, they fixed that a long time ago and you can sort of redefine undefined, this is one of the most mind-blowing things.
But as Kyle was saying in his talk, it's pretty darn amazing language.
It's easy to pick up, lots of people know it, and it's literally everywhere. Everywhere.
So the fact that we can now write JavaScript everywhere is extremely powerful and extremely useful. Our sort of high-volume sort of back-end services cannot ultimately work in JavaScript. The other thing where I think that you, as front-end devs, have a...
There's sort of two reasons why you, as front-end devs, have an edge over our sort of us experience as back-end devs, and that's events. Sort of traditional back-end development hasn't done a lot of events. We've been doing a lot with sort of procedural, sort of imperative code, and that's what we're really used for. This whole model sort of thrives on events and working with events and events language, which is sort of the stuff you've been doing for a long, long time.
And it's basically events all the way down. If you look at the architecture of sort of my application, I run a startup and sort of half replication is just completely servers and all Lambdas, and it's events all the way down.
To give you an example, here's what we have with an API gateway, just like we had in the non-demo. We're sort of talking to a Lambda that takes care of these requests. This is a toy app that we've written. If you go to whichChris.bjennings.io, one of the problems I always have with...
I love sort of the Marvel and the DC sort of superhero movies, there's just too many actors called Chris in them.
So what we did is we wrote an app where you just upload a picture of someone you suspect of being a Chris, and it will tell you which Chris it is, if any. And it took us about a day to build and we spent about sort of seven hours on the uploads of binary documents and about an hour on the rest, and so basically that's what we do. We take that upload, it goes through a Lambda, and this stores it in its Three.
And that's where you get, so Store in Us Three, which is their sort of file system that you have installed with Amazon.
So we store it in there, and the fun thing is that that triggers another event.
So guess what we can do, we can write another one of these Lambdas that goes...
Talk to recognition. It goes into recognition and it sort of does their magic because that's pretty much what it is because it's actually accurate.
And it comes back and it all tells you if any Chrisses has been found, and then we can just back into another S3 and we can trigger something else again and again. In this case, we kept it simple and we created another service that also talks to S3. We've put fun in front of it to make it really perform well, but this is... So we've now have a sort of extremely high-performance sort of web application to figure out which Chrisses are in your favourite movie. Hours worth of work.
Extremely high, and that's sort of what I'm so passionate about; high-volume, really easy to write. One of the things that I've been finding in practise, sort of having built a real-world application based on this, is one of the fun things that events give you is you add features by adding event templates. You do that by adding...
You add more of these Lambdas, and that brings me to that sort of third thing, where I think you actually have an edge over sort of our, us, sort of old, traditional back-end devs, and that's components and thinking in components because that's what, it turns out, is what we need in this sort of brave new sort of world of back-end development, with lots and lots of event handlers and lots and lots of state, is we need that same component thinking.
What we need is sort of self-contained units, containing both sort of state and behaviour together. There's a hierarchy of them, a hierarchy of them, and this is the most important thing that I've been finding ever since I started sort of working with the things like React, is a thing that I called that sort of coherent on multiple levels. If you're familiar with React or sort of any other sort of component for front-end framework is you can look at your componentry at any point in that tree and it is a coherent self-contained unit.
We need exactly that kind of thinking in our back end, we need exactly that kind of thinking.
We need your sort of expertise that you've been doing for a long time and we sort need your help. I want back to that convergence of development.
I want us all to be developers again, and I think we can get there if only you guys could tell us how you lay out things on the web because you don't seriously write this stuff yourself, right? I want us all to be web developers again.
Thank you very much.
(audience applause) (energetic, rhythmic electronic music)
