Always Connect To Starbucks WiFi

Lately, it has been quite difficult for me to connect to Starbucks WiFi. About a year ago, the network would connect pretty quickly, but now it seems like the network is powered by voodoo magic and the will of Satan.

Read More

Lico

I have re-created Pico (github or homepage) using the awesome Luvit framework. Luvit is a LuaJIT wrapper for libuv, of node.js fame. It is called Lico!

Read More

Typeform Vector Logo

Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events, and other general uses.

Read More

Using Node.js in an AppleScript

A few days ago, I wrote an article about how to create a service in Automator to copy the selected file's path to the clipboard while in the Finder.app.

Read More

Copy filepath to clipboard in OSX

At WARPAINT, we use Dropbox for collaborating on our files. This is awesome, but a lot of the times you get some pretty nasty file paths. Especially when you are trying to guide someone to a place where you saved a file.

Read More

The Simple Spam Stopper

For the last year at WARPAINT Media, we have been getting assaulted with spam. Everything from "Chinese Jerseys" and "Super SEO Ultra Elite Package Extreme" offers.

Read More

Flexible SVG Placeholder Images

Do you use placehold.it? It is a great service. The only thing is when you are offline, or you are testing a page that needs a lot of placeholders, it may not be the greatest solution.

Read More

Tips For Using SVGs

I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind.

Read More

Koding Interview

A few months back I was interviewed by the developer socila network Koding.

Read More

Kaenon Vector Logo

Here is another logo. This one is for the Kaenon sunglasses brand. This was very hard to find. It doesn't include the little gradient on the original logo. Maybe I will add that in the future.

Read More

Bash select example

I recently bought 2 raspberry pi computers. One is for home, and one is for the office.

Read More

Sublime Node Snippets

I created a huge snippet library based on the docs for node 10.26. There are 783 total right now (2014-03-25).

Read More

Simple Binder

The other day I was working on a custom form that had a lot of javascript interaction. It got a little too far before I realized I should have been using something like Angular.js. I was looking for a simple one-way databinding library, but I couldn't find anything that wasn't overkill.

Read More

Vim Vector Logo

Here is a beauty. People have been looking for this Vim logo in a vector format for quite some time. There is of course the old logo, but it looks pretty strange. It reminds me of Tron for some reason.

Read More

The Alternative Cms

The Explode Code presentation was last night. I spoke about The Alternative CMS. It was about the problems with Wordpress, why WYSIWYG is hard, and why Flat File and Markdown could be the solution you are looking for.

Read More

Randomly Generate A Password In Bash

When installing or setting up frameworks, in this case I was playing around with Laravel, you usually need to set a session/secret/encryption key.

Read More

PHP WebSocket Chat

About 6 months ago, I made a little socket.io chat app. At the time, this was really only possible with Node.js because the HTML5 WebSocket support was too low.

Read More

Font Awesome SVG Icons

This one was kind of annoying. I was looking for all the font-awesome icons in a nice sheet so that WARPAINT could design some mockups for a client. Well, of course this sheet doesn't exists.

Read More

Groupon SVG logo

Lo and behold, a new vector. This one is for the Groupon logo. This is actually based on another logo that was black. It wasn't very nice, so I picked the Groupon greens from their site and applied them to the background gradient. I also removed the gaudy font gradient and left them as flat white.

Read More

IICRC Vector Logo

Another lost logo, this one is for the IICRC (institute of inspection cleaning and restoration). They are an international cleaning certification institure. Clearly. Here is their vector logo.

Read More

List File Permission Numbers

I wanted to see the chmod numbers for the files in a directory. So I can copy them to the other files. Since I don't want to do that dumb chmod math, I looked for a way to do it easily.

Read More

Easy Command Line Reverse Geocoding

Using this function you can easily reverse geocode an address into a lat and lang position. This uses the jq executable and the Google Maps API.

Read More

Grunt Highlight Plugin

Over the weekend, in a couple hours, I wrote this grunt plugin for Highlight.js. I know that marked does an excellent job of parsing markdown, and can also use highlight, but I wanted something I could use in assemble for HTML parsing or full css/js files.

Read More

Decrypt-Encrypt Functions From Command Line

