159

UPDATE: I just sent out emails to collect addresses from the lucky users getting these watches — be on the lookout for those, and try to fill it in the next two weeks! :)

On occasion of our anniversary celebrations, we offered some cheese boards a while back. If you were late for that, though, no sweat! You’re just in time for another limited edition super special swag contest!

This is the bit where you go It’s about time, isn’t it?” To which I’ll reply with “well... yes, it is about time! How d’you guess?!?”

So, if you want one of these with our logo on it:

enter image description here

...then all you need to do is something in which time is the centerpiece! As happened last time around, puns are encouraged, obviously.

You can:

  • Build a time-machine (ok, it doesn’t need to be functional).
  • Write a song or a poem about time (hopefully, something a bit more cheerful than what Pink Floyd did).
  • List a few things you'd drop into a time capsule — either to be used as they usually are, or... to be sent to the past with your time-machine?
  • Write the story of a life-time.

...or anything else you can find the time to do... in time before the deadline. The top 25 entries, as calculated by net upvotes received (not aggregate score, down-voting won't help you win!) will receive this timely package. Whatever it is, you have to be able to submit it as an answer to this question. Links to videos are accepted, however they must be of your own creation and the video must remain available. If either stops being true, your submission will be removed. Also, any code or work of art produced must also be of your own creation.

So, as with the previous context, any format you can think of is allowed: text, images, crayons on newspaper, LEGO, popsicle sticks — as long as you make it temporal... or I guess intemporal or timeless stuff are also accepted...? Anyway, you get the gist!

The Rules

  1. You can post as many entries as you want in good faith as long as they are in line with our terms of service, acceptable use policy and code of conduct. This is also a reminder that all user-contributed content falls under our CC-BY-SA 3.0 license.

  2. Contest is open from 2018-11-27 to 2018-12-27, final entry must be received at or prior to 23:59:59 UTC on the last day. Contest will then be locked for historical reference.

  3. Employees are eligible.

  4. You must be a user in good standing on Meta Stack Exchange during the entirety of the contest, or your entry may be disqualified. Let's have some good, clean fun.

  5. Winners will be notified via email within 10 days of the contest closing. As we will be ordering these based on demand (they're not cheap!), you'll need to allow approximately 30 days for delivery. You'll need to provide us your shipping information privately, in accordance with our privacy policy.

  6. If you win but don't care for watches, we'll give you a selection of other items of approximate value. We want you to enjoy the prize.

  7. Void where contests are prohibited.

Get to it! Time is of the essence!

closed as off-topic by Nog Shine, PeterJ, Nathan Tuggy, Ward - Reinstate Monica, hat Dec 29 '18 at 6:57

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "The problem described here can no longer be reproduced. Changes to the system or to the circumstances affecting the asker have rendered it obsolete. If you encounter a similar problem, please post a new question." – Nog Shine, PeterJ, Nathan Tuggy, Ward - Reinstate Monica, hat
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 39
    Phew - posted just in time! – Tim Post Nov 27 '18 at 16:23
  • 36
    entry to be completed in 6-8 weeks – Glorfindel Nov 27 '18 at 16:27
  • 9
    @rene You could build a time machine out of socks if you really wanted to. – Tim Post Nov 27 '18 at 16:31
  • 26
    I don't know if i have time for this... – Pikoh Nov 27 '18 at 16:32
  • 67
    @TimPost Requesting a name change to Time Post. – Rand al'Thor Nov 27 '18 at 16:32
  • 19
    Umm... watch your comments, y'all! – Shadow The Princess Wizard Nov 27 '18 at 16:36
  • 19
    All these puns make me wanna clock someone – Erin B Nov 27 '18 at 16:39
  • 7
    Can anyone do something with Jon Skeet's most upvoted answer? – user392547 Nov 27 '18 at 17:05
  • 12
    I don't know why this was not posted yet: winterbash2018.stackexchange.com – MEE - Reinstate Monica Nov 27 '18 at 18:04
  • 52
    I find these contests very nice. However, the answers shoulds be displayed ramdonly, otherwise you are privileging those who got here first and those who have already received lots of votes, since I dont think everybody would check all pages to see what was sent...=( – carla Nov 28 '18 at 1:19
  • 6
    I really don't have the time for this. – Dragonthoughts Nov 28 '18 at 12:49
  • 6
    Clarified the post to explicitly call out for original stuff, @Mari-LouA; thought it was clear enough, but I guess making it outright explicit doesn't hurt :) – JNat Nov 28 '18 at 14:09
  • 13
    The hours on the "swag" go 1, 1, 1, 4, 5, 6... That's a weird watch! – Cris Luengo Nov 29 '18 at 7:06
  • 8
    I guess we'll get emails about our watches in 6-8 weeks? – Zach Saucier Jan 2 at 17:21
  • 6
    @JNat curious to know, who are the winners? – Div Jan 3 at 10:11

129 Answers 129

251

Here's a clock that will never overflow, the Stack Overflow Binary Clock™:

Stack Overflow Clock

This is basically a binary clock based on the Stack Overflow logo. This clock is ideal for all programmers, because (a) we speak binary and (b) it uses the Stack Overflow logo.

I wrote the code myself using RxJS, since reactive programming is hot nowadays. The snippet can be found below:

const { from, interval } = rxjs;
const { map, switchMap } = rxjs.operators;

const extract = {
  hour: date => date.format('HH'),
  minute: date => date.format('mm'),
  second: date => date.format('ss')
};

interval(1000)
  .pipe(
    map(_ => moment()),
    switchMap(getDigits),
    switchMap(getDigit),
    map(getBinary),
    switchMap(getBinaryDigits))
  .subscribe(showBar);


function getDigits(date) {
  return from(Object.entries(extract)).pipe(
    map(([type, digits]) => ({type, value: digits(date)}))
  );
}

function getDigit({type, value}) {
  return from(value.split('')).pipe(
    map((digit, index) => ({type, index, digit}))
  );
}

function getBinary({type, index, digit}) {
  const binary = parseInt(digit).toString(2);
  return {type, index, binary: '0000'.substr(binary.length) + binary};
}

function getBinaryDigits({type, index, binary}) {
  return from(binary.split('')).pipe(
    map((digit, binaryIndex) => ({type, index, digit, binaryIndex}))
  );
}

function showBar({type, index, binaryIndex, digit}) {
  const classList = document
    .getElementById(type)
    .querySelectorAll('.stack')
    .item(index)
    .querySelectorAll('.bar')
    .item(binaryIndex)
    .classList;
  digit == '0' ? classList.remove('active') : classList.add('active');
}
.part {
  padding-bottom: 28px;
  position: relative;
  display: inline-block;
}
.part > h1 {
  position: absolute;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.stack {
  position: relative;
  width: 40px;
  box-sizing: border-box;
  list-style-type: none;
  margin: 0;
  padding: 7px;
  display: inline-block;
}
.stack::after {
  content: '';
  border: solid 4px #BCBBBB;
  border-top: none;
  display: block;
  position: absolute;
  height: 10px;
  bottom: 0;
  left: 0;
  right: 0;
}
.stack > .bar {
  background-color: #BCBBBB;
  width: 100%;
  margin-top: 3px;
  height: 4px;
}
.stack > .bar.active {
  background-color: #F48023;
}
<div id="clock">
  <div class="part" id="hour">
    <h1>Hour</h1>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
  </div>
  <div class="part" id="minute">
    <h1>Minute</h1>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
  </div>
  <div class="part" id="second">
    <h1>Second</h1>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
  </div>
</div>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

I originally wrote this on Codepen, where I used SCSS in stead of regular CSS. If you're interested in that stuff, you can find it here.

Disclaimer: I cannot be held responsible for any lost time caused by watching the stacks slowly fill up.

  • 19
    WOW, that's awsome! Though to much effort to read. – Wernerson Nov 28 '18 at 10:49
  • 10
    Someone told me he thought it was weird that a binary clock converts the individual decimal digits to binary, so that's why I made a full binary version as well, which can be found here. – g00glen00b Nov 28 '18 at 13:12
  • 8
    @g00glen00b This is so great! I think that the form of the clock in your post, i.e. individual decimal digits, it's called Binary coded decimal mode and it's how the binary clock usually looks like. The main reason is that it's much easier to convert smaller amount of bits. For the first hour digit, you need just 2 bits, for the first digits of minutes and seconds 3 bits and for all second digits 4 bits. So you can even improve it by removing unnecessary bits. – Dawid Ferenczy Rogožan Nov 28 '18 at 17:20
  • 6
    Also, it'd be really cool to have a slightly more malicious clock, one that each segment with just one bit too few to display the full range, so it did overflow. And, then an indicator that it was in overflow like a background change for that segment of the clock. Then we could watch our clock overflow on Stack Overflow. – Evan Carroll Nov 28 '18 at 19:39
  • 27
  • 5
    ... and can we have this implemented as a wind-up mechanical watch, please. (Minor feature request.) – Nick Alexeev Nov 29 '18 at 5:59
  • 1
    @raviraja Good thing I never said it is the Stack Overflow logo. With some imagination you could even argue that this clock has one bar less because the 5th bar in the logo causes the overflow, and this clock never overflows! – g00glen00b Nov 29 '18 at 6:53
  • 3
    @astonearachnid Nice! I was thinking about rotating them myself, but then I thought it would make it more difficult to read so I discarded that idea, but it looks like I was wrong, it's readable and looks great. – g00glen00b Nov 29 '18 at 7:38
  • 2
    LOL! I can't understand how to read the time. It will be more better if you explain that how read the time. – Black Thunder Nov 29 '18 at 13:32
  • 2
    @BlackThunder The Wikipedia article I linked does explain that. Each "stack" is one digit, and each bar represents a bit, starting from the top. That means that in the screenshot, the stacks are 0001, 0000, 0010, 0111, 0001, 0100. In decimals, that's equal to 1, 0, 2, 7, 1, 4 or 10:27:14. Also be aware that the clock uses 24h-format. – g00glen00b Nov 29 '18 at 14:25
  • 6
    This clock should be included in the design of the site, this would finally be something useful to put in the left sidebar! – samcarter Nov 30 '18 at 17:27
  • 2
    This. This is epic. – Barry Chapman Dec 1 '18 at 4:14
  • 1
    The original is fabulous & so is @astonearachnid's yet when I saw the original I thought, why not show the stacks overlflow--with leftward logos? – philipxy Dec 1 '18 at 11:31
  • 1
    @samcarter I made a userscript to put the clock in the sidebar: stackapps.com/q/8137/54539 – an angle-bracketed arachnid Dec 1 '18 at 17:01
  • 1
    @astonearachnid Oh wow! This is awesome! You finally gave me a reason not to hide the sidebar! – samcarter Dec 1 '18 at 17:10
160

Evan-Amos [CC0], from Wikimedia Commons

enter image description here

  • 8
    This is SO hilarious! – Redwolf GoFundMonica Programs Nov 27 '18 at 23:34
  • 73
    Migrate to Seasoned Advice. – Catija Nov 28 '18 at 0:16
  • 2
    'Tis the season! – Super Jade Nov 28 '18 at 2:16
  • 104
    Clarification for non-native speakers (including me) or non-cooking aficionados: the herb in the picture is Thyme, which is pronounced similarly to 'time'. – Glorfindel Nov 28 '18 at 7:47
  • 9
    @Glorfindel don't spoil the joke :( Isn't there a spoiler alert available for comments? – Mari-Lou A Nov 28 '18 at 12:22
  • 14
    @Mari-LouA Well, to like and/or upvote this post, readers have to understand the point first. I'm sure that, at least in my case, I would never even recognize the herb on the picture... So without the spoiler in the comment, I guess this post would lose many potential upvotes. – Dawid Ferenczy Rogožan Nov 28 '18 at 17:11
  • 4
    this lacks parsley, sage and rosemary ... to complete the bouquet. very nice idea – Patrick Artner Nov 28 '18 at 17:42
  • 3
    @PatrickArtner : for the millenials, are we talking about Simon & Timefunkel ?^^ – OldPadawan Nov 28 '18 at 19:18
  • 1
    @OldPadawan They got a nice interpretation of it, yes Scarborough Fair is a bit older though. – Patrick Artner Nov 28 '18 at 19:46
  • 1
    @OldPadawan Pretty sure that song has been around for much more time than Simon and Garfunkel's version. – reirab Nov 28 '18 at 21:33
  • @reirab : probably, but *ti i i i me is on my siiiiide..." :D – OldPadawan Nov 28 '18 at 21:36
  • 9
    'Tis the seasoning! – Paused until further notice. Nov 28 '18 at 21:43
  • 3
    @Mari-LouA well, Glorfindel was a lifesaver, because I thought the picture was of marijuana (and obviously was confused about how that has anything to do with time). xD xD – Ishita Sinha Nov 29 '18 at 11:27
  • @IshitaSinha #1 There's a motto that says never reveal a magician's trick. Part of the fun is knowing that not everybody gets it. Today with Google image – Mari-Lou A Nov 29 '18 at 11:50
  • #2 (really long url!) it's easy enough to find out the name of this plant/herb. – Mari-Lou A Nov 29 '18 at 11:50
155

Behold: stackoverflow's famous feature countdown clock!

feature countdown

  • 3
    I like how you think. – Evan Carroll Nov 28 '18 at 19:43
  • That's a really funny idea! It's remarkable, comparing your success and my efforts, how different success can be. Especially with your humor, it's sometimes the "smaller" things that are more engaging, than larger projects. – fameman Dec 3 '18 at 18:18
93

I'm resurrecting the creation I made quite some time ago for an answer to a PPCG post, as it seems quite a good fit to this celebration.

It is a digital clock design made on Conway's Game of Life (you know, with gliders and stuff).

Here is what it looks like:

enter image description here

You can run the simulation and get the details of the design from here. Take the time to watch this, it's mesmerizing.

Now, I'll tell you the big secret about it: I actually built a time machine in 2017. I used it to jump one year and a half later, and saw this post. I thought: "Boy, do I want this watch.", so I went back in 2017 and made the post on PPCG so that I could refer to it when this celebration starts.

And the best part about it: The digital clock you're seeing is actually a part of the time machine. The whole machine is entirely built with Game of Life, and this is the time metering component. Unfortunately, I can't disclose the whole time machine design here, the world is not ready for that (besides, the license of the GoL-emulated flux capacitor is incompatible with the CC-BY-SA license).

  • Very nice, but is this your own doing? If not I'm afraid just taking someone else work isn't really fair. – Shadow The Princess Wizard Nov 29 '18 at 10:34
  • 10
    @ShadowWizard Well, of course it is. This answer on PPCG was originally made by me, and I spent quite some time to design it, originally. What makes you think it's not? I'm.... I'm actually offended. Damn... Usually, only my wife manages to do that. Are you my wife? – dim Nov 29 '18 at 10:38
  • 3
    rofl... well I was too lazy to click the link and too irritated with crappy answers here. Kudos, and well done! (And sure, I'm your wife! Now I'm mad at you for not being able to tell that before! ;)) – Shadow The Princess Wizard Nov 29 '18 at 10:42
80

Perhaps it would be prudent at the end of this, the Stack Overflow Decade, to look back into the mists of time to see what was seen by those who came before.

And so, I give you:

A Visual Retrospective

With great thanks to archive.org.

Now, in the time before time, when the great barren chaos ocean of the Internet heaved up HTTP Response 302 - http://www.mozquito.org. stackoverflow.com began the Two Thousand Aughts as a found redirect (capture 2000/03/01).

Then, sometime in 2004 (it appears), the domain went to a speculator and remained for sale until 2008 rolled around and

A Miracle Occurred

A cryptic message and the clock nearly began to tick. (capture 2008/07/03)▼

I think you should be more explicit here in step two.

A couple of months later and pop, the first SO logo and site. Unfortunately, archive.org is missing the CSS and a majority of images from that time. (capture 2008/09/15)▼

SO Logo 2008/09/15

We finally get a good shot in 2009. (capture 2009/07/02)▼

2009 SO Screenshot

Careers appears in 2010. (capture 2010-07-30)▼

2010 SO Screenshot

February 26, 2011 looks like some network connectivity issues were to be expected. Hiding behind that yellow banner is a Stack Exchange link. (capture 2011-02-26)▼

2011 SO Screenshot

Hello Stack Exchange, chat, meta and Server Fault. (capture 2011-07-18)▼

2011, July SO Screenshot

Usage of the Community Bulletin: 2012 Community Moderator Election was ending soon. (capture 2012-06-15)▼

2012 SO Screenshot

In very tangentially referencing Web 2.0 form, careers 2.0 appears later in 2012.
More version = More better. (capture 2012-11-15)▼

2012, November SO Screenshot

First appearance of the site introduction banner along with a sign up link on the menu bar. Chat, meta, about and faq disappear from the menu bar. (capture 2013-06-14)▼

2013 SO Screenshot

At last: my favorite capture. The stylish, black menu bar and ombre Stack Exchange logo appears. We find tour and help appear in the menu bar as well. However the best aspect is the new Hot Network Questions section where someone on Stack Overflow has asked http://stackoverflow.com/questions/21781436/why-is-this-private-member-accessible - a double entendre which must be seen in context to be believed. (capture 2014-02-15)▼

2014 SO Screenshot

In early 2015 our split Question/Tags/Users/Badges button section joined the Ask Question button in aligning right. careers 2.0 finally tried to gain some cache by rebranding using the Stack Overflow name.

Edit: And, as mentioned by Armatus in the comments, note the Stack Overflow logo reduction of size and also angle of stack elements - with the highest element going to something like 55° from 80°. As a result of that investigation, I noticed that the sprite sheet for the site changed: old vs new. (capture 2015-02-01)▼

2015, February SO Screenshot

10,000,000 questions! (capture 2015-09-01)▼

2015, September SO Screenshot

Let the notifications commence! The Inbox and Recent Achivements icons arrive in the menu bar (another sprite sheet). (capture 2015-10-14)▼

2015, October SO Screenshot

stack overflow careers departs the menu bar to become a gray Jobs button. The Unanswered button departs. Consider that at this point we're quantifying that Stack Overflow is composed of over 4.7 million programmers. (capture 2016-01-31)▼

2016, February SO Screenshot

The Developer Story + Documentation Beta. (capture 2016-10-31)▼

2016, October SO Screenshot

Beginning in 2016 we were 4.7 million programmers. A year later we have grown to 6.6 million. (capture 2017-02-01)▼

2017, February SO Screenshot

April Fools, 2017. Internet security continues to be a joke. The gray button bar is absorbed into a shaken up menu bar. Stack Exchange is conspicuously missing from the top. (capture 2017-04-01)▼

2017, April SO Screenshot

So in February 2017 we were a community of 6.6 million programmers. By September, someone decided to loosen the definitions a bit and include visiting developers which tops us out at 50 million site users per month. This likely has something to do with courting business directly: "Stack Overflow Business Solutions: Looking to understand, engage, or hire developers?". Learn more why don't you!? DocumentationBeta has gone and Jobs -> Developer Jobs. (capture 2017-09-30)▼

2017, September SO Screenshot

We've captured the second annual Developer's Survey here and entered the modern era. (capture 2018-01-14)▼

2018, January SO Screenshot

Circa the beginning of this question, Stack Overflow Teams peeks it's head out with Slack integration. The top menu is de-cluttered by the addition of a side menu - I think this is configurable as mine is shown as a hamburger menu next to the Stack Overflow logo. (capture 2018-11-27)▼

2018, November 27 SO Screenshot

(and more as I have time)

  • 60
    200 million dollars of development later and we got ad box on the right and they moved from a cloud to a vertical list. – Evan Carroll Nov 27 '18 at 19:19
  • 4
    Ah dangit I was thinking of putting one of these together today. +1 to you. – SOLO Nov 28 '18 at 15:09
  • 4
    @EvanCarroll Please don't ignore that some of that money must've gone into reducing that overflow by 16.7% judging by the logo. – Armatus Nov 28 '18 at 18:14
  • 2
    StackOverflooooooow – loa_in_ Nov 29 '18 at 17:36
  • 1
    This is awesome! – Courtny Dec 4 '18 at 0:45
  • 4
    I remember making those changes. Sometimes I'd sneak in subtle CSS changes hoping no one would notice. But Meta notices.. Meta sees everything. Good times. – Jin Dec 6 '18 at 23:03
  • 1
    @EvanCarroll ... and the Winter Bash system. Don't forget the Winter Bash system, please. – dim Dec 13 '18 at 14:51
78

It's closing time.

  • 1
    "This question belongs to another time era. Seriously, go out, hang out with younger people, evolve, and stop sounding like an grumpy elderly person." – Pac0 Nov 30 '18 at 8:03
65

A time machine, you say? Well how convenient. I just so happen to have found one of those lying around this morning... and a sea unicorn, whose friend is missing somewhere in the depths of time! Sounds like a rescue mission is in order...

In he goes. It's not going to be an easy mission.

After much waiting...

and waiting...

and whirring and clunking and POP! One by one (this is a one-narwhal time machine, of course), they're back!

Oh dear. He doesn't look happy. I think the trip left him feeling a little... green.

Both back safely! No missing body parts, fortunately... we'll have to see about their memories later.

Reunited at last!

  • @Mari-LouA Is that allowed under CC-by-SA? ;-) – Rand al'Thor Nov 27 '18 at 19:32
  • 1
    Is that a squiddle? – Erin B Nov 27 '18 at 19:38
  • Certainly would be, @Randal'Thor – ArtOfCode Nov 27 '18 at 20:04
  • @ErinB It's a narwhal and an octopus :) – ArtOfCode Nov 27 '18 at 20:04
  • 3
    💚💙💖 Squidge & Spike. – Catija Nov 28 '18 at 0:15
  • 5
    Blub blub, blub blub blub blub? Blub blub. Blub blub, blub! – tripleee Nov 28 '18 at 6:09
56

What about an ASCII-art Big Ben?

enter image description here

Or, more realistically...

                                                                                                                  |
                                                                                                                  |
                                                                                                                  |
                                                                                                                  |
                                                                                                                  |
                                                                                                                  | 
                                                                                                                  |
                                                                                                                 |||
                                                                                                                 /:\
                                                                                                                 /:\
                                                                                                                 /:\
                                                                                                                 /:\
                                                                                                                 /:\
                                                                                                                 /:\
                                                                                                                /:::\
                                                                                                            |  /:::::\   |
                                                                                                            | /:::::::\  |
                                                                                                           |l/:::::::::\ l
                                                                                                           |/:::::::::::\l
                                                                                                           MNMNMNMNMNMNMNM
                                                                                                           WWWWWWWWWWWWWWW
                                                                                                           MWMWMWMWMWMWMWM
                                                                                                          | | | | | | | | |   
                                                                                                          | | | | | | | | |   
                                                                                                          MMMMMMMMMMMMMMMMl
                                                                                                          //:::::::::::::\\
                                                                                                      |  //:::::::::::::::\\    |
                                                                                                      | //:::::::::::::::::\\   l
                                                                                                      l//:::::::::::::::::::\\  Hl
                                                                                                    | //:::::::::::::::::::::\\ HH
                                                                                                    |//:::::::::::::::::::::::\\WW
                                                                                                    H||..W..W..W..W..W..W..W..W.||
                                                                                                    H||...M..M..M..M..M..M..M..M| |
                                                                                                    H||...H..H..H..H..H..H..H..H|\|
                                                                                                    H||...H..H..H..H..H..H..H..H| |
                                                                                                    H||...WWWWWWWWWWWWWWWWWW...||H\|
                                                                                                 ///H||...........____.........||\\\
                                                                                                ||||H||...     /   |    \     .|||||
                                                                                                ||||H||...   /     |      \   .|||||
                                                                                                ||||H||...  /      |       \  .|||||
                                                                                                ||||H||... /       |        \ .|||||
                                                                                                ||||H||...|    ----o         |.|||||
                                                                                                ||||H||... \                / .|||||
                                                                                                ||||H||...   \            /   .|||||
                                                                                                ||||H||...     \ ______ /     .|||||
                                                                                                ||||H||........................|||||
                                                                                                ||||||M|M|M|M|M|M|M|M|M|M|M|M|M|||||
                                                                                                ||||||H|H|H|H|H|H|H|H|H|H|H|H|H|H|||
                                                                                                 |||||............................||
                                                                                                 ||||._._._._._._._._._._._._._._._/
                                                                                                  |/.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  \\_-_-_-_-_-_-_-_-_-_-_-_-_-_-_//
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  \\_-_-_-_-_-_-_-_-_-_-_-_-_-_-_//
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                                                                  ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
 .                                                                                                \\_-_-_-_-_-_-_-_-_-_-_-_-_-_-_//
   ‘   ..                                                                                         ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
           .....                                                                                  |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
            . .............. ,                                                                    |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                 ....................  . ..     .                                                 ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                 ..,   ............................ .   .                                         |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                   - ........................................                                     |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                         .........................................                                ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                               .........................................                          |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                       .......................................                    |||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                              ......................................              ||.|.|.|.|.|.|.|.|.|.|.|.|.|.|.||
                                                    ........................................______|||.|.|.|.|.|.|.|.|.|.|.|.|.|.|||
                                                           .............................../,,,,\III\ |.|.|.|.|.|.|.|.|.|.|.|.|.|.||_
                                                                   ....................../,,,,,,,, |IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII\\_
                                                                          ............./,,,,,,,,,,,,,\-------------------------------------\
                                                                                 .....<,,,,,,,,,,,,,,/,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,\
                                                                                      . \,,,,,,,,,,,/,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,\
                                                                                          \,,,,,,,,/,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,\
                                                                                            \,,,,,/,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,\
                                                                                              \,,,|,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,\
                                                                                                \,/,,,,,,,,,,,,,_________________________________/ 

(You can probably tell that very little of that was rendered by my makeshift ASCII art creator)

  • Ooh, did you make this yourself? – Rand al'Thor Nov 27 '18 at 17:14
  • 3
    @Randal'Thor Some of it. I have a pretty bad script which I made a couple of years back, so I first threw a big ben through that and then I modified it a bit. The clock, the shadow, and the periodic what-do-you-call-thems in the middle are manually done. I was thinking of adding the script here but the algorithm is sloppy as hell and the number of violations of PEP8 are embarrassing. Also, it's really slow, which makes it highly unsuitable for this competition :P – user392547 Nov 27 '18 at 17:16
  • 6
    This is pretty, but what does it have to do with Stack Overflow/Exchange? – SOLO Nov 27 '18 at 17:19
  • 9
    @SOLO Come on, ASCII art is fabulous! And half of that was made with my rudimentary image processing skills (though my modifications were probably cheating but meh). – user392547 Nov 27 '18 at 17:21
  • 2
    @Chair actually the cheating was with the generation. Your modifications (to whatever degree they occurred) are the only part that isn't cheating. Check out this site for real ASCII art, asciiart.website/index.php?art=objects/clocks – Evan Carroll Nov 27 '18 at 17:49
  • @SOLO: Only time will tell, but it used to be a time-honoured tradition here: <kbd> elements are way too intrusive – Peter Mortensen Nov 27 '18 at 18:57
  • @PeterMortensen haha, I'm well aware of the <kbd> castles and other art. (I'm not as new as the date in my profile might suggest.) But those were memes born of meta, whereas this is an entry in a Stack Exchange anniversary contest that has no apparent connection to the company or any site. For what it's worth, I had the same complaint about several of the entries in the previous contest, the cheese-themed one, as well. – SOLO Nov 27 '18 at 19:38
  • I object - that's not what Big Ben looks like. This is what it looks like (as of this year, and until ~2021, it seems). – E.P. Nov 27 '18 at 22:20
  • 7
    @E.P. Well... A pedant might point out that Big Ben is actually the bell inside the Elizabeth Tower. In other words, Big Ben looks like this: bit.ly/2PYyiqq – Tom Wright Nov 28 '18 at 3:46
  • @TomWright Gaah I don't like URL shorteners. My school blocks them. – user392547 Nov 28 '18 at 3:51
  • @Chair Sorry about that. SO mangled Wikipedia's URL format when I tried it unshortened. If it's any consolation, it's just a picture of a big metal bell. – Tom Wright Nov 28 '18 at 4:07
  • @Chair Use this direct to Wikipedia link (it first goes to the host page, then flips to the image). But either way, Tom is (W)right ... Big Ben is the bell. – TripeHound Nov 28 '18 at 10:41
53
+250

It's time for chrono-ception!

Chronos is the God of time in Greek Mythology in the pre-Socratic era. Since I am also in the pre-Socratic badge era, I thought I should pay my tribute to Chronos:

enter image description here

For, that I used this ASCII art to get a picture of Chronos itself, and then measure the time needed for C++ to display that image in the browser with the standard chrono library, like this:

#include <iostream>
#include <ctime>
#include <ratio>
#include <chrono>
#include <windows.h>

int main(void) {
    using namespace std::chrono;

    high_resolution_clock::time_point t1 = high_resolution_clock::now();

    ShellExecute(NULL, "open", "https://gsamaras.files.wordpress.com/2018/11/chronosgodascii.png", NULL, NULL, SW_SHOWNORMAL);

    high_resolution_clock::time_point t2 = high_resolution_clock::now();

    duration<double> time_span = duration_cast<duration<double>>(t2 - t1);

    std::cout << "Chronos needed to show you Chronos, was " << time_span.count() << " seconds." << std::endl;

    return 0;
}

Output:

Chronos needed to show you Chronos, was 0.53636 seconds.

enter image description here

PS: For Linux, you would do ::system("xdg-open https://gsamaras.files.wordpress.com/2018/11/chronosgod.png");, but there is no portable open function...

Easter Egg: The Linux version uses a different Chronos this time!

  • 1
    Very interesting :) – Nikolas Nov 28 '18 at 12:35
  • 1
    As far as I have seen, Chronos' symbols are Harvesting Scythe and Zodiac Wheel. The second one might be relevant. – Nikolas Nov 28 '18 at 12:43
  • 1
    @gsamaras really nice ! – Christos Nov 28 '18 at 14:28
  • 1
    @Christos chrono-ception!! – gsamaras Nov 28 '18 at 14:30
  • 1
    Nice one @gsamaras – pavlos Nov 28 '18 at 14:58
  • 2
    Gogo (!golang) chrono-ception; God of time dives into the Matrix! – Christos Lytras Nov 28 '18 at 18:56
  • 3
    ChristosLytras I hope he timed his dive though! @Aristos yes! My name is Yorgos and the surname Samaras, which might be the most common name and surname in Greece, I believe! ;) – gsamaras Nov 28 '18 at 20:11
  • 1
    Did somebody say pre-Socratic? – anaximander Nov 29 '18 at 9:40
  • 1
    @gsamaras It is indeed. – anaximander Nov 29 '18 at 9:45
  • 1
    Anaximander was also the first philosopher (as far as records survive) to state that the Earth floated free in space, without being supported by anything. He also suggested that the Sun might actually be very large, and only looks small because it is very far away. – anaximander Nov 29 '18 at 10:00
  • 1
    Amazing @anaximander! Imagine having a time machine( we are in a time post), where you could have Eratosthenes (first to calculate the circumference of the Earth (if Columbus knew about his results, he would never attempt to sail to India)) and Anaximander sit together and talk about planet Earth.. – gsamaras Nov 29 '18 at 10:05
  • 1
    That's cool, eventually, it didn't took much chronos to show Chronos :) – user425670 Nov 29 '18 at 13:56
  • 1
    Well thought. Good job – Abel Melquiades Callejo Nov 30 '18 at 23:28
  • 1
    That is one heck of an interesting thought process @gsamaras... really interesting... – Rai Dec 6 '18 at 10:29
  • 1
    Keep it up @gsamaras! – Menelaos Kotsollaris Dec 17 '18 at 1:51
