Bookmarklets You Should Definitely Be Using
This post was published 2 years ago. Some of the information might be outdated!
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.