Preamble I have been reading about encryption and security since the whole NSA/Edward Snowden thing. It is pretty intense stuff. Most of the security comes from the philosophy of "security through obfuscation". What this means, is that you are making it extremely difficult (expensive, time-consuming) to try and look at your "stuff".

Read More

Get Wordpress via Command Line

All the cool kids are using the command line these days. This allows you to run quick commands and little functions that would be too tedious to run with a GUI or just clicking around.

Read More

HostMonster PHPMailer Settings

God Damn!! This one was a b*tch to get right. I have a small plugin for a site that makes doing AJAX contact forms a breeze.

Read More

Github Wiki To HTML

Have you ever wanted to convert a Github wiki to a set of HTML pages? This can be an easy way to generate new gh-pages (github web pages) based on the projects Wiki.

Read More

Phile CMS

After being a upset at the progress with Pico, myself and a developer from Germany(Frank) have developed a fork project.

Read More

Google Drive Flat SVG Logo

Recently we needed a bunch of vector logos for a blog post. So again, in typical fashion, I had to craft a vector logo from scratch. Luckily the Google Drive logo is pretty simple. Just 3 shapes. All trapezoids (?).

Read More

Docracy SVG logo

The other founder of my company (WARPAINT Media) was working on a blog post where we list all the PAAS/SAAS tools that we use. One of them is Docracy. It is a site that shares free legal documents. You can modify and fork them to your own account, they have signing features as well.

Read More

Assemble Starter

Assemble starter is my starting point for any of my static assemble sites.

Read More

pico-download plugin

I created a plugin to force files to download in PicoCMS.

Read More

compare multiple md5 hashes

Sometimes you need to check a file against a md5 hash. This can be annoying. Just look at this output:

Read More

pico-useragent plugin

I created another plugin for Pico CMS. It is esentially a clone of my pyro-sniffer-plugin for PyroCMS.

Read More

jQuery-doodal-js

jQuery.doodal.js is a very simplistic modal plugin for jQuery. It has custom events, allows stacking, and is powered by CSS transitions

Read More

Grunt Sundown

grunt-sundown is a wrapper for robotskirt(Sundown) - a C implementation of Markdown

Read More

Render PHP File With Data

I am modifying an open source CMS to use the Phalcon PHP framework, as well as the PHP-Sundown C implimentation of Markdown.

Read More

Simple HTML5 Notifications

I was playing around with HTML5 Notifications the other day. They are pretty slick! It allows you to essentially send growl notifications to your desktop from the browser.

Read More

Pyro Twitter Widget

I created another widget for PyroCMS. This one is for Twitter. I didn't find one that I liked or thought was very good, so I created my own. This widget actually uses a 3rd party sub-module, for the Twitter authentication, called twitter-api-php.

Read More

Pico Get By Filename Plugin

I wrote another small plugin for PicoCMS that actually lets you load files based on the filename. I called it pico_get_by_filename.

Read More

CMS Watch List

I created a new post on WARPAINT about some of the upcoming CMS platforms you may not have heard of. Here is the article.

Read More

Markdown Logo Vector SVG

The markdown logo in SVG vector format. I found this was not that easy to find. So I whipped one up of my own.

Read More

The $100 Website

I wrote a post on WARPAINT Media about people who ask about getting a website for $100. It isn't an angry rant, although there is some frustration. It is more about courtesy.

Read More

Pico Slider Plugin

I wrote a small plugin for the Pico CMS. I recently discovered a very cool PHP-based CMS called, Pico CMS. This CMS is a no-database flat-file CMS. It is really fast and very easy. There was no real way to handle images in the base version. So I developed a plugin that can list images in a folder. I named it pico_slider but it could probably be named pico_image_list because all it really does is expose an image array to the front-end variables. Here it is on Github.

Read More

NPM logo SVG

I made a vector version of the logo for NPM. Here is the vector version as a SVG.

Read More

Apax apache theme in htdocs

I was tired of looking at the ugly default no-style of the htdocs file listing. I had seen Apaxy theme before and thought it was really nice. But I couldn't figure out how to get it to work with the default htdocs MAMP folder. I tried again tonight, and I got it working without much hassle.

Read More

Disqus Comments

I have finally added a decent comment system to this site. I installed Disqus. It is pretty awesome. I have used it before and it is a great system. I have enabled comments on every post on the site. I may go back and turn some off but for the most part they are enabled by default. You could be really meta and comment on this post about the new comments! wink wink!

