11.2: Bookmarklets - Programming with Text

[@AcheiversOfficial]

i thought watching a 17 min educational video on youtube without getting distracted is impossible. I stand corrected. Thank you, Sir 🙏.

[@Hero8Coasters]

javascript:ans = prompt("Are you subbed to the coding train?") if (ans == 'yes') alert('nice!') else if (ans == 'no') alert("why? Go do it!") (I'm very new to coding, and this video helped alot! I hope this code works lol)

[@jacobbelanger5863]

Can't wait for the chrome extension video! This is so awesome!

[@swankshire6939]

I decided to stop procrastinating and tried making a Chrome extension about 3 weeks ago and used many of your tutorials to learn javascript to do it. This series would have probably made is so much easier.

[@Khurr]

Definitely an underrated channel...can sense the passion of teaching...😃

[@MichielP1807]

Here's the code for a bookmarklet to change every font to comic sans: javascript:(function(){ var e = document.getElementsByTagName("*"); for(var i = 0; i < e.length; i++) { e[i].style.fontFamily = "Comic Sans MS"; } })()

[@paintingjo6842]

You sir deserve a cookie.

[@aggbak1]

It works

[@daniell.8184]

It works.. It really works! My prayers have been answered!

[@battatia]

or just javascript: [...document.getElementsByTagName('*')].map(e=>e.style.fontFamily='Comic Sans Ms')

[@aggbak1]

battatia You deserve a smoothie

[@purpleice2343]

This is one of things I never tried myself and it's interesting, thank you!

[@unbekannt792]

So excited! Coded my own extension a while back, it was a lot of fun 🙌🏻

[@StereoPT]

What did it do?

[@unbekannt792]

StereoPT In WhatsApp Web it displayed a little dot next to each contact, which you could click to make it turn green. And to store that info I used the storage-function of chrome extension. Not very useful by itself, but I learned a lot

[@rogelgabrielcristobal7730]

underrated tutorials, pls do more

[@williambillemeyling5647]

Yeees... I have made Chrome Extensions for 2 years now, and I have been waiting for you to bring up that topic :D

[@johnhbenn]

Now I remember why I liked to do programming and cybersecurity last year in 9th grade

[@rehanawajahathussain7642]

New to Javascript Thanks for making this video. Learned a lot. It was fun.

[@army6669990101]

Bookmarklet idea: remove the ytd-comment-renderer if the id="content-text" == "first"

[@TheBengalatiger]

army6669990101 In youtube?

[@officialsebgaming]

fetch(url).then((x)=>{x.text().then(eval)})

[@Ryan1729]

The "technical term" for a self executing function in Javascript is "Immediately invoked function expression" often shortened to IIFE. en.wikipedia.org/wiki/Immediately-invoked_function_expression

[@im.empimp]

When I was first diving into JavaScript, I kept banging my head on IIFEs. I kept hearing about how Ben Alman's IIFE post was really useful. I had to revisit it several times, because I was still learning about the things it depends on (e.g. closures), but one day it really did click! So for anybody else out there, who wants to understand IIFEs, I definitely recommend reading benalman.com/news/2010/11/immediately-invoked-function-expression/

[@TheCodingTrain]

Thanks for this!!

[@suhailxeaser]

If someone's browser does nothing or clears the url bar, you've to do like this. (alert for eg) data:text/html,alert('hi');

[@cteixiara91]

Legend, big up from Portugal your vídeos make me wanna code all day long xP

[@flamamo]

Comand + J = make it 1 line

[@TheCodingTrain]

oh, thanks for the tip!

[@sauravpathak1802]

great !

[@agmsoft]

directly from addressbar no longer working, you need to add the code as a bookmark. (note: not working on blank/new tabs) alternatively you can use this way to run directly from the address bar: data:text/html,(function(){alert("hello");})()

[@ashishpandagre6805]

Instead, javascript:(function(){alert('Hello');})();0; try this.

[@angelcaru]

2:14 It is an IIFE (Inmideatly Invoked Function Expression)

[@MultiPerplexedDude]

Correction its a IIAFE (immediately Invoked Anonymous Function Expression) Copyrighted by Mr Shifmann :D

[@TonyDUsopp]

Oh,you look like the Professor from "La casa de Papel" if you've seen it. Also i lovveee the way you teach!❤❤

[@vader3425]

Dude this helped me a lot tysm

[@SimonTiger]

3:53 Jargon: A URL that starts with `javascript:` is called a _javascript URI._

[@SimonTiger]

No, not URL, URI.

[@TonyDUsopp]

@@SimonTiger i actually love it that you did this second comment to avoid comments😁

[@igotapochahontas]

If it makes u feel better, I write a lot of your videos on my phone. So I don't have a console. I have been turning your logs into alerts this entire time. 😂😂😂

[@SimonTiger]

For some reason, bookmarklets don't work anymore in Chrome! Edit: After doing some research, it appears that they only work if you click a normal bookmark first.

[@turtlepoolservices]

Better late than never... 1:00 javascript:(function hello(){alert('Hello')})(); 3:10 Looking at in the browser 4:40 Writing it out in the address bar remember to write javascript: inside the paranthesis before the function so: This is a

[@markrichardson7475]

absolutely amazing as always.

[@md.zahidulislam3548]

Thanks a lot.

[@dragon3602010]

Awesome dude

[@satyakikundu]

How are you accessing "bookmarklet.js" using a browser? Please help, as I'm getting an error code for the same.

[@chzakirislam1700]

good tutorial

[@keertilata20]

Great video thanks!💯💯

[@thienngo2953]

Amazing!!

[@codewithshivkr]

You are awesome

[@binwangcu]

In the same folder where all the files are, you can run "python -m http.server" and then you can access them via localhost:8000/

[@sujithpalanivasagam5186]

Thanks for the info!!

[@PreKGraduate]

Great video! What color scheme are you using in atom?

[@iminni3459]

Why do you need the anon function at all if you are just going to run it straight away and not reuse it?

[@im.empimp]

Great question! The shortest answer I can give is this, to run JavaScript code it has to be in a function and you have to have some way to tell it that function to actually run. This can be done one of two ways, by calling a named function, or by using an Immediately Invoked Function Expression (IIFE). To learn more, I highly recommend reading benalman.com/news/2010/11/immediately-invoked-function-expression/ (and if it doesn't quite make sense, revisit it again in a few months, and rinse-n-repeat until it makes sense, because when it does, it's a real "Aha!" moment)

[@iminni3459]

Thanks, I'll have a look.

[@PhilipLon7]

javascript:alert() should work too. The immediately executed anonymous function just creates a scope so that if you declare variables they are not in the global scope.

[@TheJammydodger98]

Could someone please be so kind as to clarify why at 13:15 he uses localhost:8000/ and the steps I would need to take to do the same. Thanks!!

[@monty6393]

well i tried to put it on a localhost but now whenever I click on the bookmark I do get everything wokiing means changing 'p' tag to kitten fine but it's making infinite number of request ramping up my CPU any help would be appreciated.

[@Mrukikuki]

Love it!

[@vinaynetha6219]

javascript: function doit() { var openas = window.open("", "_self") } var now = new Date(); var stratum = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 00, 00, 200) - now; var t = setTimeout(function() { doit() }, stratum)

