Reading View

Have you ever browsed websites using Microsoft Edge and seen the little reading book in the address bar? That is the reading view option and is an absolute brilliant tool as when it is enabled, it gets rid of all the junk on the page, changes the text size and colours and makes a reading experience so much better. Some sites seem to have it and some don’t, but why? What is the magic juice that is needed to get this enabled for your web sites?

A tale of two Edges

Yes there are two edges we need to worry about here. Firstly there is the out of the box Microsoft Edge that comes with Windows 10 and renders using EdgeHTML. Secondly there is the re-invented Edge that uses Chromium under the hood. Edge powered by Chromium is still in development, but you can get your hands on it by signing up to the Insiders Channels.

Layout of your page

Have a basic layout similar to the following.

Reading View will extract various bits of information out from meta tags and specific classes such as the byline-name, dateline and displaydate and display them prominently on the page:-


reading-view-1

But this does not always work for the default Edge as even Microsoft’s page on Reading View does not work on the default Edge, but does on Chromium Edge.

Here is my test page address bar in both default Edge and Chromium Edge. I should point out that reading view does not work on local html files, they have to be hosted on a server.

Default Edge

default-edge-1

Chromium Edge

chromium-edge-1


But why?

Well I cannot be entirely sure, but my experiments show that if you call your file index.html, and browse to it then in the default Edge it will not have a reading view, but in Chromium Edge it will. However even in Chromium Edge, not all the meta data is extracted as this image shows. But this is all experimental at the moment, so this will maybe change in the future.I should also point out that you need enough content for the parser to deem it necessary to have a reading view. In the above page I have three paragraphs, if it was just the one then reading view is not available.

reading-view-2

Enabling it in Chromium Edge

It is already enabled in default Edge, but currently in Chromium Edge you need to set a flag by going to edge://flags/ in the address bar and searching for ‘Microsoft Edge Reading View’ which as of version 78.0.276.2 is still experimental.

reading-view


Happy coding.

LibMan or Library Manager is a slim and fast package manager that comes with Visual Studio 2017 and 2019 that can be used to download and manage not only JavaScript, but also CSS.

Why use it?


Sometimes package managers such as npm seem to be a little overkill when all you are wanting is a simple JavaScript file downloaded and managed centrally within your project. I personally try and limit my npm packages as I find their reliance on external modules can sometimes break things and can bloat my project file structure somewhat. With Bower being wound down, it leaves a hole for simple package management which has been filled nicely with LibMan.

Why NOT to use it?


Although the github repo states only a couple of reasons not to use it, one is if you are packaging using WebPack. Not too sure about this as I have used both LibMan and WebPack together and am more than happy with my workflow.

How to use it

Right click the project

Select Add --> Client Side Libraries

install library 1

There are 3 options for providers:-

  • cdnjs
  • filesystem
  • unpkg

install library 2

The default is cdnjs which you can see when a libman.json file is produced:-

In this example I have jQuery and jQueryUI libraries installed, however I am a bit picky with jQuery and only want the minified file so within the files array, I specify just that.
If you right click on the libman.json file in Solution Explorer, you get the options to Clean and Restore the libraries and also to Enable Restore Client Libraries on Build. This last option adds a new nuget package to your project which will do just that.

clean library 1


The CLI


LibMan also has a simple CLI that can be used instead of the UI and also in a CI/CD environment (although there is no documentation on the latter
https://github.com/aspnet/librarymanager/wiki/Using-LibMan-in-a-CI-Build).

As it comes with Visual Studio, the CLI is already installed. Using libman --version gives you the version, I get 2.0.76+gb7a1f9d9b0

The three main commands are:-

  • libman -install
  • libman -clean
  • libman -restore

All the command parameters can be found at https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/libman-cli?view=aspnetcore-2.2

cdnjs - The default Content Delivery Network

The default package source is cdnjs. There are numerous reasons to use a CDN, two of which are they are cacheable within the browser not only by your site, but other sites that also use the same JavaScript library version. This can speed up your site giving a better response time for the end user. Secondly, the referenced libraries are local to the browser making the request, so your users in one location will get a response from a local CDN site unless of course it is already in the browser cache.

Use it with ASP.Net

Within the _Layout.cshtml file in your project are the environment tag helpers that help seperate out development code and non development code. Simply make sure you have and include=”Development” and exclude=”development” helpers like this:-


You can copy the source address from the cdnjs page for jQuery and get the sha256 key by copying the SRI like this:-

getting sha key

So what is 'asp-fallback-test' all about?

The asp-fallback-test tag helper injects a script tag into the page, in jQuery's case it is like this:-

<script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/jquery.min.js\u0022 crossorigin=\u0022anonymous\u0022 integrity=\u0022sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=\u0022\u003E\u003C\/script\u003E"));</script>

Which includes a link to the local source JavaScript file. The page will try and execute the window.jQuery which was specified in the tag helper. If that is Truthy, then the CDN retrieval was successful and the page carries on its execution. If it is Falsy, then it will execute the script within the document.write and request the local copy.

You can easily test this by moving the above mark-up into the <environment include="Development"> tags, then look at the development tools in your browser. Firefox shows this:-

uncached cdn file

Which you can see it is fresh as the size is 30.10kB and the response is a 200.

And when refreshing, shows this:-

cached cdn file

The response size is now showing as cached and the response code is 304 for ‘Not Modified’

You can test the fall-back by changing the src to something that would NOT be found and refreshing the page while holding down the CTRL key to force a full refresh. The dev tools show that the script is coming from a local source and not the CDN like this:-

local script

I have only used LibMan on a handful of projects and I am already finding it a simple and useful tool.

Happy coding.

HTTP Endpoint Monitoring for both Windows and Android
WebUp App