-
Notifications
You must be signed in to change notification settings - Fork 15
/
instructions.html
202 lines (181 loc) · 9.11 KB
/
instructions.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>QuickLeft Hackfest :: April 2011 :: JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="resources/style.css">
<style>
@font-face {
font-family: 'AldotheApacheRegular';
src: url('resources/aldotheapache-webfont.eot');
src: url('resources/aldotheapache-webfont.eot?#iefix') format('embedded-opentype'),
url('resources/aldotheapache-webfont.woff') format('woff'),
url('resources/aldotheapache-webfont.ttf') format('truetype'),
url('resources/aldotheapache-webfont.svg#AldotheApacheRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body{background-color:#efefef;}
a, a:active, a:visited{color:#fff; text-shadow:1px 1px #000;}
#wrapper{width:100%; height:100%; text-align:center;}
#container{width:960px; margin:0 auto; text-align:left;}
header{padding-bottom:20px; border-bottom:3px dotted #444;}
header h1{font-family:'AldotheApacheRegular'; font-size:70px;
line-height:65px; margin: 20px 0; text-shadow: 2px 2px #333;
color:#999;}
header p{font-style:italic;color:#333;}
.javascript{color:#69E11A;}
#main{background:url(resources/paper.png) repeat-y; margin-top:20px;
padding:20px; width:920px; float:left; -moz-box-shadow:2px 2px
10px #666; -webkit-box-shadow:2px 2px 10px #666;}
#main p {width:920px; float:left; clear:both; padding-bottom:20px;
font-size:16px; font-family:'monaco','georgia'; color:#333;}
h2{font-family:'AldotheApacheRegular'; font-size:55px;
padding-bottom:20px; color:#333; text-shadow:2px 2px #69e11a;}
h3{width:878px; background-color:#fff; padding:20px; border:1px
solid #999; font-family:'monaco','georgia'; font-weight:normal;
cursor:pointer; margin-top:20px;}
#main .warning{color:#c00;}
#main .note{float:left; clear:both;}
#main .note_contents{background-color:rgba(100, 100, 100,
0.5); padding:20px; width:880px; float:left;}
#main .note_contents p{padding-bottom:20px; width:880px;}
.umph{font-weight:bold; font-style:italic; color:#333;}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<header>
<h1>QuickLeft Hackfest :: April 2011<br/><span
class="javascript">JavaScript</span></h1>
<p>Help a zombie whale deliver a message while drinking beer and
playing with JavaScript.</p>
</header>
<div id="main">
<p>This month's hackfest is a bit different than any before. The
theme of this month's hackfest is JavaScript. We've structured
this little task to help everyone jump into some code. The task
is simple, so even if you have never written JavaScript, you will
have a chance to try it out and maybe learn some stuff! And for the
JavaScript masters out there, this is your turn to really show off
some craziness.</p>
<p>All project files are included. In this project, you can add
your markup/css in "project.html", css in "resources/project.css"
and write your JavaScript in "thepower.js". jQuery is included,
but if you are feeling really 1337, try this without a framework
and see how much you can optimize your filesize.</p>
<p class="warning">Warning: This task is ridiculously silly. If
you are lame, or don't like zombie whales - don't try it. You
will only hurt yourself! If you still want to participate in some
JavaScript hacking, but aren't interested in playing with whales,
talk to Sam about contributing to open source JavaScript projects,
like jQuery!</p>
<p>Zombie whale lives under the sea, and his job is to deliver
messages. Since there is no internet in the ocean,
everyone relies on zombie whale to deliver their messages.</p>
<p>Zombie whale only knows one language: JavaScript. He needs your
help to write instructions for his delivery.</p>
<h2>Part I</h2>
<p>First, zombie whale must go to hipster octopus to collect his
message. Your JavaScript instructions should show zombie whale
(#zombie_whale) how to swim over to hipster octopus
(#hipster_octopus) and ask him to fill out his message
(#message_form). Don't forget to write hipster octopus's message to
zombie whale's memory!</p>
<div class="note">
<h3>Wait, what?</h3>
<div class="note_contents">
<p>The first step to showing zombie whale how to swim is knowing
how to make him move with JavaScript. There are many JavaScript
libraries available to help you move him around. jQuery is
already built into the project skeleton. Zombie whale is
contained in a div with an ID of 'zombie_whale'. Check out <a
href="http://api.jquery.com/animate/">jQuery Animate</a>. Be
sure to add a <a
href="http://en.wikipedia.org/wiki/Callback_(computer_programming)">callback</a>
so zombie whale knows to do something once he gets there. ( <a
href="http://api.jquery.com/animate#complete">check this
out</a> for help using a callback with jQuery animate() )</p>
<p>#message_form is hidden. Try using some <a href="http://api.jquery.com/css/">css</a>
to change it's visibility.</p>
<p>Once the form is filled out, remember to save the <a href="http://api.jquery.com/val/">values</a>
into memory</p>
</div>
</div>
<div class="note">
<h3>Wanna be pro?</h3>
<div class="note_contents">
<p>Too simple? Why don't you pair your JavaScript handlers with
some <span class="umph">CSS3 animations</span> to ease up on zombie whale's processor.
Here's <a
href="http://webdesignerwall.com/trends/47-amazing-css3-animation-demos">some
inspiration</a>.</p>
<p>Hmmm, what else? Maybe you should take a closer look at
#zombie_whale? What's that there? Is that a <span
class="umph">sprite?</span> Zombie whale just got a whole lot
classier.</p>
<p>Wanna get real fancy? How about <span class="umph">adding
controls</span> and letting us humans drive zombie whale
around? Ooooh yeah!</p>
</div>
</div>
<h2>Part II</h2>
<p>Now that zombie whale has hipster octopus's message, he must
swim and deliver it to the recipient (#big_squid, #star_starfish,
or #drunk_clam).</p>
<div class="note">
<h3>Huh? How do I do that?</h3>
<div class="note_contents">
<p>Hopefully you saved the recipient name in Part I. Now we need
to find the right sea creature to deliver it to. First, it would
be helpful to check out <a
href="http://api.jquery.com/position/">the position</a> of
zombie whale's target.</p>
<p>Once zombie whale finds his recipient, he needs to deliver
the message! Maybe using <a
href="http://api.jquery.com/text#text2">jQuery text()</a> will
help zombie whale convey his message.</p>
</div>
</div>
<div class="note">
<h3>It's only 7 o'clock and this is boring.</h3>
<div class="note_contents">
<p>Ok then, "JavaScript Fancy Pants", why don't you change zombie
whale's life and teach him how to make clones of himself? Create an
Asynchronous Zombie Whale Delivery System. Hypherthreading zombie whales FTW!</p>
<p>Still want more to do? How about making the sea creature
recipients more realistic and teach them how to swim around the
ocean.</p>
<p>Okay, more ideas? Try making the ocean a canvas and animate some
stuff. Or try making a game out of it. Maybe this could be applied to
a real-life challenge. Anything rediculous will do.</p>
<p><span class="umph">Backenders</span>: If you are totally fed up with this front-end
non-sense, pair up with someone else and set up a server behind
the zombie whale delivery system. It would be super cool to allow me
to enter my own message on a different computer and have zombie whale
deliver it. Or, maybe integrate with Twilio and let zombie whale deliver
text messages!</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="resources/jquery-1.5.2.js"></script>
<script type="text/javascript">
(function( window, undefined ){
var QL = {
init: function(){
$( '.note h3' ).bind( 'click', function(){
$( this ).siblings( '.note_contents' ).toggle();
});
}
}
$( document ).ready( QL.init );
})( this );
</script>
</body>
</html>