Read More

rework-math

I created a plugin for Rework CSS preprocessor to do math. Here is the github repo. It is also my first ever NPM package and it can be found on the website here.

Read More

rework-shade

I created another plugin for Rework that makes it easy to do lighten and darken functions. I called it rework-shade. This package is also available on NPM here. Here is the basic usage.

Read More

PyroCMS UA Sniffer Plugin

This plugin lets you sniff information from the user agent for use in the frontend. I use it for adding classes or conditional loading of partials and templates.

Read More

grunt terminal-notifier setup

I just downloaded the new Mountain Lion, finally. One of the biggest new things is the cool little native notifications akin to growl. I thought it would be cool to get a nice notification when my "grunt watch" task finished. First things first. You need to install terminal-notifier. This allows you to interact with the native OSX notifications system.

Read More

NudeProject - a starting point for simple websites

NudeProject is meant to be a starting point for new landing pages, single-page sites, or even just basic mockups. The point is to get me off the ground quickly. It only provides the most basic things that I need most of the time. These include grunt tasks, normalized CSS, modernizr, and a SVG fallback snippet in javascript. Check out the project on github.

Read More

Detect Animation Events in Javascript

Whenever I am doing animations that have javascript and CSS, most of the time, I want an callback to fire in javascript when the animations are complete. I have used this event for modals and little UI plugins. Normally, I would have a start event(click or touch) that just adds a class that has a CSS animation attached to it. Lets say we have a class called 'on'.

Read More

Startup Canada SVG logos

I had to create these SVGs for the new Spotlander website. They are 2 of them, one for the parent company; Startup Canada. The last one is for the divisions, in this case: Startup London. I figured I would share.

Read More

CrunchBase SVG logo

I needed the CrunchBase logo in a vector so I had to create it from scratch.

Read More

Modernizr SVG Fallback to PNG

I have been building a small project boilerplate for when I am starting new projects. I wrote this small snippet based on this article.

Read More

Custom Google Forms

Update: Google has added the tools to customize a form with logos, colours, fonts, and backgrounds. Use this guide if you want even more custom styles, or if you want to embed the form within another page.

Read More

CSS3 badge logo in SVG

I have been trying to find the CSS3 badge in a SVG format but it wasn’t that easy. The HTML5 one was the first result on google. Now finally I found one. I am posting it here because now I will never lose it!

Read More

April 2013 Redesign!

Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively. Although I only have 2 images for the entire site, the logo and the mobile nav hamburger/menu button. I think the best part is the new code highlighter. It has some cool features.

Read More

Switching to SVG on Grey Nimbus

So I recently bought the Sketch app for Mac. I am using it because I don't have illustrator. But to be honest, it is much better at doing small things. It's been about 2 hours switching the whole thing over and I have to say it is worth it.

Read More

Pyro Swipe.js Module

Yep, another module. This one is for the awesome Swipe.js library. Swipe is amazing because it is touch-capable, lightweight and has no dependencies(no jQuery). This module allows users to create multiple slideshows just by choosing a folder they want to pull the images from.

Read More

Grey Nimbus website

Finally took the time and initiative to launch Grey Nimbus, my business. The website itself is built using FuelPHP. The reason I chose it was because I was curious and it was pretty light weight.

Read More

Pyro Image Select Field

Another PyroCMS field type. This one is called Image Select. Why? Because it does exactly that. It lets you select images. But wait! There is already an image field type. Yes, but that is for uploading images. Sometimes you just want to choose and image you already have. An image drop down is good for this.

Read More

PHP Variables in strings

I have been getting quite annoyed lately when escaping a string to output a PHP variable. So I decided to make a little test so I could see what the best way to tackle this was.

Read More

canadian-provinces-field

Created another PyroCMS field. This one is for Canadian Provinces and Territories. Here is the github page.

Read More

git-website-workflow

I recently switched to using Amazon Web Services for my hosting. It is awesome. Because it(EC2) is just a cloud computer, I can install anything I want and set up any workflow I desire. I recently found an article that was about a website git workflow.

Read More

PyroCMS PageWidgets Field Type

I created another field type for PyroCMS. This one is so you can add widgets on a page-by-page basis instead of area-by-area.

Read More

Clean CSS Updated

