Hi everybody, I'm back. Cyrus here. How many people work for an agency? Okay. Yeah, I can see all your hands. Thank you. So our next speaker spent 10 years running one of the most well-recognized and respected agencies here in the States. Distilled Mr. Rob, who's been after 10 years of running that agency. He joined Moz as VP of product and now he's helping Moz build the SEO tools of the future. Today, he's going to talk about something that's kind of intimidating to some people, including myself, which is scraping, scraping for SEO. I'm really curious to hear, uh, look at his presentation and I'm excited to watch. So let's let's kick it over to Rob. Hi everyone. I'm Rob Busby. I'm the VP product at Moz. Now I joined Moz at the end of last year, having spent almost 12 years working as an SEO consultant.  In fact, I'm not even going to be talking about big strategic topics. Instead, I'm going to share a single technique with you, a technique that has so many uses and applications that I've pulled it out of my toolkit again and again over the last decade. And it's been so useful that I thought it was high time that I shared it with you as well. Some of you will see immediate applications for this and it'll be a game changer for the work you're doing. But my hope for everyone else is that I can show you how powerful and flexible this can be and it will stick in your mind for long enough that when the day comes you need it, you'll remember that it's in your toolkit, revisit this presentation and you'll get as much value from it as I have. I'm going to cram a lot into the next 30 minutes, which is why I'm going to make sure that these slides are available to you immediately afterwards. Or since you're all going to get copies of the videos as well, then I'd encourage you to go and watch again. And in particular, pause the video to step slowly through the code samples that I'm going to share. During the live presentation, I'm going to live tweet some links to extra content that you'll hopefully find useful. My Twitter handle is right there at Rob Usby and it'll be in the corner of every slide as well. If you're not watching this live, then follow the link later in the presentation and I'll have all of these resources wrapped up into one place for you. This technique was on my mind because a colleague asked me the other day about g2.com. In case you're not familiar with g2, it's a fantastic site with real customer reviews about thousands of software products. And it's absolutely one of the places you go when you're thinking about making an investment in software for your business. They have a review score for each product. And this person had asked me, for a list of products that I want to compare, how can I easily see the scores for each of them side by side? And the obvious answer is, search for each product, click to the products page and write down the score. But I know we can do better than that. So once again, I busted out my scraping technique, got the job done and then realized that I should share how to do this with all of you. Which means that today, I'm going to show you how to use it to achieve three different things. I'm going to scrape this publisher site g2. I'm going to build a new tiny but powerful SEO tool.  Now fair warning, this requires writing a bit of code. So if you're not already super confident with JavaScript, there are three paths you can take. You can absolutely use the code that I've created. And hopefully you'll find some of that useful on its own. I'll share a link in a little bit for you to do all of this without writing a single line. Or you can find someone that's already comfortable writing code, share this presentation with them and explain what the two of you want to achieve together. Or the option that I would recommend is learn a little bit of JavaScript. Don't worry, that's not as tough as it sounds. I'm about to share a link to a fantastic set of resources for learning JavaScript fundamentals that Madison can put together. And while I'll be talking about JavaScript today, I'll also be using a lot of jQuery, which is one of these clever little libraries that does a bunch of useful things.  I'm also going to be sharing some bonus content, which is Rob's six tips for becoming an effective JavaScript hacker, which includes my sixth tip that if it works, it works. We're writing code to help you get your job done as efficiently as possible. It doesn't need to look beautiful or be perfectly optimized. We're just trying to make things that work. Links to all of these are available right now on my Twitter feed or in the link bundle that I'll share later. Okay, so to explain how I want to scrape websites differently, let's have a look at how we usually do it. Imagine an internet full of websites. And here's the one that we want to scrape. So we might have our laptop sat on our desk at home, and you can scrape from there, requesting all the pages and all the content you need.  In fact, it's not too different. Our browser like Chrome works that both just software on your desktop, requesting pages. Sometimes we'll crawl not from our desktop, but from a server somewhere in the cloud. Remember, of course, that the cloud isn't anything special. It's just other people's computers sat somewhere else doing the same work for you. So when you use Moz Pro to crawl your site, you're really just running software on our machines. Or when you use stat for rent tracking, again, you're just using our machines to scrape Google's search result pages. But if we're trying to extract data from a site, particularly at scale, we do run into a couple of problems. One might be authentication. Lots of SAS tools, for instance, will let you log in to look at your data, but you can't export it and they don't have an API to access it programmatically. You can only get that data if you're a human visiting the website via a browser. Secondly, there's the issue of rate limiting or being banned from scraping. Google is a classic example of this. If you run a bot to scrape Google, they'll pretty quickly pick up on this and block you with captures or flag your IP address so that you can't visit any longer. So how can we do all this differently? Well, in contrast to using other software or servers, I think of this technique as having sites scrape themselves. The requests we're going to make the data on the site won't be coming from anywhere but code running on that site. So we're going to trick the site into thinking that it has new JavaScript embedded and running on it, that it asked to be there. And we're going to do all of this from Chrome on your desktop. This means that authentication won't be a problem. You're already logged into a site. And it means that while rate limiting will still be of a concern, it's much easier to avoid because your browser has all the hallmarks of being a real browser run by a real user on a real computer. I'll reference an old SEO quote here, which is that I'm not doing anything black at. I'm just using computers to help me do the things that I would have been doing anyway, but much, much faster. And it starts with the premise that you want to be able to insert your code into any website. I'll show you three ways that can happen. One simple option to execute JavaScript as if it's on the site is to use the console. You're almost certainly familiar with Chrome DevTools already, hit F12, and there it is. It lets you inspect all the elements on the page, lets you look at all the network requests the page is making, and it has this console tab where you can interact with the page's JavaScript. Just to prove that, here's an example of color of change.org. Now, this website already has jQuery installed. So down here in the console, I've written a line of JavaScript to find out about the heading of the page. I've used jQuery's amazingly simple way of selecting elements. In this case, I put the dollar sign, and then in parentheses, I put H1, and that selected the H1 from the page, which let me access its contents, which are now printed down there in the console as well. And then I wrote a different line of code to alter the HTML of the page. I've put a yellow dashed box around the same element, the H1, to show that that is working. The point here is that you can write or paste code directly into the console, and it will run on the site. But if you want to run some code more than just once, you're going to need something easier than pasting it into the console every time. And this is where I love using JavaScript bookmarklets. I just looked this up, and I actually published my first blog post about JavaScript bookmarklets 11 years ago today. I'm still a fan. Basically, you can create bookmarklets that don't point to URL, but instead run a bit of code. You do this by starting the URL field of the bookmark with JavaScript colon, followed by the code you want to run. It means you can take little code snippets, store them in a bookmark, and run them any time you want at the click of a button. And it's great for bits of code that are never going to change again, though it can be tricky to share code in this way. So my third option, while slightly more involved, is a technique that I'm going to use today. And again, we're going to create a JavaScript bookmarklet, but instead of putting all our code in there, the bookmarklet is only going to do one thing. It's going to create a new script tag on the page that imports a JavaScript file from elsewhere. You can store that file on your own server, on Dropbox, on GitHub, or anywhere else. And then have a bookmarklet like this that adds it to the page as if the site itself had put it there. Your code now has all the permissions that native code written by the site's developers would have. So in the rest of this presentation, I'll focus on the code we will write in that JavaScript file that you inject into the site using a bookmarklet and then we'll run from there. I have three examples and I'll start with that challenge that was posed to me earlier. How could we compare product stats from g2.com? Well, I suggest starting with pseudo code or rather just writing out the process you would go through if you were doing this manually. So we might say that we have a list of products to compare. For each product, you'd search for it on the front page of the site. Then you'd look at the search result page, find the top result, then you'd visit that page which is all about the product and you'd grab the ratings from the top section. And while you're there, you can grab the specific ratings that g2 has about ease of use, quality of support, and set up from further down the page as well. And then you'd put them all into some kind of table as an output, maybe in Excel or Google Sheets or whatever you want. So let's turn that into code. And one thing I noticed that again g2 already has jQuery installed so all the fancy features that I like using are ready to go. Now here's the results page when you search for Zendesk Chat. I'll zoom in and when we look at the URL we realize it's a really straightforward address with a parameter called query. So we know that if we replace the value of that query we'll get to the g2 results page for any product name search. And we want to look at the top result here. That's when we fire up Chrome DevTools inspect these elements and we find that each product listing has a div with a class called product listing. In each of those is a difficult product name and a difficult star rating and a link to the specific page about the product itself. So the first thing we're going to do is crawl that search page, find the top result and grab those bits of information. Here's some code that looks a bit intimidating at first glance but I'll show you three cool features we can use to write powerful code really fast. First I just created a variable up at the top there called search query that I set to be Zendesk. This was just going to be useful while I tested things. Then I used this jQuery function that we're going to rely on again and again. It's called get and it literally sends a get request to any page. You give it a URL you want to fetch and then it gives you a variable containing the entire html of the target page. You also add a function that processes the html however you want. We're not navigating to that page, we're not changing anything visible in the browser, we're just requesting the page in the background and sticking it in a variable. Now let's take a moment to appreciate the power of running this as code on the site. The website is making the request so we have no cross-site scripting issues, we have no authentication challenges, all the cookies that the site has set in your browser are available and working.  And then we can do things like use the dot find function. Similar to earlier this lets us use the CSS selectors that we already know and love to find things in the page that was returned. Here I've started off by just finding the h1 of that page and writing it to the console. But then I use dot find again to find the very first listing on the results page and then use it again within that element to collect the URL, the product name and the rating of the very first listing. You can see here that once we have an element we care about we can then use the dot text function to tell us what the text of each of those elements is. So let's grab this code and run it for real in the console. There's my code, I pasted it into the DevTools console while we're anywhere on g2 and it outputs a couple of things. Let's zoom in. The first line is the h1 of the results page that I asked it to output. The second is that object we created and it's correctly pulled in URL, the name and the rating of the product. We can do a similar iteration now, we can take the URL of the actual product page, do another get request, we can then look for those three metrics of how users reviewed the product and extract the numbers. Let's look at that code. Here it is, very similar. We start with a get request, but this time we're requesting the product pages URL that we found earlier. Then we use those metrics and we find them, they're not surrounded by any like clean or semantic markup, so we have to hack our way around. We use the contains pseudo selector to look for an appropriate div that mentions ease of use or whatever else. We traverse up and down the dom tree a little bit, find the element we really want and grab the score of it again using the dot text function. I pasted that code into the console, let's see what it gives me. Excellent, it's created this object called rating details that has those three scores. So we can get data about a single product, but how do we output it? Well, just like reading data from the page we're on, JavaScript lets us change the content of the page and jQuery makes it even easier. Dot text can change the text of an element dot HTML can change the entire HTML of an element and dot append will add HTML to the end of an element. And we're going to combine these for our purposes. Before we do any crawling, we're actually going to use the HTML function to overwrite the entire contents of the page. By running this code we're replacing the HTML element of the page, which is absolutely everything with the code. This gives us a text area, a go button and a table with some headings. When we run this, here's what the front page of g2 turns into. And I know what you're thinking.  This is ugly. It's raw, unstyled, HTML. But this is for you and not for anyone else to see. So does it matter? This is going to help you get your job done fast and efficiently and who cares what it looks like. Now, I'll also contradict myself here just a little because later on I will share something with you that is a little better looking and a little more usable. But for now, once we have a table in there we can just put data into it. What I've done here is you've got that input text area where you could type a load of product names. I've taken the contents of the text area using the dot val function and then I split it up into an array by separating each new line. Now we have an array of the product names you entered and then I use this dot each function from jQuery. It makes it easy to loop over that array one item at a time. For each term that was entered, we use the append function to add a new row to the table. And then we wrap all of this up in a click function. This code selects the start button that we added and says when it's clicked here's what to do next, which in our case is fill that table up with the names we entered and then start crawling the site. After that populate table function runs here's what we get.  After we've done that we kick off another each loop. This time we'll loop over a set of elements from the page. We'll select the table's rows and for each row we'll run some code which is basically the code I showed you earlier that did the scraping. So now we have all of this wrapped up in a JavaScript file. We have a bookmarklet that injects the file into the page. So here we are. I tried doing a screen recording of this for you but it all happened so fast so I've just screenshotted things instead to slow it down. We're on the front page of g2. We hit our book marklet and the page gets replaced with this. And like I said earlier I've actually made this look a little bit better than unstyled html. I found a tiny css spring work and with just one extra line in the html here we could include the external css file that makes the buttons and the tables look a little nicer. But with you spend time doing that kind of thing for yourself it's entirely up to you. It's also important to note here as far as the browser is concerned we're still on the same website. We still have permission to make requests from this site. So you type some product names into the box and you hit the go button and quickly the code populates the table and starts scraping. It goes to the search result page for each product name and grabs the url of the product page and it goes to the product page url and grabs the scores. 10 page requests happen all the data is collected and one row at a time it's written back into our table. This takes almost no time at all and here we are. Now my friend that wanted to compare the scores from a bunch of different software options can see this table with all of the details. Have a different list of products to compare click it again run it again. I've published this code and there are comments all over it for you. I can't imagine many of you will have exactly the same use case and need to scrape data out of this site but you can use this as a template for running the same process over almost any other site that you might want to scrape. The code and the bookmarklets are available at oozeby.com slash mozcan. Now I said I had three examples. So what else can we scrape? Well that leads us onto chapter two which I call when the scraper becomes the scrappy and who's the biggest scraper of them all? Yeah you're damn right let's jump straight to scraping Google but not just for the sake of it let's solve a real SEO problem. We've all used mozpro or a site like it to crawl our site. Here's my mozpro account for my old company distilled and from the site crawl I can see that distilled has pages under folders like events like blog like resources and training but my question is always how many pages does Google know about in each of those folders? How many pages of each type have they indexed? A site crawl cannot tell you this and I'd love to know this for some competitor sites as well. How are they structured and how does Google understand that structure? Here's the process I've been through in the past to answer this question. First you do a site code on search. Here I'm doing a search for site colon moz.com to find all the index pages that Google has from moz and then we look through that list of results to find the unique folders and we write those down. We've got moz.com slash learning slash blog slash community. How many pages does Google have indexed reach those folders? We do another site search site colon moz.com slash learn and there's the number 447 pages of amazing learning content. We do it for each of the folders we found and eventually we have a list like this. It takes a while but we get there but we want to find more of the folders at the site so we do another crafty little search. We do a site colon moz.com search and now we exclude all the folders we already knew about minus site colon moz.com slash learn minus site colon moz.com slash community. This gives us a search result with a whole bunch more folders that we can now put into our list and then go start the process for them again. This is the kind of thing that is arguably at the boundary of being very time consuming and enough that you're not going to do it by hand for a load of different sites but becomes potentially very useful if you can just hit one button and get it all done for you. So what would the code for this look like? Well first we'll replace the Google page again with our code. Next when we go to Google and run our bookmarklet this is what we get an input box, the bare bones of a table and a couple of buttons.  What does the actual code do? Well this might sound familiar second time around. First we get the text of the domain name you typed into the box at the top and we add a site colon to the front of that to make it into a search query then we use jQuery's get function to go and request that page on Google that is slash search question mark q equals query and again we're on Google and as far as the browser knows this is Google doing its own Ajax request to other parts of the site. This happens all the time and there's nothing out of the ordinary here. Once it gets the cert back it selects all the links on the page that points the site loops through them with dot each and extract the top level folder. If it's not seen that folder before then it adds it to the table on the page. So for example you enter moz.com in that box hit the button and boom in the blink of an eye here's what you get a list of some of the top level folders that Google has indexed pages from but now we need to find out how many index pages it has in each so we loop over the list of folders for each one we get another Google results page this time for site colon domain dot com slash folder that's this get request here which grabs this page and as you'll see at the top there it has the thing saying about 7400 results we inspect the html for that and see that it's helpfully wrapped up in a div called result stats so with the result of that get request we can use dot find to find the result stat div we can use dot text to grab the text from it then we use plain old java script to extract the number from that text we write that back into the appropriate row of our table and that's done and we move on to the next folder until they're all done now it'll be no surprise to you that running dozens of site colon queries one after the other is likely to trigger some bot sensors at Google's end and honestly your first line of defense there is just to slow down a bit so instead of running all these get folder count functions at the same time i use java scripts set timeout function to run these one after the other a second apart this might be enough to prevent problems but even so you might sometimes see your code suddenly stop working and that's because google has you pegged as a non-human but we don't have to stress we're not running a load of cloud servers and churning through ip addresses or whatever we are a human our browser has all the fingerprints of being a regular user so we can pass a capture no problem if you get blocked you just open up another tab go to google click the recapture button to prove you're human and then carry on merrily collecting the data that you want remember it's not black hat it's just faster than the manual way of doing what you were going to do anyway okay so let's see how the whole thing looks when we put it together here we are on google let's go click the bookmark and great so it loads the form and the table we type our domain into the box and hit the blue button it immediately grabs the first set of folders from google and then one each second it does another search to see how many pages google has indexed from that folder when it's complete we hit the button again here's another set of folders and the process continues and another so what have we done here we've built a very simple but very useful tool that runs entirely in your browser and collects data from google there are obviously some other really time-consuming ways of getting the same data but with just a few lines of code we now have a brand new SEO tool that solves a particular question that i've had for a long time again the tool is available here if you'd like to use it but more than that i'd suggest you grab the code take a look at it and see how you can make it bend to your will for doing other things you might want to do okay one final example to push home some ideas of things that we can do here what about some very specific SEO data i got this slack message from my colleague Brittany Muller the other day she asked me to look at the web.dev site and particularly their implementation of google lighthouse she said the lighthouse api was the worst and could i please scrape the site i said i'd take a look and exactly two hours and one minute later i messaged her back to say i'd come up with something fun so let's dive in this is the app that Brittany linked me to it's a site made by google to support web developers and this page is a tool that runs a lighthouse report on any url you put in the url of any web page and it crawls it renders the page and discovers a lot of information about it it takes about 15 to 20 seconds to run and then it comes back to you with all of these data points this is the report for the mozcon marketing page it has these top level metrics about performance accessibility best practice uh seo and these are all just roll-ups of dozens of even more detailed metrics for example under performance there we see mozcon's page scores for things like time to first contentful paint time to interactive blocking time and loads more but let's just focus on these top line metrics i thought at first that if i want to crawl this results page and get all the metrics but i realized that what was actually happening here when you run a report is that the page itself was doing an ajax request to get the data from elsewhere so we fire up the network tab of chrome dev tools we take a look at all the network traffic from this page and lo and behold there's a request that takes 15 to 20 seconds to complete so that must be it fetching the report data let's dig into that request and see what's going on well we see three interesting things from the headers on that request the first is that it's actually making this request to another domain is this app spot dot com app that's doing all the heavy lifting here okay so we know we're probably going to end up making a cross-domain request this might cause some problems there might be cross-site tokens and stuff at play that are going to complicate matters then we see that this time it's a post request rather than get okay we just have to remember that and then we see down here that it's basically just sending the requested url as the post parameter and nothing else of interest that means we don't have to worry about any of those cross-site token issues and potentially means we could actually request this lighthouse data from any site we want to not just from the web dev site okay so we know that to make this request we just post to that url and send it url of the page we want information about let's take a look at what the service sends back to us well this is where I think I actually yelped out loud there's no html being sent back it's just a JSON object perfectly structured data right there under the lhr key is an array of all the metrics we want to get so I thought we have this easy to pass lighthouse report that I think I can request from anywhere what can we do with that well what data set would be improved by having performance and accessibility data hiked into it what about some of moz's tools hopefully most of you have at least one moz pro campaign up and running if you don't you can bounce your way over to moz.com slash pro for a free trial get into your moz pro campaign then go down to the analyze a feature sorry analyze a keyword feature select a keyword from your campaign and here I'm analyzing the SEO agency keyword when you scroll down here you'll get to the surf analysis table now surf analysis has typically focused on two huge traditional types of ranking factors the link equity of a page represented by domain authority and page authority and the keyword optimization of a page moz has all of those next to each other in our surf analysis table right here but in addition to those factors Google has said that they don't want to send people to sites have poor user experiences which could mean that things like slow sites or sites with poor accessibility will suffer in the serfs so let's try to include those lighthouse metrics in this very report I wrote a file and created a bookmark that uses nothing but the tech that I've already walked through in this deck if you go to a page like this and click it here's what happens first a bunch of additional columns and cells are added to the table along with these run lighthouse links in each row and when you click one of those it requests the lighthouse report for the url in that row since it takes like 20 seconds to run the report I replaced the link with a little loading gift to let you know that something's working and then the data starts appearing we'll come back here in a second but let's take a look at the new code I wrote for this feature remember we navigated to a moz campaign serf analysis page and I did this with an array of objects that specified the lighthouse features I wanted I ran a loop over it then added a heading and a bunch of cells to the table and then I added those run lighthouse links when you click any of those links we go request the data from the outspot server we're using the ajax function here it's a bit more customizable than the get or post functions and it's helpful when we're working across domains and then when it comes back I loop over my features once again and I go into the json response to grab the particular data points I need it turns out that instead of a 0 to 100 range they're giving us numbers on a 0 to 1 range so I just multiply the result by 100 round off to the nearest whole number and slap that data into the appropriate place in the table now let's take a step back here and see what we've got we now have a serf analysis tool that presents more data in one view than has ever been seen before link data, keyword data, site performance data and accessibility all stacked up next to each other if you've been looking at the ranking sites for a particular keyword and wondering why is this well optimized website doing so poorly and maybe you want to run something like this and see if there's a non-traditional ranking factor coming into play maybe a site that seems strong with lots of links and good optimization is actually really slow or not very accessible and that might be holding it back so while this is really useful I want to make two things very explicit firstly this is not an official Moz product this is not a feature release this is not something Moz built this isn't something that we're going to provide any support for and in fact my product engineers and designers are mostly seeing this for the first time right now this is an example of the kind of powerful things that you can create in two hours and one minute just by injecting JavaScript into a site and secondly let me make it really clear that I didn't need to work for Moz to do this I'm not using any secret Moz knowledge about our code or our infrastructure here I'm not using any of our APIs I could have written this last year when I was an SEO consultant as well as any of you could one thing you can take away here is the realization that if you think of a genius idea to extend your favorite tools or apps you might not need to submit a feature request maybe you can just hack around with the site a bit inject code grab data from as many places as you need and create the features or data sets that are most useful to you in your role right now of course I also want you to take away a link to this page that includes the code for this bookmarklet like I say it's not a Moz product it's not supported and for all I know web.dev will change their code in the next 24 hours and screw up the way that I've been scraping this data but for now if you have a Moz pro campaign up and running you should 100% try going to a surf analysis page in your campaign and give this a try to wrap up I want to reiterate the items that you can put in your toolkit you can run JavaScript on any site as if it was native to the site itself run it in the DevTools console store it in a bookmarklet for later use or use a bookmarklet to import an external JavaScript file and store that wherever you want online when you're writing JavaScript for this kind of work there are some jQuery functions that you'll want to use a lot you can use get or post to other URLs on the same site you can select elements on the current page or find them in the page that was returned from a get request you can iterate through a whole bunch of elements that you find and you can extract or edit the individual elements of a page whether they were there to begin with or whether you put them there if you're going to start hacking around with JavaScript don't worry about making it pretty if it works then it works I hope I've inspired you to think about some of the things and some of the ways that you might be able to use this for yourself I'll post more of this kind of thing on Twitter so follow me there at robusby if you'd like more free tools as I create them and I look forward to you tagging me to show me what you've created have a great rest of your MozCon and I'll see you all soon thanks very much


