132

I thought it'd be nice to write up a celebratory post, in honor of passing 1,000,000 questions!

enter image description here

My thanks go out the the massive community active in the tag, asking, answering and otherwise contributing to all kinds of interesting questions.

On to 2M!

var c = document.getElementById('celebration'),
    SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    mousePos = {
        x: 400,
        y: 300
    },

    // create canvas
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    particles = [],
    rockets = [],
    MAX_PARTICLES = 400,
    colorCode = 0;

// init
$(document).ready(function() {
    c.appendChild(canvas);
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    setInterval(launch, 800);
    setInterval(loop, 1000 / 50);
});

// update mouse position
$(document).mousemove(function(e) {
    e.preventDefault();
    mousePos = {
        x: e.clientX,
        y: e.clientY
    };
});

// launch more rockets!!!
$(document).mousedown(function(e) {
    for (var i = 0; i < 5; i++) {
        launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
    }
});

function launch() {
    launchFrom(mousePos.x);
}

function launchFrom(x) {
    if (rockets.length < 10) {
        var rocket = new Rocket(x);
        rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
        rocket.vel.y = Math.random() * -3 - 4;
        rocket.vel.x = Math.random() * 6 - 3;
        rocket.size = 8;
        rocket.shrink = 0.999;
        rocket.gravity = 0.01;
        rockets.push(rocket);
    }
}

function loop() {
    // update screen size
    if (SCREEN_WIDTH != window.innerWidth) {
        canvas.width = SCREEN_WIDTH = window.innerWidth;
    }
    if (SCREEN_HEIGHT != window.innerHeight) {
        canvas.height = SCREEN_HEIGHT = window.innerHeight;
    }

    // clear canvas
    context.fillStyle = "rgba(0, 0, 0, 0.05)";
    context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

    var existingRockets = [];

    for (var i = 0; i < rockets.length; i++) {
        // update and render
        rockets[i].update();
        rockets[i].render(context);

        // calculate distance with Pythagoras
        var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));

        // random chance of 1% if rockets is above the middle
        var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;

/* Explosion rules
             - 80% of screen
            - going down
            - close to the mouse
            - 1% chance of random explosion
        */
        if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
            rockets[i].explode();
        } else {
            existingRockets.push(rockets[i]);
        }
    }

    rockets = existingRockets;

    var existingParticles = [];

    for (var i = 0; i < particles.length; i++) {
        particles[i].update();

        // render and save particles that can be rendered
        if (particles[i].exists()) {
            particles[i].render(context);
            existingParticles.push(particles[i]);
        }
    }

    // update array with existing particles - old particles should be garbage collected
    particles = existingParticles;

    while (particles.length > MAX_PARTICLES) {
        particles.shift();
    }
}

function Particle(pos) {
    this.pos = {
        x: pos ? pos.x : 0,
        y: pos ? pos.y : 0
    };
    this.vel = {
        x: 0,
        y: 0
    };
    this.shrink = .97;
    this.size = 2;

    this.resistance = 1;
    this.gravity = 0;

    this.flick = false;

    this.alpha = 1;
    this.fade = 0;
    this.color = 0;
}

Particle.prototype.update = function() {
    // apply resistance
    this.vel.x *= this.resistance;
    this.vel.y *= this.resistance;

    // gravity down
    this.vel.y += this.gravity;

    // update position based on speed
    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;

    // shrink
    this.size *= this.shrink;

    // fade out
    this.alpha -= this.fade;
};

Particle.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }

    c.save();

    c.globalCompositeOperation = 'lighter';

    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;

    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
    gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
    gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
    gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");

    c.fillStyle = gradient;

    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();

    c.restore();
};

Particle.prototype.exists = function() {
    return this.alpha >= 0.1 && this.size >= 1;
};

function Rocket(x) {
    Particle.apply(this, [{
        x: x,
        y: SCREEN_HEIGHT}]);

    this.explosionColor = 0;
}

Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;

Rocket.prototype.explode = function() {
    var count = Math.random() * 10 + 80;

    for (var i = 0; i < count; i++) {
        var particle = new Particle(this.pos);
        var angle = Math.random() * Math.PI * 2;

        // emulate 3D effect by using cosine and put more particles in the middle
        var speed = Math.cos(Math.random() * Math.PI / 2) * 15;

        particle.vel.x = Math.cos(angle) * speed;
        particle.vel.y = Math.sin(angle) * speed;

        particle.size = 10;

        particle.gravity = 0.2;
        particle.resistance = 0.92;
        particle.shrink = Math.random() * 0.05 + 0.93;

        particle.flick = true;
        particle.color = this.explosionColor;

        particles.push(particle);
    }
};

Rocket.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }

    c.save();

    c.globalCompositeOperation = 'lighter';

    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;

    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
    gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
    gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");

    c.fillStyle = gradient;

    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();

    c.restore();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="celebration"></div>

(Celebratory fireworks shamelessly stolen from here.)