49

I've been watching responses come in that use ASCII art and thought it was about time to up the stakes.

Here's an ASCII rendering of the swag, with a difference...

Image of an ASCII art watch

To see the difference, you'll need to paste the whole thing into your favourite online Brainfuck interpreter (this one will do).

I made the tool that does this many, many years ago. I was young. It uses PHP. Please don't judge!

  • 4
    ----[---->+<]>++.[------->+<]>.[->+++<]>.[--->+<]>----.----.--.--------.--[--->+<]>. – gmauch Nov 28 '18 at 13:19
  • [-]>[-]<>++++++++[<++++++++>-]<++++++++.>+++++[<+++++>-]<.>++++[<++++>-]<-..>+++[<+++>-]<.>+++++++++[<--------->-]<--------.>++++[<++++>-]<+.-.>++++++++[<++++++++>-]<++++.>+++[<--->-]<---.>++++++++[<-------->-]<--------.>++++++++[<++++++++>-]<++.>+++[<+++>-]<--.>+++[<+++>-]<.++.>+++[<--->-]<---.----.---.>+++++[<+++++>-]<-.>+++++++++[<--------->-]<--------.>+++++++[<+++++++>-]<++.>++++++[<++++++>-]<---.>++++[<---->-]<---.++.>+++[<+++>-]<-.++++.>+++[<+++>-]<--.>++++[<---->-]<-.>++++[<++++>-]<---.>+++[<--->-]<---.>++[<++>-]<++.+++.>+++[<+++>-]<-.>+++++++++[<--------->-]<----- – Patrick Roberts Nov 28 '18 at 17:51
  • 2
    Upvoted this, but would be interested in seeing ASCII art where the entire image isn't just a giant code comment. – Patrick Roberts Nov 28 '18 at 17:52
  • 1
    @wizzwizz4 I think you're mistaken. Brainfuck does not interpret any characters except for +-<>[],.. If you use a regex to remove all characters except those from the image, you get my comment above which has identical output to running the whole image, demonstrating equivalent functionality. – Patrick Roberts Nov 29 '18 at 22:04
  • 1
    @PatrickRoberts You're right that this just hides the BF code inside BF comment characters. The original point was to do a sort of ASCII stenography. It's hard to see on a big, hi-res image like the one I've used here, but the script will actually try to put the BF characters among similar looking comment characters, so they they're less obvious. – Tom Wright Nov 29 '18 at 22:51
  • @PatrickRoberts Never mind; I thought I saw a row of ]s but it was actually }s... – wizzwizz4 Nov 30 '18 at 7:07
