weird javascript hacks

weird javascript hacks

here's a weird javascript stuff I've found and/or built while on my many rabbit wholes into the webs weird and wacky world of working with browsers!

Console.log( Gif)? wait...what?

lets start simple

level 1

lets set some style on our console.log!

console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");

okay well thats neet and all but what does that have to do with gifs?

well hold your horses im getting there

Level 2: Console pirates

console.log('%c ARRRR Ima console pirate!', "background: #222; color: red; font-size: 20px;   0 0;");

so if i can add arbitary css? well what could i do now...

what about an image

Level 3:

Load an image into the devtools log???



yes that works, just wow.

Okay, images no problem, whats next?

What about image tiling? 🤔


console.log('%c Oh my heavens! ', "background: #222; color: [[bada55]]; font-size: 100px;  background: url('') 0 0;");


Okay thats nice and all but what about gifs?

Level 3: GIFS!

console.log('%c Never...', "background: #222; color: [[bada55]]; font-size: 100px;  background: url('') 0 0;");

a little more zoomed in..

console.log('%c Never...', "background: #222; color: [[bada55]]; font-size: 100px;  background: url('') 0 0; background-size: 100% auto;");


Browser Popup window Flappy bird!

This next one is both equally WHAT?! and amazing

its flappy bird made using major abuse of the popup window api in browsers

Made by   Charlie Gerard

Charlie Gerard

Link to website

Flappy Bird game with browser windows


how does this wizardry work?

they (maybe she? idk ill use they to be safe) open up a window using

And use the screenX=${resolutionWidth - 100} to dynamically set the start location of the flappy bird pipes!

but heres the trick part!

how does jumping with keyboard work???

the code checks if the space bar was pressed

then is this function is called every time you press the space bar!

Last last question is how do they update the position of the bird? and handle button input across windows?

Full source code is found here

last note: i love how easy the code is to read, very well done interms of simplicty!

Scrolling Tabname

this is on of my older projects but i was wondering what it would look like if you could have the tab name change dynamically! anser is this project!

Click "set tab name" after you enter some text into 'input' and the tab scrolling text changes!

add any tags to the dom

I found this weird tag feature in a popup chat within a website


but how do i add my own weird html tags?

what about <oraly></orly> ?



I didnt know you could do this stuff, html is well a bit weird

Read more cool stuff!

For more fun and weird content checkout my other blog posts about javascript and other things!

Recommended Javascript posts:

Hidden Javascript features
Here are some uncommon or little known used javascript featuresconst b = template`wait what?`
Little-known javascript “window” functions
My Deep dive into the browsers global “window” object. Journey:I was interested to see what all the functions were on the global window object. Object.getOwnPropertyNames(window).map(x =&gt; { try{ console.log(x, window[x]) }catch(e){ console.log(&quot;NOT FOUND&quot;) } }) Example outputFavorite fi…


by oran collins


If you want to help me out and give some donations here's my monero address: 432ZNGoNLjTXZHz7UCJ8HLQQsRGDHXRRVLJi5yoqu719Mp31x4EQWKaQ9DCQ5p2FvjQ8mJSQHbD9WVmFNhctJsjkLVHpDEZ I use a tracker that is pravicy focused so if you block its cool, im big on blocking stuff on my own machine. im doing it to see if anyone is actualy reading my blog posts...:)