Build A Simple jQuery Questionnaire Tutorial

July 3rd, 2013
Build A Simple jQuery Questionnaire Tutorial

Nothing is ever simple

Recently I had to create what we termed a “wizard.” Basically a set of questions that showed different results depending on the answers. I quickly realized that while the questions themselves were simple, setting them up was not. You have to do a bunch of things, check to see if anything is actually checked (because I used radio buttons), and if not throw an error. If there isn’t an error, which answer did they give, because the results changed depending on what the value was. A whole ton of stuff came up that I didn’t think about until I got into it. Oh, and I never realized that you could put form inputs outside of a form element. You can, and I did. As you will see below. While that doesn’t really pertain to anything, it was something I learned along the way. On to the questionnaire!

The setup

Below you can see the basic HTML for the first question, which by the way is the only one I’ll dive into. There were more, but they were more of the same. First I have the actual question, then two radio buttons to choose from for an answer.

Both inputs have the same name so they are related, but the actual text answer is different, with the value relating to it. If you choose electric guitars, the answer (or value) should reflect that. If the answer is acoustic, well…you get the idea. Right after that is the ‘Next’ button, which would in theory bring you to the next question in the process. Finally, you have the error message, which should be displayed none in the CSS. We don’t want to tell them they are wrong right off the bat, do we?
Read the rest of this entry »

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 »