48

Clock Lobster!

(with apologies/thanks to The B-52's)

lobster 3/4 view

A punctual crustacean alternative to the usual rubber duck, done up in Stack Exchange shades of blue!

lobster top view

There's even a crochet pattern to make your own!

the internet loves kitties, right

Just like StackExchange, it's fun for programmers and non-programmers alike ;)

  • 1
    You never expect these B-52's references, then bam! – chicks Nov 28 '18 at 19:33
  • Who's to blame? – Len Greski Dec 1 '18 at 13:09
46

I didn't have time to write a proper answer, so I just made a timely list.

on Stack Exchange

Time's up! Did I miss anyone?

39

Disclaimer: all puns using the word 'time' below are intended

I'm not so much of a story teller, but I'd like to share something about the history of the swag for this contest: watches. Please take some time to read it.

  • Watches have been around since the 16th century. At that time they were powered by a spring which had to be winded.
  • In the 1950s, electric watches came out.
  • In the 1960s, the quartz watch was invented, using a quartz crystal for very precise time measurement.
  • The first digital watch, the Pulsar, was developed in the 1970s.
  • In 2000, IBM showed a prototype of a watch running on Linux (now we're getting somewhere)...
  • In 2013, the Pebble was released, the first smartwatch to reach a large audience.
  • Other companies like Apple and Samsung followed soon. Smartwatches are becoming more and more like small mobile phones nowadays.
  • And in 2018, we're using smartwatches to get rid of unwanted content on Stack Exchange, anyplace, anywhere, anytime.

Here's how that looks like:

enter image description here

(click to play on YouTube)

How does that work, you might ask? In a nutshell: SmokeDetector is a chatbot which scans (the API version of) the realtime Stack Exchange feed to check for new/edited posts. If they match certain patterns often used by spammers, it'll report the post in various places like chatrooms and our central platform metasmoke. Another server is monitoring that platform for new spam posts and sends a rich push notification to an app on my iPhone. That app uses the Stack Exchange API to cast spam flags (the same avenue as the Stack Exchange mobile app) whenever I 'reply' to that notification that it is spam.

Together with Stack Exchange's SpamRam system and automatic flags, systems like this provide a dramatic decrease in visibility time of spam.

(sources: Wikipedia articles on 'History of watches', 'Smartwatch'; Charcoal)

(another disclaimer: of course I'm using this only for blatantly obvious spam. I'm totally aware of the problems with false spam flags.)

  • 55
    Flagged as spam: unsolicited advertising for Smoke Detector. – Rand al'Thor Nov 27 '18 at 17:35
  • 2
    I still think that digital watches are a pretty neat idea. – TRiG Nov 28 '18 at 11:55
  • 2
    Now, I know why you're always quick to flag. :P – A J Nov 28 '18 at 12:30
  • So if you when the watch from this contest, I get the Apple watch then, right? – K.Dᴀᴠɪs Nov 29 '18 at 17:35
39

I had to use a little javascript to initiate the time, but other than that it's pure CSS.

  • Click "Run code snippet" to see it in action
  • Click and hold the clock to activate the time-machine.

let dt = new Date();
document.querySelector("#second_hand").setAttribute("style", 
  "animation-delay:"+(dt.getSeconds() * -1)+"s"
);
document.querySelector("#minute_hand").setAttribute("style", 
  "animation-delay:"+((dt.getMinutes() * 60 + dt.getSeconds()) * -1)+"s"
);
document.querySelector("#hour_hand").setAttribute("style", 
  "animation-delay:"+(((dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours()) * 3600 + dt.getMinutes() * 60 + dt.getSeconds()) * -1)+"s"
);
html, body {
  margin: 0;
}

#face {
  width: 94vh;
  height: 94vh;
  background: #2d2928;
  background-image: radial-gradient(#2d2928 0%, #2d2928 55%, #3b393a 55.5%, #3b393a 60%, #2d2928 60.5%, #2d2928 61%, #848389 61.5%, #848389 63%, #201e1f 63.5%);
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  border-radius: 50%;
  position: relative;
  transform: perspective(80vw) rotateY(0deg);
  transform-origin: 50vh;
  transition: transform 1s;
  border: 3vh solid #e17f1a;
  counter-reset: hour;
  font-family: Arial;
  font-size: 4vh;
}

.hand {
  position: absolute;
  width: 2px;
  left: calc(50% - 1px);
  transform: rotateZ(4deg);
  transform-origin: bottom;
  background: #ece8e7;
}

#hour_hand {
  height: 25%;
  top: 25%;
  animation: rotate infinite linear 43200s;
}

#minute_hand {
  height: 35%;
  top: 15%;
  animation: rotate infinite linear 3600s;
}

#second_hand {
  height: 40%;
  top: 10%;
  animation: rotate infinite linear 60s;
}

#water {
  position: absolute;
  font-size: 2.5vh;
  top: 70%;
  text-align: center;
  color: #ece8e7;
  display: flex;
  width: 100%;
  justify-content: center;
}

b {
  position: absolute;
  padding-top: 2px;
  height: calc(50% - 2px);
  left: calc(50% - 12px);
  width: 24px;
  color: #e4e8e9;
  counter-increment: hour;
  transform-origin: bottom;
  display: flex;
  justify-content: center;
}

b:before {
  content: counter(hour);
}