And the speaker of the House of Representatives, Sami Gwajabiamila, on Saturday said, deliberate efforts must be made to prepare children and youth of Nigeria. This is important to become the leaders of tomorrow that we desire them to be. According to the House of Rep Speaker, such efforts must include involving them in governance and expanding the democratic space to accommodate many young people. Gwajabiamila spoke at the National Children's Dialogue to Mark the 2021 Universal Children's Day in Abuja. He explained that this was the reason he championed an amendment to the Electoral Bill 2021 for the use of direct primaries by political parties as a method of choosing candidates for elective offices.


A coalition of over 80 civil society organizations on Thursday regrouped in Abuja. They were there to mount pressure on President Muhammad Ubarri to sign the Electoral Act Amendment Bill 2021, according to them, a sense that the Electoral Bill 2021 would facilitate early preparations on efficient election administration of the 2023 General Elections. Meanwhile, the elections are just 443 days away. INEX Commissioner on Voter Education, Faisal Sokwe, has spoken on President Buharis' letter to the Commission detailing INEX position constitutionally, legally and administratively as the engine of the Electoral Legal Framework. The force is the issue of referencing and cross-referencing, whether those things were done properly. Because the issue of cross-referencing is very, very germane to the bill. The moment you do improper cross-referencing, it has very serious implications, especially when we have election petitions. The second issue we are looking at is the issue of topographical errors, whether there are topographical errors that can just be corrected. The third issue is whether any of the provisions of the bill violates the core internment of the Constitution. Because as you are aware, the Constitution is the fundamental law of the land. Now, the fourth issue we are looking at is whether there are issues of proper sequencing, especially in relation to the dates. And you know, in relation to the work of the Commission, dates are very, very important. Then we're also looking at whether there are also provisions in the bill that are difficult to implement. We need to date the President if there are provisions that are difficult to implement. Then we have to put the bill side by side with the existing legal framework, with existing electoral act, and see whether there are provisions that have been deleted and needs to be restored, or whether there are provisions that need to be reworked on. So those are the things that the President asks us to look at. And the Commission has looked at it, and we'll respond to the President within the timeframe the President gives to the Commission to respond. Hello. Hope you enjoyed the news. Please do subscribe to our YouTube channel and don't forget to hit the notification button so you get notified about fresh news updates.


