/
mascot-stories.html
307 lines (298 loc) · 23.4 KB
/
mascot-stories.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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE HTML>
<html>
<head>
<title>The reelyActive mascot stories | diyActive</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The wonderful story of each of our software mascots with links to code repositories and examples.">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="js/diyactive.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-49659454-2', 'auto');
ga('send', 'pageview');
</script>
</head>
<body ng-app="diyActive">
<div ng-controller="InteractionCtrl">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.reelyactive.com">
<strong>reely</strong>Active
</a>
</div>
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'"
ng-click="navCollapsed = true">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/"> diyActive </a></li>
<li class="dropdown" uib-dropdown on-toggle="toggled(open)">
<a href class="dropdown-toggle" uib-dropdown-toggle role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Quick links <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu role="menu">
<li role="menuitem">
<a href="https://github.com/reelyactive/" target="_blank">
reelyActive on GitHub
</a>
</li>
<li role="menuitem">
<a href="https://www.npmjs.com/~reelyactive" target="_blank">
reelyActive on npmjs
</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a href="https://www.reelyactive.com" target="_blank">
reelyActive website
</a>
</li>
<li role="menuitem">
<a href="https://getpareto.com" target="_blank">
Pareto by reelyActive
</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a href="https://shop.reelyactive.com" target="_blank">
Our online store
</a>
</li>
<li role="menuitem">
<a href="https://reelyactive.com/blog/" target="_blank">
Our blog
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
<h1> The reelyActive Software Mascots<br>
<small> And their wonderful stories </small> </h1>
<p class="text-justify"> There's a story behind our software mascots. And there's a story behind our software mascots having stories. But this page isn't about the story behind the mascots and their stories, it's about the mascots and their stories themselves. </p>
<p> </p>
</div>
</div>
<!----- barnowl ----------------------------------------------------->
<div class="row" id="barnowl">
<div class="col-xs-12 col-sm-4 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-3">
<img src="https://reelyactive.github.io/barnowl/images/barnowl-bubble.png" class="img-responsive">
<p class="text-center"> <i> Artist: <a href="http://www.chrisolimpo.com/" target="_blank">Chris Olimpo</a> </i> </p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 col-lg-3 text-justify">
<h2> barnowl </h2>
<hr>
<p> The Barn Owl has the best hearing of any animal tested. Since this middleware is effectively listening (via hardware 'ears') for all the wireless devices in a Smart Space, barnowl would seem a more than fitting name. Moreover, <a href="https://en.wikipedia.org/wiki/Barn_owl" target="_blank">Wikipedia introduces the Barn Owl</a> as "the most widely distributed species of owl, and one of the most widespread of all birds". An ambitiously inspiring fact considering our vision for a global crowdsourced infrastructure of Wireless Sensor Networks in the Internet of Things (IoT). </p>
<p> Don't think we can top that? Well check out this quote: "the barn owl is the most economically beneficial species to humans". Yes, <a href="http://www.hungryowl.org/education/natural_history.html" target="_blank">apparently</a> the U.S. Fish and Wildlife Service is prepared to argue so. <i>Too ambitious?</i> Well, consider this quote from <a href="https://en.wikipedia.org/wiki/Jeremy_Rifkin" target="_blank">Jeremy Rifkin</a>: "What makes the IoT a disruptive technology in the way we organize economic life is that it helps humanity reintegrate itself into the complex choreography of the biosphere, and by doing so, dramatically increases productivity without compromising the ecological relationships that govern the planet." </p>
<p> Can a few thousand lines of server-side Javascript known as barnowl really live up to that? Owl we know is it can tyto do its nest! </p>
<hr>
<p class="text-center">
<a href="barnowl-baby-steps.html"
class="btn btn-success"> Tutorial </a>
<a href="https://github.com/reelyactive/barnowl"
target="_blank" class="btn btn-default"> GitHub </a>
<a href="https://www.npmjs.com/package/barnowl"
target="_blank" class="btn btn-default"> npmjs </a>
<a href="https://www.instagram.com/reelyactive/"
target="_blank" class="btn btn-info"> Instagram </a>
</p>
</div>
</div>
<p> </p>
<!----- barnacles --------------------------------------------------->
<div class="row" id="barnacles">
<div class="col-xs-12 col-sm-4 col-md-3 col-md-push-7 col-lg-3 col-lg-push-6">
<img src="https://reelyactive.github.io/barnacles/images/barnacles-bubble.png" class="img-responsive">
<p class="text-center"> <i> Artist: <a href="http://fabrunet.com/" target="_blank">Félix-Antoine Brunet</a> </i> </p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 col-md-offset-2 col-md-pull-3 col-lg-3 col-lg-offset-3 col-lg-pull-3 text-justify">
<h2> barnacles </h2>
<hr>
<p> As <a href="http://en.wikipedia.org/wiki/Barnacle#Sexual_reproduction" target="_blank">Wikipedia so eloquently states</a>, "To facilitate genetic transfer between isolated individuals, barnacles have extraordinarily long penises." And given the current state of isolation of nodes in today's IoT, this package (pun intended) needs "the largest penis to body size ratio of the animal kingdom". </p>
<p> Also, we hope the name provides occasions to overhear our Québecois colleagues say things like "Tu veux tu configurer ta barnacle!?!" </p>
<hr>
<p class="text-center">
<a href="integrate-your-service.html"
class="btn btn-success"> Tutorial </a>
<a href="https://github.com/reelyactive/barnacles"
target="_blank" class="btn btn-default"> GitHub </a>
<a href="https://www.npmjs.com/package/barnacles"
target="_blank" class="btn btn-default"> npmjs </a>
</p>
</div>
</div>
<p> </p>
<!----- barterer ---------------------------------------------------->
<div class="row" id="barterer">
<div class="col-xs-12 col-sm-4 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-3">
<img src="https://reelyactive.github.io/barterer/images/barterer-bubble.png" class="img-responsive">
<p class="text-center"> <i> Artist: <a href="http://fabrunet.com/" target="_blank">Félix-Antoine Brunet</a> </i> </p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 col-lg-3 text-justify">
<h2> barterer </h2>
<hr>
<p> Barter is a system of exchange by which goods or services are directly exchanged for other goods or services without using a medium of exchange, such as money. Seems fitting for an API in an open Internet of Things. </p>
<p> Why is barterer represented by a starfish? Well, in our software architecture, barterer consumes data from barnacles, and in nature, starfish consume barnacles. One such example is the species <a href="http://en.wikipedia.org/wiki/Pisaster_ochraceus" target="_blank">Pisaster ochraceus</a>. And, as Wikipedia states, "while most individuals are purple, they can be orange, orange-ochre, yellow, reddish, or brown". Orange was the only colour in the reelyActive palette which fit, so there you have it, an orange starfish. </p>
<p> If we stretch the story even further, the initials of Pisaster Ochraceus (PO) are the same as the architect of our original API (P-O). That API was named bartender, but alas, that name had already been claimed on npmjs, and so we exchanged it for barterer (pun intended, as usual). </p>
<p> Why is the starfish holding scales with a one and a zero? Because he's bartering digital information of course! </p>
<hr>
<p class="text-center">
<a href="http://www.hyperlocalcontext.com/whatat/receiver/001bc509408100d3" target="_blank"
class="btn btn-primary"> Live example </a>
<a href="https://github.com/reelyactive/barterer"
target="_blank" class="btn btn-default"> GitHub </a>
<a href="https://www.npmjs.com/package/barterer"
target="_blank" class="btn btn-default"> npmjs </a>
</p>
</div>
</div>
<p> </p>
<!----- chickadee --------------------------------------------------->
<div class="row" id="chickadee">
<div class="col-xs-12 col-sm-4 col-md-3 col-md-push-7 col-lg-3 col-lg-push-6">
<img src="https://reelyactive.github.io/chickadee/images/chickadee-bubble.png" class="img-responsive">
<p class="text-center"> <i> Artist: <a href="http://fabrunet.com/" target="_blank">Félix-Antoine Brunet</a> </i> </p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 col-md-offset-2 col-md-pull-3 col-lg-3 col-lg-offset-3 col-lg-pull-3 text-justify">
<h2> chickadee </h2>
<hr>
<p> The <a href="http://www.allaboutbirds.org/guide/black-capped_chickadee/lifehistory" target="_blank">Cornell Lab of Ornithology explains</a>: "The Black-Capped Chickadee hides seeds and other food items to eat later. Each item is placed in a different spot and the chickadee can remember thousands of hiding places." Not only does it have an outstanding associative memory, it is also "almost universally considered cute thanks to its oversized round head, tiny body, and curiosity about everything, including humans." </p>
<p> If you were entrusting a bird to associate your wireless device with your online stories you'd want it to be cute and friendly enough to eat out of your hand, right? We could have named this package <a href="http://www.allaboutbirds.org/guide/clarks_nutcracker/lifehistory" target="_blank">Clark's Nutcracker</a>, the bird with arguably the best associative memory, but the whole nut-cracking thing doesn't inspire the same level of friendliness now does it? </p>
<p> One more fun fact that we feel compelled to pass along: "Every autumn Black-capped Chickadees allow brain neurons containing old information to die, replacing them with new neurons so they can adapt to changes in their social flocks and environment even with their tiny brains." Wow, that's database efficiency that we can aspire to! </p>
<hr>
<p class="text-center">
<a href="http://www.hyperlocalcontext.com/contextat/receiver/001bc509408100d3" target="_blank"
class="btn btn-primary"> Live example </a>
<a href="https://github.com/reelyactive/chickadee"
target="_blank" class="btn btn-default"> GitHub </a>
<a href="https://www.npmjs.com/package/chickadee"
target="_blank" class="btn btn-default"> npmjs </a>
</p>
</div>
</div>
<p> </p>
<!----- json-silo --------------------------------------------------->
<div class="row" id="json-silo">
<div class="col-xs-12 col-sm-4 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-3">
<img src="https://reelyactive.github.io/json-silo/images/json-silo-bubble.png" class="img-responsive">
<p class="text-center"> <i> Artist: <a href="http://fabrunet.com/" target="_blank">Félix-Antoine Brunet</a> </i> </p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 col-lg-3 text-justify">
<h2> json-silo </h2>
<hr>
<p> The json-silo is exactly that: a data silo for <a href="http://en.wikipedia.org/wiki/JSON" target="_blank">JSON</a>! Simple enough, right? So why does it have a grain silo with a hockey mask for a mascot? </p>
<p> At reelyActive we've always been outspoken about the need for an open Internet of Things as opposed to a bunch of siloed applications. In 2013, on social media we recycled the <a href="http://en.wikipedia.org/wiki/More_cowbell" target="_blank">"More cowbell" meme</a> with an image of Will Ferrell banging on a grain silo with the caption <a href="http://reelyactive.github.io/images/moreSilo.jpg" target="_blank">"The Internet of Things does not need More Silo"</a>. When it came time to create a mascot for the json-silo, we decided to start with that grain silo. </p>
<p> Now, how do you visually represent JSON in association with a grain silo? Sure, we could have slapped the official JSON logo on that silo, but where's the fun in that? Instead, for those of us who grew up in the eighties, hearing "JSON" out of context (pun intended) evokes the image of <a href="http://en.wikipedia.org/wiki/Jason_Voorhees" target="_blank">Jason Voorhees</a> from the Friday the 13th series of films, specifically the iconic hockey goaltender mask he wore. Not only does that "Jason" mask make for a silly visual pun, it also gives a nod to our hometown heritage, where <a href="http://en.wikipedia.org/wiki/Jacques_Plante" target="_blank">Jacques Plante</a> of the Montréal Canadiens was the first goaltender to wear such a mask full-time, which would later become standard practice. We'd be pleased to see the use of personal data lockers become standard practice too. </p>
<hr>
<p class="text-center">
<a href="https://myjson.info" target="_blank"
class="btn btn-primary"> Live example </a>
<a href="https://github.com/reelyactive/json-silo"
target="_blank" class="btn btn-default"> GitHub </a>
<a href="https://www.npmjs.com/package/json-silo"
target="_blank" class="btn btn-default"> npmjs </a>
</p>
</div>
</div>
<p> </p>
<!----- beaver ------------------------------------------------------>
<div class="row" id="beaver">
<div class="col-xs-12 col-sm-4 col-md-3 col-md-push-7 col-lg-3 col-lg-push-6">
<img src="https://reelyactive.github.io/beaver/images/beaver-bubble.png" class="img-responsive">
<p class="text-center"> <i> Artist: <a href="http://fabrunet.com/" target="_blank">Félix-Antoine Brunet</a> </i> </p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 col-md-offset-2 col-md-pull-3 col-lg-3 col-lg-offset-3 col-lg-pull-3 text-justify">
<h2> beaver </h2>
<hr>
<p> After humans, beavers are the animals with the greatest impact on their ecosystem. Industrious and ingenious hydrological engineers, beavers build dams, filling the ponds which provide them food and protection. In turn, these basins of water provide food and habitat for diverse fauna and flora, contributing to a thriving ecosystem. </p>
<p> Introduced to the web browser habitat in 2016, beaver.js has adapted to fill ponds in your computer's memory, collecting the steady stream of real-time events from an upstream source. In turn, this pool of data provides a staple food for other client-side Javascript species such as the occasional migratory cormorant.js. </p>
<p> Oh yeah, and the beaver is the <a href="https://en.wikipedia.org/wiki/National_symbols_of_Canada" target="_blank">national animal of Canada</a> eh? And the oversized rodent is currently celebrating its 40th anniversary as the <a href="https://en.wikipedia.org/wiki/Amik" target="_blank">mascot of the 1976 Olympics</a> of our native Montréal. We wood be dammed not to chews it as a mascot! </p>
<p> Don't like our punny ending? Why not <i>lodge</i> a complaint? </p>
<hr>
<p class="text-center">
<a href="build-web-apps-with-beaver.html"
class="btn btn-success"> Tutorial </a>
<a href="https://reelyactive.github.io/beaver/" target="_blank"
class="btn btn-primary"> Live example </a>
<a href="https://github.com/reelyactive/beaver"
target="_blank" class="btn btn-default"> GitHub </a>
</p>
</div>
</div>
<p> </p>
<!----- cormorant --------------------------------------------------->
<div class="row" id="cormorant">
<div class="col-xs-12 col-sm-4 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-3">
<img src="https://reelyactive.github.io/cormorant/images/cormorant-bubble.png" class="img-responsive">
<p class="text-center"> <i> Artist: <a href="http://fabrunet.com/" target="_blank">Félix-Antoine Brunet</a> </i> </p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 col-lg-3 text-justify">
<h2> cormorant </h2>
<hr>
<p> Cormorants are a family of aquatic birds well adapted for diving to catch fish in their long, slender bill which is hooked in an <i>Angular</i> kind of way. In its client-side habitat, cormorant.js will commonly dive into pools created by beaver.js in search of linked data, adeptly swimming from URL to URL, to collect its prey: <a href="http://json-ld.org/" target="_blank">JSON-LD</a>. </p>
<p> Cormorants are also known as shags. If you've read our other mascot stories, at this point you may be surprised that we didn't play on the shag & beaver theme. We could have, but it seems rather tame once you discover the mechanics of how that goes down for our other mascot, the cuttlefish! </p>
<hr>
<p class="text-center">
<a href="https://reelyactive.github.io/cormorant/" target="_blank"
class="btn btn-primary"> Live example </a>
<a href="https://github.com/reelyactive/cormorant"
target="_blank" class="btn btn-default"> GitHub </a>
</p>
</div>
</div>
<p> </p>
<!----- cuttlefish -------------------------------------------------->
<div class="row" id="cuttlefish">
<div class="col-xs-12 col-sm-4 col-md-3 col-md-push-7 col-lg-3 col-lg-push-6">
<img src="https://reelyactive.github.io/cuttlefish/images/cuttlefish-bubble.png" class="img-responsive">
<p class="text-center"> <i> Artist: <a href="http://fabrunet.com/" target="_blank">Félix-Antoine Brunet</a> </i> </p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 col-md-offset-2 col-md-pull-3 col-lg-3 col-lg-offset-3 col-lg-pull-3 text-justify">
<h2> cuttlefish </h2>
<hr>
<p> The cuttlefish isn't actually a fish, but rather a cephalopod, which is a class of marine animals remarkable for how quickly and diversely they can communicate visually. <a href="https://en.wikipedia.org/wiki/Cuttlefish#Communication" target="_blank">As per Wikipedia</a>: "flamboyant cuttlefish use between 42 and 75 chromatic, seven textural, 14 postural, and seven locomotor elements" to communicate. </p>
<p> Given that cuttlefish.js communicates machine-readable data as human-readable visual information, that unprecedented natural vocabulary sets some serious expectations for UI/UX design! Seriously. Read <a href="http://discovermagazine.com/2006/apr/cephalopod-morphing/" target="_blank">Jaron Lanier's 2006 article in Discover Magazine</a>. </p>
<p> In its client-side habitat, cuttlefish.js will consume and render the JSON-LD fetched by cormorant.js. And while you may suspect that cuttlefish and cormorants have nothing more in common than the fact that the pupil of the former resembles the distinct wing shape of the latter, check out <a href="https://youtu.be/OQq__WdJBMw?t=2m40s" target="_blank">this video</a> we found on the Internets. Yeah, if that skate were a beaver... </p>
<p> Speaking of videos, we'd be remiss not to share with you Ze Frank's <a href="https://youtu.be/GDwOi7HpHtQ" target="_blank">True Facts about the Cuttlefish</a>. May we also suggest an images search for "cute baby cuttlefish". You're welcome. </p>
<hr>
<p class="text-center">
<a href="https://reelyactive.github.io/cuttlefish/" target="_blank"
class="btn btn-primary"> Live example </a>
<a href="https://github.com/reelyactive/cuttlefish"
target="_blank" class="btn btn-default"> GitHub </a>
</p>
</div>
</div>
<p> </p>
</div>
<footer class="footer">
<a href="/"
uib-tooltip="Do-it-yourself with reelyActive"
tooltip-placement="left"> diyActive </a> |
<a href="https://www.reelyactive.com"
uib-tooltip="We believe in an open Internet of Things"
tooltip-placement="right">
© reelyActive 2017-2018
</a>
</footer>
</div>
</body>
</html>