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!
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!
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.
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.
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.
A few months back I was interviewed by the developer socila network Koding.
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.
I recently bought 2 raspberry pi computers. One is for home, and one is for the office.
I created a huge snippet library based on the docs for node 10.26. There are 783 total right now (2014-03-25).
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.
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.
PhileCMS now has a new instructional video.
I have created a new app (with the help of Beatrice Law) called Reverse Geocode.
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.
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".
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.
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.
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 (?).
Assemble starter is my starting point for any of my static assemble sites.
I created a plugin to force files to download in PicoCMS.
Sometimes you need to check a file against a md5 hash. This can be annoying. Just look at this output:
grunt-sundown is a wrapper for robotskirt(Sundown) - a C implementation of Markdown
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.
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.
Ever wanted to permanently remove a file from a repo and it's history?
I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind.
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.
I made a dark monokai syntax theme for Atom.
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.
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.
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.
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.
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.
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.
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.
I was recently trying to send an email to a domain I had purchased on GoDaddy but had hosting on Digital Ocean.
After being a upset at the progress with Pico, myself and a developer from Germany(Frank) have developed a fork project.
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.
I created another plugin for Pico CMS. It is esentially a clone of my pyro-sniffer-plugin for PyroCMS.
jQuery.doodal.js is a very simplistic modal plugin for jQuery. It has custom events, allows stacking, and is powered by CSS transitions
I am modifying an open source CMS to use the Phalcon PHP framework, as well as the PHP-Sundown C implimentation of Markdown.
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.
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.
I wrote another small plugin for PicoCMS that actually lets you load files based on the filename. I called it pico_get_by_filename.
I created a new post on WARPAINT about some of the upcoming CMS platforms you may not have heard of. Here is the article.
The markdown logo in SVG vector format. I found this was not that easy to find. So I whipped one up of my own.
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.
I finally finished the conversion of the Kube CSS Framework.
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.
I made a vector version of the logo for NPM. Here is the vector version as a SVG.
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.
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!
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.
Github flavoured markdown field type for PyroCMS.
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.
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.
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.
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.
I needed the CrunchBase logo in a vector so I had to create it from scratch.
I have been building a small project boilerplate for when I am starting new projects. I wrote this small snippet based on this article.
I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something. After a bit of research I have found a way to create custom forms rather easily.
I made a tiny dom selector library called Salt.js.
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!
I somehow managed to find my way into an AngularJS hangout.
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.
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.
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.
UPDATE I created a hosted version of the module generator.
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.
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.
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.
I created another new field type for PyroCMS.
Created another PyroCMS field. This one is for Canadian Provinces and Territories. Here is the github page.
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.
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.
I updated my Chrome packaged app, Clean CSS. Here is the website.
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.
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.
I created a little plugin for zepto.js called Drag & Swap. Here is the github link.
I made my first video about web development. It is a quick video about socket.io and how it works with node and such.
Clean CSS made it into a Chrome Apps Office hours!! So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours.
View Folder Tree in MacOSX Terminal
Picked up my new cards right before Dig London. They have my new favourite emoticon on the back too.
An old flexbox demo I made a while back. It may not be the latest syntax so beware!!
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.
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.
I have released my first node.js-based public repo! It is called Kube-Node-Express.
I recently switched my font in sublime text to the new Adobe font, Source Code Pro.
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.
I wrote this little prototype after seeing the range function in ruby.
Here is a little function that I made for oh-my-zsh. I found myself constantly doing sudo touch app.js && open app.js.
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.
I decided to host my old website because I wanted to show some work with Modernizr.
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.
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.
I have just submitted my demo for the Mozzila Dev Derby. If you like it, please vote. Thank you!
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.
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.
I have made my first WordPress plugin and github project: A WordPress plugin for Swipe.js.
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.
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.
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:
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.