Wel, gan y toffi TV Everton have made a signing it is. Ashley Young, Everton of signing, 38-year-old. Ashley Young, three transfer, have been at Aston Villa last season, he has become an Everton player. Si'n dda i chi'n faith signing as Everton manager and he's a utility player and we've done it so you know I'm sure there'll be more exciting signings after Ashley Young but I'm joined by John Blane in the studio. To di sy'n gwrs this John, I guess he wouldn't have been top of everyone's wish list for this summit but Everton have made the sign and he's a player who can play in a few positions. Wel, yeah, I think we'd have, it's one of those in a chronology if it was like young superstar kid who scores goals and then a week later Ashley Young, you'd have gone oh okay understand that. But most people rather hoped it would be that way round rather than jam tomorrow because being Everton fans we spend a fair amount of time thinking the jam might not actually come. But yeah I think he adds to the squad I think I saw Jack actually tweeting this morning was it and he said something like people wanted Cody for his experience but they don't want Ashley Young. So yeah I think it's not going to pull any stumps up but I think, I mean the games that he played last season for Villa is 20 odd, so he's clearly still got it at a Premier League level. It gives Micka Llanco something to think about and as you can say he can play wing back and stuff like that as well. So yeah let's just hope he's the first of a good few, four or five to go isn't that so. Absolutely, I think you're right as well I think chronologically had Everton a brought three players in. And then Ashley Young I think it'd have been more palatable for a lot of people but like you just said he played 29 times of Villa last season, still fit, still got to have seen a lot of Aslan Villa fans, a bit good that he's gone really. A lot of them saying that they gave him another year and he done really well. And we've all been moaned how unbalanced this squad is. Sean Dites has said in many a case in last season in press conferences the squad's unbalanced and yet this player can do two or three positions. I understand people will be saying he's 38, you know he's why we spend the money on this kind of play, wages when there should be younger players giving the opportunity and everything else that goes with that. I get it, I get that point of view but also got to look at the big picture and say well if this lad can come in and play it right back which he played most of his games for Villa last season, can play left back, can play left midfield, right midfield. Then he's doing four jobs almost isn't he and that gives the manager more quality then within that squad more balance. If that helps them focus money elsewhere in the areas we really need it which is the final third. Then surely that kind of ticks a couple of boxes. It does tick a couple of boxes and you know and ever the optimist because they are my optimist really by default. You allegedly said I give you, you got stick for being optimistic last week but optimism is context based isn't it? We know this manager like most Premier League managers is likely to be error on the side of caution with players. They all want experience which is why with the revolving door we've had you can get locked in to really take players of Premier League credentials or whatever. But bringing experience in like that would be good for Michelin go anyway, good for some of the other players. Then allow this manager perhaps to think I can take a bit of a risk as I see it because it's my job that will go isn't it if we fail. Younger players in more forward positions because I've got that experience in the squad. So let's hope it's not a trend that we're going to be getting these old codges last stop before the old folks home. And that's the rumours we have around the type of players they're targeting and the age profiles and the ceilings and all this sort of stuff some of those come through in the coming weeks. Absolutely, absolutely. Let's have a look at some of that young stats anyway. Let's get into that first one we've got. Oh it's 38. This is this profile just turned 38. This week was it. This week yeah. Fi, obviously he's a free transfer. He's not attached to any club because he's just left Aston Villa. He's played 677 career games, scoring 85 times in that. The next one we've got is there again. Finished the villa with 57 games played for Aston Villa across two seasons on one goal. So obviously he's come in for him into my land and has been quite durable for them. 57 games in two seasons. As we've had it, we would have been pleased enough. 57 games over a couple of seasons. Absolutely. The next slide we've got, this is his statum last season and his heat map. As you can see, 29 games last season for Villa started, 23. One goal in a crossing accuracy, 19%. And 1.7 tackles per game. I think that is a time behind. Where did he play for Villa then? Right back there, we'll see that. So this is his overall stat of his career. So he's had 203 games as a left midfielder. These are the five most positions he's played. He's played that every half-man goal. But he's had 203 at left midfield. Right back 82 times, big chunk of them for Villa. 71 games at left back. He's been left wing 34 times. And right midfield 83 times. So that shows the utility side of his game. He's also played centre mid. He's had a few games as a centre ball. If you can play left or right, you can surely play around the middle. So there you go. Just in itself, when you look at those stats, that kind of shows you that you're on that experience. The way I look at it, if he's playing 57 times in two Premier League seasons, the last couple of years, he's obviously fit. He's kept himself fit. He doesn't suffer for us. He played a lot of games for him. That's true. Villa's side, Polish international, keep them off the side. Which means he must train well. And he must be dedicated. And he is, he's still playing soft like football. They still let him go. It was the end of a contract wasn't it? So therefore, yet, they could have possibly kept him. That's what happens isn't it? We let Connor Cody go and people are looking and going, we've let other people go. I would guess rightly or wrongly that it's unlikely that Young's getting paid more than Cody was. No, it's not. And Cody had a fear attached to him. And we're getting more flexibility around where he can play. Brings all the experience.  For the non-play, I'm talking about the experience. And clearly, the position we all know, we need some issues covering a fullback. And notwithstanding shame is getting on as well. But if Patterson wasn't fit, then you're on to shame us. And as we know, one stage last season, we had neither and we were playing centre backs in both fullback positions at various stages. And he could play both. So you can see the attraction to Dych, mature, experienced professional league player, professional league, who can play in either fullback position and he can move further forward if need be. And I guess the plus one option type stuff that goes around these deals is in our favour. So if it turns out to be a bit of a dud, then he goes at the end of the season. Of course, on that. Seems like a low risk decision to me. Well, if you're looking for Premier League winner, he wants Sharia as well with Inter. So there is tonnes of experience playing for Manchester United for number of years, big demands on that position. Again, the caveat is he's 38 and I know it. So's Milner. Making it sound like this is an amazing sign. No, it's not. But I think he's a good squad sign and I think he will put pressure on Michel Encore. Absolutely. Like we've just said and we've just seen and the stats, he covers four positions arguably. And if that means the money can be spent elsewhere because we can get other players elsewhere. Brings a good attitude because like I said, he wouldn't still be going at 38 if he didn't. And we are, the big thing with this is we do all have to remember the position we are in at the moment. We're not awash with hundreds of millions that we can freely spend. We've got a wheel and deal a little bit but trying to get to a place called stability, which we haven't had. We're ahead of the grand move next season at some stage. And we're making a short term commitment. Exactly. It's a year with a further option if we decide to take it. And I'll be honest. I haven't seen staying at 11 longer than a year. But if he gets us to that place next season, then it's fine. If he gets us extra years because he's earned it. And the other thing is, this for me, as I understand it, is he'll be one of six or seven sirens ever to make this summer. And therefore, like you started this holding off with chronologically had he been five or six, we might have gone, makes sense to that. Fair enough because we've got these. I understand it, I look at it, I don't love it because, again, profile I want is 21, 22. Going to be here for a few years. Bartlett, I'm going to make 40 million on him. That's what I want because that shows progress. But this fellow will come in, he'll lead with a good attitude, covers positions, does a job, helps you on that in still a bit more of those core values that he wants to put in the squad. And I'll be honest, I'm a little bit more interested in what we do going forward, not just this. This is one that goes in the squad for me. You go, all right, let's see what happens. If we get to the end of the window and we've got Ashley Young and a 39-year-old striker from somewhere and no one else, oh, there will be hell on this, don't worry, I will be, my tune will be very different. I'll be singing a very different tune, I'm sure you will. I'll be on the guitar with you on that. Exactly, but just now, just now finally, almost a decent sign. It's a regulation, ABC one, two, three type signing, not going to excite anybody. But as we all know in Premier League football clubs, there's some stars in teams and there's guys you hope you never actually hear of because they just do their job and hopefully they'll just be one of those. Do you know one thing I do love about him? He moans at the FB, he cries, and I love that, I've got all the time in the world for the cry of seeing our team. And he does, he's that player, Ashley Young, he's winging, he's in the referee's, he's all like that. Exactly, so if you've got him doing that for us, he's one that I do, I think he becomes that player that you like, that you've got him on your team because he's a moan and cry-ass player and yet when he's on the other side, you date him. That's right. And I don't think we've got enough of those little snides in our team that make the opposition get a cop on. Let's buy players, you'll have a snide. No, we've got to have ability, we've got to have that mix to mix, isn't it? So, listen, it is what it is. You've got him, you've got him. So listen, good luck to Ashley Young. Come in, you're there, we'll be right behind you, do your job, make others be better, and if Michael Enco improves as a result of him being there, brilliant, partisan, brilliant, because that's all we'll look for, we'll look for him to improve and right away. Big thanks to John Lennon for what you think in the comments section below. Be nice, be kind. He's here, let's get behind him. Villa fans, like you said, some Villa fans have got to these cop and they've watched them every week and he's just played 29 times last season for them. So he's obviously a good footballer. And let's see what else Evan can do in the transfer market. Let us know in the comments section below. Give the video a thumbs up and subscribe if you haven't. Thanks for watching. See you later.


