The Reload button in Chrome has three options. If you open the Chrome DevTools (F12) the three options are visible by holding down the “Reload this page” button.
Normal Reload
Windows keyboard shortcut: F5 or CTRL + R
Reloads the current page.
Hard Reload
Windows keyboard shortcut: CTRL + Shift + R
Reloads the current page but ignoring the cached content.
Empty Cache and Hard Reload
Windows keyboard shortcut: Not available
This option empties the entire Browser cache and not just the parts for the current page. Given the impact of this option it makes sense that there is no keyboard shortcut which might accidentally trigger this option.
Acknowledgements
Scott Hanselman’s keynote at NDC London 2019 where he first made me (and half the hall if the sounds of “ooooo’s” is anything to go by) of this functionality in Chrome
This answer from Stack Overflow. Accessed 23/05/2019
This answer from Stack Overflow. Accessed 24/05/2019
Here’s what I learnt when building two To Do applications. One was built using pure JavaScript and the other used jQuery with a smidgen of JavaScript.
Each To Do list had to satisfy several basic functions. The user had to be able to add tasks, remove tasks, save tasks and be able to retrieve them. These To Do lists are far from production quality but what I have learnt by building them will help immeasurably in my next project and the one after that and so on.
Tools
Both examples were built using Visual Studio Code, jQuery 3.3.1 and Chrome 67. Any text editor can be used instead of Visual Studio Code but I have found it to be a joy to use and is now a firm favourite of mine.
Practical experience of using Web Storage to save and retrieve tasks.
Understanding Immediately Invoked Function Expression or IIFE. Whilst there are other reasons to use an IFFE such stopping name collisions in this example I have used an IFFE to call a function that retrieves the saved tasks once the Document Object Model (DOM) has been loaded.
Although there is only 200 lines of JavaScript I have become familiar and thankful for Chrome Devtools. Pressing F12 has become second nature when I need to find out what is actually going on with my code. From seeing errors shown in the console to adding breakpoints via sources, I have found Chome Devtools so intuitive to use.
Creating and removing input items dynamically. The To Do list needed functionality whereby a user could add and remove tasks which translated to being able to create input elements and attach them to the parent. When removing an item, the code needed to find out which task had been selected for removal before removing it.
When refreshing my knowledge of JavaScript I was having trouble getting to grips with which selector I should use when selecting elements of the DOM. Experimenting with different JavaScript selectors such as querySelector, getElementById for single element node selection and getElementsByName for selecting more than one node gave me a greater understanding of working with the DOM and the difference between the code required to handle one node compared to when a node list is returned.
Use of the jQuery ready method. All the code used by index.js is contained within the jQuery’s ready method, the shorthand version of which is shown below
$(function() {
all code goes between the opening and closing brackets
}
Doing this ensures that the DOM has tree has been constructed by the browser.
Similar to the JavaScript version I learnt how to create and remove items dynamically and attaching or detaching them from the parent as necessary.
When working with items using the id attribute requires use of the # symbol followed by the unique name. e.g. to select the following element:
0 tasks
The following jQuery expression is used
$('#Count').text($countOfItems);
Refactoring. As I was building this second ToDo list I could see ways to improve and do things better with less code. In addition whilst working on this version I discovered a bug with that would have also affected the JavaScript version as well so I was able to go back and fix it in both.
I really enjoyed working with jQuery and love the simplicity of selecting items and then chaining of actions to do interesting work with the selection but there were times that I thought pure JavaScript was a better fit. Within index.js you can see the function getLocalStorageAsArray() does not use jQuery.
Use of .each(). jQuery allows you to update all of the elements selected without the need for a loop. However there were times when I needed to perform some actions on each element found by a selection which meant use of the .each() method which allows you to recreate a loop in scenarios when it is required. This required a slight shift in thinking because it is too easy to think a loop is required (coming from another language) when a jQuery selection is all that is really needed.
A pleasant side effect of working with .each() was that I needed to find out which iterator my .each() was currently processing and during my hunt for an answered discovered that the jQuery official documentation is really good and it succinctly pointed me to using using the index argument.
The number of lines of code when using jQuery versus pure JavaScript reduced the lines of code by about 50 lines (I’m in no doubt a more experienced developer could reduce both versions down even further.) I am not going to read too much into that because it is like comparing apples with oranges but for me it was an interesting observation.
Summary
I have surprised myself with how much I have learnt building these and how much fun I had doing so.
Lighthouse is a useful tool that is unfortunately tucked away within depths of the Chrome browser devtools. It performs an audit of a URL that you supply and provides a report based on scoring across five categories; Performance, Progressive Web App (PWA), Accessibility, Best Practices and Search Engine Optimisation (SEO).
The easiest method of taking it for a spin is to start Chrome, go to a page of interest, press F12 then the >> button and choose Audits
which that will bring up the Lighthouse home page.
Pressing “Perform an audit” will present you with options to include or exclude one of the five categories.
You invoke Lighthouse by selecting “Run audit”. After an interval the report will be displayed. The Lighthouse report for google.co.uk is shown below.
The top bar gives information about the URL used and the emulation options used. Immediately underneath are the five categories with a score between 0 and 100, where 0 is the lowest possible score. This page explains the Lighthouse v3 Scoring Guide.
Selecting a category will take you to the relevant section of the report.
It is also possible to invoke Lighthouse using the Node command line tool. First install it using the Node Package Manager. I have used the -g option to install it as a global module.
npm install -g lighthouse
Once installed you can then use a command such as the following to run Lighthouse. The view option automatically opens Chrome and displays the HTML report.
lighthouse https://www.google.co.uk --view
If you prefer the output in JSON the following will create a file in the directory the command was run from