23
  • 25
    Here's the one millionth question by the way: stackoverflow.com/questions/34153690/… Commented Dec 8, 2015 at 10:51
  • 70
    So tragic.​​​​​
    – Cerbrus
    Commented Dec 8, 2015 at 10:52
  • 60
    Of course, the celebratory post should only say Use jQuery. Commented Dec 8, 2015 at 10:57
  • 1
    I am a bit disappointed that the question isn't something JavaScript The Good Parts can fix...
    – Sheepy
    Commented Dec 8, 2015 at 11:00
  • 10
    OK, where's the wake being held? Commented Dec 8, 2015 at 11:15
  • 11
    +1 for using jQuery in the code snippet </s> Commented Dec 8, 2015 at 12:43
  • 12
    Oh, also, it is quite apparent, but still worth noting, javascript is the first tag to reach this milestone on Stack Overflow :) Commented Dec 8, 2015 at 12:46
  • 2
    Wow! Note 400K questions have been asked in the last 18 months :O JavaScript ranked 3rd tag in amount of questions back then.
    – fedorqui
    Commented Dec 8, 2015 at 13:11
  • 44
    I'm wondering how many of these are good questions.
    – Bv202
    Commented Dec 8, 2015 at 13:25
  • 8
    @Bv202 lol, 'good questions' Commented Dec 8, 2015 at 14:39
  • 31
    I cannot read this question...I have javascript disabled.
    – Paulie_D
    Commented Dec 8, 2015 at 15:56
  • 6
    You can click the fireworks to make more pop up :D Commented Dec 8, 2015 at 18:35
  • 13
    Given all the puns these days, I thought it was a request to burninate [javascript] Commented Dec 8, 2015 at 18:49
  • 6
    @BhargavRao "We should totally drop [javascript] and use [jquery] instead" Commented Dec 8, 2015 at 19:19
  • 3
    You did expand and run the snippet, right?
    – Cerbrus
    Commented Dec 9, 2015 at 16:35

7 Answers 7

78

Congrats! Long live JS!

🎊🎉🎆🎇🎈🎆🎉🎊

And JS will rule with ES6, and ES7, and forever!

Behold, a self rendering script to show the power of JavaScript!

<!-- By Tiffany Rayside http://codepen.io/tmrDevelops/pen/jEEdNy -->
<canvas id ='oldSkool'></canvas>
<script>
window.requestAnimFrame = function(callback) { window.setTimeout(callback, 1000 / 30); };
  var db = document.body, c = document.getElementById('oldSkool'), $ = c.getContext('2d'), resume;
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  function relay(){ window.requestAnimFrame(relay); resume(); }
</script>
<script>
  //BEGIN SCRIPT RELAY TO HUMAN... 
  
  _s = db.querySelectorAll("script")[1].innerHTML.split("\n");
  x = 0; 
  y = 1; 
  c.width = w = window.innerWidth;
  c.height = h = _s.length*20;
  db.style.margin = 0;
  db.style.background = "hsla(0,0%,0%,1)";
  db.style.overflow = "hidden";
  $.textBaseline = "top";
  $.font = "1.1em monospace";

//PAUSE RELAY: TIME TO PRAY...
/*

Our Script in cross-platforms,   
    hallowed be your name,       
    your specification come,     
    your will be done,           
        on server as in browser. 
                                 
Give us today our Stackoverflow answers.
                                 
Forgive us our sins              
    as we forgive those who wrote sinful code.
                                 
Save us from class based inheritance
    and deliver us from static language.
                                 
For the prototype, the power, and the glory are yours
    now and for ever. Amen.
   ___                  _____           _       _   
  |_  |                /  ___|         (_)     | |  
    | | __ ___   ____ _\ `--.  ___ _ __ _ _ __ | |_ 
    | |/ _` \ \ / / _` |`--. \/ __| '__| | '_ \| __|
/\__/ / (_| |\ V / (_| /\__/ / (__| |  | | |_) | |_ 
\____/ \__,_| \_/ \__,_\____/ \___|_|  |_| .__/ \__|
                                         |_|        
*/
//RESUME SCRIPT RELAY...
  
resume = function(){
    $.globalCompositeOperation = "source-over";
    $.shadowBlur = 0; $.fillStyle = "hsla(0,0%,0%,0.4)";
    $.fillRect(0,0,w,h);
    $.shadowColor = "hsla(120,100%,50%,0.5)";
    $.shadowBlur = 9; $.fillStyle = "hsla(120,100%,20%,1)";
    $.globalCompositeOperation = "lighter";
    _s.forEach(function(t, i) {
      if (i > y) return;
      if (i == y) t = t.substr(0, x);
      $.fillText(t, 100, 100+i*16);
    });
    $.fillStyle = "hsla(120,100%,50%,1)";
    $.fillRect(100+$.measureText(_s[y].substr(0, x)).width, 102+y*16, 10, 14);
    x++;
    if (x >= _s[y].length) { y++; x = 0;}
        if (y*16 > innerHeight-200) { $.translate(0, -0.5);}
            if (y >= _s.length-1) { window.clearInterval();}}

relay();
  
//END SCRIPT RELAY _
</script>

4
75

We should totally drop that tag and use jQuery instead.

Congrats to all of us! Hooray!

