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.
Windows keyboard shortcut: F5 or CTRL + R
Reloads the current page.
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.
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
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.
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.
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.
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
all code goes between the opening and closing brackets
Doing this ensures that the DOM has tree has been constructed by the browser.
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:
The following jQuery expression is used
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.
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