Bookmarklets

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

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?

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

nobody uses Pinterest.

Boss, and Scott Before any JavaScript that is run-in to add on to it. It's a it's a wild world there. I'd love to hear what your favorite, I love,

In this

CSD. Welcome to Syntax.

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

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,

Monday. Monday. Monday.

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

the craziest,

you wanna have an in app notification, was a bookmarklet.

So what is a bookmark? Woah. A bookmarklet or or anything. I hate that it doesn't default to 4 k. So there's always someone that has written a Greasemonkey script 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,

so we'll talk us quite a bit about Magic Bell right now. Wes. Yes. Magic Bell, the real time notification

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

Firebug maker,

Which is, yeah, book bookmarklets.

all about what a bookmarklet prompt box as well. It could be pretty handy. Yeah. Yeah. It's funny because it does largely feel like a technique that,

Magic Bell is

And use the coupon code that JavaScript instead will execute on the page that you're on. So I think bookmarklets are kind of replaced by,

inbox, post about 7 cool bookmark or 6 cool useful bookmarklets.

Well, this initially started out as a,

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.

the embeddable notification 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

Anymore. But, yeah, Pinterest Was a bookmarklet.

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,

Boss. Hey, everybody.

c s

are JavaScript,

colon 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.

Extremely handy because they are snippets of JavaScript that are stored,

before we had it. But bookmarks are still IIFE.

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

that like, a stylish that will allow you to run JavaScript on on a page every single time that it runs.

a URL, It's funny. You think about bookmarklets, you know, which essentially And you say JavaScript colon Slack notification.

So bookmarklets it doesn't have a big enough pause button, or I don't like that it doesn't have enough options for speed You can even take user input if you were to use a prompt, 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,

that we have now

It. Peace. Peace.

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

And you're like, okay, That is pretty cool. Find duplicate IDs in the DOM.

bookmarklets 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, print page is awesome. If you go to JavaScript that gets run on a website

that would be added to your page. There's lots of Greasemonkey add ons for your browser.

Head on over to syntax.fm

It's just people would create Greasemonkey scripts Chrome extensions 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.

and associated Greasemonkey scripts or

Yeah.

I love YouTube, but I hate that it and you just drag and drop that into your toolbar. So inbox for your product. So you're thinking, okay, I'm building an app. I want to be able to put, or little snippets of JavaScript that people just paste into the console. And in fact, I know that, like, there are extensions

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.

is, Detect duplicate is that if you write JavaScript when you press a button.

Bookmarklet, Iffy will run immediately on the actual page that you're running,

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, explicitly go and get it. I don't remember Grease Monkey. You don't remember Greece? Oh, man.

CSS

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

I'll link it up. Booklet bookmarklet 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.

There's a little GitHub I found.

Yeah. Totally.

So I'll post this link in the show notes as well so you can get some

more info here. I think with bookmarklets,

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

Grease Monkey is was You're gonna wanna check it out at magicbell.com

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

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,

arbitrary JavaScript or whatever on the page. But with these, it's just straight up

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 the answer is, you know, extensions

nice for us to you know, we play our

without having to publish anywhere and install anywhere. It's just a drop in code.

JavaScript that you can really read yourself or you can author yourself and use

An extension for some of these things.

us. Some of our interview question games, Wes and I are out and just, like, copying and pasting a script

Really? It's true. I always copy paste it in, and I believe there are you can email them, push notifications,

invoked as bookmarks. And I don't know if people have bookmark toolbars anymore, but You can still still run them. And the idea is And they have an example of alert hello world. You can generate it, functional expression, What is this? The monkey 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, it. Column so you could see how a website is laid out on the grid.

and Iffy, and then any code that runs inside of that Greasemonkey is scripts that run on

immediately

I know in the past Chris Coyer had a really good code that you copy paste into your console tweet us as syntax fm because I'm sure you have some good ones.

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

a color widget bookmark.

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, In fact, this might actually be

Did you see this

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,

a CSS tricks from March 28, 2022

has been long forgotten, 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,

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.

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.