Time for some more swag! [closed]

Question

This question was closed because it could no longer be reproduced. It is not currently accepting answers.

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.

Closed 5 years ago.

Improve this question

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:

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

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.
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.
Employees are eligible.
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.
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.
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.
Void where contests are prohibited.

Get to it! Time is of the essence!

@rene You could build a time machine out of socks if you really wanted to. — user50049, Commented Nov 27, 2018 at 16:31
Can anyone do something with Jon Skeet's most upvoted answer? — user392547, Commented Nov 27, 2018 at 17:05
I don't know why this was not posted yet: winterbash2018.stackexchange.com — User that hates AI, Commented Nov 27, 2018 at 18:04
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, Commented Nov 28, 2018 at 1:19
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, Commented Nov 28, 2018 at 14:09
The hours on the "swag" go 1, 1, 1, 4, 5, 6... That's a weird watch! — Cris Luengo, Commented Nov 29, 2018 at 7:06

Dimitri Mestdagh · Accepted Answer · 2018-11-28 09:40:25Z

254

Here's a clock that will never overflow, the Stack Overflow Binary 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.}

edited Nov 28, 2018 at 9:40

answered Nov 28, 2018 at 9:32

Dimitri Mestdagh

1,7161 gold badge9 silver badges12 bronze badges

20

WOW, that's awsome! Though to much effort to read.
– Spitzbueb
Commented Nov 28, 2018 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.
– Dimitri Mestdagh
Commented Nov 28, 2018 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.
– David Ferenczy Rogožan
Commented Nov 28, 2018 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
Commented Nov 28, 2018 at 19:39
28

Rotated version
– a wizard arachnid
Commented Nov 29, 2018 at 0:03
5

... and can we have this implemented as a wind-up mechanical watch, please. (Minor feature request.)
– Nick Alexeev
Commented Nov 29, 2018 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!
– Dimitri Mestdagh
Commented Nov 29, 2018 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.
– Dimitri Mestdagh
Commented Nov 29, 2018 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.
– Nouman
Commented Nov 29, 2018 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.
– Dimitri Mestdagh
Commented Nov 29, 2018 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_is_at_topanswers.xyz
Commented Nov 30, 2018 at 17:27
2

This. This is epic.
– Barry Chapman
Commented Dec 1, 2018 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
Commented Dec 1, 2018 at 11:31
1

@samcarter I made a userscript to put the clock in the sidebar: stackapps.com/q/8137/54539
– a wizard arachnid
Commented Dec 1, 2018 at 17:01
1

@astonearachnid Oh wow! This is awesome! You finally gave me a reason not to hide the sidebar!
– samcarter_is_at_topanswers.xyz
Commented Dec 1, 2018 at 17:10

| Show 5 more comments

podiluska · Accepted Answer · 2018-11-27 20:02:32Z

163

answered Nov 27, 2018 at 20:02

podiluska

1,2391 gold badge7 silver badges5 bronze badges

8

This is SO hilarious!
– Radvylf Programs
Commented Nov 27, 2018 at 23:34
74

Migrate to Seasoned Advice.
– Catija
Commented Nov 28, 2018 at 0:16
3

'Tis the season!
– Super Jade
Commented Nov 28, 2018 at 2:16
111

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 Mod
Commented Nov 28, 2018 at 7:47
9

@Glorfindel don't spoil the joke :( Isn't there a spoiler alert available for comments?
– Mari-Lou A Слава Україні
Commented Nov 28, 2018 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.
– David Ferenczy Rogožan
Commented Nov 28, 2018 at 17:11
4

this lacks parsley, sage and rosemary ... to complete the bouquet. very nice idea
– Patrick Artner
Commented Nov 28, 2018 at 17:42
3

@PatrickArtner : for the millenials, are we talking about Simon & Timefunkel ?^^
– OldPadawan
Commented Nov 28, 2018 at 19:18
1

@OldPadawan They got a nice interpretation of it, yes Scarborough Fair is a bit older though.
– Patrick Artner
Commented Nov 28, 2018 at 19:46
1

@OldPadawan Pretty sure that song has been around for much more time than Simon and Garfunkel's version.
– reirab
Commented Nov 28, 2018 at 21:33
@reirab : probably, but *ti i i i me is on my siiiiide..." :D
– OldPadawan
Commented Nov 28, 2018 at 21:36
10