[@ravisoni6262]

My bookmarklet could not be dragged to Bookmarlet Bar? what wrong with it?

[@orc13a]

is it a tag?

[@anonymanonym9004]

Browser support. You have to do it manually

[@tapossarker3006]

hi, i was trying to do this tutorial exactly. but got an error saying that "Uncaught TypeError: Cannot set property 'innerHTML' of undefined" can you please help me. i hosted the js file in localhost as you showed here.

[@Greums_]

And what about firefox ?

[@TheCodingTrain]

I will revisit this question Friday.

[@Greums_]

Ok thank you !

[@Lucifer-ss4mz]

The Coding Train can you check this question monday

[@me_sumit_0]

Sir, is it possible to run a single bookmarklet for multiple pages on a specific website?

[@unnamed49]

as off 2020 this no longer work as a huge security risk for browsers...

[@aideoropeza5545]

How did you set up your p5.js in atom. I am having a difficult time with that especially because I have a chromebook?.

[@AITreeBranches]

Great content, but could you please minimize the Folder tree for us to see the entire code, I'm getting code-blocked every-time.

[@daerunyasin5145]

I want to create twitter login pop up using token API so you don't need email and password to login to your twitter... Can I do it?

[@meashishdutta]

sir how to create Bookmarklet in browser from javascript and open/run it

[@MartinNorskov]

There is no need for the self executing function javascript:alert('hello'; also works

[@MartinNorskov]

Great video as always anyhow :)

[@MyLittleMagneton]

I'm just getting ERR_CONNECTION_REFUSED, when trying to access localhost 8000. Does anyone know what I'm doing wrong?

[@MyLittleMagneton]

After hours of extensive research I've decided that I don't care :^)

[@anonymanonym9004]

Live server extention

[@EnglishRain]

