Projects

Assemble Prototype Repository Screenshot

Assemble boilerplate

Assemble is a static site generator for node.js that provides a massive amount of flexibility to build static sites. It allows you to build full static sites, themes, blogs, documentation or anything else you might want to generate through a template engine like Handlebars.

I will almost always use assemble to build a static site because it makes it much easier to divide a site into components and devise different ways one could break the site. Even a one page campaign site can benefit from being build in a static site generator as it helps with breaking styles into reusable bits too.

Assemble is perfect for prototyping a site out before integrating into a CMS. If you work with a large team of both front end and back end engineers, the code hand off is a lot smoother when handing over markup that has already been componentized.

It also allows you to throw components around and arrange them much easier to iron out any edge cases or things that might break a layout. If you’re full stack and working on a more enterprisey Java or .Net CMS, you may have to compile when you update markup, so testing everything out in a static build first could save you time.

Assemble has changed massively over the last year or so and most of the documentation is still in the process of being updated. Much of it still refers to grunt-assemble, which is great, but lacks many of the new features, and up to date template engines.

I’ve put together a bare bones boilerplate for prototyping sites with Assemble. It’s cleverly named ‘Assemble boilerplate for rapid prototyping‘.

Clone it, scaffold the rest of your project (css pre/post processors, js scrunchers, whatever), and reward yourself for the hours you’ve saved debugging and integrating code. Or use it to make a really cool static site. Just do it.

Check it out here

Watch out soon for a post demo’ing how I use assemble to develop prototypes.

 

With Kindness Screenshot

With Kindness

Ludum Dare 32 came and went and I managed to throw together a little minigame.  I’m getting a little more efficient and my entire build process is starting to mature quite a bit for these jams.

The theme for this Ludum Dare was ‘Unconventional Weapon’, so what better than to hug aliens to death? I came across a few other games with similar mechanics, so while it wasn’t the most unique idea it was a fun little game to build in a weekend.

All the graphics and code are original and built during the compo. I used Phaser.js once again, that framework just gets better and better every day.

It’s missing audio and in-game instructions. I was pressed for time near the end (as just about everyone that ever participates in a game jam), so maybe someday I’ll return and polish a few things.

You can play the game here: With Kindness

Instructions: WASD or Arrow keys to move around, F key to initiate hug, continue pressing F to hug even harder!

Or check out the entry on Ludum Dare here: With Kindness Ludum Dare 32

Read the post mortem here:  This astronaut just wants a friend! A Ludum Dare Post-mortem

Early intro screen to Crash Landing

Crash Landing

Crash Landing (tentative title) is an HTML5 game I created during Ludum Dare 29.  The game is written for the browser in JavaScript with a little help from the Phaser.js game framework.

The theme for Ludum Dare 29 was ‘Beneath the surface’, so I created a simple platformer where you must move fast through the level while the ground randomly explodes beneath you.

I stopped working on Crash Landing after the compo, but recently decided it was an idea worth finishing. As I build the game and refactor the code (it’s a horrifying mess), I’ll be writing about various things I’ve learned about Phaser.js, JavaScript, and anything else I learn along the way over on the blog.

Play the most recent build of the game here: Crash Landing

The code is all available on the GitHub repo.

 

Shatter.js Image Shattering

Shatter.js – Make things explode in JavaScript

Sometimes I feel the need to break things.  We all get that feeling sometimes after a rough day at work, or after a day of dealing with pushy clients, or maybe your cat threw up on your face while you were taking a nap. The point is, we all need to release some steam and take out our frustrations sometimes.

Now, you could pick up the flower vase sitting by your computer-you know, the one that’s been sitting there with the dried out remains of a dead plant in it for the last 2 years-and toss it across the room. But then you have to deal with little shards of glass all over your floor and you’ll have to explain to your roommate that you did not, in fact, just have a psychotic episode.

Aside from that, we now live in a digital world. I imagine most people wake up in the morning and their first instinct is to go straight to the bathroom…and take a picture of themselves in the mirror to post to facetwitgram before they post their daily half eaten breakfast photo.

So what better way than to break stuff digitally? And with today’s hottest new technology, JavaScript!