Hello, Didier Stevens here, senior handler at the InternetStorm Center. In his last diary entry Xavier writes about multiple base XX obfuscations. So he found a script, you can see here part of that script, that has a payload that is encoded using different bases like base 16 and base 85. Now I'm going to do the analysis of that script with Cybershift. I'm going to show you how to do that with Cybershift. For your info on my YouTube channel, if you go to playlists, I have a playlist with other Cybershift videos, so if you're interested in that, you can find them here. And I also made an update because of Xavier's diary entry, I made an update to my base 64 dump tool, so that it can also handle base 85, and that's what I described in my diary entry of yesterday, but here we are going to focus on Cybershift. So I have the sample here, and let's scroll down, okay, here you have the encoded payload and that's what we want to decode. So I'm going to copy this to the clipboard. I need a type command, now it's on the clipboard and I can paste it here in Cybershift. Now what I want first is to select this here. And if you look closely, you might think this is hexadecimal, and it actually is hexadecimal, but it doesn't contain any letters, it's only numbers.  And if we go down here in the output, okay, you see they are selected, but I only want that, I don't want the rest of the script. So the output is not highlight matches, but list matches, and here I have that output. Now the single quotes here, they will not bother us, the decoding of hexadecimal can be done like this, so hex from hex, and now we have decoding, and as you can see if you take a closer look, this is again hexadecimal. So this hexadecimal was only digits, because it encoded another hexadecimal. And the digits here from 0 to 9, they can be encoded with an hexadecimal value from 30 to 39. And then here the letters here from A to F, they are encoded here in the 40 range. So 41 to 46, 41 to 46 hexadecimal. So this is hexadecimal, so we can again decode this. And now you see this encoding, and this is base 85. If you don't recognize it, you can also look into the source code, because there you see as Xavier explained in his diary, and there you can see some base 85 script. So let's look at base 85 here from base 85 like this. And when we do that, we get an error, invalid character w at index 4. There are different base 85 encodings, they use a different alphabet, a character set. And here you can see that one by default in Cybershift uses the alphabet starting from the exclamation mark to the lowercase u. So the lowercase w is not a part of that alphabet, and that's why we get that error. So because of that error, you know it's not that alphabet. The one it actually is is RFC1924, and this is also known as IPv6 encoding. And then here you can see that you can see the script as it the payload as it will be used in the malicious script.


