ryangjchandler.co.uk

(laravel, javascript, rust and more)

Bookmarklets You Should Definitely Be Using

tips-tricks

Bookmarklets have been around for decades. Most people will reach for applications (web and desktop) to handle certain things, when in reality a bookmarklet can be just as useful.

As developers we spend a lot of time in the browser. Let me show you some of my favourites, things I wouldn't be able to go without.

The code in this post won't be in the correct format for a bookmarklet since it's not super readable. I'd recommend using a bookmarklet generator like this one or this one.

Unique plus-alias emails

When you're testing applications, you'll probably need to create an account. This bookmarklets will create a unique email address using + aliases and UNIX timestamps.

(function () {
    window.navigator.clipboard.writeText(`youremail+${Date.now()}@yourdomain.com`)
})()

It's an IIFE that will copy a unique email address to your clipboard. This is great for testing registration forms and emails.

Quick color picker

I find myself converting colors from hex codes to RGB and HSL a lot. Instead of using a dedicated desktop app for this, I can just use the browser's own color picker.

<html>
    <title>Color Picker</title>
    <input type="color">
</html>

Disabling client side validation

Most of the forms I build use server-side validation as well as client-side validation. Testing the server-side validation rules can be a pain when they also have client-side counterparts (required, min, max, etc).

To get around this, I have a bookmarklet that will disable client-side validation on all forms.

(function () {
    document.querySelectorAll('form').forEach(form => form.noValidate = true)
})()

Simple, but super productive!

Design mode

Modern browsers have the something called "design mode". It turns the current page into an editable document, allowing you to modify text. Perfect for when a client or manager is asking what a piece of copy looks like in a certain position.

(function () {
    document.designMode = (document.designMode === 'on' ? 'off' : 'on')
})()

If you've got some cool bookmarklets that you'd like me to add to this article, let me know on Twitter. I'm always looking for new ways to increase / improve my productivity.

Found this article useful? Share on Twitter!