@@anonymanonym9004 Thank you, you are a life saviour!

[@fatkur]

greatttt

[@wplay9402]

May I know what's the name of this playlist? Plis. I wanna give it a follow.

[@pandafish1985]

kzbin.info/www/bejne/npyyhXSjotqplZY

[@krish2519]

I'm facing issue on localhost line, can someone help me how to navigate bookmarlet.js file

[@monarca2846]

How I did not see this before!?

[@EnglishRain]

I think Google has now blocked bookmarklet.js like files running from webhosted platforms right? I think Cross Origin Read Blocking has permamently blocked this and so bookmarklets like these cannot work except if you're constantly fetching from your live server localhost.

[@keplerpierre7783]

in the video he-The coding Train-said "there are all sorts of different kinds of paths that the address bar will accept,this means that the address bar does not only accepts one path it accepts many,can anyone PLEASE help me find a website that will show me the kinds of paths that the browser will accept.

[@435lov]

How do you run the local HTTP server? Is it through Python?

[@PhD_Yamete_Kudesai_Khalala]

it's amazing to learn what you but , please when you start programming show us how you configure the interface thank you

[@slimaaan]

can you share your wallpaper without icons

[@GiantTree]

Does this work when a site is using a restrictive Content-Security-Policy?

[@anonymanonym9004]

Yeah, theres no way to stop it

[@donnygabai6150]

I apologize for this noob question but how do I host my javascript files somewhere for a scenario like this?

[@YaswanthGupta]

www.komku.org/2013/08/how-to-host-javascript-or-css-files-on-google-drive.html

[@liquidmetalrob]

Instead of "new Date().getTime()' you can just put "Date.now()"

[@vinaynetha6219]

javascript: function doit() { var openas = window.open("", "_self") } var now = new Date(); var stratum = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 00, 00, 200) - now; var t = setTimeout(function() { doit() }, stratum)

[@jim9689]

Can anyone tell me the tool he uses at 5:17 when he zooms the screen out?

[@thbwdzzz5010]

Why all the text of this video is in portuguese?

[@dr.mikeybee]

My bookmarklet to make video a floating windowless video: javascript:document.getElementsByTagName('video')[0].requestPictureInPicture();

[@anonymanonym9004]

javascript:document.querySelector("video") is shorter

[@user-fx8lj9pm4w]

im wondering is it possible to host your javascript file on google drive?

[@MatthiasPitscher]

Kind of: www.komku.org/2013/08/how-to-host-javascript-or-css-files-on-google-drive.html

[@dr.mikeybee]

I keep all of this sort of thing on Github. I don't like running Google Drive. You can make a repository private and keep a local copy that's synced.

[@jonmayer]

My favorite bookmarklet I've made is to change all password input fields to plain text so I can see what the hell in typing in the privacy of my own home. Works great to quickly steal a password from someone else's saved passwords as well.

[@tukasum]

wanna send me this? lol

[@anonymanonym9004]

@tuk javascript:document.querySelector("input[type='password']").setAttribute("type","text")

[@aideoropeza5545]

How do I know my "host" domain? or how do I make one?

[@anonymanonym9004]

Do you mean localhost?

[@MikeElmore]

anyone else get a security warning?

[@nagesh6039]

Hi! Would you mind, if I request you to make Bookmarklet for the following 2 clicks (they are on one page): document.querySelector("#\\34 5931R1").click() document.querySelector("#\\34 5932R1").click() Thanks

[@michalbotor]

IIFE

[@charbelsarkis3567]

it did store the cache for me. and made me furious

[@hdmi00]

I have the same issue, I have to empty all my cached files in order for Chrome to see the modifications, did you find any solutions?

[@hdmi00]

F12-> F1 Scroll to Network and chose "Disable Cache while Devtools is open

[@charbelsarkis3567]

Hadhemi Laouini yeah i did you could also ctrl+shift+r

[@Sencifouy]

Isn't that the basis of an xss attack?

[@anonymanonym9004]

It's a xss attack if the javascript code is injected right into the url. As example if google.com/search?q=alert("xss") would work. As long as you don't download random bookmarklets and execute them bookmarklets are compleetly save.

[@uniquecreativeway5093]

13:38

[@phir9255]

Hey how can I do live chroma keying like my favourite youtuber does?

[@EfeCevher]

Thanks for the great topics you cover. But it is really hard to follow the videos, whenever I try to watch this channel, I lose my self in 5 minutes. if you happen to talk less, your videos will be more informative.

[@pulkitkumarsingh5615]

Bade Harami ho Beta

[@MrThonny15]

first