-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (100 loc) · 19.9 KB
/
index.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
<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="shortcut icon" href="/favicon.ico" /><!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script><![endif]--><link href='http://fonts.googleapis.com/css?family=Raleway|Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="/application.css" /><title>index.md - HippoSociety.com</title></head><body><div id="skiptocontent"><a href="#main">skip to main content</a></div><header role="banner"><h1><a href="/">Hippo Society</a></h1></header><div class="outer"><aside class="sidebar"><nav><ul><li><a href="/category/projects/">Projects</a><ul><li><a href="/code/squick/">Squick</a></li><li><a href="/code/backtalk/">BackTalk</a></li><li><a href="/code/shake-stick/">Shake Stick</a></li><li><a href="/code/cryssake/">cryssake</a></li><li><a href="/code/zap/">ZAP</a></li><li><a href="/code/haiku/">Haiku</a></li></ul></li><li><a href="/category/toys/">Toys</a><ul><li><a href="/socrates-and-aristotle-fighting/">Generative Socratic Text</a></li><li><a href="/sounds-of-jelly/">Sounds of Jelly</a></li><li><a href="/split-merge-steal/">Split Merge Steal</a></li><li><a href="/please-play-again/">Please Play Again</a></li><li><a href="/spincycle/">Spincycle</a></li></ul></li><li><a href="/category/examples/">Code Samples</a><ul><li><a href="/code/es_indexer/">Elasticsearch Indexer</a></li><li><a href="/code/pi-experiments/">Pi Expirements</a></li><li><a href="/code/polling-thing/">GitHub Issue Poller</a></li></ul></li></ul></nav></aside><main id="main" role="main"><article> <header class="post-header"><h1><a href="/code/squick/">Squick</a></h1><nav><span class="related"><a href="https://github.com/yourpalal/squick">GitHub</a> | <a href="https://www.npmjs.com/package/squick">npm</a></span><span class="categories">in <a href="/category/projects/">projects</a></span></nav></header><div class="content"><p>Squick is the evolution of <a href="/code/zap/">ZAP</a>. While working on ZAP I realised that trying to cram every single thing I might want to do
with my website into a general-purpose static
site generator is not only too much work, but
also no fun at all. There are a few things that I was interested in doing
differently (at least from the static site generators I've found) and many things that I was interested in doing exactly the same as everyone else.</p>
<p>Making ZAP flexible enough would require a plugin system, which takes quite a bit of work to get right. Making those plugins means wrangling other people's software (like sass compilers, git, elasticsearch, etc.) which is a pain. So, instead of fighting with other people's software, I decided to build on other people's software, by making a simple node module that renders markdown files with templates in a way that is very easy to integrate into <a href="http://gulpjs.com">gulp</a>. Squick is the result. The templates are rendered (asynchronously) using <a href="http://www.dustjs.com/">dust</a>. This website is now built with Squick, along with the following gulp plugins:</p>
<ul>
<li><a href="https://www.npmjs.com/package/gulp-sass">gulp-sass</a>: to compile the stylesheets</li>
<li><a href="https://www.npmjs.com/package/gulp-notify">gulp-notify</a>: to pop up desktop notifications when continuous, background builds finish or fail</li>
<li><a href="https://www.npmjs.com/package/gulp-connect">gulp-connect</a>: to provide a livereload-enabled webserver</li>
<li><a href="https://www.npmjs.com/package/gulp-gh-pages">gulp-gh-pages</a> to automate deploying to GitHub pages</li>
<li><a href="https://www.npmjs.com/package/gulp-indexify">gulp-indexify</a>: to turn <code>/foo/bar.html</code> into <code>/foo/bar/</code></li>
</ul>
<p>Overall, I'm very happy with this new system and the workflow it enables!</p>
</div></article><article> <header class="post-header"><h1><a href="/code/backtalk/">BackTalk</a></h1><nav><span class="related"><a href="https://bitbucket.org/yourpalal/backtalk">GitHub</a> | <a href="https://www.npmjs.com/package/backtalk">npm</a></span><span class="categories">in <a href="/category/projects/">projects</a></span></nav></header><div class="content"><p>BackTalk is a programming language designed to provide simple points of configuration or interaction within a larger piece of software. For instance, it could be used to allow a user to add custom behaviour to
a button in a WYSIWYG website editor. You can try out BackTalk right now by
going through the <a href="http://yourpalal.github.io/backtalk-tutorial">interactive BackTalk tutorial</a>.</p>
<p>The syntax is designed to be expressive and also natural. It is also very simple, and can be easily remembered. Variables start with a "$" and function calls look like natural language. Here is an example of a small script you could write and execute with BackTalk:</p>
<pre><code>-- this is a comment
with $color as "orange"
set the background color to $color
</code></pre><p>A more complicated script could look something like this:</p>
<pre><code>with $all_words as (an empty set)
for each $word in the text:
with $lowered as (convert $word to lowercase)
add $lowered to $all_words
show message:
"there are"
(length of $all_words)
"words in the text"
</code></pre><p>Many of the functions in the samples above would be expected to be written
by the BackTalk embedder.</p>
<p>The embedder can write functions that execute asynchronously, create loops, modify and access the surrounding scope, and also run whatever JavaScript
behaviours are desired. Any function which returns a <a href="https://promisesaplus.com/">Promise</a> will pause the BackTalk VM until the promise is resolved. This is done transparently, allowing for complex async behaviours to appear as simple, synchronous scripts.</p>
<pre><code>with $user_info as (GET "/user/3")
with $posts as (GET (attribute "posts_url" of $user_info))
-- let's say this renders the template using the scope Variables
-- set up in the block below it
render template "posts_index.html":
with $user as $user_info
with $posts as $posts
</code></pre><p>As you can see, BackTalk code sometimes looks a bit <a href="https://en.wikipedia.org/wiki/Lisp">lisp</a>y. The whole project is still a bit rough around the edges, but it uses a <a href="https://en.wikipedia.org/wiki/Parsing_expression_grammar">PEG</a> to
parse the input, has a real <a href="https://en.wikipedia.org/wiki/Abstract_syntax_tree">AST</a>, and uses a simple VM to run the code. The whole project is written in <a href="http://www.typescriptlang.org/">TypeScript</a>, Microsoft's static-typed superset of ECMAScript 6, and is well tested.</p>
</div></article><article> <header class="post-header"><h1><a href="/code/shake-stick/">Shake Stick</a></h1><nav><span class="related"><a href="https://github.com/yourpalal/lsmd9dso-supercollider">GitHub</a> | <a href="https://peerj.com/preprints/995/">PeerJ</a></span><span class="categories">in <a href="/category/projects/">projects</a></span></nav></header><div class="content"><p>The Shake Stick is a NIME (New Interface for Musical Expression) implemented in C++ and SuperCollider on a Raspberry Pi B+. This repo contains all of the necessary code and data to run a Shake Stick. This project was produced as part of a directed study with Dr. Abram Hindle at the University of Alberta. You can read a <a href="https://peerj.com/preprints/995/">pre-print of the resulting paper on PeerJ</a>.</p>
</div></article><article> <header class="post-header"><h1><a href="/code/cryssake/">cryssake</a></h1><nav><span class="related"><a href="https://github.com/yourpalal/cryssake">GitHub</a></span><span class="categories">in <a href="/category/projects/">projects</a></span></nav></header><div class="content"><p>Cryssake is a simplified C++ build system written in Python. It Understands very basic configurations of C++ executables and libraries. The guiding principle of Cryssake is that by adding structure to the project being built, we can simplify the build system. Unfortunately, C/C++ code tends to have complex requirements from the underlying operating system, available libraries, etc, and structure cannot be enforced in those areas. Ultimately, I determined that this project, though it works well for very simple C++ builds, would need to rapidly grow in complexity to accomodate more complex configurations. At that point I gave up and learned CMake.</p>
<p><a href="http://golang.org/cmd/go/">Go has a build system</a> that works sort of how I wanted Cryssake to work, but even better. Rust has <a href="https://github.com/rust-lang/cargo/">a similar build system called cargo</a> that is even closer to what I wanted for C++, but also handles packaging/dependencies: nice!</p>
</div></article><article> <header class="post-header"><h1><a href="/code/zap/">ZAP</a></h1><nav><span class="related"><a href="https://bitbucket.org/yourpalal/zap">Bitbucket</a></span><span class="categories">in <a href="/category/projects/">projects</a></span></nav></header><div class="content"><p>Zap is multiple prototype CMSes that lets you edit locally and deploy your site using git. The guiding principle of ZAP is to keep your content in git. The rest is still being explored. Currently, ZAP is still being prototyped, with two branches that you might find interesting:</p>
<h3 id="master">master</h3>
<p>This is a fairly complete CMS that provides an in-browser editor powered by AngularJS. Content is stored in your file-system and you are expected to manage it via git. Editing is done locally and a copy of ZAP must also be running on your server in read-only mode to provide search, rendering etc. This version also has fairly good test coverage.</p>
<p>Ultimately, this became overly complicated and unwieldy, with an annoying dependence on Elasticsearch (this was needed even while editing your site offline).</p>
<h3 id="simple">simple</h3>
<p>A rewrite that includes some of the lessons I have learned from the master branch. Currently implemented as a static site generator, it reads files from your project folder and assembles the website as you wish. Extra features such as SASS/LESS compilation, GUI editor, search are not implemented and likely will never be. This removes complexity from ZAP and lets tools that are good at those things (Makefiles, gulp.js, your text editor, etc.) handle those parts. Features:</p>
<ul>
<li>very nice error messages for the user</li>
<li>explicit over implicit</li>
<li>specifically designed to make it easy to host your website through github-pages.</li>
</ul>
<p>This version of ZAP is used to build both my website and my resume!</p>
</div></article><article> <header class="post-header"><h1><a href="/code/haiku/">Haiku</a></h1><nav><span class="related"><a href="https://github.com/yourpalal/haiku/">GitHub</a></span><span class="categories">in <a href="/category/projects/">projects</a></span></nav></header><div class="content"><blockquote>
<p><a href="http://www.haiku-os.org/">Haiku</a> is a new open-source operating system that specifically targets personal computing. Inspired by the BeOS, Haiku is fast, simple to use, easy to learn and yet very powerful.</p>
</blockquote>
<p>This is not a project that I started, nor am I the biggest contributor. Far from it. GitHub can show you <a href="https://github.com/yourpalal/haiku/commits/master?author=yourpalal">my commits</a> if you are interested. However, I did do quite a bit of work on Haiku. All programming was in C++, and I worked on:</p>
<ul>
<li>the interface layout API (grids, groups, alignments, that sort of thing)</li>
<li>refactoring many built-in applications to use that API</li>
<li>updating a linear programming-based layout manager to a newer version of the layout API</li>
<li>documenting the layout API and fixing bugs</li>
</ul>
<p>At this point, I no longer work on Haiku, but it was a great experience. I not only
learned quite a bit about C++, but this was the period of time when I first became interested in Software Engineering (as opposed to simply computer programming), design patterns, maintainability, etc.. I also formed a good understanding of how
open source can work, and had some very cool doors opened for me, such as going to
New Zealand on a scholarship to work on Haiku there.</p>
</div></article><article> <header class="post-header"><h1><a href="/socrates-and-aristotle-fighting/">Generative Socratic Text</a></h1><nav><span class="related"><a href="https://github.com/yourpalal/NaNoGenMo-2015">GitHub</a> | <a href="http://yourpalal.github.io/NaNoGenMo-2015">Generated Text</a></span><span class="categories">in <a href="/category/toys/">toys</a></span></nav></header><div class="content"><p>Socrates and Aristotle Are Fighting Again is computer-generated novel I produced for <a href="https://github.com/yourpalal/NaNoGenMo-2015">NaNoGenMo 2015</a> (that's <em>Na</em>tional <em>No</em>vel <em>Gen</em>eration <em>Mo</em>nth).</p>
<p>The code I wrote to generate the novel is available on <a href="https://github.com/yourpalal/NaNoGenMo-2015">GitHub</a>, and includes a write-up of the techniques I used. In short, I used web-scraping to make a corpus of philosophical text, then used a Markov model to generate text from it. In an attempt to make something that resembles conversation and a Socratic text (with the Aristotle learning from Socrates), I added some twists onto this classic technique. The results range from confusing and boring to confusing but funny.</p>
<p>You can read <a href="http://yourpalal.github.io/NaNoGenMo-2015">"Socrates and Aristotle Are Fighting Again"</a> online right now!</p>
</div></article><article> <header class="post-header"><h1><a href="/sounds-of-jelly/">Sounds of Jelly</a></h1><nav><span class="related"><a href="/games/sounds-of-jelly">play now</a></span><span class="categories">in <a href="/category/toys/">toys</a></span></nav></header><div class="content"><img alt="some pixely green and blue audible jelly" class="icon" src="/img/sounds-of-jelly.png" height="150"/><p>Sounds of Jelly is a relaxing jelly simulator with wave noises. It uses three.js for graphics and WebAudio to synthesize audio in your browser!</p>
</div></article><article> <header class="post-header"><h1><a href="/split-merge-steal/">Split Merge Steal</a></h1><nav><span class="related"><a href="/games/split-merge-steal">play now</a></span><span class="categories">in <a href="/category/toys/">toys</a></span></nav></header><div class="content"><img alt="some colourful blocks" class="icon" src="/img/split-merge-steal.png" height="150"/><p>I once decided to do an exercise from a game design textbook. The exercise was to design a simple game around a territory capturing mechanic. Instead of just completing the exercise, I decided to make it possible for people to make and share games that used the same type of board/moves. Finally, the resulting game editor/player is ready to share! I think this could maybe be a good tool for people to experiment with game design.</p>
<p>I would really love it if you would try this out and make some games. I would love it even more if you would share those games with me!</p>
</div></article><article> <header class="post-header"><h1><a href="/please-play-again/">Please Play Again</a></h1><nav><span class="related"><a href="/games/please-play-again">play now</a></span><span class="categories">in <a href="/category/toys/">toys</a></span></nav></header><div class="content"><img alt="two white circles and a green circle" class="icon" src="/img/please-play-again.png" height=""/><p>I made this game for the 2013 js13k contest, which had a theme of bad luck that year. Originally, I was inspired to make a game about bad luck and failure. I had a vague idea of making a point in this game, so I tried to do that by
forcing people to give up. The game encourages you to keep going with little text snippets, but then at some point you cannot progress any further. I'm not really sure anymore that this fits with 'bad luck', but I thought so at the time.</p>
<p>Many players had a reactions of anger and/or confusion. One thing that added to the confusion was that each level introduced something new. When the final, unbeatable level arrives, it can appear that the player is simply missing some new mechanic.</p>
<p>A design goal I had in this game was to have minimal to no instructions. Overall, I think this worked out pretty well, as the players I observed seemed to discover the simple controls and mechanics fairly quickly with a bit of experimentation. I think the complete lack of information contributed to the annoying effect of the eventual impossibility of the game.</p>
<h3 id="good">good</h3>
<ul>
<li>fun mechanics</li>
<li>visual aesthetic was nice, and required no assets</li>
</ul>
<h3 id="bad">bad</h3>
<ul>
<li>didn't get into even the top 20</li>
<li>didn't get any feedback from the judges</li>
<li>multiple failures of communication</li>
<li>embarassing preachiness</li>
</ul>
</div></article><article> <header class="post-header"><h1><a href="/spincycle/">Spincycle</a></h1><nav><span class="related"><a href="/games/spincycle">play now</a></span><span class="categories">in <a href="/category/toys/">toys</a></span></nav></header><div class="content"><img alt="Spincycle logo: basically, the word spincycle" class="icon" src="/img/spincycle.png" height="150"/><p>A long time ago, as BlackBerry prepared to launch their foray into the tablet market, they announced a promotion for developers: make a PlayBook app, get a PlayBook. One of the technologies you could use to make the app was HTML5, which, at the time, was still somewhat new. I decided this was the perfect time for me to get my feet wet with web-based game development, and so I started planning and making this game.</p>
<p>The game is sort of fun, it's kind of like a more boring version of <a href="http://superhexagon.com/">Super Hexagon</a> (although I had the idea before Super Hexagon was released, and I didn't ever play its predecessor, Hexagon). I learned much more about web design/technologies making this game than I did about game design. The game part stayed fairly static from an early point, but the UI/UX/implementation went through several major revisions. Finally, it has landed on something I'm pretty happy with and ready to share.</p>
</div></article><article> <header class="post-header"><h1><a href="/code/es_indexer/">Elasticsearch Indexer</a></h1><nav><span class="related"><a href="https://github.com/yourpalal/es_indexer_example">GitHub</a></span><span class="categories">in <a href="/category/examples/">code samples</a></span></nav></header><div class="content"><p>This repo provides a self-contained indexer for adding documents to an <a href="https://www.elastic.co/">Elasticsearch</a> index in Golang.</p>
</div></article><article> <header class="post-header"><h1><a href="/code/pi-experiments/">Pi Expirements</a></h1><nav><span class="related"><a href="https://bitbucket.org/yourpalal/pi-experiments">GitHub</a></span><span class="categories">in <a href="/category/examples/">code samples</a></span></nav></header><div class="content"><p>This repo houses a few simple experiments in controlling the Raspberry Pi GPIO using C++. Maybe it will be helpful to someone else trying to do the same thing!</p>
</div></article><article> <header class="post-header"><h1><a href="/code/polling-thing/">GitHub Issue Poller</a></h1><nav><span class="related"><a href="https://github.com/yourpalal/polling-thing">GitHub</a></span><span class="categories">in <a href="/category/examples/">code samples</a></span></nav></header><div class="content"><p>Written in 1 hour, this repo provides an example of HTML5, CSS, and REST usage. This simple application written with AngularJS monitors the issues on its own GitHub repo via the GitHub JSON API.</p>
</div></article></main></div><footer><div><a class="about" href="/about">about</a><a class="github" href="http://github.com/yourpalal">github</a><a class="bitbucket" href="http://bitbucket.org/yourpalal">bitbucket</a></div><p>copyright Alex Wilson 2013-15</p></footer></body></html>