b:nth-child(1) {transform: rotateZ(30deg);}
b:nth-child(2) {transform: rotateZ(60deg);}
b:nth-child(3) {transform: rotateZ(90deg);}
b:nth-child(4) {transform: rotateZ(120deg);}
b:nth-child(5) {transform: rotateZ(150deg);}
b:nth-child(6) {transform: rotateZ(180deg);}
b:nth-child(7) {transform: rotateZ(210deg);}
b:nth-child(8) {transform: rotateZ(240deg);}
b:nth-child(9) {transform: rotateZ(270deg);}
b:nth-child(10) {transform: rotateZ(300deg);}
b:nth-child(11) {transform: rotateZ(330deg);}

#logo {
  font-family: Times New Roman;
  color: #e17f1a;
  position: absolute;
  top: 30%;
  width: 100px;
  text-align: center;
  left: calc(50% - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo svg {
  width: 5vh;
}

@keyframes rotate {
  0%   { transform: rotateZ(360deg); }
  100% { transform: rotateZ(720deg); }
}

#face:active {
  transform: perspective(80vw) rotateY(180deg);
}
<div id="face">
  <b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b>
  <div id="water">WASHER RESILIENT<br/>QUARTS</div>
  <div id="logo"><svg aria-hidden="true" class="svg-icon native iconLogoSEAlternativeSm" width="5vh" height="5vh" viewBox="0 0 15 15"><g><path d="M2 1h8a2 2 0 0 1 2 2H0c0-1.1.9-2 2-2z" fill="#e17f1a"></path><path d="M0 10h12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm7 2v3l3-3z" fill="#e17f1a"></path><path fill="#e17f1a" d="M0 4h12v2H0z"></path><path fill="#e17f1a" d="M0 7h12v2H0z"></path></g></svg>MSE</div>
  <div class="hand" id="second_hand"></div>
  <div class="hand" id="minute_hand"></div>
  <div class="hand" id="hour_hand"></div>
</div>

  • Your clock even has problems with timezone changes, just like a real watch – Ferrybig Nov 29 '18 at 9:17
  • Thanks for letting me know! By timezone changes, do you mean when you travel across a timezone it does not auto-update the time? I assumed let dt = new Date(); would use the time for your current timezone. – Jonathan Nov 29 '18 at 13:08
  • 6
    Most people poll Date.getseconds every second when they make their clock, making it automatically update if the timezone or the DST changes, you only do it at the start of your code, so while other peoples watches suddenly jump to the new time, your code emulates a real watch more closely by not following the time change – Ferrybig Nov 29 '18 at 13:13
38

Times (and dates) are the bane of all programmers, so I decided to write a book on it:

enter image description here

Many thanks to Joel on this. He might not know it, but without the 'Joel minute', this would have never happened.

Generated using O RLY Cover Generator

  • 1
    Haha, love the Deciphering '6-8 weeks' and the O RLY – OverMind Nov 28 '18 at 16:26
  • 11
    Might be nice to credit the source of these (dev.to/rly) – Travis J Nov 29 '18 at 23:08
34

Hi everyone! My name is Tinkeringbell (or Tink for short) and I'll be your tour guide for today! Even though some people say time-travel is impossible, as an archaeologist I have to disagree. We're not allowed to disclose exactly how we do it, and we're not allowed to take passengers. I can, however, present to you evidence and stories from my own paleontological and archaeological travels today. Does everyone have their security clearance badge? Then let's enter the vault and start the tour!

1. Hot but boring.

As you can guess, we've tried travelling back as far as possible. So far, we've never been able to go further back than the late Hadean. It was hot, molten lava everywhere. We had to stay in the time capsule for protection and oxygen, which was rather boring! Until of course we almost lost all functionality and the ability to return. We managed to quickly grab some samples though. Look at how pretty they turned out to be once cooled down to room temperature!

2. Marine Life

Yes? You're asking why we skipped the section on bacterial life? Good question. You've no doubt noticed that high-level security area we just passed. Some of the things in there will kill you. To avoid accidents and liability issues, we skip from rocks to marine life here. Here you see the sad remains of some of the animals that didn't survive the trip home. Also note the really big shark teeth: we found them stuck in our time machine after barely escaping an attack. We sadly never managed to capture the culprit. Now, if you'll continue along the path, I have some amazing aquariums to show you!

3. Jurassic Park!

Yeah, you didn't really think we were that stupid now, were you? We had to go back in time multiple times to fix that timeline! Ah well, at least we were left with some good movie plots. I'm sorry to say that we don't keep real dinosaurs in these vaults. Please enjoy the gift shop, and take some time to use the toilet and restaurant services. The tour will resume in 30 minutes, when we'll move on to the ice ages to visit our prized asset: The Siberian Unicorn

4. The stone age

Time flies when you're having fun, doesn't it? Let me show you one more area, let's go to the stone age. It's an area we can just about cover before closing time if we hurry up. Here you can see a model we made based on observations of the Carnac Stones while they were just being built. We never figured out their purpose, but we now think they may be erected to commemorate our comings and goings.

Oh no, look at the time. I'm sorry, but we really, really need to wrap this up now. I have one final surprise for all of you: A small stone dagger to remember your trip by, crafted by our resident Neanderthals. Don't worry, they find they have nothing better to do these days, now that they are being fed and cared for. Do I still have everyone? Good. I hope everyone enjoyed this tour. Have a nice evening!

  • 1
    Nothing's cooler than dinosaurs. – user392547 Nov 28 '18 at 13:03
  • 1
    @Chair apparently, ASCII Big Ben is cooler than dinosaurs ;-) – Tinkeringbell Nov 28 '18 at 13:20
  • 4
    No, nothing's cooler than dinosaurs. :P – user392547 Nov 28 '18 at 13:20
31

Time can be applied in so many ways and the intricacies of it are beyond comprehension. As such, I created a new Area51 site proposal focused on the subject of "time" so that we can join together in understanding it more fully.

enter image description here

I added some example questions, but please help me out if you have time!

  • 9
    That's dedication. +1, even though I doubt the proposal will work. – Rand al'Thor Nov 27 '18 at 21:08
  • 8
    Well that didn't last long. – MikeTheLiar Nov 27 '18 at 22:23
  • 3
    It only works if your timeline is travelling backwards. :-p – tu-Reinstate Monica-dor duh Nov 29 '18 at 0:59
  • 4
    That proposal suffered an untimely end. – Nisarg Nov 30 '18 at 12:13
30

Time OverflowTM

Guaranteed to take you where you need to be. Remember, it isn't about being in the right place at the right time... It's about being in the right place all the time.

Please use Time OverflowTM responsibly. Changing things can be very problematic. enter image description here

A little explanation... This time machine was made to
resemble the Stack Overflow logo ( enter image description here). It uses some orange LED's, staying with the orange theme of the logo, as well as lights for the whole lightspeed nature of time travel. In theory, going faster than the speed of light should allow time travel, although one does not simply go faster than the speed of light. Unless you have Time OverflowTM!

The space age materials include some electrical ballasts, a "lux" capacitor which is basically a transformer, a heavy duty timer to handle the stress of time travel as well as to indicate where to go, and some special effects.

Build at your own risk.

  • Nope. If you change the future, you're changing the past of someone who's even further into the future. You could even magic out of existence the person who sent you your time machine. Oops. – Andrew Leach Nov 27 '18 at 22:41
  • @AndrewLeach - After taking some time to consider, perhaps it is best to simply avoid changing things. – Travis J Nov 28 '18 at 23:22
  • 1
    meta.stackexchange.com/a/319049/400534 Well we had different stuff for same names 😭😭 – Vee Hua Zhi Dec 1 '18 at 3:07
  • I like how the underlying pipes are bent and distorted outside the Time field. – Criggie Mar 3 at 23:05
30
+50

End of competition note: Since the competition is coming to an end and the posts will get locked I created a Stack Apps post where I might add any future updates to the app. Thanks for everyone upvoting, and a special extra thanks for anyone who actually installed the app!

I also received the swag, here's a comparison view:

Android Wear and the real swag

Stack Overflow Wear OS Watch Face

Looks like I went ahead in time and already gotten the swag somehow:

Stack Overflow Wear OS Watch Face

Or well not exactly, but what if you're like me and only entered the competition late with not much chance to win the price? Fear not, if you have a Wear OS 2.0+ based watch you can simply download the SO Watch Face and share the experience of having the swag with the actual winners!

Demo video

And it's not just the design, it actually has some nice SO specific features:

  • Most watch faces have their main notch set at 12 o'clock. Not this one! Here the main notch is always pointing to the exact time where Stack Overflow's limits reset, and you can once again collect reputation, finish reviews and vote up and down as if there was no tomorrow!

    In the example above, the notch is at 1 am, as I was in Budapest / CET. In the UK it would be shown right at the top at 12am. It even works for timezones which are not based on whole hours, like the Chatham Islands.

  • Two watch faces - a simpler one, and another that resembles the swag as much as possible.

  • A Stack Exchange Reputation Complication, that allows you to check your (or anyone else's) reputation on any SE site. It is set to Jon Skeet's SO user ID by default. Works with all other watch faces as well.

  • While the main ideas have been implemented there are still a few stuff I might add, and feel free to suggest others as well here in the comments or on GitHub. They will definitely be

    ready in 6-8 weeks

    but upvoting this post might make them ready much-much sooner.

Links:

Updates:

v6.0 / v7.0

  • From now on you have to set the Stack Exchange Network User ID, and not the site specific one.
  • Given you have an account there when switching sites your Site specific user ID will always update based on your Network User ID, so you would always see your own reputation
  • v7.0 includes some minor fixes to this feature as well

v5.0

New Demonstration Video: https://www.youtube.com/watch?v=NVwtpdLeB2g

V5.0-1 V5.0-2 V5.0-3 V5.0-4

Major changes:

  • Removed all Stack Overflow icon from the build - should be much more compliant to the Trademark guidelines
  • There is a box now to select which Stack Exchange site one wishes to use and the graphics will be applied based on that site
  • All graphical detail (logos) are now downloaded and added to the watch faces dynamically based on the selected Stack Exchange site
  • Added a new complication that just displays the selected site's logo.

Minor fixes:

  • Complications now update automatically if the user id is changed
  • Minute hand now moves appropriately
  • Second hand now only moves in whole seconds

v4.0

Changes:

  • Fixes problems with complications not updating
  • Adds support to show next reputation milestone as range for complications
  • Should now be available from the Play Store from the watch, just search for "Stack Overflow"

v3.0

v3.0-1 v3.0-2

  • Settings page to set up the watch face
  • Two different watch face - one that resembles the SWAG, the other one a more simpler one
  • Supports two complications on the watch face
  • Adds a new complication that shows a specific user's SO reputation
    • Works in other watch faces as well
    • Shows Jon Skeet's reputation by default
  • Please note that the privacy policy was updated to contain that the SO user ID you set might be a PII, but it's only stored locally on the watch and only transmitted to the StackExchange API

v2.0

v2.0

  • Nicer watch face resembling the swag much more
  • Water resistant to 6 to 8 weeks

v1.0

v1.0

  • Initial version
  • Stack Overflow logo as a background
  • Displays the UTC offset so you know when the Stack Overflow counters reset
  • *Wear OS now ;) This is awesome! Now I just want a complication to show my rep :P – Em C Dec 3 '18 at 5:30
  • 1
    @EmC true, forgot they renamed it a year ago or so :D. Definitely planning adding some complications to the mix – SztupY Dec 3 '18 at 9:29
  • 2
    I think I preferred the simplicity of the original design if you're a programmer and user you don't need reminding what the logo represents. On the other hand, the resized logo makes it look classier, more expensive looking. That is one super watch, wish I could upvote twice. – Mari-Lou A Dec 3 '18 at 9:57
  • The prize for this contest should be changed to a smartwatch with this set as the default face! – Tot Zam Dec 3 '18 at 15:22
  • 1
    @EmC complication support is done! – SztupY Dec 4 '18 at 1:06
  • Looks awesome! I like the bonus feature that I can pretend to be Jon Skeet when I look at my watch now ;) – Em C Dec 4 '18 at 17:02
  • @EmC nice pic. Am I seeing it correctly that the watch face doesn't fill the available space fully (the orange circle should be at the very edge of the display) – SztupY Dec 4 '18 at 17:14
  • Nope, that is at the edge of the available screen space for my watch! I guess it just has a thicker black band around the edge of the screen than yours. – Em C Dec 4 '18 at 17:17
  • 1
    The watch face looks nice, however... I am concerned that you may be violating the Stack Overflow trademark by publishing this. Please refer to the rules on using the logo. IANAL, you may want consider contacting a lawyer as well as requesting the permission for use from Stack Overflow itself. – Travis J Dec 5 '18 at 20:17
  • I tried to adhere as much as possible to the guidelines stated in meta.stackexchange.com/legal/trademark-guidance Hence the application name doesn't contain anything trademarked, and the logo is used to label the site the reputation display is coming from (although you can say that some parts of the application might imply false associations). However based on the same guidelines most answers that feature the logo in a distorted way (like the current top voted answer) would be invalid as well. – SztupY Dec 5 '18 at 20:59
  • However I did plan on creating a meta page to figure out what to do with the app once the contest is over – SztupY Dec 5 '18 at 21:00
  • The difference between using it as a reference (as in the answer cited) and in a published app is that the published app on the google store is considered to be used "in commerce" which is where the trademark issues come into play from a legalese standpoint. From a guidelines standpoint, they even state for apparel (which is generally covered here with the watch face), "Do not use the names or logos owned by Stack Exchange Inc. on any apparel or merchandise without our permission." While I cannot speak for them, I assume it would go alright if asked. It just needs to be done properly. – Travis J Dec 5 '18 at 21:44
  • True, but on the other side I don't wish to create a meta thread about it before the end of the competition, to avoid the meta effect that could affect the votes on this thread. – SztupY Dec 5 '18 at 23:13
  • Fair enough. I don't think the meta thread is required though. If you are serious about pursuing the app then just use the contact us form by clicking the contact link at the bottom of any page. They are good about responding. – Travis J Dec 5 '18 at 23:55
  • 2
    I would like to say - in this case, ugh, this is too darned epic, and I wish my smartwatch did android wear just so I could use it ;) – Journeyman Geek Dec 7 '18 at 3:30
