Walkabout

A Year Abroad

In September 2016, my then girlfriend (now fiancé) and I left our lives in Baltimore and decided to travel the world. It was simultaneously the easiest and most difficult decision we've ever made. To take this on, we'd have to put much of our lives on hold — careers, marriage, kids. While facing this daunting opportunity our biggest concern was: will it be worth it?

After 345 days and 27 countries, we made it back. As you might imagine, it was completely worth it.

Walkabout ultimately served several purposes. Originally designed as a way to plan and budget our trip, it instead quickly became a way to track everything we did — accommodations, flights, attractions, etc... It also allowed me to code in my free time on the road. In addition to any freelance/consulting work I was able to secure (sometimes in exchange for room & board), I wanted something personal to remember the trip by, and also something low stress to work on in order to continue to learn and stay involved in web development. In the end, keeping track of everywhere we went, every dollar we spent, and everything we did taught me quite a bit about data models, relationships, and project planning. The biggest takeaway is probably "the only constant is change."

Jen also cataloged the trip with words instead of code. Read her blog.

--

"Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover." —H. Jackson Brown

build PHP,  MySQL,  JavaScript,  ES6,  jQuery,  JSON,  Bourbon,  Sass,  CSS3,  HTML5,  Google Maps & Location API star UI/UX,  Geocoding,  API integration,  Data management,  CMS,  Responsive design,  Mobile-first,  Web / digital design

Teardrop

Audio Visualizer

Teardrop is the spiritual successor to Raindrop:

"Ever since I got into coding, I was fascinated by music visualization programs such as Cthugha, G-Force, and MilkDrop. This project is at best a small homage to those programs (and the many more that have come and gone since)."

Working with MIDI files proved unreliable for several reasons, so Teardrop is a similar concept using the Web Audio API and a more traditional method of visualizing an audio signal. Teardrop implements time & frequency domain analyses, as well as beat detection, and uses WebGL to render 3D graphics inside of the browser.

--

"Love is a doing word, Fearless on my breath, Gentle impulsion, Shakes me, makes me lighter" —Massive Attack (Teardrop)

build WebGL,  Three.js,  Web Audio API,  ES6 star 3D graphics,  Audio analysis

AwSnap

Crash Chrome with Simple HTML

On April 5th, 2015 I discovered a bug in the then-current version of Chrome (41) that would cause the browser to crash when it encountered a long and/or malformed URL in the href attribute of an anchor tag. I submitted the bug to Google, and it was marked as 'Won't Fix' almost immediately. So I posted it to Github.

This culminated in a reddit thread making it's way to the front page before getting removed, a submission to /r/bestof, and a HackerNews thread where the dev who fixed it reached out. All in all, a pretty amazing 12 hours.

Sometime later I was also featured in an article by The Register detailing what had occurred.

build Google Chrome,  HTML5 star Exploit / vulnerability,  DoS,  Bug bounty

Tetris

The Perfect Videogame?

Who doesn't like Tetris? Created in 1984 by Alexey Pajitnov, Tetris is quite possibly the most popular and best selling video game in history. While the GameBoy version may not have been the first, it is arguably the most famous, and it's the inspiration for this version.

--

"If you want little boys to buy your machine include Mario, but if you want everyone to buy your machine, include Tetris." —Alexey Pajitnov

build KineticJS,  ES6 star Vector graphics

Hollowbot

Configurable Reddit Bot

Hollowbot is an attempt to create an open-source framework for a reddit bot to crawl, interpret, and respond to comments. Users deploying the bot can provide a configuration/ruleset to control its behavior.

build Python star API integration

Raindrop

MIDI Visualizer / Player / Time Waster

Ever since I got into coding, I was fascinated by music visualization programs such as Cthugha, G-Force, and MilkDrop. This project is at best a small homage to those programs (and the many more that have come and gone since). I decided to use MIDI files because:

• having access to the events/messages would allow me to create visualizations directly tied to notes, pitch, velocity, etc...
• representing music as set of instructions reminded me of playing off sheet music long ago in grade school
• it was easier than performing a frequency analysis ;)

The result is a much simpler visualizer than most, but one that I hope feels more closely tied to the music.

Additional demos  -  Preset 0  -  Preset 1  -  Preset 2  -  Preset 3  -  Preset 4  -  Preset 5

--

