Cool Web Developer Tools – Koala and Chrome Remote Preview

March 22nd, 2013
Cool Web Developer Tools – Koala and Chrome Remote Preview

Don’t like the command line? Fear no more!

I saw a tweet the other day that told of a way to compile Sass, LESS, or CoffeeScript without using the command line. Enter Koala, a cool little app to help you make the jump to preprocessors as painless as possible. Normally I use the command line and type in ‘compass watch’ and forget about it. It really isn’t that difficult, but a lot of people seem to get scared when confronted with it. If all you want to do is compile, I really don’t see a reason why you shouldn’t use Koala. The interface is incredibly easy, with very few buttons or options. The ones it does have, are the ones you would most commonly use. Take a look at the image below and see what I mean.

Read the rest of this entry »

A Review Of WP-Member – A WordPress Membership Plugin

January 28th, 2013
A Review Of WP-Member – A WordPress Membership Plugin

Nothing is Ever Flawless

The following is a product review of the WP-Member WordPress plugin, which allows you to set up posts and pages to be subscription based. It allows multiple levels of subscription types that can be either free or paid, and supports multiple gateways. I am not getting paid to write this, nor have any affiliation with the product. I am just writing this so that other front-end developers have some information about the plugin before they purchase it.

If you have ever built anything in WordPress and have used anything but a basic plugin, then you will know the frustration of seemingly finding a plugin that sounds great but ends up either flawed , lacking a key feature that you actually need, or just plain broken. I’m not talking about a plugin that does something simple like adding share buttons to your posts. I’m talking about a plugin that actually has features you need to fill in a bunch of settings for. What is usuallly surprising is that the plugin actually costs money which makes the situation even more aggrivating. I think sometimes that we have an ability to work at an extremely high annoyance level compared to the average person. Do me a favor and raise your hand if you have seriously thought about punching your computer monitor. That should be just about all of us. I just counted….there is one guy somewhere in Hawaii that didn’t raise his hand because where he lives counteracts this. Everyone else though was nodding in agreement there. WP-Member gave me these feelings for sure. Let’s not start out with a feeling of hate though, because in the end WP-Member does what I need it to. There was certainly bad, but 1 thing made me stick it out to come to the conclusion that I would use it again. Yes, I just spoiled the rest of the article, but let’s get into some details.

Read the rest of this entry »

Using Jade As An HTML Preprocessor Through Nodefront

September 24th, 2012
Using Jade As An HTML Preprocessor Through Nodefront

No CodeKit for PC…now what?

I have been watching Chris Coyier’s redesign videos and have been learning a lot from the first few I’ve seen. I remembered him talking about using Jade. He hasn’t gone into it in the videos, and I will assume he is not using it in the redesign, but I haven’t gotten far enough to know. What is Jade? It is a template engine that according to the documentation, is heavily influenced by Haml, an HTML preprocessor. You know, take out all the cluttered syntax? Of course Jade can do a lot more, but I was mainly interested in using it for its most basic use. Get rid of some clutter in my HTML.

The main problem though is Chris uses Codekit, which does a lot of cool things, and one seems to be compiling the Jade files into HTML. Unfortunately, CodeKit is only for the Mac with no real hope of ever crossing over. So I needed to find a different way to get Jade to work for me. Not an easy task for someone who has no idea how to even impliment it. After a lot of reading and searching, this is how I got it to work.

UPDATE 1/28/13: Below in the Final Thoughts section I mention that I wish Nodefront could output pretty html (non-condensed). I was informed a short while ago by the creator that it can. See the Update section further down to read how.
Read the rest of this entry »

Magento – Adding CMS Pages To The Main Navigation

September 18th, 2012
Magento –  Adding CMS Pages To The Main Navigation

Magento is NOT WordPress

So recently I have had to dive into learning how to theme Magento. Which is good, because I have always wanted to learn, and while I tried in the past, I just never had the time. You know how it is. Work is providing this opportunity, and I want to share something of my findings with you. One thing in particular, because it is such a pain in the ass. First though, let me start by saying that Magento is NOT WordPress. Obviously, right? I thought though, that some things would be similar. One issue was adding a CMS Page to the Main Navigation. One would think that this would be easy enough to do, but it is not. It is actually extremely frustrating if you have no idea how to do it. For all that Magento is, what it is not is an easy to use content management system. It is a store, which sounds stupid because everyone knows that, but while it does that well, it does some things poorly. If you have had trouble, like me, and searched for the answer, you came across some pages that didn’t explain how to do what you are asking, or gave links to extensions to Magento to do it for you. Here is the quickest way possible to add a cms page to the main navigation.

Read the rest of this entry »

jQuery – Creating Elements Part II: HTML5 Data Attributes

July 13th, 2012
jQuery – Creating Elements Part II: HTML5 Data Attributes

Just when I think HTML5 sucks…

It still annoys the crap out of me, but there are some cool things in there. I just hate when people throw that word around like “We want to redo this flash to be HTML5.” What the hell does that mean exactly? And if you ask them, they have absolutely no idea. Its just a buzz word they are throwing around trying not to sound like they are out of touch. On a current project that I am working on, I came across a problem I needed to solve.

I needed to load videos on a page using the HTML5 video tag, with a flash fall back. The problem though is that there were about ten of them on the page, and the browser was reading the source tags and loading them. If this were just one video, this wouldn’t be a problem, but there were more and it was slowing things down.

The Solution

Which was to load the video on the fly when the flyout was triggered, but I needed to figure out how to get the right video to go with it. This is how I solved it.

As usual we’ll start with the HTML. First we have the link that will open the modal window. You don’t need to see the javascript that actually controls the modal, cause you can figure that out on your own. DO pay attention to the attributes on them.

Read the rest of this entry »