CMS Scot Web Design & Development: Blog: Browser extensions

Extensions – not to make things bigger, as with the bankers and wealthy merchants of San Gimignano – but to make them better.

A quick list of extensions we use in browsers – Vivaldi, Chromium and Firefox, in that order. Some are aimed at web development, some just make the internet easier.

Bitwarden – password manager

Bitwarden: Always the first one in a new install, the recent addition of built-in 2FA (Two Factor Authentication) made it even better. Pay for it and you can have a shared set of logins across your team. Otherwise, it’s free. Definition of no-brainer, this.

Oh, what is it, you ask? It’s one-password-to-rule-them-all … remember one password, it will remember all the others, all of your logins, all of your sites. It will generate new passwords when you’re registering somewhere new, and you never need care what they are – you just have the one master password to remember and it takes care of the rest.

uBlock Origin – ads be gone

uBlock Origin: In the beginning there was ABP – Adblock Plus. With the ‘Plus’ being Ads. If you really don’t want to see ads, you want slightly dodgy affiliate links to be intercepted, and, for the really slimmed-down page, you fancy the option of ‘zapping’ noisy elements (looking at you, Twitter sidebars), then uBlock Origin is waiting for you.

Free, regularly updated and light on system resources, it also has one other major selling point – the ABP icon.

*** Added bonus for web developers: it will block stuff you’ll not want it to block. And you’ll forget that fact, regularly. Keeps you keen. See also: cache.

Cache Clearing

And again, what is it, you (may) ask? Browser cache, for the user, means pages load more quickly if you’ve visited them before. Your browser will keep ‘in-memory’ elements of the page which means they’ll be served-up from your device, not the web-server they reside on. So quicker, especially if the server where the site is based is physically distant and under-resourced.

For web developers, this is a PITA and there are many, many extensions that seek to ease this pain. For Chrome, we have settled on Clear Cache – does what it says on the tin, clears the page cache and reloads it though – pro tip – the reload option is not on by default. That one is Chrome only so, for Firefox, we use Empty Cache Button.

Both are simple, single-click buttons, and they pretty much always work. The non-web devs amongst you – definitely still reading, yes? – may also find cache-clearing tools in your browser to be useful; aside from ensuring you’re always looking at the most up to date version of the page, you are bound to be asked ‘have you cleared your cache’ if you’re talking to support for pretty much any online service or utility.

Screenshots & Videoshots

Explain & Send Screenshots: Definitely heading out of the top-ten most downloaded extensions with this one, but it’s a keeper, it’s simple, intuitive and yet has all sorts of options for annotating the screenshot you’ve just taken.

We just made up the word videoshots but this extension also records (with audio, if required) videos of your screen with just a couple of clicks, ideal for sending to someone to demonstrate how to do – or how not to do – something or other.

Worthy mention: use Vivaldi browser instead of Chrome/Chromium and it has a great built-in screenshot function. It’s the best browser for web development, period. We’ll fight you.

Code inspector (and more …)

Hoverify: A Swiss Army knife extension for web developers (though purists may still prefer built-in browser inspectors), it has a very different way of displaying CSS inspection (with breakpoints, which is nice), as well as debug, screenshots, asset collection (won’t fully work in Vivaldi, but that’s a known issue, nothing the developer can do), ‘Built-with’ and more.

For full feature set you’ll need to pay, but check the reviews – consensus is that it’s worth it!

Responsive testing

Responsive Viewer: Currently looks to be Chrome only but this is the nicest viewport tester we’ve used.

Specify devices, screen sizes, flip modes and synchronised scrolling. Very accurate, very useful. Does screenshots too.