29

With apologies to Roger Waters:

Coding away the moments that make up a dull day
Fritter and waste compile time in an offhand way.
Kicking around on a jsquery in your core code
Waiting for someone on SO to show you the way.

Tired of sitting on your laptop, staying home to watch the rep.
You are young and life is long and there are votes to use today.
And then one day you find ten k have got behind you.
No one told you when to flag, you missed the HNQ!

So you post and you post to catch up with Jon Skeet but he's jamming
Racing ahead to be posting more answers again.
The front page is the same in a relative way but you're older,
Shorter of breath and one rep closer to gold.
Every year is getting more swag, never seem to find the time.
Posts that either get downvoted, or comments moved to chat again
Hanging on in quiet comment is the English way
The time is gone, the bounty's over,
Thought I'd something more to say.

SE
SE again
I like to lurk here
When I can
When I come home
Cold and tired
It's good to mod my top sites
Beside the fire

Far away
Across the field
Tolling on the chat room bell
Calls the faithful to their knees
To validate the softly spoken chat flags

(Definitely more cheerful than the original!!!)

  • 4
    Needs a link to the instrumental/Karaoke version otherwise how else will the millennials know just how good this is? – Mari-Lou A Nov 27 '18 at 20:10
  • 1
    @Mari-Lou As a millennial I love Pink Floyd :-) – John_ReinstateMonica Nov 28 '18 at 5:29
  • @RoryAlsop Where is it? – Narusan Dec 1 '18 at 17:57
29

Well... yes, it is about time!


enter image description here

Want to see a simple view, here to go:

jQuery(document).ready(function ($) {
	var $timeline_block = $('.cd-timeline-block');


	$timeline_block.each(function () {
		if ($(this).offset().top > $(window).scrollTop() + $(window).height() * 0.75) {
			$(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
		}
	});


	$(window).on('scroll', function () {
		$timeline_block.each(function () {
			if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden')) {
				$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
			}
		});
	});
});
/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family: "Droid Serif", serif;
  color: #7f8c97;
  background-color: #e9f0f5;
}

a {
  color: #acb7c0;
  text-decoration: none;
  font-family: "Open Sans", sans-serif;
}

img {
  max-width: 100%;
}

h1, h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------- 

Main components 

-------------------------------- */
header {
  height: 150px;
  line-height: 150px;
  text-align: center;
  background: #303e49;
}
header h1 {
  color: #ffffff;
  font-size: 18px;
  font-size: 1.125rem;
}
@media only screen and (min-width: 1170px) {
  header {
    height: 150px;
    line-height: 150px;
  }
  header h1 {
    font-size: 24px;
    font-size: 1.5rem;
  }
}

#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block::after {
  clear: both;
  content: "";
  display: table;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #ffffff, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}
.cd-timeline-img.cd-picture {
  background: #75ce66;
}
.cd-timeline-img.cd-movie {
  background: #c03b44;
}
.cd-timeline-img.cd-location {
  background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -moz-transform: scale(1.2);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.cd-timeline-content {
  position: relative;
  margin-left: 60px;
  background: #ffffff;
  border-radius: 0.25em;
  padding: 1em;
  box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content::after {
  clear: both;
  content: "";
  display: table;
}
.cd-timeline-content h2 {
  color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
  float: right;
  padding: .8em 1em;
  background: #acb7c0;
  color: #ffffff;
  border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #bac4cb;
}
.cd-timeline-content .cd-date {
  float: left;
  padding: .8em 0;
  opacity: .7;
}
.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #ffffff;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%;
  }
  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #ffffff;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
  }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #ffffff;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
  .cssanimations .cd-timeline-content.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-content.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-2 0.6s;
    -moz-animation: cd-bounce-2 0.6s;
    animation: cd-bounce-2 0.6s;
  }
}

@media only screen and (min-width: 1170px) {
  /* inverse bounce effect on even content blocks */
  .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
    -webkit-animation: cd-bounce-2-inverse 0.6s;
    -moz-animation: cd-bounce-2-inverse 0.6s;
    animation: cd-bounce-2-inverse 0.6s;
  }
}
@-webkit-keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(20px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -moz-transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(-20px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/reset.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/index.js"></script>
</head>
<body>	
		<header>
			<h1>Stack Overflow’s Story</h1>
		</header>

		<section id="cd-timeline" class="cd-container">

			<!------------------2018 start-------------------->

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>September 2018</h2>
					<p>10th anniversary of Stack Overflow</p>
				</div>
			</div>
			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>August 2018</h2>
					<p>Brand new Code of Conduct (CoC).</p>
				</div>
			</div>
			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>May 2018</h2>
					<p>Stack Overflow for Teams has launched.</p>
				</div>
			</div>
			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>January  2018</h2>
					<p>Thanks a Million, Jon Skeet!.</p>
					<p>Jon Skeet’s reputation on Stack Overflow passed 1,000,000</p>
				</div>
			</div>
			<!------------------2018 end-------------------->


			<!------------------2017 start-------------------->
			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>May 2017</h2>
					<p>A popular Stack Overflow question: How to exit the Vim editor? one million eighty-two times viewed.</p>
					<p>Stack Overflow Flipped the Switch on HTTPS.</p>
					<p>Introducing Stack Overflow Trends</p>
				</div>
			</div>
			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>
				<div class="cd-timeline-content">
					<h2>February 2017</h2>
					<p>2017 Stack Overflow Redesigned the Top Navigation.</p>
				</div>
			</div>

			<!------------------2017 end-------------------->

			<!------------------2016 start-------------------->

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>October 2016</h2>
					<p>The Stack Overflow Developer Story.</p>
					<p>Salary calculator now can calculate International Salaries</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>July 2016</h2>
					<p>Introducing the Stack Overflow salary calculator.</p>
					<p>Introducing Stack Overflow Documentation (Beta).</p>
				</div>
			</div>

			<!------------------2016 end-------------------->


			<!------------------2015 start-------------------->

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>May 2015</h2>
					<p>Introducing Beyond Coding: Free professional skills training for emerging devs</p>

				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>April 2015</h2>
					<p>New Design Profile Page & Activity Page.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
					<img src="./images/job_targeted.ico" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>January 2015</h2>
					<p>Targeted Jobs for Stack Overflow (changed a why to showing Jobs with Developer Types, Tech Ecosystems, and Tech
						Tags).</p>
				</div>
			</div>

			<!------------------2015 end-------------------->

			<!------------------2014 start-------------------->

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>
				<div class="cd-timeline-content">
					<h2>November 2014</h2>
					<p>Announcing Bosun, new open source monitoring & alerting system.</p>
					<p>Stack Exchange for the iPad is here – and iOS apps now support iOS 8.</p>
				</div>
			</div>
			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>
				<div class="cd-timeline-content">
					<h2>September 2014</h2>
					<p>Introducing Runnable JavaScript, CSS, and HTML Code Snippets.</p>
				</div>
			</div>
			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>
				<div class="cd-timeline-content">
					<h2>May 2014</h2>
					<p>Stack Exchange for iPhone.</p>
				</div>
			</div>
			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>April 2014</h2>
					<p>Announcing The Launch Of Meta Stack Exchange.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>
				<div class="cd-timeline-content">
					<h2>March 2014</h2>
					<p>Your communities list is now customizable.</p>
				</div>
			</div>
			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>
				<div class="cd-timeline-content">
					<h2>January 2014</h2>
					<p>Stack Exchange for Android.</p>
				</div>
			</div>
			<!------------------2014 end-------------------->

			<!------------------2013 start-------------------->

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>September 2013</h2>
					<p>Five years completed.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>January 2013</h2>
					<p>Rolled out a new Quick Start guide to help new users.</p>
					<p>Announcing a new way to change your profile picture.</p>
				</div>
			</div>

			<!------------------2013 end-------------------->

			<!------------------2012 start-------------------->

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div> 

				<div class="cd-timeline-content">
					<h2>February 2012</h2>
					<p>Stack Exchange co-founder Jeff Atwood announced for leaving the company.</p>
				</div>
			</div>

			<!------------------2012 end-------------------->

			<!------------------2011 start-------------------->

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>November 2011</h2>
					<p>New section "Review".</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>August 2011</h2>
					<p>Introduced Community Wiki.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>July 2011</h2>
					<p>Stack Exchange Mobile friendly.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>April 2011</h2>
					<p>Inline Comment and Post Markdown Help.</p>
				</div>
			</div>
			<!------------------2011 end-------------------->



			<!------------------2010 start-------------------->

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>December 2010</h2>
					<p>Stack Overflow Annual Survey (first).</p>
					<p>Subscribe to Tags via Email.</p>
					<p>Re-Launching Stack Exchange Data Explorer.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>October 2010</h2>
					<p>Stack Overflow Chat Goes to Live.</p>
					<p>One million questions on stack Overflow.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>September 2010</h2>
					<p>Global Inbox.</p>
					<p>Global Network Auto-Login.</p>
					<p>Jon Skeet reached 200K reputation.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>August 2010</h2>
					<p>New Tag Info Pages.</p>
					<p>Share Questions and Answers.</p>
					<p>New Image Upload Support.</p>
					<p>Stackexchange.com the official network hub.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>July 2010</h2>
					<p>Stack Exchange API 1.0 Imminent.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>June 2010</h2>
					<p>Introducing Area 51.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>April 2010</h2>
					<p>New 10k Feature: Inline Tagging.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>January 2010</h2>
					<p>Improved Comments with @reply.</p>
				</div>
			</div>

			<!------------------2010 end-------------------->

			<!------------------2009 start-------------------->

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>October 2009</h2>
					<p>Introducing Stack Overflow Careers (beta).</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>September 2009</h2>
					<p>One million page views in a single day.</p>
					<p>Jon Skeet reached 100K reputation.</p>
					<p>One Year of Stack Overflow.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>August 2009</h2>
					<p>Started showing Accept rate on question.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>July 2009</h2>
					<p>Migrate Questions Between Websites.</p>
					<p>Cross-Site Account Associations.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>June 2009</h2>
					<p>Meta Stack Overflow.</p>
				</div>
			</div>


			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>May 2009</h2>
					<p>Stack Overflow Moderator Voting introduced.</p>
					<p>Linking Duplicate Questions.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>April 2009</h2>
					<p>Red Flag Introduced.</p>
					<p>Comments with Flags and Votes.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>March 2009</h2>
					<p>Started Responsible Advertising..</p>
					<p>10k Reputaion Tools Available.</p>
					<p>Edit Feature.</p>
				</div> 
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>February 2009</h2>
					<p>Question / Answer Rate Limits.</p>
					<p>Reached 100K Questions.</p>
					<p>Email Newsletter.</p>
				</div>
			</div>

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>January 2009</h2>
					<p>Reputation Bounty for Unanswered Questions.</p>
					<p>New Replies Notification.</p>
					<p>Accept Your Own Answers.</p>
				</div>
			</div> 

			<!------------------2009 end-------------------->

			<!------------------2008 start-------------------->


			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>

				<div class="cd-timeline-content">
					<h2>December 2008</h2>
					<p>Moderator Privileges </p>
				</div>
			</div> 

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div>
				<div class="cd-timeline-content">
					<h2>October 2008</h2>
					<p>Ability to mark a question as a favorite.</p>
					<p>Expressing Your Tag Preferences.</p>
				</div>
			</div> 

			<div class="cd-timeline-block">
				<div class="cd-timeline-img cd-picture">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture">
				</div> 
				<div class="cd-timeline-content">
					<h2>September 2008</h2>
					<p>Stack Overflow’s public beta went live.</p>					
				</div>
			</div> 
			<!------------------2008 end-------------------->

		</section> 
	</body>

</html>


Inspired by Stack Overflow Developer Story

28

My favourite quote involving time is

Time flies like an arrow; fruit flies like a banana

The idea is that if we can get a computer to truly understand this we have cracked artificial intelligence.

  • 5
    It took this well-educated, erudite human a good 10 years to understand what this quote was about. And that's only because I read about it. I honestly never parsed it as "fruit flies" "like a banana", only as "fruit" "flies like a banana". If I can't understand it, I have no expectation of computers doing so. – AndyT Nov 28 '18 at 9:30
  • 5
    @AndyT it's a context thing. I think each of the halves of this sentence would be quite understandable (in the intended meaning) if read individually. Just, after “Time flies like an arrow”, the brain automatically tries to parse the second half as “X flies like Y” too. If you'd first read the sentence the other way around, you'd probably parse it as “ ‘Fruit flies’ like ‘a banana’; ‘time-flies’ like ‘an arrow’ ”. – leftaroundabout Nov 28 '18 at 13:29
27
+100

pie chart


Credits: Inspired by this graph and thanks @Machavity and @Dennis Williamson for the timely improvement suggestions :)

  • 7
    -1 for not mentioning "Browsing Stack Overflow" – Machavity Nov 28 '18 at 13:41
  • 6
    -1 for not including time for compiling. – Paused until further notice. Nov 28 '18 at 21:57
  • 4
    Complaining about how bad the last person's code was should be part of it, unless of course you only write original code, then lucky you! – demongolem Nov 29 '18 at 18:16
27

LEGO‽ Time‽ LEGO time lapse‽

Close up of the finished product! LEGO Time

  • 4
    Was gonna flag as NAA, but the time-lapse in your link is too good. Might want to specify that's what it is to avoid more confusion. – DCOPTimDowd Nov 29 '18 at 17:09
  • 1
    Great, (and timely ;) ) suggestion! Updated – matt Nov 29 '18 at 18:10