I updated my Chrome packaged app, Clean CSS. Here is the website.

Read More

Pyro List Field

I created a list field type for PyroCMS. It allows users to easily add and manage list content. The source code is up on github and avaliable on the PyroCMS store.

Read More

Pyro Image Widget

I created a small image widget for PyroCMS. It allows a user to choose any image in the files as a widget. It also allows you to add a link and a target so it can be opened in a new tab. Here is the github link and the PyroCMS store link.

Read More

Zepto Drag & Swap

I created a little plugin for zepto.js called Drag & Swap. Here is the github link.

Read More

New business cards

Picked up my new cards right before Dig London. They have my new favourite emoticon on the back too.

Read More

Flexbox Demo

An old flexbox demo I made a while back. It may not be the latest syntax so beware!!

Read More

WYSIWYG in PyroCMS Widgets

I have been working on a site that uses PyroCMS. I needed to build a custom widget that had a WYSIWYG textarea. This is what worked for me.

Read More

Letterpress loader in CSS

I recently bought the amazing Letterpress app for iPhone. It truly is gorgeous, and has an amazing UI. It inspired me to make this little doodle.

Read More

Kube-Node-Express

I have released my first node.js-based public repo! It is called Kube-Node-Express.

Read More

Generated Content Article Title

I like jsFiddle. I often use it for prototyping. I might want to see what I can make in css or maybe I want to build a little template. A perfect example, I used it to mockup my work section.

Read More

No Javascript CSS Accordion

I made this today. It's a little CSS-only accordion. It uses the :target selector. The :target selector is rather new. It also has some quirks. It is almost like an onclick without the javascript.

Read More

Target Mozilla-only in CSS

I had some issues in Firefox recently. I was building a complicated “item” in CSS and it looked great in Chrome. I got an email later saying that the sizing was all off for a bunch of things. I thought this was really strange. I went back to the CSS and Chrome and I could not see any issues.

Read More

My Old Website

I decided to host my old website because I wanted to show some work with Modernizr.

Read More

CSS3 Pagebend

I crafted this lil' beauty in class today. It turns out that it is really hard to make transforming elements intersect. At least, I couldn't figure it out.

Read More

CSS Date Card

I am trying to make up for not posting in the last few days. Here is another thing I have been working on. It is a replication of another dribbble post.

Read More

nodelist.each

I was doing a project in vanilla javascript that used querySelectorAll, which returns a nodelist object. I wanted the jQuery each function so that I could add an event listener to each element. It was a school project and no jQuery allowed so I did some research and came up with this little prototype.

Read More

Mozilla Dev Derby

I have just submitted my demo for the Mozzila Dev Derby. If you like it, please vote. Thank you!

Read More

No-Js Image Preview

Using CSS transforms, I was able to build a little image previewer. There is only one image for both the thumbnail and full size view. Scale does wonders.

Read More

Styling Radios and Checkboxes. Redux.

A few weeks ago, or something like that, I made a post about styling your labels to act as checkboxes/radios. I recently saw a post on Dribbble by Mikael Eidenberg which inspired me to make some nicely styled examples of that method in action.

Read More

Making Checkboxes in WordPress options pages

I am in the process of building my first WordPress plugin. Of course I am wildly researching how to do things. One thing that was particularly hard to find was how to use checkboxes in options pages. Here is the solution I used.

Read More

Styling radio and checkbox inputs

Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs. Especially when it comes to radio and checkboxes. I will always prefer using CSS instead of images for obvious reasons. But for radios and checkboxes I normally use images. I usually just make a png sprite and use the :checked selector to move its position.

Read More

Generated content in CSS

I like jsFiddle. I often use it for prototyping. I might want to see what I can make in css or maybe I want to build a little template. A perfect example, I used it to mockup my work section. Since it is just a repeating template, I built the classes and styles in jsFiddle and then just dropped in the php echos. Anyway, here is something I made. It uses generated content. You can use HTML attributes in CSS. This is a classic example:

Read More

Installing Android 4.1.1 Jelly Bean for Nexus S

So I have been flashing ROMs for a while now. I recently installed Jelly Bean 4.1. I used the OTA(Over The Air) version from here. Just make sure you also flash the Simple-Root.zip file. I did not. So I had to root my phone again and then install it. Which wasn't too bad but still annoying.

Read More