"I'm never gonna stop the rain by complaining, Because I'm free, Nothing's worrying me" — B.J. Thomas (Raindrops Keep Fallin' On My Head)

build WebGL,  Three.js,  MIDI.js,  ES6 star 3D graphics,  Audio analysis

Autofill Is Evil

Browser Autofill Form Vulnerability

Most browsers have an "autofill" or "autocomplete" feature that quickly fills out webforms with common, saved information. But it's trivial to display a "malicious" form in such a manner that obscures autofillable fields, resulting in the user unable to determine which pieces of information are actually getting sent to a server.

build Google Chrome,  HTML5 star Exploit / vulnerability

mt-foundation

Simple CMS / Admin Framework

mt-foundation is a small framework to setup a simple admin area for managing content, with some bonus useless features for visual appeal. The demo uses data scraped from Discogs and Wikipedia

"We build a foundation but where do we stand, when all air is water and all water is land?" —Phish (Twenty Years Later)

build Foundation,  PHP,  MySQL,  JavaScript,  ES6,  jQuery,  Sass,  CSS3,  HTML5 star API integration,  Data management,  CMS,  Responsive design,  Mobile-first,  Web / digital design

reddit!

Frontend Redesign of reddit.com with Live Data

In early 2011, reddit hosted a programming and design contest in order to grow their team. This project was created to mirror live reddit data from their JSON API through a cleaner interface. It is mostly client-side Javascript with a few simple backend scripts to allow cookies to work. Users can view stories/subreddits/comments, search, sort, login and vote.

build Shell/Bash,  JavaScript,  ES6,  jQuery,  JSON,  CSS3,  HTML5 star API integration,  User/session management,  Web / digital design

nesCanvas

Avatar Chat

Back in the days when Flash was king and HTML5 was still experimental, I wanted to learn what all the fuss was about the <canvas> element. Borrowing all of the art and sound from Final Fantasy VI, nesCanvas allows users to select an avatar and chat with other users in different locales. Over time the animations and sound stopped working, and plenty of new bugs appeared in the meantime, but I'll never forget the first time I posted nesCanvas on reddit and asked the community to "break it." I stayed up all night chatting to reddit users and fixing bugs as quickly as they could find them.

--

"Kupo!" —Mog

build jQuery,  Canvas,  Perl star Vector graphics,  Real-time communication

SVG Social Icons

Drop-in Social Icons

Playing around with SVG, CSS3 transitions, and some new CSS/Sass techniques and libraries.

build CSS3,  HTML5 star Web / digital design

Swordfisher

Indispensable Hacker Utility

Swordfisher is a tongue in cheek homage that prints it's own javascript in a stylish manner in response to random keypresses. It does nothing of any true value.

--

"Unfortunately, I need someone who can do this under 60 seconds" —Swordfish (a terrible movie)

build Raphaël.js

msh

Command Line Interface

msh emulates a command line interface (CLI) using Javascript and PHP. Supports a filesystem, multiple users, and some common (and not so common) commands.

build jQuery,  HTML5,  CSS3,  PHP

PalmServe

Wireless Point of Sale System

PalmServe was written to replace pen and paper in restaurants with a wireless client/server system using Palm Pilots. The server is written in Java, and the client (written in C++) requires a PalmOS emulator/simulator, or if you are really brave, an actual Palm Pilot with wifi.

build C(++),  Java

Chaos

Game of Concentration / Luck

Chaos is a simple game based on Squares 2 by Gavin Shapiro. Requires Windows, OpenGL and GLUT.

build C(++),  OpenGL,  GLUT star 3D graphics

DragonGL

Dragon Curve Fractal

Three programs to draw the Dragon Curve Fractal with each version adding more options. Requires Windows, OpenGL and GLUT.

build C(++),  OpenGL,  GLUT star 3D graphics

What is this?

This is the personal/professional site of Jason Blatt, computer person. That's me. Hi there :)

No I mean, what am I looking at?

Oh that? That's a simple 3D visualizer I built using Three.js and it's accompanying particle system. These sort of sites can get kind of stuffy so I figured I'd at least try to give the user something to play with.

How does it work?

Check out the controls in the upper right. On the left is the name of the current visualization effect, along with arrows that will allow you to change which effect is currently running. On the righthand side you'll find a few buttons:

• play_arrow - Play
• pause - Pause
• help - Help (you've already found this one!)
• brightness_low - Toggle Lights
• keyboard_hide - Toggle UI Elements
• fullscreen - Fullscreen

OK, what else is here?

Scroll down or use the navigation in the bottom left- there's a portfolio of sorts if your interested in things I've coded throughout my life, my resume if you want to give me money to do computer things for you, and as much information I can provide as to my current whereabouts, and how best to find and/or contact me.

Anything else?

Hmm... nothing much I can think of. Maybe just this quote by another computer person Charles Babbage, from Passages from the Life of a Philosopher (1864), which seems to have become more timely with each passing day:

On two occasions I have been asked, — "Pray, Mr. Babbage, if you put into the machine wrong figures, will the right answers come out?" I am not able rightly to apprehend the kind of confusion of ideas that could provoke such a question.