24

I'm having a course called Digital Circuit Experiments which is about programming FPGA in Verilog. So I am here ...

Announcing my FPGA Stopwatch that's built for timing!

image

Or watch live streaming demo online!

Features:

  • Stopwatch start/stop on switch 0
  • "Hold" function to keep the numbers with switch 1
  • "Show hours" with switch 2 (by default, segment displays are only lit up when required, flipping this switch up will force show up to the hour digit)
  • "20x turbo boost" with switch 3 (it just replaces the internal clock)
  • Reset with BTNU
  • A good-looking merry-go-round-style LED animation when the stopwatch is counting!

The code is too much, but you can read more @@>>> https://github.com/iBug/Nexys4-DDR-stopwatch or Download ZIP (Created with Xilinx Vivado 2018.2) (Code licensed under the MIT License)

Optional accessories:

  • A Stack Exchange or Stack Overflow sticker as shown in the image above :)
  • wow :-) nice one – beeshyams Nov 28 '18 at 13:04
24
+100

Well, considering the current season and that the theme is the passing of time, I think an Advent Calendar is most appropriate here. Run the attached snippet to see it.

var today = new Date();



$(".dialog").dialog({
    autoOpen : false, modal : true, show : "blind", hide : "blind"
  });
  
$(".day").click(function() {
    if (today.getMonth() === 11 || today.getYear()> 2018){
      var clickedId = $(this).attr('id'); 
      if (today.getDate() >= Number(clickedId)){
        $(".dialog.day"+clickedId).dialog("open");
        
        if (clickedId == 22){
          itsMonopolyDay();
        }
      }
      else {
        $(".dialog.notYet").dialog("open"); 
      }
    }
    else
    {
        $(".dialog.notEvenDecember").dialog("open");  
    }
    return false;
});

$("#zorkInput").on("keydown", function (e) {
    if (e.keyCode === 13) {  
        checkAction();
    }
});

function fortuneCookie() {
  var fortunes = [
    "You will get a fortune cookie.",
    "You will vote for an answer about an advent calendar on meta.",
    "Error: 404 Fortune not found.",
    "You cannot grasp the true nature of the fortune cookie attack.",
    "This is not the fortune cookie you were looking for.",
    "One does not simply eat a fortune cookie",
    "I was a meta user like you some time ago but then I took a fortune cookie to the knee.",
    "The Parrot! Do not trust the Parrot!",
    "A WINNER IS YOU!",
    "You will start watching a show about candy colored ponies.",
    "You will find true happiness if you share this answer link with 7 friends withing one hour."    
  ];

  var randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
  
  alert(randomFortune);
}

function claimCookie(){
  alert("Sorry, the Stack Exchange snippets sandbox security does not allow us to set cookies on the client :P.")
}

function closeUpdateDialog() {
  
  $(".dialog.day17").dialog("close");
}

function startEndlessUpdate(){
  $(".dialog.endlessUpdate").dialog("open");
  
  var messages = [
    "Generating bugs...", 
    "Downloading MLP episodes...",
    "Configuring flux capacitor...",
    "Sealing user credentials...",
    "Removing Herobrine...",
    "Installing SharePoint...",
    "Hatching chickens eggs...",
    "Doing lame puns...",
    "Resting for a bit...",
    "Mapping dungeons...",
    "Spawing NPCs...",
    "Generating artifacts...",
    "Filling water buckets...",
    "Knitting hats...",
    "Formatting local disks...",
    "Collecting 200$ from passing start...",
    "Parsing HTML using RegEx...",
    "Summoning Cthulhu...",
    "Pinging Shog9...",
    "Asking Jon Skeet for the codez...",
    "Searching for unicorns...",
    "Asking to upvote swag contest submissions...",
    "Attempting to become the Pirate King...",
    "Catching all Pokémons...",
    "Synching clocks...",
    "Frammenting disk...",
    "Increasing ram usage...",
    "Reading some books...",
    "Loading cat pictures...",
    "Drawing red hand circles...",
    "Staring chat messages...",    
    "Collecting more hats...",
    "Configuring HDRR...",
    "Crafting Rings of Power...",
    "Waiting for planet alignment...",
    "Improving room feng-shui...",
    "Coloring picture books...",
    "Eating cotton candy...",
    "Baking cupcakes...",
    "Buying muffins...",
    "Making friends...",
    "Ranting for downvotes...",
    "Putting holes in swiss cheese...",
    "Raising the sun...",
    "Watering tomatoes...",
    "Opening worms cans...",
    "Increasing system entropy...",
    "Generating funny messages...",
    "Scolding Shadow Wizard for being uncouth...",
    "Computing question to the Life, Universe and Everything...",
    "Waiting for user to get bored...",
    "Writting letters to Princess Celestia...",
    "Learning friendship lessons...",
    "Making jokes no one will understand...",    
  ];

  setInterval(function switchUpdateMessage(){ 
    var randomMessage = messages[Math.floor(Math.random() * messages.length)];
    $("#updateMessage").text(randomMessage);
    return switchUpdateMessage;
  }(), 3000);
}

function checkAction() {
  $("#zorkInputLine").hide();
  
  value = $("#zorkInput").val();
  
  if (value == "offer cupcake to grue") {
    $("#zorkRoomText").text("You befriend a nearby grue by offering it the last cupcake you had. In return, the grue shows you the way to the Stack Exchange treasure room, where all the unicorn plushes are stored. THE END.");
  }
  else {
    $("#zorkRoomText").text("Sorry, I don't know how to '"+value+"'. But it doesn't matter now. A grue came and ate you. GAME OVER.");
  }
}

function itsMonopolyDay(){
  setTimeout(function foo() {
    $(".dialog.monopoly").dialog("open");
  }, 1000);
}

function showCommonRates() {
  $(".dialog.commonCrateRates").dialog("open");
}
function showRareRates() {
  $(".dialog.rareCrateRates").dialog("open");
}
function showEpicRates() {
  $(".dialog.epicCrateRates").dialog("open");
}

function showBuyPopup(rarity){
  if (confirm("Are you sure you want to buy a "+rarity+ " crate?")){
    $(".dialog.dupeHat").dialog("open");
  }
  else {
  
  }
}
.wrapper{
  --transform: scale(0.5);
}

#calendar  {
  width: 35%;
  margin: auto;
  border: 1px solid black;
}

#calendar > div {
  display: flex;
  justify-content: space-evenly;
}
#calendar > div > div {
  width: 14%;
  text-align: center;
}
#calendar > div.header{
  background-color: red;
  color: white;
  font: 12px bold;
  height: 20px;
  border-bottom: 1px solid black;
  line-height: 20px;
}

.dayRow{
  --background: green;
}

.day {
  height: 30px;
  line-height: 30px;  
  vertical-align: middle;
 background-image:  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4IiBjbGFzcz0ic3ZnLWljb24iPjxwYXRoIGQ9Ik0xIDEzYzAgMS4xLjkgMiAyIDJoOHYzbDMtM2gxYTIgMiAwIDAgMCAyLTJ2LTJIMXYyek0xNSAxSDNhMiAyIDAgMCAwLTIgMnYyaDE2VjNhMiAyIDAgMCAwLTItMnpNMSA2aDE2djRIMVY2eiIgc3R5bGU9ImZpbGw6bGlnaHRncmF5Ij48L3BhdGg+PC9zdmc+");
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center; 
  font-size: 15px;
  font-weight: bold;
}

.theLegendaryFreeHandDrawnCircleOfLegends {

background-size: 100% 100%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAABCCAIAAACKH1z7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAL0SURBVGhD7Zm/bhQxEId5EDpSQRW661KRKqlCBVVSkSqiQRRIFDwCBRIFPRI9okE0UR4gokFUUEUiYUMCR/hz/FYenWDO6/GMvQ4Gf5pqds/jb+313novzP5FmlU9NKt6aFb10KzqoVnVQ7OqhySrn113evfe0WTlw8UlMXAaTv7+5i39eEwsVioZFoeXrnx++IgaGg2L1cntO6yv5sClQWs/3r2npjOhtsJAHV6+yjqXJZzh1+cvqFICaqsvj5+w3mQPXLXEAVRbHV+/wToRjn4EtnewSBjmbe92cECFNaitTu8/YLVjAtcCvz17+erjyjV2KBy4KIZB01nhpupW11jhyKAm/mT69Jm4lh4tT7DkojT9JgKFVYoSgloZ5mx3r39gLE/YD10c39yk8yKItYLSp61brFJ8YECooQgwgN5lNn55lK3g433m4nmK+4RO8oEVwt1FuPzhMxf5tv96Uaxb36DDErLV0Nql7agWiGHWsaJ0TEK28k4G1YxKgdWlrIRsxdpFwHPsgZrDSlNWQm1luElSYNUpKyFYYamwtZsLW/WQlfcBRcdKYasessKCzhpVPQqzwDpAWYmQFVv9+gfU7h4dK8XvHUBQViJkxVosuUjMYX2grITCirJlsfWhWZ0Htj40q/PA1of/3upke8e2N5IC6wNlJUJWeOyyRm17IymwDlBWImTl3STDSyQdLgKrTlmJkBVe0RdfGTGAJechq05ZiZAV8L5mu829MrDSlJUQrByLN1iZDzaA1aWsRJTV0A1WYCqyopSViLLCyHh3WJEce9BYRcpKRFkB78rhot8unk7pvNywWpSViLUCWDmG9v671bWRZiMrRFkJhZVjaLsYs3GMPx+sCmUl1FYgMGh5/3yYd7gsVo5ufYOVdIF8lhHzfq+gYxJ2q6GFcbyI3+GyWwGIab8dpkT8DleS1Rztx2JDYF5QsQjyWI09aNrN/TxWDu9f4cTA2mPYWs1p9ffQrOqhWdVDs6qHZlULs9kvgpwKtSKN7Z0AAAAASUVORK5CYII=");
}

.flex-row {
  display: flex;
  justify-content: flex-start;
}

.flex-button-row {
  display: flex;
  justify-content: space-between;
}

.extraSmallText{
  font-size: 6px;
}

.goldTicket{
  background-color: gold;
}

.center{
text-align: center;
}

.song{
  font-size: small;
  font-style: italic;
}

.itemImage{
  border: 4px double white;
  padding: 10px 5px;
  background-color: black;
  height: 52px;
}

.legendaryItem {
  background-color: black;
  border: 4px double white;
  padding: 5px;
  flex-grow: 1;
}


.legendaryItem > .name{
  font-style: bold;
  color: #ff8000;
  margin: 5px 0 0 0;
}
.legendaryItem > .rarity{
  font-style: italic;
  color: gold;
  margin: 2px 0 0 0;
}
.legendaryItem > .description{
  color: white;
  margin: 5px 0 0 0;
  font-size: 14px;
}
.legendaryItem >.flavorText{
  color: yellow;
  margin: 5px 0 0 0;
  font-size: 12px;
  font-style: italic;
}
.legendaryItem > .sellingPrice{
  color: white;
  font-size: 14px;
  margin: 10px 0 0 0;
}

.smithSpeech{
  color: black;
  background: rgb(211,211,211);
  border: 2px ridge black;
  font-size: 10px;
}

.updateInfoArea {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}
.updateInfoArea > #updateMessage{
  font-size: small;
  font-style: italic;
}

.dialog.day18.ui-dialog-content{
  background-color: black;
  color: white;
  font-family: "Consolas";
}

.unstyledInput{
  background: transparent;
  border: none;
  color: white;
}

.monopolyCard{
  border: 1px solid black;
  padding: 2px;
}

.monopolyHeader{
  width: 100%;
  color: white;
  background-color: blue;
  text-align: center;
  padding: 5px 0;
  margin: 0;
}

.monopolytext{
  display: grid;
  grid-template-columns: 110px 50px;
  grid-template-rows: auto;
  justify-content: center;	
  font-size: small;
  grid-template-areas: 
    "text0 price0"
    "text1 price1"
    "text2 price2"
    "text3 price3"
    "text4 price4"
    "text5 price5";
}

.monopolyFooter{
  font-size: small;
  padding-top: 5px;
  font-style: italic;
}


.text0 { grid-area: text0; }

