524

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.

or
Topic 0 00:00

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.

Topic 1 02:51

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.

Topic 2 03:59

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.

Topic 3 04:34

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.

Topic 4 04:51

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

Topic 5 06:14

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.

Topic 7 08:09

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.

Topic 8 08:34

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.

Topic 9 09:08

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.

Topic 10 09:55

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.

Share