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???

WAT?

yes that works, just wow.

Okay, images no problem,...so whats next?

What about image tiling? 🤔

Sure...

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

Yep.

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('https://emojis.slackmojis.com/emojis/images/1539890226/4845/rickroll.gif?1539890226') 0 0;");

a little more zoomed in..

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

Better

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

Link to website

Flappy Bird game with browser windows

HOW!?!?!?

how does this wizardry work?

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

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
https://flappy-windows.netlify.app/index.js

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!

https://p5-scrolling-browser-tab-name.surge.sh/

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> ?

document.getElementsByTagName("body")[0].appendChild(document.createElement("orly"))

Presto!

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?`

Oran's BlogOran C

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 => { try{ console.log(x, window[x]) }catch(e){ console.log("NOT FOUND") } }) Example outputFavorite fi…

Oran's BlogOran C

Author

by oran collins
github.com/wisehackermonkey

20211225