Suren's Devlog

I wanted to blog about my work at Hacker School as and when it happened but having to part time on the side didn't give me as much time as I wanted. So now that Hacker School is over (:sad:) I am gonna write about all my time at Hackerschool one project at a time.

I am gonna start with the most fun and exciting projects I got to work on in some time - Implementing Conway's Game of life in Elm. See the glider pattern implemented here

Before I started this project, I had no introduction to Elm or any other functional programming language. So this was just an exercise in learning a new language. I paired with Alyssa & Cerek on this one and later after I finished Peter Seibel reviewed our work and made it infinitely better.

One of the most exciting thing about Elm or any functional language for that matter is the how terse the code is. 

Here is the whole code that took to build this:

import Dict import Graphics.Collage import Window import Debug -- Type alias for Grid and position to represent our game type Position = (Float, Float) type Grid = Dict.Dict (Float, Float) () newGrid: [Position] -> Grid newGrid ps = Dict.fromList (map (\p -> (p, ())) ps) liveCells: Grid -> [Position] liveCells g = Dict.keys g alive: Grid -> Position -> Bool alive g p = Dict.member p g validCell: Position > Bool validCell (x, y) = x >= 0 && y >= 0 neighbours: Position -> [Position] neighbours p = filter validCell (map (\d -> p `add` d) deltas) aliveNeighbours: Grid -> Position -> [Position] aliveNeighbours g p = filter (\p -> alive g p) (neighbours p) aliveInNextGeneration: Grid -> Position -> Bool aliveInNextGeneration g p = let liveNeighbors = length (aliveNeighbours g p) in (alive g p && liveNeighbors == 2) || liveNeighbors == 3 -- Constants. Sort of. gridSize = 500 cellSize = 50 gridDimension = gridSize/cellSize funColor = rgba 81 116 22 1.0 deltas = [(1, 0), (1, -1), (0, -1), (-1, -1), (-1, 0), (-1, 1), (0, 1), (1, 1)] glider = [(1, 0), (2, 1), (0, 2), (1, 2), (2, 2)] positions = concat (map (\y ->; map (\x ->; (x, y)) [0..gridDimension]) [0..gridDimension]) initialGrid = newGrid glider -- Tuple addition helper add: Position ->; Position ->; Position add (a1, b1) (a2, b2) = (a1 + a2, b1 + b2) -- Drawing helpers verticalLine : Float ->; Float ->; Path verticalLine height ordinate = path [ (ordinate, -height/2), (ordinate, height/2) ] horizontalLine : Float -> Float -> Path horizontalLine width abscissca = path [ (-width/2, abscissca), (width/2, abscissca) ] renderGrid : Float -> [Path] renderGrid size = let lines = map (\n ->; n * cellSize) [(-size/(2 * cellSize))..(size/(2 * cellSize))] in (map (verticalLine size) lines) ++ (map (horizontalLine size) lines) renderLiveCell : (Float, Float) -> Form renderLiveCell (x, y) = move (-gridSize/2 + (x * cellSize) + cellSize/2, gridSize/2 - (y * cellSize) - cellSize/2) (filled funColor (circle (cellSize/2.5))) renderLife: Grid -> [Form] renderLife g = map renderLiveCell (liveCells g) -- Evolve next generation from the current generation nextGeneration: Float -> Grid -> Grid nextGeneration pulse g = newGrid (filter (\p -> aliveInNextGeneration g p) positions) -- render render : Grid -> Int -> Int -> Element render g width height = container width height middle ( collage gridSize gridSize ( map (traced (solid black)) (renderGrid gridSize) ++ (renderLife g))) -- Render the animation now main = lift3 render (foldp (nextGeneration) initialGrid (fps 2)) Window.width Window.height

Pretty slick if I may say so myself!! The next target for this project is to create an editor for the grid so that one can create an initial state that can be triggered to evolve.

My longest github activity streak in a year. I started Hacker School on Sep 2nd.

My Motivation for building this: Community is an open source forum built by David and Zach that is being used at Hacker School. Since it's built with a Rails backend, one of my comfort areas, I thought I'd get started Hacker School by contributing features to it. So Madhumitha and I decided to pair and build Search for Community. (More details will follow in a different post.)

I had heard good things about Elasticsearch, and offered client libraries in many languages. I've previously used Apache Solr, so I thought I'd try implementing Elasticsearch this time.

Here is a nifty way of writing a Concern to add elasticsearch indexing and querying capability to any ActiveRecord Model:

module Searchable extend ActiveSupport::Concern included do include Elasticsearch::Model after_commit :upsert_to_search_index! # Reset search index for the entire model 50 rows at a time def self.reset_search_index! self.import force: true, batch_size: 50, transform: lambda {|item| item.to_search_mapping } end def self.search(query) #TODO: Do some complex query parsing and discover intent here __elasticsearch__.search(query).results end end # Override this method to change the search mapping for this model def to_search_mapping { index: { _id: id, data: __elasticsearch__.as_indexed_json } } end # Insert/update a single row instance # TODO: Wrap it with begin-rescue def upsert_to_search_index! self.class.where(id: id).import transform: lambda {|item| item.to_search_mapping } end end

Let us say you had a model say Article then 

# Include searchable concern to the model you want search for class Article < ActiveRecord::Base include Searchable ... end # To index all articles or reset the index Article.reset_search_index! # Index a new article happens automatically because of the after_commit hook. @article = Article.create! content: "Hello world" # Same is true when you update an article @article.content = "Another Hello world" @article.save! # Or you could update index for this article forcefully @article.upsert_to_search_index! # You can also change the search mapping for a Model by overriding the to_search_mapping class Article < ActiveRecord:Base ... def to_search_mapping ... end end # Querying for search results is as simple as this. # You can implemented complex DSL by overriding the query method. Aritcle.query("hello world")

I love Codemirror syntax highlighter and have used it a couple of times before.

I wanted to paste a lot of code samples in my blog posts and I also wanted good syntax highlighting for those snippets. So I ended up editing my tumblr theme to enable Codemirror for my tumblr blog posts.

Here is how I did it. 

Step 1:

I added all these codemirror JS & CSS from Cloudflare CDN to the head of my blog theme

<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.5.0/codemirror.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.5.0/codemirror.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.5.0/mode/ruby/ruby.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.5.0/mode/javascript/javascript.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.5.0/mode/coffeescript/coffeescript.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.5.0/mode/xml/xml.js"></script> <style> .code { display: none; } .CodeMirror { font-size: 14px; border: 1px solid #eee; height: auto; } .CodeMirror-scroll { height: auto; overflow-x: auto; } </style>

Step 2:

I added this piece of javascript code that looks for any dom element with class="code" in my post to generate codemirror text editors from my posts.

$(".code").each(function(index) { var code = $(this).html(); code = replace(/</g, "<").replace(/>/g, ">"); var mode = $(this).data('mode'); $('<div></div>').insertAfter($(this)); var element = $(this).next().get(0); CodeMirror($(element).get(0), { value: code, lineNumbers: true, mode: mode, readOnly: true }); });

Step 3: Now I can write a post like this that using the <html> feature of tumblr blog posting to create <pre> tags in my post. (This following piece of text is what I ended up writing for this particular blog post)

I also have to set a data-mode attribute for the <pre> tag that sets the mode for codemirror.

<pre class="code" data-mode="text/html"> Any code that you want to paste here </pre>

I am attending Hackerschool starting today. 

Hackerschool is an awesome place to be in. Its in new york among smart, passionate and people dedicated to their craft. It gives me time to become a better programmer.

The motto of hackerschool is "Never Graduate". How can you not fall in love something like that.

One of the coolest advice I heard today was - Let this not be the beginning to a three month programme, but towards a life long habit of learning and growing up. 

I am currently working on a project that only involves Javascript for application logic and can be completely hosted out of Github Pages

So the entire code has to be both in master as well as gh-pages branch. Initially I was merging master into gh-pages and deploying but that kind of felt cumbersome with number of pushes that might be involved.

I quickly googled for a better solution and there is a nifty way to push to two branches at the same time. I added these lines to my .git/config in [remote "origin"] section

push = +refs/heads/master:refs/heads/gh-pages push = +refs/heads/master:refs/heads/master

What this means whenever you do a "git push origin" it pushes your local master to both gh-pages and master branches to origin.

Now that I have done this, I am anticipating a scenario where I might want to push a stable branch to gh-pages and keep master at bleeding edge. I might add a different line like the following line which would push local stable branch to origin gh-pages

One part of my journey is to become a better programmer/developer. I believe a lot in Hackerschool approach.

https://www.hackerschool.com/manual#sec-principles - suggests that I maintain a devlog of my activity to improve my writing and encourage me to doing things on a regular basis.

Also I would like to make at least one significant non trivial commit every day on average to open source or my hobby projects so that I can have a completely green github commit activity graph.