Recently, a friend of mine asked me what we use for managing the backups for our clients. I mentioned that we use mysqldump running on a CRON schedule. He said that he used a paid service for managing all the servers and their backups. He mentioned it sends to an Amazon S3 bucket, and also sends a notification.

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.

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.

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.

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.

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.

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.

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.

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.

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".

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.

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 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 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 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.

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.

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'.

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.

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 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!

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.

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 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 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 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 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.

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 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.