'Tis the seasoning!
– Dennis Williamson
Commented Nov 28, 2018 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
Commented Nov 29, 2018 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 Слава Україні
Commented Nov 29, 2018 at 11:50
#2 (really long url!) it's easy enough to find out the name of this plant/herb.
– Mari-Lou A Слава Україні
Commented Nov 29, 2018 at 11:50

| Show 1 more comment

hbaderts · Accepted Answer · 2018-11-28 07:29:17Z

156

Behold: stackoverflow's famous feature countdown clock!

answered Nov 28, 2018 at 7:29

hbaderts

1,2571 gold badge7 silver badges7 bronze badges

3

I like how you think.
– Evan Carroll
Commented Nov 28, 2018 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
Commented Dec 3, 2018 at 18:18

Add a comment |

dim · Accepted Answer · 2018-12-13 14:52:45Z

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:

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).

edited Dec 13, 2018 at 14:52

answered Nov 29, 2018 at 10:19

dim

3,19614 silver badges21 bronze badges

Very nice, but is this your own doing? If not I'm afraid just taking someone else work isn't really fair.
– Shadow Wizard
Commented Nov 29, 2018 at 10:34
11

@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
Commented Nov 29, 2018 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 Wizard
Commented Nov 29, 2018 at 10:42

Add a comment |

Jon Sampson · Accepted Answer · 2018-12-27 14:09:38Z

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)▼

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)▼

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

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

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)▼

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

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

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

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)▼

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)▼

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)▼

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

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

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)▼

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

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

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)▼

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!? Documentation^Beta has gone and Jobs -> Developer Jobs. (capture 2017-09-30)▼

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

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)▼

(and more as I have time)

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, Commented Nov 27, 2018 at 19:19
Ah dangit I was thinking of putting one of these together today. +1 to you. — SOLO, Commented Nov 28, 2018 at 15:09
@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, Commented Nov 28, 2018 at 18:14
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, Commented Dec 6, 2018 at 23:03
@EvanCarroll ... and the Winter Bash system. Don't forget the Winter Bash system, please. — dim, Commented Dec 13, 2018 at 14:51

Bernhard Barker · Accepted Answer · 2018-11-28 00:31:22Z

79

It's closing time.

edited Nov 28, 2018 at 0:31

answered Nov 27, 2018 at 23:16

Bernhard Barker

13.7k1 gold badge34 silver badges71 bronze badges

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
Commented Nov 30, 2018 at 8:03

Add a comment |

ArtOfCode · Accepted Answer · 2018-11-27 18:10:18Z

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!

answered Nov 27, 2018 at 18:10

ArtOfCode

36.3k12 gold badges72 silver badges114 bronze badges

@Mari-LouA Is that allowed under CC-by-SA? ;-)
– Rand al'Thor
Commented Nov 27, 2018 at 19:32
1

Is that a squiddle?
– Erin B
Commented Nov 27, 2018 at 19:38
Certainly would be, @Randal'Thor
– ArtOfCode
Commented Nov 27, 2018 at 20:04
@ErinB It's a narwhal and an octopus :)
– ArtOfCode
Commented Nov 27, 2018 at 20:04
4

💚💙💖 Squidge & Spike.
– Catija
Commented Nov 28, 2018 at 0:15
5

Blub blub, blub blub blub blub? Blub blub. Blub blub, blub!
– tripleee
Commented Nov 28, 2018 at 6:09

Add a comment |

score 55 · Accepted Answer · 2018-11-27 17:29:09Z

What about an ASCII-art Big Ben?

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)

@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, Commented Nov 27, 2018 at 17:16
This is pretty, but what does it have to do with Stack Overflow/Exchange? — SOLO, Commented Nov 27, 2018 at 17:19
@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, Commented Nov 27, 2018 at 17:21
@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, Commented Nov 27, 2018 at 17:49
@SOLO: Only time will tell, but it used to be a time-honoured tradition here: <kbd> elements are way too intrusive — This_is_NOT_a_forum, Commented Nov 27, 2018 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, Commented Nov 27, 2018 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., Commented Nov 27, 2018 at 22:20
@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, Commented Nov 28, 2018 at 3:46
@TomWright Gaah I don't like URL shorteners. My school blocks them. — user392547, Commented Nov 28, 2018 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, Commented Nov 28, 2018 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, Commented Nov 28, 2018 at 10:41

