I made an interactive 3D network map for Hurricane Electric. It includes the network locations and circuits along with third party data centers and submarine cables around the world.

Bay Area cyclists probably know that Google Maps is great for getting riding directions. And BART has a good website for finding out when the next train is coming. But it always takes a few steps to plan a full bicycle and BART trip.

Now this can be done on a single page. I present to you http://maciejkus.com/bike-bart/

Google Maps and BART API combined.

source: https://github.com/MaciejKus/whichBart

A D3 world map where if you zoom in the states in the USA and Canada are shown, but if you zoom out, only the countries are shown. Also has rotation when scale is set to 1, tooltips and the ability to highlight a country or state.

The San Francisco Bay Area is lucky enough to have someone named Steve who compiled a list of concerts in a simple text format for the last 20+ years. This served as a way for people to know where to find punk rock shows. You can see it here.

Because the format of the concert listings has largely been the same over the years I was about to use NodeJS to scrape this data. I wrote a script which looked at the archive of concerts, and extracted the band names, the dates, and the venue names.

The script then searches for duplicates. This was a bit challenging as some listings were the same show but with a minor spelling error one week. By looking at band names, concert dates and venue names I was able to remove most duplicates.

After removing duplicates and cleaning out a few other things I had a list of concerts with the dates, bands and venues. I saved this into JSON format and CSV format.

I then used the CSV format to create a network graph of each yeah from 1994 to 2015 (I am waiting for 2016 to be over before adding 2016). These graphs show a social network of bands connected to one another with shows that they played. In other words, the graphs are a network of bands who are connected if they shared a stage in that particular year.

After these (pretty massive) graphs were finished I used the Gephi SigmaJS exporter to create JavaScript versions of each graph.

Finally, I added the JSON data to a Mongo database and created a front-end for the site using Ractjs. The routing for the site is fairly simple, so I avoided using React Router. There was no need for it in this case. The final site can be found at bayareapunk.com.

Now I can write NodeJS scripts to query this database. For example, I can see which bands played the most shows since 1994.

A D3.js graph of Rolling Stone magazine’s 100 greatest singers. The data was scraped from a downloaded version of the html file form Rolling Stone magazine. The node.js file used to scrape the data is rs-data/scrape.js.

D3.js was then used to build a force graph of the data showing which artist influenced which other artist.

Find it at: http://maciejkus.com/100-greatest-vocalists-graph/

Source: https://github.com/MaciejKus/100-greatest-vocalists-graph

I’ve been making a full-stack CRUD application. It’s meant to keep track of jobs that one has applied to. The backend is Nodejs and Mongodb. I built two different front ends, one with React and the other with Angular. There was no need to build two frontends, but I wanted the practice of building the same project using two different frameworks.

The code is at https://github.com/MaciejKus/job-search-app. The app allows the user to input job information, such as the company name and the title. This is saved in the database so that the user can keep track of jobs he or she applied to.

Every job can be edited to update if the user got a reply from the company or any other notes that the user may wish to make. Jobs can also be deleted and added.

I used routing in both the frontends. I didn’t necessarily need to, but this app is meant to be a learning/practice experience rather than something I expect others to use.

I just solved a 2kyu challenge from codewars called Robby the robot. The algorithm used to solve the challenge was more time consuming than the actual coding, so here I will describe what I did. Others can use this to code their own solution.

I will not be posting any code on here. Codewars is supposed to be a challenge, and posting code here will allow others to cheat. I would be doing them a disservice. Oh, and I did not re-factor or clean up my code before submitting it, so it wouldn’t set the best example.

Read on →

There’s a lot of todo apps out there, but I finally got around to making one myself. I used Node.js, MongoDB, Express.js for most of it and then just added a very simple HTML front end. I have plans to one day add a nicer front end, most likely using Angular2, which I have recently been playing with.

Until I polish the frontend up a bit I think I will keep the app to myself, but I do like to post notes on what I have been up to here and there.

On the Angular2 side of things, I did learn a valuable lesson. When learning a new framework that recommends a language that you are not familiar with, learn that language first. Most of the confusion I encountered when I first looked at Angural2 was simply due to TypeScript syntax that I was not familiar with. Once I got that figured out it wasn’t bad at all.

When I was first making a blog/site I wanted a static site, so I could host it on github pages without needing a backend. Octobers seemed like the best choice at the time because it was quick and easy to setup. Octopress is based on Jekyll, which is probably the most popular static website generator. It also had a number of pre-made templates which meant saving time on writing my own CSS.

Basically, it was a quick and relatively easy way of getting a blog on maciejkus.com going. I now have plans to move the blog over to metalsmith. Metalsmith is written in JavaScript, and that alone is reason enough for me to switch over. I’m much more comfortable in a JavaScript/Nodejs environment than a Ruby one. I also find metalsmith to be a lot more customizable, and at this point I am much more interested in writing my own CSS rather than using a premade template.

Read on →

Modern browsers have a really cool feature called resource timing. See here: https://www.w3.org/TR/resource-timing/ It allows a much more accurate way of measuring latency within the browser. Specifically, separates out things like DNS requests, cache replies, TCP header data etc. This means that a modern browser can be used to make a speed measurement in a very similar way that the PING command is used.

I created a little app which uses this resource timing to compare IPv4 and IPv6 latency directly within the browser. From my own testing the resulting times are very similar to ping times.

A browser is unable to directly access ICMP packets, so one cannot perform operations such as traceroute or ping directly from the browser, but now one can replicate ping to a very accurate level directly from the browser.

You can see this browser latency test at http://maciejkus.com/latency-v6-v4/

I also added a fallback test for older browsers. This is much less accurate and uses the loadtime of an image.


I had an idea for a relaxing browser based image display, something similar to the fireplace log you might find on TV during christmas. For those unfamiliar, every year around Christmas a television station would play hours and hours of a burning log in a fireplace. The idea was that those without a fireplace of their own could turn the TV to the log channel and have something similar in their home.

Read on →

I wanted to try out Jasmine, which is a JavaScript unit testing library. I also had an idea for what could be a fun little game, so I went ahead and made a html5/canvas game and used Jasmine to test things as I coded.

Read on →