BLOG
21 posts
4,317 LIKES
a month ago

How I learned React Native by building and shipping an app to study faster

How I built YouSpeeder and learned React Native, from idea to shipped app. YouSpeeder adds playback controls to YouTube and helps you study faster.

Read more...
421 LIKES
2 years ago

Crafting Experiences with Data Visualization

I recently gave a presentation at the Oakland D3 meetup entitled 'Crafting Experiences with Data Visualization.' This post is an overview of the talk, along with some notes. You can watch the presentation here.

Read more...
372 LIKES
3 years ago

Data Visualization in Games: Leaderboards

Leaderboards are a visualization of achievement. Their goal is to make comparisons between some player (or item's) ranks. This is a pretty board statement because implementations of leaderboards can be found not just in arcades, not just in single or multiplayer games, but also in non-games. There are many types of leaderboards, and can produce powerful emotional reactions

Read more...
3,471 LIKES
3 years ago

Designing a Browser Based Game with D3.js

First impressions are powerful. The initial exposure to a game, book, or even web application, affects your not only your interest in it, but your perception and expectations of it. Scars of the Untrodden is a browser based, fantasy, rouge-like map exploration game I've been working on which makes heavy use of data visualizations. In this post, I'll discuss creating the game's initial experience.

Read more...
821 LIKES
3 years ago

Using D3 and SVG Filters to Create a Fog of War Effect

The Fog of War is a common type of game data visualization, frequently used in Real Time Strategy (RTS) games. SVG Filters can be not only a powerful prototyping tool, but also an easy way to achieve impressive visual effects for browser based games. This post describes a simple way to implement a fog of war effect using filters, masks, and a little bit of d3.

Read more...
943 LIKES
3 years ago

Data Visualization in Games

Games, at their core, are all about learning: spatial, temporal, motor, and sometimes even intellectual. You learn how to play within a game's rule-set, and to improve your gameplay you must learn. Data visualization provides a way to aide in the learning process; to keep games fun. If the game is no longer fun, data visualization can also be used to provide other motivators to play.

Read more...
427 LIKES
3 years ago

Better Group-based Javascript Logging for Browsers

This is the last in a series of posts on logging. The first post describes how group based logging can be a powerful tool , the second post introduces Bragi, a NodeJS logging framework , and this post discusses Bragi for the Browser

Read more...
2,582 LIKES
3 years ago

Bragi - A Javascript Logging Library for NodeJS

I’d like to share with you Bragi, a Javascript logging library I wrote that has made my development workflow more efficient and enjoyable. In this first part, I’ll discuss the NodeJS version of Bragi. Next week, I’ll release and discuss the web browser version.

Read more...
574 LIKES
3 years ago

How Logging Made me a Better Developer

I think logging is one of the most powerful tools in a programmer's toolbox. Unfortunately, it's supremely underutilized. Logging gives you data about what your code is doing. Over the past couple years, I've found logging helps me to manage complexity, communicate my code to other developers (and vice versa), and allows me to rapidly develop and debug software. As simple and silly as it may seem; for me, logging is unequivocally the most beneficial tool in my toolbox.

Read more...
2,275 LIKES
3 years ago

How to Build an Entity Component System Game in Javascript

Creating and manipulating abstractions is the essence of programming. Entity Component System (ECS) is a different way of thinking about how to structure code, and it has some tremendous benefits. This post describes what ECS is and a Javascript implementation which we use to create a simple HTML5 browser based game called Rectangle Eater

Read more...
1,118 LIKES
3 years ago

Misleading Users to Create Better Experiences

When trying to craft an experience, accuracy isn't always important. The user's experience is more important, and sometimes you have to mislead them a little to craft a better one.

Read more...
2,381 LIKES
3 years ago

Enhancing Data Visualization with SVG Filters

SVG filters are a powerful and underutilized tool. Filters are a post processing step that allow you to create interesting effects by adding pixel-based effects. They can be chained together, manipulated on the fly, and applied to different elements to create powerful visual experiences.

Read more...
707 LIKES
3 years ago

Visualizing Nebulous Data

The best data visualization choice is not always the 'correct' one. The most accurate representation of data is not inherently the best method of visualization. How well the visualization represents the data is probably the most important facet to consider when designing a visualization, but it’s certainly not the only one. It’s about what's best for the data and what experience you’re trying to create.

Read more...
4,257 LIKES
3 years ago

Building Five Labs

Five Labs was an experiment that generates a personality for you based on your Facebook wall posts. We generated personalities for over 200 million people in a week. This post describes the architecture and infrastructure behind it

Read more...
1,082 LIKES
4 years ago

Installing CUDA, OpenCL, and PyOpenCL on AWS EC2

This post describes how to setup CUDA, OpenCL, and PyOpenCL on EC2 with Ubuntu 12.04. These are the steps I took to install CUDA and OpenCL on EC2. This should work for any Ubuntu machine with a CUDA capable card.

Read more...
17,245 LIKES
7 years ago

Replace a String in Multiple Files in Linux Using Grep and Sed

This is the quickest way I've found to search for and replace every occurrence of a string in multiple files in linux.

grep -rl matchstring somedir/ | xargs sed -i 's/string1/string2/g
example:
grep -rl 'windows' ./ | xargs sed -i 's/windows/linux/g'

Read more...
11,245 LIKES
7 years ago

Removing ^M characters on ubuntu in VIM

Remove ^M characters in VIM by replacing with nothing. ^M is really . Use

:%s/\r//g

Read more...
9,201 LIKES
7 years ago

Dijkstra's Algorithm - Shortest Path

This post will cover the basics of Dijksta's shortest path algorithm and how it can apply to path finding for game development. It is my opinion that understanding this algorithm will aid in understanding more complex AI algorithms, such as A*. This post is aimed more towards developers starting out in game development or those curious about Dijkstra's algorithm, but this will be a somewhat simplification of it and discuss mainly the concepts.

Read more...
3,165 LIKES
7 years ago

OpenLayers Tutorial - Part 3: Controls

OpenLayers Tutorial Part 3 - Controls. Tutorial covering OpenLayers Controls, various examples and sample code, including styling controls with CSS, placing controls outside the map in panels, and more.

Read more...
2,271 LIKES
7 years ago

OpenLayers Tutorial - Part 2: Layers

OpenLayers Tutorial Part 2 - Tutorial covering OpenLayers Layers, including how it works on the backend, WMS, Vector layers, Google Maps and OpenLayer mashup instructions, and other Layer object related concepts.

Read more...
3,132 LIKES
8 years ago

OpenLayers Tutorial - Part 1: Introduction

Tutorial Introducing OpenLayers, covering the basics of creating a map and populating it with a single layer.

Read more...