gsamaras · Accepted Answer · 2018-11-30 09:33:53Z

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:

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.

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!

edited Nov 30, 2018 at 9:33

answered Nov 28, 2018 at 9:04

gsamaras

2,53412 silver badges19 bronze badges

1

Very interesting :)
– Nikolas Charalambidis
Commented Nov 28, 2018 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 Charalambidis
Commented Nov 28, 2018 at 12:43
1

@gsamaras really nice !
– Christos
Commented Nov 28, 2018 at 14:28
1

@Christos chrono-ception!!
– gsamaras
Commented Nov 28, 2018 at 14:30
1

Nice one @gsamaras
– pavlos
Commented Nov 28, 2018 at 14:58
2

Gogo (!golang) chrono-ception; God of time dives into the Matrix!
– Christos Lytras
Commented Nov 28, 2018 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
Commented Nov 28, 2018 at 20:11
1

Did somebody say pre-Socratic?
– anaximander
Commented Nov 29, 2018 at 9:40
1

@gsamaras It is indeed.
– anaximander
Commented Nov 29, 2018 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
Commented Nov 29, 2018 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
Commented Nov 29, 2018 at 10:05
1

That's cool, eventually, it didn't took much chronos to show Chronos :)
– user425670
Commented Nov 29, 2018 at 13:56
1

Well thought. Good job
– Abel Melquiades Callejo
Commented Nov 30, 2018 at 23:28
1

That is one heck of an interesting thought process @gsamaras... really interesting...
– Harshith Rai
Commented Dec 6, 2018 at 10:29
1

Keep it up @gsamaras!
– Menelaos Kotsollaris
Commented Dec 17, 2018 at 1:51

| Show 14 more comments

Tom Wright · Accepted Answer · 2018-11-27 21:57:59Z

51

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

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!}

edited Nov 27, 2018 at 21:57

answered Nov 27, 2018 at 21:44

Tom Wright

1,63811 silver badges16 bronze badges

4

----[---->+<]>++.[------->+<]>.[->+++<]>.[--->+<]>----.----.--.--------.--[--->+<]>.
– gmauch
Commented Nov 28, 2018 at 13:19
[-]>[-]<>++++++++[<++++++++>-]<++++++++.>+++++[<+++++>-]<.>++++[<++++>-]<-..>+++[<+++>-]<.>+++++++++[<--------->-]<--------.>++++[<++++>-]<+.-.>++++++++[<++++++++>-]<++++.>+++[<--->-]<---.>++++++++[<-------->-]<--------.>++++++++[<++++++++>-]<++.>+++[<+++>-]<--.>+++[<+++>-]<.++.>+++[<--->-]<---.----.---.>+++++[<+++++>-]<-.>+++++++++[<--------->-]<--------.>+++++++[<+++++++>-]<++.>++++++[<++++++>-]<---.>++++[<---->-]<---.++.>+++[<+++>-]<-.++++.>+++[<+++>-]<--.>++++[<---->-]<-.>++++[<++++>-]<---.>+++[<--->-]<---.>++[<++>-]<++.+++.>+++[<+++>-]<-.>+++++++++[<--------->-]<-----
– Patrick Roberts
Commented Nov 28, 2018 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
Commented Nov 28, 2018 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
Commented Nov 29, 2018 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
Commented Nov 29, 2018 at 22:51
@PatrickRoberts Never mind; I thought I saw a row of ]s but it was actually }s...
– wizzwizz4
Commented Nov 30, 2018 at 7:07

Add a comment |

Em C · Accepted Answer · 2018-11-29 03:35:45Z

48

Clock Lobster!

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

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

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

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

edited Nov 29, 2018 at 3:35

answered Nov 28, 2018 at 2:21

Em C

2,86114 silver badges20 bronze badges

1

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

Add a comment |

Rand al'Thor · Accepted Answer · 2018-12-01 10:55:02Z

48

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

time on Stack Exchange