5
  • 8
    I like your sarcasm.
    – GolezTrol
    Commented Dec 8, 2015 at 16:00
  • 3
    On a serious note, I'm still confused if we should be happy or not. 1M questions? That's really, really a LOT. But it also means that Javascript is growing fast, and a lot of dev's everywhere are embracing it. And of course, that SO is growing as well still. Both of these are awesome!
    – Malavos
    Commented Dec 8, 2015 at 18:06
  • 3
    @Malavos No, it means that people are becoming more and more dependant on other people to understand js(more ignorant perhaps?) Commented Dec 9, 2015 at 2:00
  • @julianavar: That would mean a lower percentage of questions is getting answered. Can you back that up with data?
    – Cerbrus
    Commented Dec 9, 2015 at 6:11
  • 1
    Not necessarily. Maybe the answerers have just been more busy.
    – GolezTrol
    Commented Dec 9, 2015 at 8:20
54

They say a fool can ask more than ten wise men can answer, but how many fools do you need to get one million questions about a topic that is already documented so well.

Anyway, I doubt if this number is reason for celebration. I actually think the opposite.

14
  • 11
    If anything, I think this amount of questions illustrates the versatility and popularity of the language. That isn't a bad thing.
    – Cerbrus
    Commented Dec 8, 2015 at 15:56
  • 6
    We should have a massive cleanup effort.
    – djechlin
    Commented Dec 8, 2015 at 16:01
  • 19
    @Cerbrus I like Javascript, and I do think Javascript is popular for a reason. It is versatile and powerful. But come on, one million questions? If you would filter out all the duplicates, uncomprehensible questions, and RTFM questions, and a hundred thousand remain, I would be surprised. But then celebration would be in place, because an archive of one hundred thousand good, unique questions with a good answer, is certainly worth having.
    – GolezTrol
    Commented Dec 8, 2015 at 16:41
  • 2
    @GolezTrol funny that you should say that, 10% is exactly the number I was betting on when I was reasoning how many javascript questions would be actually good. Good as in following the Q&A standard, not good as in helped a non-IT person make things and stuff work in their wordpress site by having their copy/paste attempt corrected.
    – Gimby
    Commented Dec 8, 2015 at 17:15
  • 3
    Not closed, with a score >= 0. So, that's about 89.7%. 40.6% has a score > 0. Don't be so pessimistic ;-)
    – Cerbrus
    Commented Dec 8, 2015 at 17:34
  • 3
    This is why we can't have nice things :( Commented Dec 8, 2015 at 17:35
  • 3
    I was about to refute what @GolezTrol said. But then I saw this i.imgur.com/CbiNTqk.png
    – user1596138
    Commented Dec 8, 2015 at 17:37
  • 1
    About half of those are not tagged with javascript. So, that's ~34.4% of javascript questions that are also tagged with jquery.
    – Cerbrus
    Commented Dec 8, 2015 at 17:47
  • 3
    I thought I just check that, so I went to page 25000 of the 50000-something, and searched based on some of those questions there. Then it seems that for unminifying, IOS contacts cordova, Events firing multiple times and probably many more, there are sometimes dozens of duplicates, not marked and all non-negative.
    – GolezTrol
    Commented Dec 8, 2015 at 18:55
  • 6
    ... Now of course, the fact that there are so many questions even about using a specific Cordova feature suggests that Javascript is widely used, but it's also a signal that there is poor moderation and many of these questions are apparently easier to answer than to look for duplicates on. So while it sure 'proves' the popularity of Javascript, it certainly proves as well, that people don't search before asking, and neither search before answering, and that this archive of a million doesn't contain a million by far. But then again, this is probably true as well for other tags.
    – GolezTrol
    Commented Dec 8, 2015 at 18:57
  • 1
    The "Not closed, with a score >= 0" search, when applied to different tags returns similar percentages, yea.
    – Cerbrus
    Commented Dec 8, 2015 at 19:00
  • 2
    @GolezTrol most definitely, css for example. The true warlords can whip out an answer and a fiddle faster than you can click the flag button.
    – Gimby
    Commented Dec 8, 2015 at 22:43
  • 3
    Not closed with a score > 5 doesn't even mean they're valuable questions :) @Cerbrus. Commented Dec 9, 2015 at 8:06
  • 1
    @MillieSmith: Your point..?
    – Cerbrus
    Commented Dec 9, 2015 at 8:16
-9

Of course there are plenty of useless questions, but it's probably the same with any other language. This is just an indicator of the increasing popularity of JavaScript. I expect the list to grow even more rapidly as the language grows with new standards (ES2015 & ES2016) and with nodejs.

Viva JS!

-10

1000049

Can haz commas plz?

0
-11

When does tag swag happen? 😜 Congratulations JS users! I'm looking forward to iOS, Swift, and Objective-C all getting there!

-15

Amazing! Now is the time to celebrate, as JavaScript has officially taken over the internet! Stack Overflow has proof in the posts :)

2
  • 14
    I thought Javascript was the Internet's assembly language to begin with. Commented Dec 8, 2015 at 16:08
  • 16
    And here I thought that the internet ran on Algol 68.
    – Warren P
    Commented Dec 8, 2015 at 19:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .