Bookmarklets You Should Definitely Be Using
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.