Stack Overflow: 21111 questions
Physics: 1334 questions
English Language & Usage: 453 questions
Server Fault: 442 questions
Ask Ubuntu: 438 questions
Super User: 434 questions
Unix & Linux: 331 questions
Mi Yodeya: 284 questions
English Language Learners: 280 questions
Geographic Information Systems: 240 questions
Philosophy: 195 questions
Worldbuilding: 169 questions
User Experience: 154 questions
Arduino: 141 questions
Electrical Engineering: 133 questions
Role-Playing Games: 113 questions
Japanese Language: 93 questions
Hinduism: 81 questions
Ask Different: 80 questions
Science Fiction & Fantasy: 75 questions
Database Administrators and Puzzling: 63 questions each
Meta: 54 questions
Stack Overflow en Espanol and Photography: 35 questions each
Islam and Magento: 32 questions each
Bitcoin: 30 questions
Psychology & Neuroscience: 27 questions
Buddhism: 23 questions
elementary OS: 13 questions
Astronomy: 12 questions
EOS.IO: 7 questions

Time's up! Did I miss anyone?

edited Dec 1, 2018 at 10:55

answered Nov 27, 2018 at 17:10

Rand al'Thor

33.4k12 gold badges62 silver badges130 bronze badges

2

I'm surprised there's not more entries in Astronomy
– DCOPTimDowd
Commented Nov 27, 2018 at 20:03
3

@DCOPTimDowd you will see that the number of questions grows with time
– Ferrybig
Commented Nov 27, 2018 at 20:28
2

57 questions in Space Exploration (more than Meta!): space.stackexchange.com/questions/tagged/time
– DrSheldon
Commented Nov 27, 2018 at 22:12
33

The fact that Seasoned Advice doesn't have a thyme is highly disappointing.
– User1000547
Commented Nov 27, 2018 at 22:21
3

Music: Practice and Theory has some time signatures, and some ragtime.
– user45266
Commented Nov 28, 2018 at 1:07
1

On Computer Science, we don't just talk about time, we analyse it.
– Raphael
Commented Nov 28, 2018 at 7:27
1

would be useful to show percentage of questions from each site!
– philshem
Commented Nov 28, 2018 at 9:39
bricks.stackexchange.com/search?q=time
– chicks
Commented Nov 28, 2018 at 19:32
@chicks bricks.stackexchange.com/questions/tagged/time
– Rand al'Thor
Commented Nov 28, 2018 at 19:34
1155 more Qs ... at drupal.stackexchange.com/questions/tagged/datetime
– Pierre.Vriens
Commented Nov 28, 2018 at 21:59
133 on electronics.stackexchange.com/questions/tagged/time
– dim
Commented Nov 30, 2018 at 21:30
@dim Oops, missed that. Added.
– Rand al'Thor
Commented Dec 1, 2018 at 10:55
I'm surprised that the Music StackExchange doesn't have any time tags at all...
– scrowler
Commented Dec 3, 2018 at 11:58

Add a comment |

Glorfindel · Accepted Answer · 2018-11-27 17:37:09Z

_{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 16^th 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:

_{(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.)}

Flagged as spam: unsolicited advertising for Smoke Detector. — Rand al'Thor, Commented Nov 27, 2018 at 17:35
So if you when the watch from this contest, I get the Apple watch then, right? — K.Dᴀᴠɪs, Commented Nov 29, 2018 at 17:35

Jonathan · Accepted Answer · 2018-11-29 17:57:28Z

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, Commented Nov 29, 2018 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, Commented Nov 29, 2018 at 13:08
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, Commented Nov 29, 2018 at 13:13

Caleb Kleveter · Accepted Answer · 2018-12-13 14:16:31Z

37

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

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}

edited Dec 13, 2018 at 14:16

answered Nov 27, 2018 at 19:21

Caleb Kleveter

1,1657 silver badges14 bronze badges

1

Haha, love the Deciphering '6-8 weeks' and the O RLY
– OverMind
Commented Nov 28, 2018 at 16:26
12

Might be nice to credit the source of these (dev.to/rly)
– Travis J
Commented Nov 29, 2018 at 23:08

Add a comment |

Tinkeringbell · Accepted Answer · 2018-11-29 09:44:24Z

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!

@Chair apparently, ASCII Big Ben is cooler than dinosaurs ;-) — Tinkeringbell, Commented Nov 28, 2018 at 13:20

Zach Saucier · Accepted Answer · 2018-11-27 20:14:12Z

32

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.

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

answered Nov 27, 2018 at 20:14

Zach Saucier

2,10613 silver badges22 bronze badges

9