Welcome traders to another intraday web analysis session with me Patrick and we want to revisit the sterling yen on the four hour time frame. We're in a fourth wave complex consolidation pattern here which is subdividing up nicely so we have abc abc this is going to be our x that's labeled that are w x high at 155 80 and we are then looking for a y to complete down here into the equality objective at 115 39 so a couple of trading opportunities one i'll be looking at bearish reversal patterns into the trend line test here at 154 30 set short positions to play for last leg of this complex corrective pattern down into the equality objective at 150 39 before looking for reversal opportunities to play for a fifth wave upside objective at minimum of 157 there's always traders plan the trade trade the power money


Who's done that you're backsliding Next slide my brother. It's in your genetic code. What happens next hire emotional intelligence You don't argue the same way. You don't fight the same way.  They should test you Jeff. Hey, man.   Yeah, I'm training every day every month. I show up and then self-awareness Who do you have to become? Who do you have to become to take this on mind? body it's not about money It's written in the code I promise next one It's a foundation five the foundation five I created studying Andy and Jacqueline Elliott There's a lot of people out there that say health wellness relationships these three You figure out these three you got it Didn't work for me Did not because I kind of got those three figured out But I was missing something the void was not full. I still loined for more. I wanted more What was it? What was I missing and I had this guy Andy this Oklahoma? This guy was crazy man. He's like, hey, dude, you gotta get back in the church.  I believe in God ain't going to church Hell no don't like the church. I'm not interested as a part that I was missing. I'm not here to talk to you about church I'm not here to get billed just saying there's some more. It's more than just health wellness and relationships It's a foundation five. This is the last two years of my life Training under Andy Elliott. Hey guys, what's up? It's Andy. Hey, I want to stop the video real quick and show you I just released my brand new book called the book of deadly scripts You want to know how to overcome any objection in the world? You want to know how to literally pick up the phone and every single time you do create a hot end market buyer Wants to buy a vehicle do me a favor shoot me a text right now<PHONE_NUMBER> I don't have this book for sale on the website if you'll shoot me a text I'll send you the link so you can buy it. Let's crush it and kill it this book will change your life It just got released. Let's get back to the video Studying Andy and Jacqueline Elliott and giving back to you next one. The number one is your spirituality. I Don't care what you believe in God Allah Buddha. I don't doesn't matter But you have to believe you're more than just life and death Starts with your rituals for me And my gratitude my rituals are the time I get up in the morning and what I do throughout the day My gratitude is what I'm grateful for in the morning that puts me in that happy state that helps me find my happiness my inner peace Man that struggles with the dark side. I love my dark side. I'll bring it out into the light And that's something that I'm getting really good at as I study Andy as I study man and women and why we do what we do Ever been on a really good run and you're crushing life six months seven months and all of a sudden Savatage and you go back to zero like that. Who's done that? You're backsliding Why? It's part of the five if you can get all five of what I'm gonna cover here in the next ten minutes in line and Manage all five every day of your life. You will create a lifestyle It will be the most elite version of yourself showing up every day in your life for your people for your family for your tribe for your Contribution and life for your community in your church whatever it might be you will show up and people will come up to you and go Hey, you've changed Thank you. I know you're supposed to and that will be the difference maker your spirituality or your rituals and your gratitude next one my brother health How many can run a million miles an hour on five hours of sleep right now raise your hand Okay, next time I see you next time Andy sees you it has to be every single one of you this life Andy's painting for you This picture it's very real You ever will look at a picture any art bus in here you ever look like it look at a picture And you feel like you're in that moment in that picture That's a great artist what Andy is painted for you for the first half from 9 to noon is a picture of what your life Could look like this is the foundation of what it's gonna take and this is just coming for me Okay, this is what I've instilled in my life over the last year and a half studying this man Taking my life into control not listening to other men and women not doing what everybody else is telling me to do and living for me And my wife I serve my wife. She serves me.   Is it a belief is that the man you want to recreate for your family Aaron?  You got Macklin's who knows the Macklin's raise your hand They're crazy And guess what they serve men and women first before they serve themselves You can't beat us. We have a tribe of men and women that think alike, but you're gonna need your health You're gonna need your stamina. You're gonna need your strengths. We got Danny on the come-up one of the coaches Then he was a mid-level coach. He loves people He loves people. He's a mid-level rev guy as far as money made right now He's the top producer and then one of the top producers in the company You know what his biggest shift was his belief his health's stamina He started contributing spiritually back to others even more is he always there for you when you reach out Your damn right he is and now he's starting to scale as a man next slide my brother This one is very important mindset. How many of you agree mindset is probably one of the most important things outside of closing in negotiations Okay, mindset closing negotiations right there That's a one-dimensional man if man or woman if you master that if you just master mindset closing negotiations You can go make a lot of money with your life, but you're probably gonna be empty and unfulfilled in many other Excuse me many other areas fortitude Get after it Do you have what it takes to show up every day even when your mind's telling you to go dark when the mind's telling you stop The mind's telling you this isn't for you. You know what I'm feeling you've ever felt that way, right?  Because we're a brotherhood and a sisterhood you can't break this this is unbreakable and then your desire The desire to do what you need to be doing when you least likely want to do it how many have ever been there Don't want to get out of bed today. Shit.  Maybe maybe maybe you just fit in your role.   You're two-dimensional. It's pretty good living You live great that way next one my brother Jacob's amazing. I love Jacob. Jacob lived with me for 30 days in the beginning of this journey I'll tell you what boy that guy can even speak It's amazing how Andy picks out the talent. Oh, buddy. Look at this guy Look at him man.  See a lot of men and women think that are honorable behind closed doors Your whole different beast you are a monster.  See if you're honorable and trust you're virtuous No one needs it easy Virtuous and easy Virtually isn't plain safe Virtuous isn't someone that takes out the laundry or does the laundry and takes up the trash provides a good living That's weak And a monstrous monster will take you out and in your relationships You have to be a virtuous man and woman in honor and trust because that's where people can backdoor you In your relationships, they can pick you apart in your relationships.  And now when you tell them you're gonna go train. They're like, yeah, sure Sure, we'll see say how that works out quit telling me you're gonna do Just do the things you're going to do I've told my wife for years I was gonna do things and now I tell her that I'm gonna do this I'm gonna do this She's like, oh, we'll see not anymore because I became honorable in my relationship I became trustful in my word when I say I'm going to do something with my wife I go and do it. You know what I did to fix that I quit taking more on I tell her no more than I do. Yes Because I'm just saying yes and get out of my way and forgetting to do so. That's a stack How many of you guys had to ask your wife for permission to come down here and train? And they said no because they didn't think you're gonna come down here and train and do the work Raise your hand. It's okay. Raise your hand. It was you, right? That's real. Why she don't trust you to do the work, man Are you changing that good because now you just became honorable and trustworthy and one decision One decision changes all that But you got to be honorable in your word and you got to be trustworthy with what you say you're gonna do And that's something that the Elliott group embodies. That's what you're drawn. Does well on the magic bullet We just don't work everybody and we're honorable and you I'm sorry If you tell Andy's clients that you're gonna do something you don't do it and he gets back to Andy It's not a pretty day for you next one Well, how many of you want some money? Well, I want money. I don't do it for money. Okay. Well, then why don't you go make a ton of money and just give it all The way to charity to make yourself feel better. Okay, you do it for the wealth Because once you have the first four in order, it's nice having the money because you can contribute and you're living in a life of abundance That's powerful That's a great way to live So if you have the first four in order your four-dimensional person the fifth one with your wealth That makes you a multi-dimensional person and this is the thing that I learned from Jacqueline Elliott For years. She told me she was you're like one or two to three dimensional. I'm like, no, I'm not I do a lot of things Right Jacqueline. I do this. I do that.   How many of you contribute to the community contribute to your church? Contribute other to more people than other than yourself. It's a powerful thing. It'll move you How many of you have done that and then you've received it?   It opens up a channel of abundance You are now in an abundance mindset and it's absolutely breathtaking to be a part of I never lived this way for 20 years in business I never lived this way. I was a taker a taker. I've always had a servant heart I've always give you if you need anything, but I wasn't going to go out of my way to give my money to anybody I've worked hard for that money. I was gonna save it It was gonna just be with me and just save it and try to stack it for what? The more I give the more I receive and it's a powerful notion. That's one of my brother So I'm gonna wrap up with this my brothers and sisters if you live this way in the foundation five Again, this is me. This is what I take it as this is me studying Andy and Jacqueline This is me literally watching them for years. I'm with Andy seven days a week We're with each other a lot this tribe doesn't separate the internal tribe and this is what I've noticed This is what I put myself through that foundation five it leads to this go back one The foundation five leads to this it would eliminate the two things that cause the most problems in your life fear and anger How many of you have fear and anger in your life? Okay, do you want to know how to get rid of fear and anger in your life? Live in a state of gratitude If you're living in a state of gratitude it replaces all fulfillment that fear and anger can take over because fear and anger cannot coexist Cannot coexist when you're in a grateful state If you're grateful in your life and you're living fulfilled life by living with your health your wealth Relationships fear and anger cannot simultaneously coexist when you're in a state of gratitude If I make fun of your wife, and I bury her right now why make you angry Just like that I own you I own your state. I own you. You're angry, right? But why can't I take you to a state of gratitude? Just like that. We don't practice it And if you don't practice it, there's no way for you to achieve it just like that So if I can make you angry and fearful in a moment's time, why can't I take you to gratitude just as fast?  It is training.  Can you envision that person? What they look like what they're dressed like their stance on stage what they're smell like who they're hanging out with that person The most elite version of themselves is loved by many loved They know what they want. They know what they're gonna get Next slide my brother So we're gonna eliminate fear and anger by living through gratitude the Elliot group Ian Macklin came up with this and I thought it was the most powerful thing I've heard This is very powerful. I want you guys to read this out loud one tribe Louder one tribe One mission One vision That's who we are That's who we want to become we have a vision for you We have a vision for the Elliot group we're becoming the most dominant force to be messed with if you get in our way We will bury you you want to coincide you want to party with us You want to train with us? You want to study this man or woman? That's what we're all about Do you follow Bradley guys? It's Andy Elliot right here at my conference room in Scottsdale, Arizona We are putting on the event of the year June 4th entrepreneurs salespeople Closers business owners you want to build a sales team to learn how to close anybody anytime any place anywhere This is gonna be the event by the way Bradley isn't gonna be here like a speaker at most speaking events He's personally gonna be training from 9 a.m.  Let's go