Shatter.js is a small little library that can help you do just that! Use your JavaScript programming skills to add and image to the dom, give it to Shatter.js and it will return to you your image all nice and shattered and packaged up for you to do with it what you will.

“That sound’s incredible! But, wait, how much is this going to cost me?”, you say.

Well, that’s a great question, and my answer to that is that it’s completely open source and free! Do with it what you will! It’s licensed under the MIT license and available on Github for you to download, fork, branch, pull, push, rm -rf, or whatever you desire!

Check it out on GitHub or view the examples on the project page.

allyconstruction.com screenshot

Ally Construction

I worked with the owner of Ally Construction to launch their web presence. After we worked out their requirements and the needs of their customers, we determined a content management system based on Drupal would be the most effective solution to build their on-line presence quickly and efficiently.

I designed and developed a custom responsive theme with backwards compatibility for older web browsers. I also created icons for the site and selected customer provided images for the site.

After the site was completed and launched, I provided support in the initial site marketing, wrote much of the sites content, and provided off-site search engine marketing. As a result, Ally Construction is ranked very highly in Google and has many first page results for local search terms.

Visit AllyConstruction.com

Technologies: HTML5, CSS, JavaScript, jQuery, PHP, MySQL, Drupal, Responsive design

Satisfying Records screenshot

Satisfying Records

Designed and developed complete website for indie record label Satisfying Records. The site is completely responsive and adapts to both desktop and mobile browsers. It also includes compatibility with older browsers.

I developed a completely custom CMS in PHP utilizing the Laravel PHP framework, enhanced with JavaScript, to allow the critical parts of the site to be updated effortlessly. I also created a simple API to provide the most recent tour dates to other websites in JSONP format.

Visit SatisfyingRecords.com

Technologies: HTML5, CSS, JavaScript, PHP, Laravel, jQuery, Responsive design

A Book

Incremental Reader – a Chrome plugin

Incremental reading is a technique to help retain information you’ve read. The idea is to read small chunks at a time, pull out the relevant ideas, condense them into small memorable chunks of information, and move the information into a spaced repetition system.

For a more in-depth look, check out this article on wikipedia: http://en.wikipedia.org/wiki/Incremental_reading

I’m currently working on building a Chrome plugin that will aid in incremental reading on the web.  The plugin will be loosely based on the method outlined in the wiki article and will include more of my own strategies for learning and retaining information.

Currently the plugin is in an early alpha state.  It’s only part functional at the moment, it’s more like a small storage area for temporary bookmarks.  As it’s still in early alpha, I’ve only released the source on GitHub for developers.

Incremental Reader on GitHub

This project page is in a bit of an alpha stage as well.  Check back later and I’ll be updating with more details and how to install the plugin once it’s released.

TODO:

  • Refactor, add unit tests
  • Create proper feature list & roadmap
Red-Headed Philosopher Coffee Screenshot

Red-Headed Philosopher Coffee

“Cory is a creative web designer that can design you a unique and catchy website. He delivers excellent results at a reasonable cost.” – Steven Webb, co-founder of Red-Headed Philosopher Coffee

Red-Headed Philosopher Coffee is a local Kansas City specialty coffee roasting company. After winning a local coffee roasting competition and becoming a local sensation, Steve from Red-Headed Philosopher Coffee was excited to get his products on the web so his customers could order direct from him and keep up to date with available products. I created a logo based on Steve’s specifications and completely designed the visual look of the redheadedphilosopher.com website. We decided on using the WordPress content management system to enable him to keep the site updated himself. I also provide support for the site and search engine marketing consultations on a regular basis.

Memories by Faria Photography Screenshot

Memories by Faria Photography

Faria is a photographer working out of both Phoenix and LA. She approached me to set up a blog for her to promote her business.  I set up and installed WordPress on a host she had already purchased.

She also wanted to customize the look of the site more to her style.  I edited a base theme and installed some standard WordPress plugins to help her with site maintenance and comments.

This was a super simple project that I was able to complete quickly.  That’s the beauty of WordPress, it’s perfect to launch a simple blog quickly as long as you know all the ins and outs of the system.