That's dedication. +1, even though I doubt the proposal will work.
– Rand al'Thor
Commented Nov 27, 2018 at 21:08
8

Well that didn't last long.
– User1000547
Commented Nov 27, 2018 at 22:23
3

It only works if your timeline is travelling backwards. :-p
– tudor -Reinstate Monica-
Commented Nov 29, 2018 at 0:59
4

That proposal suffered an untimely end.
– Nisarg Shah
Commented Nov 30, 2018 at 12:13

Add a comment |

SztupY · Accepted Answer · 2019-03-01 16:24:33Z

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:

Stack Overflow Wear OS Watch Face

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

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

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

Links:

Source code and Download
Google Play listing
Demo video of the watch in action (shows version 5.0)

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

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

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

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

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, Commented Dec 3, 2018 at 5:30
@EmC true, forgot they renamed it a year ago or so :D. Definitely planning adding some complications to the mix — SztupY, Commented Dec 3, 2018 at 9:29
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 Слава Україні, Commented Dec 3, 2018 at 9:57
The prize for this contest should be changed to a smartwatch with this set as the default face! — Tot Zam, Commented Dec 3, 2018 at 15:22
Looks awesome! I like the bonus feature that I can pretend to be Jon Skeet when I look at my watch now ;) — Em C, Commented Dec 4, 2018 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, Commented Dec 4, 2018 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, Commented Dec 4, 2018 at 17:17
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, Commented Dec 5, 2018 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, Commented Dec 5, 2018 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, Commented Dec 5, 2018 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, Commented Dec 5, 2018 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, Commented Dec 5, 2018 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, Commented Dec 5, 2018 at 23:55
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, Commented Dec 7, 2018 at 3:30

Travis J · Accepted Answer · 2018-11-29 06:58:13Z

30

Time Overflow^{^_TM}

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 Overflow^{^_TM} responsibly. Changing things can be very problematic.}

A little explanation... This time machine was made to
resemble the Stack Overflow logo ( ). 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 Overflow^{^_TM}!

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.

edited Nov 29, 2018 at 6:58

answered Nov 27, 2018 at 20:56

Travis J

33.7k5 gold badges75 silver badges141 bronze badges

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
Commented Nov 27, 2018 at 22:41
@AndrewLeach - After taking some time to consider, perhaps it is best to simply avoid changing things.
– Travis J
Commented Nov 28, 2018 at 23:22
1

meta.stackexchange.com/a/319049/400534 Well we had different stuff for same names 😭😭
– Vee Hua Zhi
Commented Dec 1, 2018 at 3:07
I like how the underlying pipes are bent and distorted outside the Time field.
– Criggie
Commented Mar 3, 2019 at 23:05

Add a comment |

Robert Longson · Accepted Answer · 2018-11-27 17:27:07Z

29

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.

answered Nov 27, 2018 at 17:27

Robert Longson

35.6k13 gold badges82 silver badges163 bronze badges

6

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
Commented Nov 28, 2018 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
Commented Nov 28, 2018 at 13:29

Add a comment |

Div · Accepted Answer · 2018-12-01 05:52:54Z

Well... yes, it is about time!

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

Rand al'Thor · Accepted Answer · 2018-11-27 21:10:21Z

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!!!)

Needs a link to the instrumental/Karaoke version otherwise how else will the millennials know just how good this is? — Mari-Lou A Слава Україні, Commented Nov 27, 2018 at 20:10

Tot Zam · Accepted Answer · 2018-11-30 17:11:37Z

28

+100

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

edited Nov 30, 2018 at 17:11

answered Nov 27, 2018 at 21:42

Tot Zam

1,4358 silver badges19 bronze badges

7

-1 for not mentioning "Browsing Stack Overflow"
– Machavity
Commented Nov 28, 2018 at 13:41
6

-1 for not including time for compiling.
– Dennis Williamson
Commented Nov 28, 2018 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
Commented Nov 29, 2018 at 18:16

Add a comment |

matt · Accepted Answer · 2018-12-03 15:57:26Z

27

LEGO‽ Time‽ LEGO time lapse‽

Close up of the finished product!

edited Dec 3, 2018 at 15:57

answered Nov 29, 2018 at 2:07

matt

8576 silver badges10 bronze badges

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
Commented Nov 29, 2018 at 17:09
1

