If you use Slack, then you have probably noticed the awesome feature they have for generating nice meta data whenever you paste a URL or an image.
If you use Slack, then you have probably noticed the awesome feature they have for generating nice meta data whenever you paste a URL or an image.
Yesterday, a friend emailed me about her Wordpress site acting crazy. For some reason all the site assets weren't loading and were returning 500 errors.
Why Benchmark? Did you know that Apache has a benchmarking tool for testing the HTTP server? It is called ab, and it is pretty great!
Recently, my company had a request to build a series of sites that could handle huge bursts of traffic. I asked some friends of mine, what a good solution for this would be. All of them said Varnish.
Checking if an email is valid should be easy, right? WRONG.
This is little snippet I use all the time when I am building simple flat sites that need a single route for an AJAX request.
How to fix "The URI you submitted has disallowed characters" error.
I have created a package of Sublime Text completions for Phalcon PHP 1.3.*.
A week ago I was tasked with uploading about 20 different videos to a CMS. Normally for the HTML5 Video element to look nice, you should upload a poster image so that there can be something showing before the video starts to play.
Introduction I have had a Raspberry Pi B+ for a while now, and I was looking to setup a very minimal Linux OS. I am sure this would work fine with the Pi 2.
I created a simple application template that helps people get started with Phalcon PHP using a more practical example of the Micro application.
I was trying to find out how to crop-to-fit an image with GD. But there were no examples with Phalcon. There was one post that mentioned using Imagick. The only problem was that you needed to compiled Imagick with --lrf in order to use liquidRescale. This may not be an option on many hosting platforms. For that reason, I wanted to use GD instead.
Finally, I found a good excuse to re-write my old Pyro Module Generator.
This logo was not only impossible to find, because searching for "kijiji vector logo" returns nothing but people wanting to sell vector logos on Kijiji, but it was difficult to trace as well.
AllPasswords is an awesome, free, app for iPhone and OSX. It has a nice, simple interface, there is an awesome password generator, and it has iCloud sync.
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.
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.
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.
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).
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.
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.
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.
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.
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.
I have created a new app (with the help of Beatrice Law) called Reverse Geocode.
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.
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.
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.
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.
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.
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.
After being a upset at the progress with Pico, myself and a developer from Germany(Frank) have developed a fork project.
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 (?).
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.
Assemble starter is my starting point for any of my static assemble sites.
I created a plugin to force files to download in PicoCMS.
I created another plugin for Pico CMS. It is esentially a clone of my pyro-sniffer-plugin for PyroCMS.
Sometimes you need to check a file against a md5 hash. This can be annoying. Just look at this output:
jQuery.doodal.js is a very simplistic modal plugin for jQuery. It has custom events, allows stacking, and is powered by CSS transitions
grunt-sundown is a wrapper for robotskirt(Sundown) - a C implementation of Markdown
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!
Github flavoured markdown field type for PyroCMS.
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 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.
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.
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 needed the CrunchBase logo in a vector so I had to create it from scratch.
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 have been building a small project boilerplate for when I am starting new projects. I wrote this small snippet based on this article.
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.
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 wrote this little prototype after seeing the range function in ruby.
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.
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.