In the wake of the franchise's boosted popularity, I recently rediscovered Pokemon cards. It's become a pretty exciting hobby - something about the combination of organization and mechanics really speaks to the programmer in me. The physical form and layout of the cards, in particular, crossed some wires in my head with CSS layouts, and I was inspired to combine the two interests.
I started out by just replicating a card as an element and doing some 3D transformations on it. I measured the dimension ratio (and wrote some SCSS to maintain it), slapped images on the front and back of it, and had fun spinning it around and applying a
drop-shadow filter. Then I discovered the Pokemon TCG API, and things really got interesting.
I've always loved writing front-ends for APIs; seeing huge swaths of data populate these generic structures you've written is so exciting. This one was particularly simple. An input element, a keyup listener, and a couple jQuery statements later, I was listing (and arguably fully rendering) all cards that match an arbitrary search string. It only took a couple of hours and the result is quite fun to use. I replaced the spin effect with a float effect so they were easier to browse, and added zooming on hover, and now many of the people I play cards with are using it to look things up.
Thin CMS is a project I started partially as a way to teach myself Angular 2, but partially also as a response to available CMSes. I wanted something that could be easily tacked on to an existing, arbitrary project and wouldn't try to get involved in things like project structure, templating options, or middleware. A CMS that's thin, if you will. I now use it to manage this very site.
Sometimes, when you mainly work in web development, you get an itch to do something more crunchy, mechanical, and close to the metal. Brundolf Engine is a C++ game engine that I work on when I need to scratch that itch. There are far better free options out there for creating an actual video game, but sometimes it's just nice to re-engineer something.
Few things are as annoying on the web as having the page layout unexpectedly change or shift while you're trying to view or interact with it. In this guest post for CSS-Tricks I outline a few different things that can cause this problem, and recommend some solutions.
I built a new website for a local Irish music shop in Austin, TX. The stack is Mongo, Node.js, Express, Keystone.js, and jQuery. I also used SASS to preprocess the CSS, but used no CSS framework.
When I first started trying to populate my CodePen profile, I was having a little trouble coming up with ideas. One day I realized how interesting and challenging to implement many video game UI's are. In this blog post, I make a case for using them as practice to sharpen your CSS skills.
When I was in college, I ran into many scenarios where I needed to transfer a file from one device to another quickly and painlessly. If both devices belonged to me, something like Dropbox did a pretty good job. If both devices were laptops or desktops, a flash drive did well enough. But I wanted a single solution that didn't require signing into a service or exchanging contact info with someone or typing in a long download link. So, I came up with Catch. Toss a file to the cloud, and catch it somewhere else. No accounts, just a 6-digit code.
When I first started putting together a web development portfolio, I didn't have many complete products I could easily link to to illustrate my abilities. So, as a seed project, I built this website for a fictional Austin, Texas coffeehouse/bar (a pretty common sight around here).