Bookmarklets

Monday. Monday. Monday.

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,

Boss, and Scott

CSD. Welcome to Syntax.

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

Boss. Hey, everybody.

Hey, Wes. This episode is sponsored by an amazing company, ding ding ding Yeah. Magic bell.

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

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.

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.

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.

Well, this initially started out as a,

did this come into our our mailbox here? I think it was an email. I think it was an email. Yeah.

Which is, yeah, book bookmarklets.

It's funny. You think about bookmarklets, you know, nobody uses Pinterest.

Anymore. But, yeah, Pinterest Was a bookmarklet.

Firebug was a bookmarklet.

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.

So bookmarklets are JavaScript, JavaScript that gets run on a website when you press a button.

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.

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.

That's really handy. Hide assigned Jira tickets, Show all hidden fields on a page.

Detect duplicate script tags on a page.

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.

But what you can do with a bookmarklet is you have what's called an IFFI, An NVIDIA immediately invoked functional expression, IIFE.

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.

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

An extension for some of these things.

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.

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,

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.

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.

But it's definitely doable, and you can still access your bookmarks via the bookmarks bar or hunting through your menus.

Yeah. Totally.

There's a little GitHub I found.

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.

You can even take user input if you were to use a prompt,

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.

Did you see this a CSS tricks from March 28, 2022 post about 7 cool bookmark or 6 cool useful bookmarklets.

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.

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,

What is this? The monkey monkey style style monkey? What was that thing where people style their own? Styled monkey. Grease monkey. Grease monkey.

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.

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.

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.

Yeah.

I would love to see that. Alright. Thanks for tuning in. We will catch you on Wednesday.

It. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.