Hi everyone, Joe from josephyscasebreaks.com doing our final Salo Pack to unlock that basketball mixer which is coming up in a separate video. Final five spots being given away, but we're going to do the break first. Big thanks to these folks here, there are the teams right here, and for the giveaway we'll just re-randomize your names at the end. New dice roll, new list. Two and a one, three times for each list, one, two, and three. After three times, Zach down to Tice, and three times for the teams, one, two, and three. After three times we've got the Cs down to the Nets. Alright so here's the first half of the list right here. Alright Zach Nguyen, got my Lakers. There's the next half of the list right there, Ryan S, Palakins, Ben, Griz. No trade and stuff like this. These quick little mini breaks, filler rakes, just want to give away those spots. Alright there's the final printout right there. You know Darius Basely could be surprising in the playoffs, no? Okay C, Bradley maybe, I mean they look great this regular season, look great during the restart, could be a dangerous team in the playoffs. We'll talk about it in the basketball mixer. And the pink camo exclusives to this set, three cards in here, we've got a Goga Batadze, we've got some quality minutes in the restart as well for the Pacers, we can see him in action too. The Pacers are in right? The Pacers are not in? I don't know, we'll talk about that during the mixer. Alright let's flip back to this screen, Russell with the Hawks down to Sean and the Wizards, let's get all your names in here. It's going to be top five after, top five after four, one, two, three and four, fourth and final time after four from a spot six down to thirty, thank you. Thanks for getting in, thanks for giving this a shot, we'll get them next time. Top five, congrats to Ben, Ryan, Mike, Ollie and Adam, there you go.


