-
Notifications
You must be signed in to change notification settings - Fork 0
/
1100-clock-made-with-jquery.html
155 lines (138 loc) · 14.4 KB
/
1100-clock-made-with-jquery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>$1100 clock made with jQuery</title>
<meta itemprop="name" content="$1100 clock made with jQuery">
<meta property="og:title" content="$1100 clock made with jQuery">
<link rel="icon" href="/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:creator" content="@ddtrejo">
<meta name="twitter:site" content="@ddtrejo">
<link rel="me" href="https://infosec.exchange/@dtrejo">
<link rel="canonical" href="https://dtrejo.com/1100-clock-made-with-jquery">
<meta property="og:url" content="https://dtrejo.com/1100-clock-made-with-jquery">
<meta property="og:image" content="https://dtrejo.com/images/social/1100-clock-made-with-jquery.jpg"/>
<meta name="image" content="https://dtrejo.com/images/social/1100-clock-made-with-jquery.jpg"/>
<meta itemprop="image" content="https://dtrejo.com/images/social/1100-clock-made-with-jquery.jpg"/>
<meta name="twitter:image:src" content="https://dtrejo.com/images/social/1100-clock-made-with-jquery.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="article">
<link rel="stylesheet" href="/css/tachyons.min.css" />
<style>
* { margin-top: 0 }
* + * { margin-top: 1.5em }
li li { margin-top: 1.5em }
html { scroll-behavior: smooth }
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 125%;
background-color: #013250;
color: #dcd9d6; /*rgb(220, 217, 214)*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.25;
font-weight: 600;
}
a {
color: #f57a59;
font-weight: 500;
text-decoration: none;
}
a:focus, a:active, a:hover {
color: #ff6300;
}
.footer {
border-top: 1px solid rgb(25, 73, 110);
background-color: #021928;
}
.amp {
font-family: Baskerville, "Goudy Old Style", "Palatino", "Palatino Linotype", "Book Antiqua", serif;
font-style: italic;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6, li, p, span, blockquote, pre, code {
text-rendering: optimizeLegibility;
}
hr {
border: none;
border-bottom: 1px solid rgba(0, 0, 0, .1);
border-top: 1px solid rgba(220, 217, 214, .1);
}
/* improve prism styles */
pre, pre[class*=language-] {
line-height: 1.4;
padding: 1.25rem 1.5rem;
margin: .85rem 0;
background-color: #282c34;
background-color: #191919;
border-radius: 6px;
overflow: auto;
}
blockquote {
margin-left: 0;
border-left: .5rem solid rgba(0, 0, 0, .5);
padding-left: 1.5em;
}
.customcolor { color: #013250 }
.b--customcolor { border-color: #013250 }
</style>
<meta name="cf-2fa-verify" content="27f0edaf36e9d24">
</head>
<body class="pt2 lh-copy">
<nav class="mw7 ph2 center flex flex-column flex-row-l"> <a class="fw5 link flex self-center self-start-l" href="/"> <img src="/images/dtrejo.jpg" class="w2 h2 br-100 mr3" alt="David Trejo"> dtrejo </a> <div class="flex self-center ml-auto-l mt0-l"> <a class="f5 fw5 link mt0 mr3 ttu" href="#footer">Articles</a> <a class="f5 fw5 link mt0 mr0 ttu" href="/books">Books</a> <!-- <a class="f5 fw5 link mt0 ttu" href="https://engineeroverflow.com" >Hire Engineers</a > --> </div></nav>
<article class="content mw7 ph2 center">
<h1 id="1100-clock-made-with-jquery">$1100 clock made with jQuery</h1>
<div>The QlockTwo, made in Germany, is a beautiful device.</div>
<p />
<div>I set out to steal some of that beauty and made a version of the <a href="https://dtrejo.com/qlock/qlock.html" target="_blank">QlockTwo using jQuery</a>. You can see it live <a href="https://dtrejo.com/qlock/qlock.html" target="_blank">right here</a>.</div>
<p />
<div><div class='p_embed p_image_embed'>
<p><img src="./images/13780424-Qlocktwo.jpeg" alt=""></p>
</div>
</div>
<p />
<div>Building this clock was a ton of fun. It took me a couple of days, and I learned about the relativity of time (ooh sophisticated).</div>
<p />
<div>Here are some fancy psychological things that go on when you use the clock:</div>
<p />
<div>The first half of the hour creeps along — you don't notice the dots as much as the words, so most of the time it's later than what you see in words. The only way to stay accurate is to pay lots of attention to the dots, which requires more thought and means it takes you longer to read the clock.</div>
<p />
<div>The second half of the hour races. The words are always either in synced with or ahead of the real-time. This means it that you'll finish meetings earlier, and be more punctual because you'll give yourself extra time to get places. Just make sure you always schedule your appointments on the hour.</div>
<p />
<div><span style="font-size: large;">Technical Details</span></div>
<p />
<div>I select the words to be highlighted in a really janky way. It is very dependent on the structure of the table (yeah I tried to use divs, but I don't have the skill to keep all the words aligned horizontally and vertically and keep everything square too). Here's roughly how the code works:</div>
<p />
<div>
<ul>
<li style="margin-left: 15px;">Javascript asks for the time </li>
<li style="margin-left: 15px;">Time is transformed into words by a for loop which used to be a GIGANTIC composite switch and if else statement. It was a mess.</li>
<li style="margin-left: 15px;">The text in all the table cells is put together into one long string. There is a one-to-one relationship between the table cells and the letters in the string. This means that if I match the word "OCLOCK" in the string, and the O in OCLOCK is the 50th character in the string, then I know I can just light up the 50th table cell and it will contain the "O." That wasn't the most clear way of saying things. Here's how it goes: I want to highlight OCLOCK, the code finds the position of OCLOCK in the string, then highlights the table cells in that position. </li>
<li style="margin-left: 15px;">Every 400 milliseconds the clock's face is refreshed. It is important to me that the clock change times in a smooth manner, and it is important that the clock light up in a visible way when you load the page. To achieve a smooth fadein, there is a css transition of .12 seconds. This makes things smooth when the clock changes times. The 400 millisecond fadein leaves the page time to load when you first fire it up, so you get to experience the initial glow when the clock lights up. </li>
<li style="margin-left: 15px;">Now you might be thinking, if the CLOCK REFRESHES EVERY 400 MILLISECONDS THEN WHY ISN'T IT FLASHING LIKE CRAAAAAZYYY?? That's how it was initially, and it was ugly as sin (if you consider sin ugly). Here's the solution: compare the previously lighted letters with the new ones that need to be lighted, unlight the ones not present in the new list, and then light up the new ones. This turns out to be a bit complicated and it turns out Venn diagrams made with water colors are a key tool of the modern-day programmer. </li>
<li style="margin-left: 15px;">What other cool stuff does the clock have in it? I stole a glow from <a href="http://midtonedesign.com" target="_blank">midtonedesign.com</a>, which adds the halo behind the clock (cheers Jonotan). I also chose a font from the google font directory that mimics the QlockTwo's font quite well. And of course I threw in some text-shadows to make things glow. Mandatory.</li>
</ul>
</div>
<h3 id="conclusion">Conclusion</h3>
<div><span style="font-size: large;"> </span>jQuery is tons of fun to work with, and the <a href="http://webchat.freenode.net/?channels=jquery" target="_blank">#jquery channel</a> is full of helpful people. I emailed QlockTwo and apparently <a href="https://dtrejo.com/qlock/qlock.html">my version</a> is a "Nice Application with JQuery and CSS!"</div>
<p />
<div>The time distorting aspects of the clock are quite fun, so make sure to put one up in your office so you can wrap up boring meetings more quickly.</div>
<p />
<div>Cheers,</div>
<div>David</div>
<p> </p>
</article>
<div class="mw7 ph2 center"> <img src="/images/dtrejo.jpg" title="David Trejo" class="br-100 fl ml2 mr2" height="80" /> <div class="overflow-hidden mr2"> <h4>David Trejo</h4> <p>Engineer at Chime <span class="amp">&</span> consultant. Past clients include Credit Karma, Aconex, Triplebyte, Neo, the Brown Computer Science Department, Voxer, Cloudera, and the Veteran's Benefits Administration.</p> </div></div>
<div id="footer" class="footer mt5 pt5 pb4"><div class="mw7 ph2 center"> <h3>Hiring Engineers? You'll like these articles</h3> <ol><li><a href="/engineer-interview-script">Growth & full stack engineering interview script</a></li><li><a href="/referrals">How to hustle on your referrals so they actually get hired</a></li><li><a href="/moneyball-book-review-and-measuring-revenue-per-engineer">Moneyball book review and measuring revenue per engineer</a></li><li><a href="/questions-that-senior-systems-engineers-want-answered">Questions that Senior Systems Engineers want answered</a></li><li><a href="/tools-for-hiring-engineers">Tools for hiring engineers that save time and increase conversion</a></li><li><a href="/how-to-reliably-get-your-team-to-write-articles-for-your-engineering-blog">How to reliably get your team to write articles for your engineering blog</a></li><li><a href="/why-share-salary">Why share salary ranges with candidates?</a></li><li><a href="/massive-list-of-engineering-recruiting-channels">Massive list of engineering recruiting channels</a></li><li><a href="/how-to-run-an-intern-program-like-cloudera-s">How to run an intern program like Cloudera's</a></li><li><a href="/how-to-replicate-the-warmth-of-referral-hires">How do you replicate the warmth and friendliness of a referral hire, even with a stranger engineer? By treating hiring like dating.</a></li><li><a href="/how-to-run-an-intern-meetup">How to run an intern meetup</a></li></ol>
<h3>Growth Engineering Articles</h3> <ol><li><a href="/engineer-interview-script">Growth & full stack engineering interview script</a></li><li><a href="/engineering-lead">Engineering lead checklists</a></li><li><a href="/days-as-a-growth-engineer">Everything you should do in the first 30 days of a new growth engineering job</a></li><li><a href="/how-do-you-transition-from-rails-lead-engineer-to-growth-engineer">How do you transition from Rails lead engineer to growth engineer?</a></li><li><a href="/chaos-in-your-product-prototyping">Chaos in your product prototyping</a></li></ol>
<h3>How to...</h3> <ol><li><a href="/tailoring-perfect-shirt-pants-jacket">Tailoring the perfect shirt, pants, and jacket</a></li><li><a href="/home-search">Home Searching Advice</a></li><li><a href="/publishing-vue-codesandbox-to-github-pages">How to publish a Vue CodeSandbox.io to Github Pages on a custom domain</a></li><li><a href="/how-to-get-your-business-to-pull-you-forward">How to get your business to pull you forward</a></li><li><a href="/overcome-cold-email-procrastination">Overcome cold-email procrastination</a></li><li><a href="/how-to-write-consistently-painlessly-and-without-writers-block">How to write consistently, painlessly, and without writer's block</a></li><li><a href="/how-to-email">How to email</a></li><li><a href="/how-to-buy-and-cook-steak">How to Buy and Cook Steak</a></li></ol>
<h3>Health</h3> <ol><li><a href="/why-go-carnivore-aka-zero-carb">Why go carnivore? (aka zero carb)</a></li><li><a href="/cancer">Cancer, fasting, carnivore, and chemotherapy side effects</a></li><li><a href="/lifting">Start weightlifting in just 720 days</a></li></ol>
<h3>Node.js</h3> <ol><li><a href="/my-javascript-tooling-wishlist">My Javascript tooling wishlist</a></li><li><a href="/metrics-and-operational-awareness-at-voxer">Metrics and operational awareness at Voxer</a></li><li><a href="/zero-effort-responsive-email-creation">Zero effort responsive email creation</a></li><li><a href="/node-single-point-of-failure">Node single point of failure</a></li></ol>
<h3>Git</h3> <ol><li><a href="/pull-requests">How Open Source People Do Pull Requests and What We Can Learn from Them</a></li><li><a href="/develop-on-a-cloud-machine">Develop on a cloud machine</a></li><li><a href="/faster-git-workflow">A faster Git workflow with Ampline</a></li><li><a href="/my-github-pull-request-workflow">My Github pull request workflow</a></li></ol>
<h3>Top Projects</h3> <ul> <li> <a href="https://duskk.com">Duskk.com</a> Want to unlock the power of your writing? Discover greatness inside yourself with <a href="https://duskk.com">Duskk, a journaling app</a>. </li> <li> <a href="https://EngineerWorth.com">EngineerWorth.com</a> Is that product feature worth coding? Run a quick ROI calculation and find out. </li> <li> <a href="/qlock/qlock.html">jQuery Qlock2</a> Tell time with this $800 clock, for free. </li> <li> <a href="/colorslice/">ColorSlice</a> Wish it were easier to steal and create color schemes? Colorslice helps front-end developers <span class="amp">&</span> designers with color. </li> <li> <a href="/colorpreview/">ColorPreview</a> Vet color combinations and pick only the ones with enough contrast, that your eye finds pleasing. </li> <li> <a href="/lazytemplating/">Lazy Templating</a> What if you could do HTML templating using a spreadsheet? Now you can. </li> <li> <a href="http://github.com/DTrejo/ampline">Ampline</a> Tired of copy-pasting or tab-completing long file paths? Accelerate yourself on the command-line. </li> </ul> <h4><a href="/archived">Archived</a></h4> <h3>Find me</h3> <ul> <li><a href="https://github.com/DTrejo">Github</a></li> <li><a rel="me" href="https://infosec.exchange/@dtrejo">Mastodon (infosec.exchange)</a></li> <li><a href="https://twitter.com/ddtrejo">Twitter</a></li> <li> <a href="#david åt dtrejo.com" title="david åt dtrejo.com" onclick="event.preventDefault(); this.href = 'mailto:' + (this.innerText = 'david' + '@dtrejo.com')"> Email me ✉️</a> </li> </ul> <div> Copyright © 2009-2024 David Trejo. Opinions mine. </div></div></div>
</body>
</html>