Archive for the ‘Web Development’ Category

Build A Simple jQuery Questionnaire Tutorial

Wednesday, 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?
(more…)

Cool Web Developer Tools – Koala and Chrome Remote Preview

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

(more…)

Using Jade As An HTML Preprocessor Through Nodefront

Monday, 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.
(more…)

Magento – Adding CMS Pages To The Main Navigation

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

(more…)

jQuery – Creating Elements Part II: HTML5 Data Attributes

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

(more…)