Great, (and timely ;) ) suggestion! Updated
– matt
Commented Nov 29, 2018 at 18:10

Add a comment |

iBug says Reinstate Monica · Accepted Answer · 2018-11-29 12:40:06Z

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!

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
Commented Nov 28, 2018 at 13:04 — beeshyams, Commented Nov 28, 2018 at 13:04

Ashraf · Accepted Answer · 2018-11-30 14:53:12Z

24

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 :

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

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

answered Nov 30, 2018 at 14:53

Ashraf

4633 silver badges6 bronze badges

3

Beautiful art!.
– keenthinker
Commented Dec 1, 2018 at 8:40
Awesome transition effects.
– WinEunuuchs2Unix
Commented Dec 1, 2018 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
Commented Dec 5, 2018 at 6:51
@hbaderts Thanks . Noted , a small modification could be applied for this . Something related to animation-fill-mode: forwards CSS attribute .
– Ashraf
Commented Dec 5, 2018 at 7:04

Add a comment |

SPArcheon - on strike · Accepted Answer · 2021-05-17 16:28:36Z

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() {
    var bypass= false;
    if ($('#bypassDateCheckbox').is(':checked')) {
        bypass= true;
    }

    if (today.getMonth() === 11 || bypass ){
      var clickedId = $(this).attr('id'); 
      if (today.getDate() >= Number(clickedId) || bypass){
        $(".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>
  <span>Bypass the date checks: </span>
  <input id="bypassDateCheckbox" type="checkbox" style="width:20px;" checked >
</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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/cuWpp.png'); background-size: cover;">
   <div class="flex-row" style="height: 200px">
    <img src="https://i.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.

@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? — SPArcheon - on strike, Commented Dec 3, 2018 at 13:52

jonatan · Accepted Answer · 2018-11-27 21:09:12Z

20

The Pythonic answer

import time

answered Nov 27, 2018 at 21:09

jonatan

3651 silver badge6 bronze badges

40

import time as swag?
– muru
Commented Nov 28, 2018 at 8:11
4

Relevant.
– Jacktose
Commented Nov 29, 2018 at 20:14

Add a comment |

ArtOfCode · Accepted Answer · 2018-11-27 23:03:16Z

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?

Answered in 22 minutes, not that I was timing.
– Henders
Commented Nov 27, 2018 at 16:47 — Henders, Commented Nov 27, 2018 at 16:47
I only now just noticed you have cthulu in your story too.
– Hatted Rooster
Commented Nov 27, 2018 at 21:00 — Hatted Rooster, Commented Nov 27, 2018 at 21:00

fredley · Accepted Answer · 2018-11-28 18:09:28Z

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

I love it....Brilliant!
– Chris Catignani
Commented Nov 30, 2018 at 3:07 — Chris Catignani, Commented Nov 30, 2018 at 3:07

Stack Exchange Network

Time for some more swag! [closed]

The Rules

127 Answers 127

A Visual Retrospective

A Miracle Occurred

Clock Lobster!

time on Stack Exchange

1. Hot but boring.

2. Marine Life

3. Jurassic Park!

4. The stone age

Stack Overflow Wear OS Watch Face

v6.0 / v7.0

v5.0

v4.0

v3.0

v2.0

v1.0

Time Overflow^{^_TM}

Announcing my FPGA Stopwatch that's built for timing!

Features:

Optional accessories:

The stage

Of dread gods and string based date handling

The corruption of cthulhu or technical debt

Not the answer you're looking for? Browse other questions tagged
discussion
fun
time
swag
10th-anniversary
.

Linked

Hot Network Questions

Time for some more swag! [closed]

The Rules

127 Answers 127

A Visual Retrospective

A Miracle Occurred

Clock Lobster!

time on Stack Exchange

1. Hot but boring.

2. Marine Life

3. Jurassic Park!

4. The stone age

Stack Overflow Wear OS Watch Face

v6.0 / v7.0

v5.0

v4.0

v3.0

v2.0

v1.0

Time OverflowTM

Announcing my FPGA Stopwatch that's built for timing!

Features:

Optional accessories:

The stage

Of dread gods and string based date handling

The corruption of cthulhu or technical debt

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

Linked

Related

Hot Network Questions

Time Overflow^{^_TM}

Not the answer you're looking for? Browse other questions tagged
discussion
fun
time
swag
10th-anniversary
.