How to Hack the Developer Console to be Needlessly Interactive for Christmas

[limelight]

https://konklone.com/post/how-to-hack-the-developer-console-to-be-needlessly-interactive?s=d

[cheapsteak]

    say("\n:sparkles::sparkles: :star2: :sparkles:\n     :christmas_tree: \n :sparkles: :christmas_tree::christmas_tree:  :sparkles:\n   :christmas_tree::red_circle::christmas_tree:\n  :christmas_tree::ribbon::red_circle::christmas_tree:\n :christmas_tree::large_blue_circle::christmas_tree::red_circle::christmas_tree:  :sparkles:\n:christmas_tree::red_circle::christmas_tree::ribbon::large_blue_circle::christmas_tree:")   

For those of you who want to play around with the emoji stuff and feel bad about spamming chat:

    function test(message) {
      events.chat({name: "test", message: message})
    }

afterwards call `test` instead of `say`

[jwise0 → cheapsteak]

Other interesting things to try -- you can create something to call into to synthesize motion with something like:

  function domove(x,y,a) { moveFlag(me.flag, x, y); setRotate(me.flag, a); emit('motion', {x: x, y: y, id: me.id, c: me.country}); emit('scroll', {id: me.id, angle: a}); };

and then you can do more interesting stuff along the lines of:

  a=0; function f () { a += 5; domove(a, Math.sin(a / 50) * 100 + 200, a); if (a < 1000) setTimeout(f, 20); } setTimeout(f, 10);

[cheapsteak → cheapsteak]

I hope I'm not breaking any rules replying to own post (tried to edit but wouldn't let me)

better tree:

    test("\n:sparkles::sparkles:    :star2:  :sparkles:\n        :christmas_tree:\n  :sparkles:   :christmas_tree::christmas_tree:    :sparkles: \n:sparkles:    :christmas_tree::red_circle::christmas_tree:  :sparkles:\n     :christmas_tree::ribbon::red_circle::christmas_tree:   :sparkles:\n    :christmas_tree::christmas_tree::christmas_tree::ribbon::christmas_tree:\n :sparkles:  :christmas_tree::red_circle::christmas_tree::christmas_tree:    :sparkles:\n    :christmas_tree::christmas_tree::red_circle::christmas_tree::christmas_tree:\n   :christmas_tree::ribbon::christmas_tree::christmas_tree::red_circle::christmas_tree: :sparkles:\n:sparkles::christmas_tree::red_circle::christmas_tree::ribbon::red_circle::christmas_tree::christmas_tree:\n        :door:")

Can't believe I spent half an hour on Christmas day making an emoji tree

[SerpentJoe]

I like using toString to convince the console to omit parentheses. Another way would be to use getters, like so:

    window.__defineGetter__('help', function () {
        console.log('I\'m here for you');
    });

[konklone → SerpentJoe]

interesting, I didn't know about that. You still end up having to do a toString override to properly suppress the 'undefined' return value though:

    window.__defineGetter__('help', function () {
        console.log('I\'m here for you'); f = function() {}; f.toString = function() {return " ";}; return f;
    });

But __defineGetter__ would let the execution of the command work in other places than the JS console, so that's cool.

[atguy]

This is so useless that it's awesome! I had no idea that could be done.

[chattoraj]

Feel like it’s worth highlighting this part of the post:

>There is no good reason to do this

I get that it’s a cool easter egg, but please, please don't do this.

[skrebbel → chattoraj]

Why not?

[joshfraser → skrebbel]

All the extra JavaScript makes your site slow.

[jwise0 → joshfraser]

Can you quantify how slow? This is a common refrain against some of these sorts of things (and, indeed, the modern web in general): "adding this thing makes your site slow". But I rarely see quantified results...

[konklone → joshfraser]

it's actually a super tiny amount of JavaScript, you'd be surprised what you can do without something like jQuery bulking things up.

[jayhuang]

Just had a nice conversation with the Great Leader, Assad, and my wife as Barack.

Hilarious spontaneous conversations aside, cool idea!

[joshfraser]

I had no idea you could add styles to the console. Neat.

[esalman]

This post is sitting at the top for several hours now.