All right. Cool. So let's do this. We're going to perform a perfaudit of your Polymer app. That's a lot of words. Let's shorten that up. It's more like performing a PA of yo, PA, or we can go shorter. Anyways, let's get into it. There's a word that I want to just bring up. Slow. It's just like, it's this word. I don't love it, because the challenge with the word slow is that it's just kind of ambiguous. And slowness can be a lot of things. It's like, I heard that animating things with jQuery is slow, and a script in the head is slow. But how do you compare these things? And what actually matters more? It's really hard to pull it apart some. So is 10 milliseconds slow? 10 milliseconds in the page load of an e-commerce site? 10 milliseconds delay? It's really not going to show up in the page load. But 10 milliseconds in a WebGL, 60 FPS experience, adding 10 milliseconds to every frame is going to completely decimate the experience. It's going to be terrible. So that, certainly, 10 milliseconds makes a big difference here. So it's contextual, right? But that's not it. It's not just when it happens, but it has to do with what the user is thinking. So we've been thinking about this on Chrome, trying to come to a better understanding of how to think about performance, and slowness, and fastness. And we're like, we need to construct a nice model for this. And we went back to the 10 things. I think it's like the 10 principles of Google. And number one is this. It's focused on the user, and all else will follow. Like, OK, I like it. Let's think about how we can be extremely user-centric when we talk about performance. Cool. All right, so how do we do that? I don't know. First up, the way that we all think about performance is basically that faster is better. And just make it faster, and it gets way better. And so it's just this linear relationship between the two. But along this line, there's a few important points that happen. At the very bottom, when performance is really poor, it's bad. I mean, you load up some experience, and either it's taking too long to start, or as you're using it, it's just really having a hard time. You quit, right? You're just like, nope, got things to do. And it's a little bit faster. At some point, you're just like, yeah, that's not great, but I can deal with it. And it's bearable. Faster than that. And you're just like, everything's good. I'm very happy. It looks great. This is awesome. And then even faster than that, it could get faster, but it's harder to actually see the difference sometimes. So maybe the relationship here is not so linear. Maybe it's a little bit more like this, where we have this trough in front of everything, where basically in between this really bad performance and bad performance, it's just not good enough.  But at some point, it's good enough. And then they're happy and delighted even. So there's this area right here, kind of in the middle, where that's where you want to be. But what are the numbers? How do we quantify this area? All right, so let's take another look at this. These are the kind of numbers. And you might have seen these before. This is the result of kind of decades of research into humans and perception and response times. Basically trying to get a gauge of like, people don't need things to be truly instant for it to feel instant. There can actually be a fair amount of delay, and they still think it was actually instant. But there's all these sorts of things that were between our brain and the computer. There's kind of like some wiggle room sometimes, but there are definite points at which you change your decision. You're like, nope, I'm impatient now.  That just happens. So what if we kind of take these ideas and apply them to this model? So instead of thinking about kind of just what is slow, we think about what does the user feel? And that's how we've been thinking about kind of all of performance. So let's take a look at what a user might feel.  This is just kind of like a typical journey. I'm clicking through on a search result, loading up this year's IO site. It animates in, I click on the hamburger icon, and that kind of opens up. I tap on that guy right there. Loading, animation, that's cool. Ooh yeah, this is nice. Scrolling, good. And tap on that little icon, and then it loads in. Cool, all right.  Ah, but this actually, you know, here we are, this entire user journey was comprised of these more atomic interactions. You know, like I was, we were loading, and then we were like waiting, and then there was an animation, and then tapping on the icon, and then loading, waiting for the page, and then there was another animation. Like there's these individual unique things that kind of happen along this entire journey, and breaking it apart into these atomic components makes it a lot easier to understand the whole thing. So we've been thinking about these and kind of these little sections, if we kind of break them apart, there's like four of them, four categories here. There's page load. There's idle where like, you know, you're not really doing anything just yet. There's responding to input. Like, you know, tapping, clicking, something's happening, and then there's scrolling in animation. And for each of these things, we as users bring different expectations to them, and certainly have different, you know, the amount of time that we're willing to put up with for each of these things is different. So the way that we think about this is we kind of embody in a acronym, we call it RAIL. So you might have heard this. This is kind of the name of the performance model that I've been talking about, and this is a very fast introduction to it. So I apologize. But it basically ends up, if we take all these numbers from research and apply them to these components, we end up with something like this. Now, there's a lot on the screen, but the ones that I'll really highlight at this point is load, where the goal is really to have it ready to use in a thousand milliseconds, or a second. It's aggressive, but it's also doable. Over on response, the goal is from any sort of tap, any click, going from the tap to the paint, where you actually see a difference, having that in under 100 milliseconds. Hitting that means it is instantaneous to the user. So those are our primary goals, and so I wanna look at how we can kind of apply these goals in the real world, and evaluate the performance of things using this as a framework. All right, so we're gonna look at a few sites, and the first one that we're gonna look at is Reddit. All right, this is some cool stuff. So recently Reddit redid their mobile site, and so it's a really nice kind of mobile web app, and I mean, I use Reddit sometimes, and I was on it, and I was looking at this, and the image hasn't loaded yet, and I mean, none of the images have loaded yet, but I was looking at this for a long time, and I was like, what is going on? And so I had to plug in my phone, and start remote debugging, and see what is happening right now. So I did that, and when I record it, it looked like this, which is, there's a lot going on, but one thing that I'm gonna point out is, the end up here, this is 50 seconds, this is almost a minute, and this is the page load experience. And I was like, wow, and usually with a page that takes a long time to load, it's because they have a million files and network activity, but in this case, they really didn't have a lot of network activity, they just had a lot of JavaScript to run, just a lot, and I was like, okay, you know, what is all this stuff? And so, you know, start digging, start looking. So we're gonna zoom in a little bit, and I found, you know, we can kind of piece this together in four big acts, and so basically we start off, react one, then there's kind of the booting up and initialization of some things, then we really get into the components, and then we do some other stuff. Anyway, I'm not gonna get too deep into this, but it was really helpful to kind of break this apart into the primary phases here. But I still had a lot of questions as to what the work was that was going on in here, and one thing that you can do, Reddit did not do this, but one trick, this is kind of a pro tip, in your code you can just drop in console time and time end, and it'll spit into the console, but in addition to what it adds to the console, it'll add these actual measurements into the timeline and dev tools, and so you'll be able to see those kind of measurements added into the flame chart, so you can kind of coordinate what is happening in the JavaScript engine, along with what you've actually defined. Well, this is this thing, so that helps a lot, but they didn't have that, so we're looking at all this activity, and I'm like, I don't, this site is actually, the app is made with React, we're seeing a lot of this mount component, so it seems like, that's why I call it component party, a lot of stuff going on, right? And I'm just like, I don't know, but I needed a way to pick it apart. The size of the total JavaScript bundle, they browserify it, they send it down in one big chunk, it's a meg, 1.1 megs GZipped, which is, and it's 3.3 megs, not GZipped, that's like a lot, you know? And so I took it to this tool, this is a tool called disk, and yeah, I'll just bring it up, it's like, it's really cool, so basically you can take a browserify bundle, let's see if I can zoom this guy, take a browserify bundle and give it to disk, and it'll kind of visualize things. So this is, it takes up space where there's file size, kind of like, you know, when you're trying to find what's consuming disk space on your hard drive, like the same kind of deal. So actually over here, this little quadrant, this is their app, this is the Reddit, the Reddit mobile app. And then here's their node modules, a lot of stuff, Babel, the Babel polyfills, some DOM serializer, this green sock, for animation, 100 kilobytes, and actually while they tried to do some animation, it was happening in 40 seconds worth of JavaScript and you never actually see anything, so that was one opportunity. Here's Lodash, there's a React down here, and actually there's another Lodash inside of here. Yeah, so it's just like interesting, you know? The fact that it's so much JavaScript is not necessarily a bad thing, like you can still, things can be fast even with a megabyte of JavaScript, but it was helpful to identify, you know, that some of these things. So this gave some insights, but we still needed to like pull it apart a little bit more. And so what it did is it took some of the React perf tools and kind of injects it and the nice thing that it does is instead of seeing mount component, mount component, and just having no idea what it is, it actually tells you, you know, these are the actual components and this is the mount time for each individual one. And I was like, yes, awesome. So here we actually see, you know, like, look at the top, a SNU icon is our number one guy, like, buy a lot. And you're like, icon, an icon is like the number one most expensive thing in this, like, six seconds for an icon. And you look and you're like, what is this new icon? And it turns out it's this little dude, right? It's smiling so smug. He's like, yeah, six seconds for me, bro. And, okay, it gets better. All the mount time, you're like, why do we have mount time for this? So he's SVG, which like, you know, is a little bit more complex than like a ping, but like, sounds cool. He's SVG so that when you mouse over him, he can animate and like smile and wink and do like a, like it's really kind of cute. It's awesome. But that animation, like I said, is on mouseover. And this is a mobile site. So it turns out, it doesn't really happen ever. At all. And so the most expensive thing is spent doing an effect that is completely wasted. So that was interesting. Yeah, there's a lot of like, pretty interesting things that happened, digging into this. And so it's all actually documented in a big issue thread on GitHub. And it was fantastic because the developers from Reddit were involved and they've already started improving, like they fixed this icon really fast. They've improved a lot of things already. And some of the React team also was like engaging and helping people understand what was going on. Good stuff, it's cool. All right, let's take kind of the same ideas but like apply it to Polymer. We're gonna start off with Google patents, which was recently redone with Polymer. And so we're just gonna kind of like do, you know, some demo-y stuff and we're just gonna load this up. Okay, here's the new Google patents and I'm just gonna type for Polymer. Seems like a good thing. True story, my dad actually has a patent relating to Polymers, which is just, I mean, it's random, but that's also cool. All right, we're gonna come back. All right, I'm gonna open up DevTools. Where are you buddy? Come on, come on. Yeah, that's my guy. All right, so we got DevTools. And what I wanna capture, like the key interaction, anytime you do profiling, you're like identifying an interaction that really matters. For me, it's just clicking on the search result and seeing the page come up. So I'm gonna capture that. Here we go and yep, I'm on timeline. I'm just gonna hit record and we'll click on the second guy. To do spinner and there we go. Okay, cool. We're seeing that and there we go. I'm just gonna pop this guy out to make him full screen because we don't really need to look at the page for right now. Okay, so the flame chart. This might be where you're like, hmm, and I'm not really sure where to go next. Which is a reasonable response. But let's get uncomfortable and try and figure out what's going on. All right, so we see these two big stacks, right? And height doesn't really matter so much. Height is just the stack depth. What really matters is width. We see two and the reason why is because here we have the click and then here we have the XHR coming back. But that's kind of interesting, right? Like just clicking on that guy was about 600 milliseconds, which seems like a fairly long amount of time just for the click handler. The XHR is another one and a half seconds. So in total, we're looking at about three seconds. So this is certainly beyond our budget of load, which is one second. But, I mean, this is a web app. I would even expect a sub one second for this little state change. Okay, so we want to kind of understand what work is happening here so we can find out why it's so silly. So we just zoom in a bit and we're just reading the call stacks to see what they tell us. So what I actually see here is we have push state coming in and then we have a pop state event. So it looks like basically on the click we update the URL with the push state API and then as a result pop state fires and then when pop state fires, there's like a bunch of stuff that happens, which is a bunch of stuff. Yep, yep, is that it? Yeah, yeah, everything is hooked on to pop state. Okay, cool. This kind of immediately stands out to me, right? These are style recalcs and they're happening via JavaScript. And so this is like a reflow, commonly called a reflow. Any style recalc or layout that's forced by JavaScript is usually not great. We could dig into this now, but we're gonna get to this bit a little bit later. I wanna come over to the XHR. Okay. Bunch of stuff. It looks like a lot, but again, we wanna break this up into phases and understand what is happening. So I'm just gonna zoom in a bunch and start reading it. Oh, okay, okay. So we have result response coming in and then load HTML. So basically, the XHR is being handled here and then it looks, this is interesting. So object, define properties, setting the inner HTML and then as a result of that, we are, it looks like we're clearing the DOM and so we're removing a bunch of stuff from the DOM and so that's this whole section. In fact, one nice thing that you can know is the coloring of all these little rectangles. For all the JavaScript stuff, the colors are based on the file. So it's a unique color profile. So it's kind of nice because this stuff here, this like yellow is coming from the actual search, like the patent search app. This is Polymer Mini and then this is Polymer. But it gives you a nice kind of indication of where the code is. Okay, so we got all that stuff. We're clearing the DOM and then this next section, which looks a little bit different. We are still in the result response load HTML in your HTML set. But this time, what do we have? I don't know. There's some stuff running here that we're not ready to talk about. I don't know. Add features. It was like, yeah, I'm not sure. But it seems to be initializing some new components based on the fact that, oh yeah, over here we see we're stamping out a template. This is all happening as a result of the HTML. Okay, okay, okay, okay. This section over here, and this is what this is all about. It's just the zoom in and the watching and the, because we were reading the narrative. It's like a bedtime story. It's just really deep inside a JavaScript engine. Just like your best friends and you just give them names and put funny hats on them. All right, this time we're adding nodes. Adding nodes when we're setting the HTML seems really good. And we get through all that. We distribute some content to our shadow DOM. Oh, yeah, render. Okay, I think we're done. We're done? Rendering.  That makes sense. Okay, cool. So that is basically the story of these one 1,300 milliseconds. All right, cool. But there was something that was like, a bunch of this work had in common, right? Something I feel like that kind of stood out. Anything, anyone? The... Yes! It was the... No, just take credit. It was the inner HTML, okay? So that's like kind of interesting, right? Like all this work is happening because of this inner HTML.  And so you wanna like click through. And so I'm just gonna click into search up and then you're like, oh, obviously. No, okay, let's click the button in the bottom left. And there we go. Cool. Yeah, all right. We'll zoom in a bit here. Yeah, okay, cool. Here's our result response. And then here's load HTML. Nice. And then check this out. Polymer DOM, this we're just doing about wrapping around our guy with the Polymer DOM stuff. .inhtml. So we're using Polymer's inner HTML kind of wrapper to set basically the payload coming in from the XHR. So the XHR is returning a bunch of HTML and we're just inner HTML leading it in. Which like is certainly one way to do it. But it's not dumping an entire page worth of HTML at a web app that's initialized and has bindings everywhere. It's kind of self-destructive which is basically why we have to destruct like the entire world and then reconstruct it in order to show the page. So basically inner HTMLing like we're essentially removing all the content and then like pulling it apart, removing it gracefully and then dropping in new stuff and initializing all that and doing that every single time. Not the best idea and so a better approach is just like returning JSON in the response and just data binding like normal. So there were some opportunities certainly here to adjust that if this was done not through inner HTML but through proper data binding, we certainly wouldn't be doing all this work and I imagine that most of our rendering work also we would not be doing because the components would already be built and so I imagine that we would essentially end up with about 10% of this work actually left with just that small change returning something different. Okay, one more thing I wanna show here which is like there's a lot of information in here and sometimes it's a little hard to pull it apart, right? Like we're just going millisecond by millisecond. So this is fairly new. We can also view this data similar to how you might have viewed things in the CPU profile over here but it's down here in aggregated details and so what we basically have, let's see, yeah, cool, is by function. So all of our functions sorted by self-cost but the nice thing is we also have things like recalculating style, garbage collection layout, things like that all kind of merged in so you get the full picture of all the work that's happening sorted by where the time is being spent. So this is really kind of a nice, you can also group it by URL. So here we can like see the distribution between Polymer Mini, Polymer and their code but another thing that I really like and I'm just gonna reload the page to get this capture here, do you done? Yep, is in addition to grouping all the work by URL perhaps better on like large sites, publisher sites where you have like third-party content, other scripts coming in is understanding like where all the scripts are coming from and so grouping all the work by domain and subdomain so here we basically have like we see the work coming from patents, Google, here is like APIs, Google, this is actually part of Google Plus, down here is Google Analytics, here's some of the Google Plus integration so you can get a nice view of like all the third-party content, how much cost that is adding to the page and the other thing you notice like a bunch of Chrome extensions like see the actual impact of the Chrome extensions that you're running and what they're actually doing to the page. So, yeah, this is a kind of a pretty enjoyable way to understand who is spending time on the page. Okay, that seems good for the patent site. Now we should check out one more. I'm doing a point now and actually the patent site, we just recently found this inner HTML kind of faux pas and we'll be working with them to fix it so. But it had, yeah, there's areas to improve, always. The Polymer Summit site is a very nice site but it is my responsibility to also find areas where it can improve, so we're gonna do that. All right, cool. Good looking site. We could watch this and see if we could get like the doon doon doon doon. That'd be dope. All right, but we won't. Schedule, speakers, I like this. Okay, so what I wanted to actually do, I'm gonna profile just clicking, just navigating across these guys because it feels pretty good as far as response time is concerned and I just wanna get a better view. And so, yeah, all right. Let's check that for the moment, see what happens. All right. Do-do-do-do-do-do-do-do-do-do-do-do-do-do-do-do-do. Yeah, do-do-do-do-do-do-do-do-do-do-do-do-do-do-do-do-do-do-do-do-do. All right, so before I kind of skipped like what the very top of everything was showing us. So quickly, the green is frames per second. So when it's tall, that's great. And when it's short, that's not great. And then here is the main thread activity, just kind of like a visualization of what's happening beneath. When it's tall, that's bad. And when it's short, that's good. And then on the top, it's just kind of like a responsiveness indicators where red is bad and red is bad. So that's easy enough. But underneath, you see these new guys.  And that means that we can actually just kind of like play back the activity as it happened. And so just like understand kind of what happened in this animation, which I really, really like. Yeah, so this is cool. So the nice thing here is like you can walk through it this way, or you can even like click in to a specific frame, let's say like in here, and just like use your arrow keys and just see the specific things down the bottom and then be like, oh, that one's very interesting and try and find out what exactly happened in that specific frame, kind of coordinate it with what was on screen. This is cool stuff. All right, for the moment, I'm gonna turn that back off. We're gonna look at what the profile actually showed us. What do we got? Zoom out. All right, so we got these three big humps, which makes sense because those were my navigations. All right, there's a bunch of stuff. Whoops, oops, oops, oops. If I look down here, yeah, it's like my time is actually split between script and rendering. Which is weird. So if you wanna move this up and down, you grab it and drag it or pro tip, shift, and then drag will scroll it. I actually only learned this, this one, like three weeks ago, and I was like, seriously, never told me this. It's really useful. Oh my God, okay. We're gonna make this better so that I don't, okay. All right, so yeah, these call stacks are very tall. Like I said, tall is not necessarily a problem. We're gonna just read things, function call, we're going in, yep, yeah. So here is our rendering cost. We're doing a recalc. So this is a forced recalc, and it's being, you wanna figure out why, why is this happening. It's being called by new underlying animation for keyframe effects, which you're like, I don't know, I have no idea. So this is deep in the guts of Polymer, and it turns out, it's pointing to this line right here, turns out that we're actually just calling the animate method on a function, and it's actually currently forcing a recalc, which is unexpected, and it's actually, we think it's a Chrome bug. So we'll probably just be fixing that in Chrome so that the developer of the site doesn't have to worry about it. That'll be good. But let's go over here to this handsome stack. Where are you, buddy? Hey, hey, what am I, did I, oh yeah, scrolled up. Okay, cool, cool. Cause I was looking at this one before, and it's a little different. This is when we clicked back to the homepage, and we're just gonna scroll down, and okay, again, a forced layout and style, and if I look at the little pie chart for this guy, yeah, like, going back to the homepage, there was like 10 milliseconds worth of JavaScript, but pretty much all of our time was spent in this forced recalc, which you really don't want, so why did this one happen? A little different of a reason, so Polymer Select changed, what are you? We click in, and yes, okay, see this right here? So here, we basically asked for the page X offset, asking for, the reasons why you get forced layout is you are usually requesting dimensions, you wanna know the metrics of the width of this, the height of this, and in this case, asking for the page's dimensions, requires a layout of the things inside of the page for a big, ugly explanation that I don't love, but the short version is scroll bars. It's rough, anyways. So the key is, you certainly don't, we don't want to be spending all that time here figuring out what these numbers are. So the fix is basically, if we need those numbers, and we need it somewhere around this time, what you wanna do is request it at the beginning of all this work. Basically, you wanna request it before you change anything about the DOM, because that makes sure that we already know the metrics from the last time we like painted everything and figured everything out, so we could just reuse those numbers instead of recomputing the world to give you the new ones. So if we just ask for the PageX offset, like up in this first part, it'd be good. All right, all right, I think that's it for Polymer Project, the Summit site. It is actually a very well-put-together site, so not much to complain about. Okay, so this stuff is pretty fun for you and you want some more. I showed a number of things from the DevTools, some of the new things that have landed in Canary. I went through some of these, but not some of the later ones. So there's more stuff coming soon, so keep your eyes out for that. There's this kind of journey of going through an audit of in detail of what happened in this 100 milliseconds. We've done this a number of times with a number of different sites, and you're very welcome to just learn from them, click through them. There's a lot of really good stuff in here, especially some of the more recent ones, like the ESPN and the Verge, it's good stuff. But even more useful than reading about some of these is going and doing it on your own. This is actually a picture of the Wikipedia engineering team, and what they did is they took the timeline, they just printed it out on paper, which is dope. So cool, it was like paper, yeah. And then there's markers and sticky notes and just being like, this is this, and this is this, what is this? Just trying to figure that out. And it was fantastic, because not only was it a good exercise to go through, but just recently, this is the time to first paint for Wikipedia, and they made it, it's now 200% faster than it was. And this is as a direct result of the performance auditing that they were doing beforehand. So Wikipedia is faster now, so that's really good. But anyways, I encourage you all to take that same initiative and take a same kind of look at the work that you're doing and figure out how you can match it up against user expectations and dig into it and make it even faster, do some good stuff. Anyways, thank you guys very much, appreciate it. Thank you. Thank you.