October 17th, 2022 × #javascript#bookmarks#automation
Bookmarklets
Wes and Scott discuss bookmarklets - JavaScript snippets that run on any page when clicked. They explain what bookmarklets are, how to use them, and share examples.
- Bookmarklets are JavaScript run on page click
- Store JavaScript snippets as browser bookmarks
- Can select elements, loop, apply styles with bookmarklets
- Examples: find duplicate IDs, show hidden fields
- Use immediately invoked function expressions (IIFEs)
- Used for printing, removing header/footer, etc
- More transparent than extensions, just JavaScript
- Bookmarks toolbar not as popular anymore
- Bookmarklet maker tool to generate code
- Can take user input with prompt() too
- Forgotten technique but very useful
- CSS Tricks - 6 useful bookmarklets
- Like userscripts e.g. Greasemonkey
Transcript
Announcer
Monday. Monday. Monday.
Announcer
Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes, Barracuda,
Wes Bos
Boss, and Scott
Scott Tolinski
CSD. Welcome to Syntax.
Scott Tolinski
In this Monday hasty treat, we're gonna be talking about a technique that Many of you may have used before or may not, and we're talking about bookmarklets, all about what a bookmarklet c s is and how you can use them to, have some interesting behavior for your tools. My name is Scott Talinski. I'm a developer from Denver, Colorado. With me as always is Wes
Wes Bos
Boss. Hey, everybody.
Scott Tolinski
Hey, Wes. This episode is sponsored by an amazing company, ding ding ding Yeah. Magic bell.
Scott Tolinski
Magic Bell is the embeddable notification inbox, so we'll talk us quite a bit about Magic Bell right now. Wes. Yes. Magic Bell, the real time notification
Wes Bos
inbox for your product. So you're thinking, okay, I'm building an app. I want to be able to put, notifications into it. So you you know, like, oh, just push to an array. It's a lot more complicated than that. If you wanna notify your user, you wanna have an in app notification, email them, push notifications, Slack notification.
Wes Bos
What if you want to somebody saw the in app notification, so you shouldn't email them. What if they get 10 in 1 minute, or you should should batch them? There's all kinds of stuff to it. So Magic Bell solves all of that. You can integrate it right into your application.
Wes Bos
You're gonna wanna check it out at magicbell.com And use the coupon code syntax f m. This gives you 10% off your 1st 12 months, and they have a free plan that is up it. To a 100 miles, which is monthly active user. Thank you, Magicfell, for sponsoring.
Scott Tolinski
Well, this initially started out as a,
Wes Bos
did this come into our our mailbox here? I think it was an email. I think it was an email. Yeah.
Wes Bos
Which is, yeah, book bookmarklets.
Wes Bos
It's funny. You think about bookmarklets, you know, nobody uses Pinterest.
Wes Bos
Anymore. But, yeah, Pinterest Was a bookmarklet.
Wes Bos
Firebug was a bookmarklet.
Wes Bos
So what is a bookmark? Woah. A bookmarklet is, one of my other favorite ones is the 9 60 grid system had a bookmarklet. And, essentially, what is overlay or what? Yeah. I just overlaid the, it. Column so you could see how a website is laid out on the grid.
Store JavaScript snippets as browser bookmarks
Wes Bos
So bookmarklets are JavaScript, JavaScript that gets run on a website when you press a button.
Wes Bos
In the case of Pinterest, it will embed the Pinterest JavaScript and Allow you to pin certain images on it. In the case of Firebug, it literally added the console before we had it. But bookmarks are still Extremely handy because they are snippets of JavaScript that are stored, as bookmarks. And I don't know if people have bookmark toolbars anymore, but You can still still run them. And the idea is is that if you write JavaScript colon Before any JavaScript that is run-in a URL, that JavaScript instead will execute on the page that you're on. So I think bookmarklets are kind of replaced by, Chrome extensions that we have now or little snippets of JavaScript that people just paste into the console. And in fact, I know that, like, there are extensions that like, a stylish that will allow you to run JavaScript on on a page every single time that it runs.
Can select elements, loop, apply styles with bookmarklets
Wes Bos
This was sent in from Matt Bushey, and he said, like, I think they're underrated. I write a whole bunch of, like, little ones. He says, here's some common ones that he uses. Grayscale all images without an alt tag. Well, you're you're scanning a website. Which web which images don't have an alt tag? Well, this with, like, 2 lines of of code, you can Figure out which ones are because they'll go grayscale or put a big red border around them or make them spin around with a class. Right? That is pretty cool. Find duplicate IDs in the DOM.
Wes Bos
That's really handy. Hide assigned Jira tickets, Show all hidden fields on a page.
Examples: find duplicate IDs, show hidden fields
Wes Bos
Detect duplicate script tags on a page.
Wes Bos
That's those are all very handy things to do. And At the very least, you can just copy paste these into your console for them to run.
Wes Bos
But what you can do with a bookmarklet is you have what's called an IFFI, An NVIDIA immediately invoked functional expression, IIFE.
Use immediately invoked function expressions (IIFEs)
Wes Bos
And you say JavaScript colon and Iffy, and then any code that runs inside of that Iffy will run immediately on the actual page that you're running, and you can do things like select elements, loop over them, check if they have an alt tag, apply some CSS to each of them.
Wes Bos
I know in the past Chris Coyer had a really good print page CSS Bookmarklet, which essentially what it would do is you click it. It would remove the header in the footer. It would strip unnecessary styles. It would just do, like, 15 or 20 different things that made a page very nice to to be printed. Right? And these are things that, like, I don't really need an extension for that, but it's kinda handy to have this 10, 15 lines of code every now and then, and that's what a bookmarklet is. If you ever find a website that makes you mad, Just remember, you are a developer and you can change how that website looks and functions with a little bit of JavaScript and a little bit of CSS And that's what a bookmarklet is for. Yeah. What's interesting, you know, people might listen to this and immediately say, well, why wouldn't I just use
More transparent than extensions, just JavaScript
Scott Tolinski
An extension for some of these things.
Scott Tolinski
And the answer is, you know, extensions are a little bit more of a black box. Right? You're installing something that is of a specific format that's to run as arbitrary JavaScript or whatever on the page. But with these, it's just straight up JavaScript that you can really read yourself or you can author yourself and use without having to publish anywhere and install anywhere. It's just a drop in code.
Scott Tolinski
In fact, this might actually be nice for us to you know, we play our us. Some of our interview question games, Wes and I are out and just, like, copying and pasting a script into the into the console to To run some JavaScript to pick out a random question, we could make a little bookmarklet for 1 of these 2 to run that same code. Yeah. Yeah. Exactly. That would be really,
Wes Bos
Really? It's true. I always copy paste it in, and I believe there are maybe Firefox used to have this. You would just have, like, little scripts that you could save in your console and rerun them every single time.
Wes Bos
And that's essentially just what a bookmarklet is, Except that it puts it in. I think bookmarklets have kind of died out because people don't have a bookmark toolbar anymore, so it's not as easy to just to go ahead and click them.
Bookmarks toolbar not as popular anymore
Wes Bos
But it's definitely doable, and you can still access your bookmarks via the bookmarks bar or hunting through your menus.
Scott Tolinski
Yeah. Totally.
Wes Bos
There's a little GitHub I found.
Wes Bos
I'll link it up. Booklet bookmarklet maker, And they have an example of alert hello world. You can generate it, and it will give you the actual code, and you can You can just drag and oh, that's that's how you make it a bookmarklet as well as you you have an anchor link, and you just drag and drop that into your toolbar. So There's not much more else to say about bookmarklets other than they're just JavaScript that runs on the page, and they're pretty handy.
Can take user input with prompt() too
Wes Bos
You can even take user input if you were to use a prompt,
Scott Tolinski
prompt box as well. It could be pretty handy. Yeah. Yeah. It's funny because it does largely feel like a technique that, has been long forgotten, but it is super useful. So, yeah, I Almost never consider bookmarklets whenever I'm thinking about anything, and I think that will probably change now. I think I'll I'll at least think about them.
Forgotten technique but very useful
Scott Tolinski
Did you see this a CSS tricks from March 28, 2022 post about 7 cool bookmark or 6 cool useful bookmarklets.
Scott Tolinski
No. Activating design mode. So those you don't know, your browser has a design mode that allows you to just basic basically have everything as content editable, and And it's actually kinda hidden through a command prompt in the dev tool. So having that in a bookmarklet makes a ton of sense if you just wanna activate design mode really easily. Applying a background to everything, simulating events, setting cookies, toggling classes, a color widget bookmark.
CSS Tricks - 6 useful bookmarklets
Scott Tolinski
So I'll post this link in the show notes as well so you can get some more info here. I think with bookmarklets, again, you just have to think about it. This some JavaScript you can apply to your page and you can write on dev tools, right? I mean, you can build some cool stuff. That's the whole idea behind,
Wes Bos
What is this? The monkey monkey style style monkey? What was that thing where people style their own? Styled monkey. Grease monkey. Grease monkey.
Wes Bos
Greasemonkey is scripts that run on a page to modify it every single time that you load the page. It's it's the same idea except Instead of running every single page load, it just runs when you click on the page and you actually explicitly go and get it. I don't remember Grease Monkey. You don't remember Greece? Oh, man.
Wes Bos
Grease Monkey is was is awesome. If you go to It's just people would create Greasemonkey scripts that would be added to your page. There's lots of Greasemonkey add ons for your browser.
Like userscripts e.g. Greasemonkey
Wes Bos
And you're like, okay, I love, I love YouTube, but I hate that it it doesn't have a big enough pause button, or I don't like that it doesn't have enough options for speed or or anything. I hate that it doesn't default to 4 k. So there's always someone that has written a Greasemonkey script to add on to it. It's a it's a wild world there. I'd love to hear what your favorite, bookmarklets and associated Greasemonkey scripts or code that you copy paste into your console tweet us as syntax fm because I'm sure you have some good ones.
Scott Tolinski
Yeah.
Wes Bos
I would love to see that. Alright. Thanks for tuning in. We will catch you on Wednesday.
Scott Tolinski
It. Peace. Peace.
Scott Tolinski
Head on over to syntax.fm for a full archive of all of our shows.
Scott Tolinski
And don't forget to subscribe in your podcast player or drop a review if you like this show.