.crates {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.crate{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cratePic{
  height: 80px;
  width: 80px;
  align-self: center;
  cursor: pointer;
}

.crateLabel,
.cratePrice{
  font-size: small;
}

.crateLabel{
  font-weight: bold;
}

.percentageRow{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<div class="wrapper">
  <section id="calendar">
    <div class="header">
      <div class="dayLabel">Mon</div>
      <div class="dayLabel">Tue</div>
      <div class="dayLabel">Wed</div>
      <div class="dayLabel">Thu</div>
      <div class="dayLabel">Fri</div>
      <div class="dayLabel">Sat</div>
      <div class="dayLabel">Sun</div>
    </div>
    <div class="dayRow">
      <div class="emptyDay"> </div>
      <div class="emptyDay"> </div>
      <div class="emptyDay"> </div>
      <div class="emptyDay"> </div>
      <div class="emptyDay"> </div>
      <div id="1" class="day">1</div>
      <div id="2" class="day">2</div>
    </div>
    <div class="dayRow">
      <div id="3" class="day">3</div>
      <div id="4" class="day">4</div>
      <div id="5" class="day">5</div>
      <div id="6" class="day">6</div>
      <div id="7" class="day">7</div>
      <div id="8" class="day">8</div>
      <div id="9" class="day">9</div>
    </div>
    <div class="dayRow">
      <div id="10" class="day">10</div>
      <div id="11" class="day">11</div>
      <div id="12" class="day">12</div>
      <div id="13" class="day">13</div>
      <div id="14" class="day">14</div>
      <div id="15" class="day">15</div>
      <div id="16" class="day">16</div>
    </div>
    <div class="dayRow">
      <div id="17" class="day">17</div>
      <div id="18" class="day">18</div>
      <div id="19" class="day">19</div>
      <div id="20" class="day">20</div>
      <div id="21" class="day">21</div>
      <div id="22" class="day">22</div>
      <div id="23" class="day">23</div>
    </div>
    <div class="dayRow">
      <div id="24" class="day">24</div>
      <div id="25" class="day">25</div>
      <div class="emptyDay"> </div>
      <div class="emptyDay"> </div>
      <div class="emptyDay"> </div>
      <div class="emptyDay"> </div>
      <div class="emptyDay"> </div>
    </div>
  </section>
</div>

<div class="dialog day1" title="Sat, Dec 1st">
  <p>Today you get a free cookie! Click <a href="#" onclick="claimCookie()">here</a> to claim it.</p>
</div>
<div class="dialog day2" title="Sun, Dec 2nd">
  <img src="https://i.stack.imgur.com/WqfqL.png" />
</div>
<div class="dialog day3" title="Mon, Dec 3rd">
  <p>I had prepared some cupcakes, but I forgot today is also Twilight birthday, so she gets them instead. Sorry, try again tomorrow.</p>
  <div class="flex-row">
   <img src="https://i.stack.imgur.com/a4SzT.png" />
   <div style="padding-left: 10px">
      If that's any comfort, they were hay-flavored.
   </div>
  <div>
</div>
<div class="dialog day4" title="Tue, Dec 4th">
  <img src="https://i.stack.imgur.com/ktpag.gif" />
</div>
<div class="dialog day5" title="Wed, Dec 5th">
  <p>Congratulation! You just won some <marquee>FREE REP</marquee>To claim it please compile <a href="https://meta.stackexchange.com/questions/ask">this request form</a> with the required info. Your rep will be delivered in 6 to 8 time units.*</p>
<p class="extraSmallText">* Waring: may result in negative free rep in some not-null probability cases</p>
</div>
<div class="dialog day6" title="Thu, Dec 6th">
  <p>Today is <a href="https://www.daysoftheyear.com/days/miners-day/">"Miners' Day</a>. To celebrate it, we are currently using your cpu to extract some <a href="https://meta.stackexchange.com/questions/227363/what-are-stack-overflow-unicoins">Unicoins</a> from the depths of Stack Exchange salt mines. Please, stand by while we finish and do not turn out your pc.</p>
</div>
<div class="dialog day7" title="Fri, Dec 7th">
    <a href="https://www.google.it/maps/@40.7087193,-74.0068885,3a,75y,313.51h,79.36t/data=!3m7!1e1!3m5!1sAF1QipPkI6vTyjgKR-q5RmtXFX5hLwQJ_58ja3SrdGDC!2e10!3e11!7i13312!8i6656" target="_blank"><img style="width:100%" src="https://i.stack.imgur.com/Xj2EC.jpg" title="Nope, you won't get the chocolate bar, we alredy ate it."/></a>
    <div class="center" style="font-size: 12px">Please, click the ticket to claim it (if that doesn't work, open the link in a new tab)</div>
</div>
<div class="dialog day8" title="Sat, Dec 8th">
  <p>Today prize contained personaly identificable informations and has been removed in compliance with the new G.D.P.R European laws.</p>
</div>
<div class="dialog day9" title="Sun, Dec 9th" style="font-size: 13px;">
  <div class="flex-row">
    <img src="https://i.stack.imgur.com/KFtJZ.png" style="height: 60px; padding-top: 20px;" />
    <div style="padding-left: 10px">
      <p>You just got a cheap bootleg plastic replica of Tim's Lost Keys. It is a shame they aren't the real ones, though.</p>
    </div>
  </div>
  <p>Legends tell that someday an Hero of Light will came and claim the lost keys, putting an end to the dark reign of the <a href="https://meta.stackexchange.com/a/288240/171199">Unjustified Downvote Lord</a>.</p>
</div>
<div class="dialog day10" title="Mon, Dec 10th">
  <div class="flex-row">
    <div  class="itemImage">
      <img src="https://i.stack.imgur.com/62eCw.gif" style="height: 50px;"/>
    </div>  
    <div style="margin-left: 5px" class="legendaryItem">
      <h5 class="name">Ring Of The Annoying Bird</h5>
      <h6 class="rarity">Item level 9001</h6>
      <div class="description">
        <div>Binds when picked up</div>
        <div>Finger</div>
        <div style="margin-top: 5px">+75% to agro generation</div>
        <div style="color: lightgreen">Equip: Persuasion +20 (25 at level 9999)</div>
      </div>
      <div class="flavorText">"Sometimes a quick rant is the fastest way to get things done."</div>
      <div class="sellingPrice">Sell price: 10 <span style="color: gold">●</span> 18 <span style="color: silver">●</span></div>
    </div>
  </div>
</div>
<div class="dialog day11" title="Tue, Dec 11th">
  <p>Today, you get free hats. Why are you here? <a href="https://winterbash2018.stackexchange.com/">Go hunting now!</a>.</p>
</div>
<div class="dialog day12" title="Wed, Dec 12th"  style="background-image: url('https://i.stack.imgur.com/cuWpp.png'); background-size: cover;">
   <div class="flex-row" style="height: 200px">
    <img src="https://i.stack.imgur.com/D2GtJ.png" style="height: 70px; padding-top: 20px;" />
    <div style="padding-left: 10px">
      <p class="smithSpeech">𝕱𝖎𝖓𝖆𝖑𝖑𝖞 𝖙𝖍𝖊𝖊 𝖍𝖆𝖘'𝖙 𝖈𝖔𝖒𝖊𝖙𝖍, 𝕬𝖛𝖆𝖙𝖆𝖗. 𝕴 𝖍𝖆𝖘'𝖙 𝖇𝖊𝖊𝖓 𝖜𝖆𝖎𝖙𝖎𝖓𝖌 𝖍'𝖗𝖊 𝖆𝖑𝖑 𝖉𝖆𝖞! 𝖎 𝖓𝖊𝖊𝖉𝖊𝖙𝖍 𝖙𝖔 𝖌𝖎𝖛𝖊𝖙𝖍 𝖙𝖍𝖊𝖊 𝖆 𝖛𝖎𝖙𝖆𝖑 𝖈𝖑𝖚𝖊 𝖋'𝖗 𝖙𝖍𝖞 𝖖𝖚𝖊𝖘𝖙. 𝕿𝖔 𝖋𝖎𝖓𝖉𝖊𝖙𝖍 𝖙𝖍𝖊 𝖑𝖊𝖌𝖊𝖓𝖉𝖆𝖗𝖞  𝕮𝖔𝖘𝖒𝖎𝖈 𝕭𝖗𝖆𝖎𝖓 𝖈𝖔𝖝𝖈𝖔𝖒𝖇 𝖙𝖍𝖊𝖊 𝖘𝖍𝖆𝖑𝖑 𝖓𝖊𝖊𝖉𝖊𝖙𝖍 𝖙𝖔 𝖆𝖈𝖖𝖚𝖎𝖗𝖊𝖙𝖍 𝖆 𝖓𝖎𝖈𝖊 𝖆𝖓𝖘𝖜'𝖗 𝖇𝖆𝖉𝖌𝖊</p>
    </div>
  </div>
</div>
<div class="dialog day13" title="Thu, Dec 13th">
  <div class="flex-row">
    <img src="https://i.stack.imgur.com/C1BVJ.png" style="height: 60px; padding-top: 20px;" />
    <div style="padding-left: 10px">
      <p>You got a piece of moldy cheese. Only 47.577.295 lefthover cheese slices from the last swag event to ditch off now.</p>
    </div>
  </div>
</div>
<div class="dialog day14" title="Fri, Dec 14th">
  <div class="flex-row">
   <img src="https://i.stack.imgur.com/Vqahd.png" />
   <div style="padding-left: 10px" class="song">
      <p>On the first day of Christmas your true network sent to you</p>
<p>A <a href="https://meta.stackexchange.com/users/369802/tinkeringbell">parrot</a> in a pear tree.</p>
   </div>
  <div>
</div>
<div class="dialog day15" title="Sat, Dec 15th">
  <div class="flex-row">
    <img src="https://i.stack.imgur.com/LZgfP.png" style="height: 60px; padding-top: 20px;" onclick="fortuneCookie()" />
    <div style="padding-left: 10px">
      <p>A fortune cookie! You should click it an see what is inside!</p>
    </div>
  </div>
</div>
<div class="dialog day16" title="Sun, Dec 16th year 214">
   <div class="flex-row">
    <img src="https://i.stack.imgur.com/ZzZMn.jpg" style="height: 60px; padding-top: 20px;" onclick="fortuneCookie()" />
    <div style="padding-left: 10px; font-size: 10px;">
    To the attention of ALL CITIZENS. This calendar entry is currently placed at Security Clearance ULTRAVIOLET. Reading any part of this notice without appropiate security clearance is considered treason. Please proceed directly to your nearest available Termination Booth. Thank you for your cooperation. Have a nice daycycle!
    </div>
  </div>
</div>
<div class="dialog day17" title="Mon, Dec 17th">
  <p>In order to see this day calendar item, you need to update your Swag Advent Calendar app to a never version.</p>
  <div class="flex-button-row"><button onclick="startEndlessUpdate()">Update</button><a href="#" onclick="closeUpdateDialog()">Remind me later</a></div>
</div>
<div class="dialog day18" title="Tue, Dec 18th">
  <div style="background-color: black; color: white;">
    <p id="zorkRoomText">> You find yourself in a room, staring at an advent calendar. On a nearby table there is a lantern. The rest of the room is pitch black. You are likely to be eaten by a grue. What do you do?</p>
    <p id="zorkInputLine">> <input id="zorkInput" type="text" class="unstyledInput" />
  </div>  
</div>
<div class="dialog day19" title="Wed, Dec 19th">  
  <div class="flex-row">
    <img src="https://i.stack.imgur.com/FietH.png" style="height: 60px; padding-top: 20px;" />
    <div style="padding-left: 10px; font-size: small;">
      <p>Today Stack Exchange is giving away free fried chicken nuggets! Get them while they last!</p>
      <p>... wait... Chicken nuggets? <a href="https://meta.stackexchange.com/questions/319928/the-lord-of-the-hats-the-return-of-the-chicken">They wouldn't dare!!! BALPHAAAAAAAA!!!!!!</a></p>
    </div>
  </div>
</div>
<div class="dialog day20" title="Thu, Dec 20th">
  <div class="flex-row">
    <img src="https://i.stack.imgur.com/jv1Vp.png" style="height: 60px; padding-top: 20px;" />
    <div style="padding-left: 10px; font-size: small; padding-top: 10px;">
      <p>Otay oinjay ethay Tacksay Exchangay abalcay, askay otay ethay arrotpey inay ethay averntay</p>
    </div>
  </div>
</div>
<div class="dialog day21" title="Fri, Dec 21st">
  <img src="https://i.stack.imgur.com/gnVLT.jpg" style="width: 100%"/>
  <p>Today it is Dalek Day, so instead of the usual joke you get a nice collection of Daleks. Please choose your favorite one, we have all flavors from strawberry to liquirice.</p>
</div>
<div class="dialog day22" title="Sat, Dec 22th">
  <div class="monopolyCard">
    <h4 class="monopolyHeader">Park Palace</h4>
    <div class="monopolytext">
      <div class="grid-area: text0">RENT</div><div style="grid-area: price0">🦄$35</div>
      <div style="grid-area: text1">With 1 House</div><div style="grid-area: price1">🦄$175</div>
      <div style="grid-area: text2">With 2 House</div><div style="grid-area: price2">🦄$500</div>
      <div style="grid-area: text3">With 3 House</div><div style="grid-area: price3">🦄$1100</div>
      <div style="grid-area: text4">With 4 House</div><div style="grid-area: price4">🦄$1300</div>
      <div style="grid-area: text5">With Hotel</div><div style="grid-area: price5">🦄$1500</div>  
    </div>
    <div class="monopolyFooter">If a player owns ALL the lots of any Color-Group, the rent is Doubled on Unimproved Lots in that group. </div>
  </div>
</div>
<div class="dialog day23" title="Sun, Dec 23st">
  <div class="flex-row">
    <img src="https://i.stack.imgur.com/5BO78.gif" style="height: 60px; padding-top: 20px;" />
    <div style="padding-left: 10px; font-size: small; padding-top: 10px;">
      <p>You got a sprite swap mod! Now you can play as JNat in any Nes game!.</p>
      <p>The mod is so advanced that it doesn't require any installation either: just boot up the game of your choice, concentrate and here you go:P</p>
    </div>
  </div>
</div>
<div class="dialog day24" title="mon, Dec 24th">
  <h5 style="margin: 0; text-align: center; background-color: blue; color: white;">
    <div>Complete your hat collection!</div>
    <div>Buy an Hat Crate now!</div>
  </h5>
  <div class="crates">
    <div class="crate">
      <img class="cratePic" src="https://i.stack.imgur.com/7J4Bh.png" onclick="showBuyPopup('Common')"/>
      <span class="crateLabel">Common <a href="#" onclick="showCommonRates()">(?)</a></span>
      <span class="cratePrice">🦄$10</span>
    </div>
    <div class="crate">
      <img class="cratePic" src="https://i.stack.imgur.com/bWyRp.png" onclick="showBuyPopup('Rare')" />
      <span class="crateLabel">Rare <a href="#" onclick="showRareRates()">(?)</a></span>
      <span class="cratePrice">🦄$75</span>
    </div>
    <div class="crate">
      <img class="cratePic" src="https://i.stack.imgur.com/1jAxe.png" onclick="showBuyPopup('Epic')"/>
      <span class="crateLabel">Epic <a href="#" onclick="showEpicRates()">(?)</a></span>
      <span class="cratePrice">🦄$200</span>
    </div>
  </div>
</div>
<div class="dialog day25" title="Tue, Dec 25th">
  <p>Today is the last day... So instead of a joke you will get something different.</p>
  <p>I don't know if you, reader, actually celebrate Christmas or any other special event in this period. But I had to chose a day to end this, so... forgive me if this date has no meaning in your country.</p>
  
  <p>Either way... have a nice day! It was fun till it lasted, I hope I was able to make you smile even for a little. <a href="https://www.youtube.com/watch?v=-6ZaCY0sToo">Till next time!</a></p>
</div>

<div class="dialog notEvenDecember" title="A message from Yoda">
  <p>The path to December long is. Patience have you must.</p>
</div>

<div class="dialog notYet" title="A cheater is You">
  <p>Thou are not future enough to use this. Yet.</p>
</div>

<div class="dialog endlessUpdate" title="Wasting your time...">
  <p>The application is currently updating. Please do not turn off your connection or disconnect your pc.</p>
  <div class="updateInfoArea">
    <div id="updateMessage">foobar</div>
    <div style="width: 100%"><progress style="width: 100%"></progress></div>
  <div>
</div>

<div class="dialog commonCrateRates" title="Common Crate % Rates">
  <div class="percentageRow"><div>Common Hat</div><div>95%</div></div>
  <div class="percentageRow"><div>Rare Hat</div><div>4.5%</div></div>
  <div class="percentageRow"><div>Epic Hat</div><div>0.5%</div></div>
  <div class="percentageRow"><div>Unique Hat</div><div>0%</div></div>
</div>

<div class="dialog rareCrateRates" title="Rare Crate % Rates">
  <div class="percentageRow"><div>Common Hat</div><div>20%</div></div>
  <div class="percentageRow"><div>Rare Hat</div><div>70%</div></div>
  <div class="percentageRow"><div>Epic Hat</div><div>9%</div></div>
  <div class="percentageRow"><div>Unique Hat</div><div>1%</div></div>
</div>

<div class="dialog epicCrateRates" title="Epic Crate % Rates">
  <div class="percentageRow"><div>Common Hat</div><div>0%</div></div>
  <div class="percentageRow"><div>Rare Hat</div><div>25%</div></div>
  <div class="percentageRow"><div>Epic Hat</div><div>50%</div></div>
  <div class="percentageRow"><div>Unique Hat</div><div>25%</div></div>
</div>

<div class="dialog dupeHat" title="A loser is you">
  <p>Oh, no, what a shame. You got a common hat you already had. But you can still buy another one and hope you'll have more luck next time...</p>
</div>

<div class="dialog monopoly" title="Danger! Somecactus set us up the hotel!">
  <p>Oh, no! You landed on Stack Palace! And Grace had an hotel built there, too! You now own Stack Exchange 1500 unicorn dollars! Let's hope you get some by the end of this...</p>
</div>


Note: As expected from a real advent calendar, you will be able to open only cells up to the current date. Also, please notice that you should wait till Dec, 1st to be able to open the first "window". You could also cheat and look at the code, if you want to ruin your fun...


And since some asked me in the chat, let's add some explanations too:

Dec, 1st:

Giving out free cookies is a common internet meme. The joke here is that I was planning to give out an actual javascript cookie instead.

Dec, 2nd:

Free hand circles are a meme on the Meta site. This year Winter Bash event even features a Free Hand Circle hat!

Dec, 3rd:

Just an MLP based joke, since many fans of the show consider this day Twilight birthday (that based on the airing date of an old episode of the show).

Dec, 4th

A simple joke based on the original Super Mario Bros Nes game. At the end of each world, a Toad would tell you that "The princess is in another castle". As expected, it quickly became a meme.

Dec, 5th

One of the lames jokes. Not only I use the forbidden tag, I also claim that to get free rep points... you will have to post a question on the site. And the free votes may be negative, too.

Dec, 6th

Just a reference to miners day, and the recent trends of malware using the victim CPU/GPU to mine cryptocurrencies.

Dec, 7th

A reference to Charlie and the Chocolate Factory, with Shog9 playing the role of Willy Wonka. The virtual tour idea came to me after remembering some user on chat posting the link to the SE Google Maps Office Tour some years ago.

Dec, 8th

Just a reference to the recent GDPR compliance mess.

Dec, 9th

Another reference to a Meta meme, this time to Tim's lost keys. See here to find out more.

Dec, 10th

A vague reference to the "twitter incident" that happened in October.

Dec, 11th

Just a lame "Winter Bash has started" advertisement.

Dec, 12th

A reference to the Ultima games and Smith the talking horse, a recurring character in the series. As the Ultima wiki writes about Smith:
"The "useless hint" joke came about because Smith was supposed to give a vital clue in Ultima IV, but the programmers forgot to add it into his conversation tree. When designing Ultima V, they decided to put Smith back in the game and, as a joke, had him give the hint he was supposed to provide in Ultima IV. Following this, it became a running gag in the series to make Smith one game out-of-sync.
Because of this, I though it would be funny to have him give out an hint about how to get one secret hat from last year Winter Bash event.

Dec, 13th

About 6-8 time units before this contest was made, another contest involving cheese took place. This is a joke about the staff still trying to dispose all the cheese they got during said contest.

Dec, 14th

A reference to a popular Christmas song. The original line from the song is:
On the first day of Christmas my true love sent to me / A partridge in a pear tree.
So, since one of the local Tavern chat room users/moderators is known for having a parrot avatar...

Dec, 15th

Just a fortune cookie random message generator. It actually has about ten different messages. Originally planned to have some animation too, but that was dropped due to time and the limitations of the SE snippet tool.

Dec, 16th

A reference to the tabletop game Paranoia. The date for the day is a reference to the game too, since in the Paranoia setting the year is always 214...

Dec, 17th

An endless update joke, because we all know that updates often seem to require too much time to apply. As an added bonus, the fake update process displays a lot of joke messages, again randomly selected. I suggest watching the update screen for a while, just to see a few of the available messages.

Dec, 18th

A reference to old text-based adventure games, and specifically to Zork grue monsters. Also a reference to the "You Cannot Get Ye Flask" problem in text adventure games: given a situation, the command parser would often only recognize very specific command formats (like "ignite lantern" but not the more common "lit lantern"), resulting in many premature deaths... In this case, every command will get you eaten by the Grue - except a very specific one. Also notice that the game is only playable once without rerunning the script: this is on purpose for added annoyance - if you have to reference an annoying trope....

Dec, 19th

Long story short, this is a reference to "The Chicken", a now recurring "meme" during Winter Bash event. Since this year the chicken wasn't actually found I made up the joke that balpha (who was involved in the preparation of the event) ate it. Weirdly enough, on this same day balpha posted a chicken emoji on twitter...

Dec, 20th

An Illuminati joke, written in Pig Latin. Since the Tavern crew is often accused to be part of a secret Stack Overflow cabal that lurks in the shadows while controlling the networks... I suggested that one should ask the Parrot to join.

Dec, 21th

Just a reminder that Dec, 21th was Dalek Remembrance Day.

Dec, 22th

A short Monopoly themed joke.

Dec, 23th

A joke about JNat. He is known for using a rotating Megaman gif as his avatar. Because of this, I made a joke about having a mod that replaces Megaman with JNat... Since he is Megaman the actual character sprite wouldn't change.

Dec, 24th

"Add buyable hat loot crates for Winter Bash" has been a joke for years now. So I did a joke involving that.

Dec, 25th

Just some final goodbye. The linked video is taken from MLP:FIM ending credits sequence.

  • +1 for the idea, -1 for requiring patience – DCOPTimDowd Nov 29 '18 at 17:10
  • 1
    @DCOPTimDowd well... You basically get a joke (and I hope a little smile) for 25 days, starting on Dec, 1st... so... More days, more fun? – Hitodama Dec 3 '18 at 13:52
23

I've always been in love with Humans Since 1982 work , specially A million Times Digital clock of Analog clocks : https://www.humanssince1982.com/a-million-times .

So I decided to create the same concept in ReactJS . Started from a single analog clock , to a group of clocks , to a group of groups to display the current time as Digital.

The final work looks like :

AnalogDigitalClock

Here's the Github pages : https://ashrafonline.github.io/AnalogDigitalClock/

And the Github repository : https://github.com/ashrafonline/AnalogDigitalClock

  • 3
    Beautiful art!. – pasty Dec 1 '18 at 8:40
  • Awesome transition effects. – WinEunuuchs2Unix Dec 1 '18 at 18:52
  • This is amazing! Minor question: it looks like the transitions always start from 12:00 - is it possible to have them start at the last position of the clock, so there are no "jumps"? – hbaderts Dec 5 '18 at 6:51
  • @hbaderts Thanks . Noted , a small modification could be applied for this . Something related to animation-fill-mode: forwards CSS attribute . – Ashraf Dec 5 '18 at 7:04
19

The Pythonic answer

import time
18

About time this contest started :D

In honor of a time honored tradition among programmers, namely poor date and time handling, I'll share my latest programming nightmare:

The time (doh!) is 2006, and the horror story plays in a small German company with a new IT employee who is not a programmer, but has been tasked with creating an entire order processing and sample storage system from scratch, all on his own.

Many mistakes were had as this now programmer navigated his way throughout the treacherous waters of Microsoft Access 2003, but none would be so truly horrifying like the following:

The stage

To set the stage here, the program allows the uploading of files to a remote storage folder. Over the years over 840,000 such files have accumulated. Every file is denoted with its own entry in a relational database. Now, there are two time related pitfalls here: the uploadDate is saved and the lastModifiedDate of the file.

Of dread gods and string based date handling

Our new programmer had of course no idea how to handle dates, and all he knew was that the datetime SQL Server type did not like his date format much. So, he did what every aspiring programmer has at least considered and briefly pondered before discarding the idea: save the time of upload as a string and the lastModifiedDate as part of the filename.

This worked ... just, and was eventually implemented.

The corruption of cthulhu or technical debt

In the 15 years since then, the program grew and expanded, and every time a new method of uploading files was handled, the programmer did not much care for their previous time formatting, so they made the new methods different. At some point a new column was added to just save timestamps, but due to compatibility concerns with now legacy code that nobody dared touch it was run in parallel with the other systems and essentially just in addition to them.

Finally, both the timestamps and flat datetimes were truncated to the full hour, but since our programmer did not know how to truncate timestamps to the full hour, he just used timestamp = timestamp / 60 in stead.

The sane programmers among the readers might feel the chorus of tony the pony voices rising now...

The craziest part about that horror story is that replacing this system is what I'm currently working on. Very timely indeed to be doing that 15 years after its inception, don't you all think?

  • 6
    Answered in 22 minutes, not that I was timing. – Henders Nov 27 '18 at 16:47
  • I only now just noticed you have cthulu in your story too. – Sombrero Chicken Nov 27 '18 at 21:00
18

There once was a site known as Meta,
a prestigious site, a trendsetter!
A place to win prizes
(which sort of disguises
its mission of making Stack better)!

One day in the year's festive season
(with little-to-no given reason)
Stack deigned to release
an upmarket timepiece
in exchange for a lyrical pleadin'.

Into the competition came fredley
whose limericks were considered quite deadly.
In one of his stanzas
his mind went bananas:
he could see his own future confusedly:

In his mind's eye he witnessed his fate
of fantastic watches, no, wait!
He got too distracted,
his code is impacted!
This isn't going to end great...

In the present he's back on S.O.:
his program's decided to throw
a horrible error,
he looks on with terror,
its message: Stack Overflow

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