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.

Basically you just have a couple things to do after you install the app. Hit the plus sign to locate the folder containing the files you want compiled. In my example, they are .scss files as that is what I am most interested in. Folder shows on the left, the files within on the right. Click on one of the files and you see a set of options pop out on the right. Dynamic Compilation will auto compile for you. If you don’t want that, uncheck it and then you can hit the compile button whenever you need it to. Crazy easy right? Below that are some other options, with the most important one being Compass. You then have a drop down menu to select how you want the output CSS file to be styled (nested, expanded, compact or compressed).

The one thing you do have to change is the output path of the files you are compiling. It seems by default that they will compile into the same folder, which is generally not what you want. All you do, is right click on one of the files, browse to the css file you want it to compile to, and that is it! Open your Sass, LESS or CoffeeScript file you want to edit in whatever editor you want, and when you save…BAM! Compiles for you. Very nicely done, that.

Chrome Remote Preview

Written by Viljami Salminen, which you probably know as an author at Smashing Magazine. Basically Chrome Remote-Preview, once setup, lets your devices all see the same site with the change of a txt file. Type a url in there, save, and all the devices automatically refresh to see the same thing. That way you can view a site on a bunch of different devices all at the same time to see if there are any layout problems. While the functionality is awesome…the “documentation” is written with the assumption that you will just know what to do.

Copy and paste all files to a public Dropbox folder/server/localhost, edit ‘url’ file and wait for devices to refresh. That’s all!

The instructions are so damn vague that is is almost laughable. No sir, it is NOT that simple. At least for an idiot like me who sometimes feels like he is feeling his way through the dark with stuff like this. So below, I’ve written up some instructions using the Dropbox and the Chrome extension method, for you front-end people to get it going as quickly as possible.

1. Download Remote-Preview, and unzip the files
2. I’ll assume you have a Dropbox account: Open Dropbox, and copy all of the files from the unzipped folder into your Public folder in Dropbox
3. Install Chrome Remote-Preview extension
4. In Dropbox, right click on the update.php file in the control folder and copy public link
5. Turn extension on in Chrome and right click on the icon it places in the tool bar to get to the Options
6. Paste in the url you copied
7. In Dropbox again, right click on the index.html file outside of the control folder, and get the public link for that
8. Enter that url in browser on whatever device(s) you want to use
9. In Dropbox, open the url.txt file, and change the url to whatever site you want to look at in the other devices, then save

Now, whenever you change that url in the txt file, and save, it will refresh all the devices. The only issue I see is if you want to just refresh the url of the page you are already on to see a change go through. I’m not sure how to do that since it is looking to see if there is a change to the txt file. Other than that though, it allows you to see any problems on your devices, at the same time. Pretty bad ass little tool, and I believe this will come in handy in the near future.

Coupon Code: webmachine

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.

Seems great on the outside

Obviously installing a plugin is simple, and as usual I didn’t have a problem there. In fact right out of the gate I can say I was fairly impressed. I didn’t have to read any documentation on how to do things because it explains almost everything clearly. Everything looked good, and it had what I needed built in.

Subscription levels

You can set many subscription types for your posts or pages ranging from free to many different subscription payment levels. In my case I needed three: free – which allowed the client to give specific people access, monthly and yearly (which gave a slight discount for choosing a longer subscription). I was easily able to switch my posts to the levels I needed. What was really good was that because there were a lot of posts I can set them all in one go, and then set specific posts to be a certain subscription type if needed. This was a time saver because going in manually through each post would have been very time consuming. I was glad to see this feature included.

What is also good is that you can set each subscription level to be recurring or not. Or set it to expire at a specific date. A lot of though went into this because I ended up using almost all the features within this plugin. I needed a two week trial added later, which was a free subscription but had a set end date of two weeks after registration.

Login widget and registation page

The login widget that you include on your pages looks like a typical login widget, nothing special there. You know the type: username, password, lost password, remember me. What was overlooked is how to style the widget easily. Everything is wrapped, but generically. A bunch of paragraph tags and inputs with no classes, which caused a problem since I needed it to look s certain way. When I tried to style the username textfield it style the other inputs in the same way. Not good. Had to do some trickery to get things to look the way I wanted. If the owner reads this, adding classes to each item within the widget would be great because no one is going to use it the way it looks like by default. So just note that as it stands, this will be difficult.

Paypal Instant Payment Notification (IPN)

There is a long as story here, but I’ll try to make it quick. IPN is basically a message that is sent when a transaction happens. The problem I had, and this was the major flaw in this plugin, was that the page that was being submitted to Paypal, contained the wrong IPN url embedded within it. The transaction would go through in paypal, meaning the user would be charged the subscription amount, but then would fail on the return. So here the person’s credit card is charged, but since the IPN was wrong, they would not be registered with the website. This is very bad. What made it worse is, that embedded url was also overwriting the url I entered into Paypal for this. Enter support.

h3>Support for the win

After I figured this out, and reassuring my client that I would fix this, I instantly got on the plugin’s support page. It is ticket based, which I freakin’ hate, but the owner of the plugin responded fairly quickly. I say that because with this kind of system you are not going to get instant help. But my questions were being answered within 30 minutes or so of being asked, and competently. On top of that, I was notified that the person helping me was the new owner. Always good to deal with the top guy. Of course there might not be anybody below him.

Anyway, the conversation led to a point where I was completely mind blown. Apparently the plugin was being totally redone because the owner felt that jamming code in to fix what it was, was going to be too difficult and rather messy, so they started from scratch. This was where I told him “Look, I just need to get this working. I don’t care about upgrading, and yes I know that would be better in the long run, but I just need this to work NOW”

He then responded “Ya, it won’t work. You’ll have to download the new version, which is in beta, and you’ll have to do some complicated install”

There was a pause there as I just looked at my screen…”So what you are telling me is that the version I have, is completely broken, and the registration will NEVER happen because of the embedded url”

And I’ll give him credit for being honest, because he responded “Basically…yes.”

Many paragraphs later, he helped me get everything upgraded, and it the plugin worked very well. Now, answer me this. If you had paid for a plugin, would you have stuck in there talking with him, or would you go off the hook swearing and bitching him out?

What I do know is that he didn’t back away and not respond. He answered everything, and eventually got me to where I needed to be with the plugin.

Recommendation?

If the owner had not been honest (oh and I shortened the quotes above…a lot more was said) and quick to help, I would have told him to go @#$% himself. If you are dealing with the old version, I feel bad for you. You are basically screwed. BUT…I do indeed recommend WP-Member in the latest version if you are looking for a subscription type plugin. The support is good, even though not instant, and it works the way it should now. It is also incredibly easy to setup and use, even if you are not a developer. Anyone can figure out how to get this working. I applaud the new owner, and am extremely thankful for the amount of time he took to help me.

Coupon Code: webmachine

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.

Installing Node.js

The first thing you have to do is to install Node.js. That part was easy. Of course then I went the stupid route and tried installing Jade through it. Nope, you do that through the command line. The problem of course is I have no real idea of what Node.js is, what it does, or really anything. I just knew I needed it to install Jade.

Installing Jade

This is simple enough. Open a command line prompt and type:

$npm install jade

Install Nodefront

Nodefront is a command-line utility that speeds up front-end development. At least that is what the site says. I’m willing to take the creator’s word for it. What I do know, is this is the one tool I got to work for compiling Jade files. To install Nodefront, go to the command line, and type (note that $ just indicates the command line prompt):

$ npm install -g nodefront

Getting started with Jade

I am certainly not going to go over Jade’s syntax, as you can figure that out on your own by going to the link above. All you really have to do is create a new file with the .jade extension, and start writing your html with the Jade syntax.

To compile the Jade file, go to the command line, browse to your project folder and type this:

$ nodefront compile

If you want to compile ALL of the files in your project, such as in sub directories, type this:

$ nodefront compile -r

Other things you can do

There are a lot of things you can do with Nodefront, like go and get a jquery file. Go to the command line and for example, type:

$ nodefront fetch jquery -v 1.7.2

It will go out on the net and get that file and place it into your project folder. There are also options to tell it what directory to put it in. You can then insert the file into your jade file like this:

$ nodefront insert jquery-1.7.2.js index.jade

You can also minify your js or css if you so choose. And to note, Jade isn’t the only language Nodefront can compile. It does three by default (Jade, Stylus, and CoffeeScritpt), but you can get a bunch of others as well, which are list on the site. Sass being one of them, but I prefer to use Compass for that.

Final thoughts

While Jade eliminates a lot of the clutter and there is less to look at, it is harder for me to actually read. Although I do find it easier than Haml. At least at first glance. I am thinking of doing a redesign of my main website soon, and I might give it a try just to say I did. That will give me a clear picture on whether this is an abstraction I really want to go with. It is the same kind of abstraction that Sass is, and it could save time if you used the watch command to auto compile on change. BUT. The difference is, it almost elimates too much.

Sass adds a lot of features I use, like mixins, variables, nesting, and it’s .scss syntax is basically CSS at its core. Jade, in my case, simplifies the html, but loses its readability probably because my eye is so trained now to read html easily. I will give it a shot, and decide then. It could very well speed things up greatly after you get used to writing and reading it.

One thing that does bother me is the output html. I’m not using Jade like the typical user, and the HTML comes out condensed. No white space or breaks or indents. I have to auto format in my IDE to see if what I wrote is actually what I wanted. I know there is a way to change this, but I am not sure how. If you happen to know, please leave a comment and explain what you have to do.

UPDATE 1/28/13: A big thank you goes out to Karthik Viswanathan, for getting pretty HTML ability into Nodefront. To do so, make sure Nodefront is up to date (1.0 minimum), and create a folder called ‘.nf’ in your project. Yes, with a period. Then create a json file within it, called: ‘compile.json’. Finally, place this code in that file and compile:

{
    "compilerOptions": {
        "jade": { 
            "pretty": true
        }
    }
}

I am all for abstraction in cases like this, but when does it start to get silly? If I was using Jade, Sass, and CoffeeScript to build a project, I might need three command lines open watching for changes to compile. They simplify some things, but do they add a complexity of their own and even out on the benefits? I would say for Sass, it is the ultimate abstraction because the benefits besides the syntax reduction are outstanding. Jade, as an HTML preprocessor…I’m not so sure. But it was fun as hell to figure out how to get the basics of it going.

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.

There has to be an easier way, right?

Sadly, there is not. What I am about to go through is exactly how Magento tells you to do it. IF by any chance, ANYONE…and I do mean anyone has a better method, please for the love of everything that is good, comment on this post explaining how. We would all greatly appreciate and benifit from your knowledge. I am not going to include images, because it is mostly obvious on what to click. If you have questions though, please let me know.

First, I will assume that you have a few CMS Pages created, like About Us, Contact Us, or something like that. Remember we are talking about an info page, not a catagory or product. Follow the below steps exactly. I am using Magento version 1.7.0.2 in case anyone is wondering.

In the Admin Panel:

1. Click on CMS>Pages in the main menu. In the table below you will see a column called URL Key. Find the page you want in the main nav, and write down that key.
2. Click on Catalog>Manage Categories
3. Click on the Root folder in the left sidebar, and then click the Add Subcategory button
4. In the panel that shows up on the write, fill in the Name (which will be the name of the link displayed)
5. Scroll down, and make sure that Is Active, and Include in Navigation Menu are set to Yes
6. For URL Key, if you wrote Customer Serivce in the above Name input, then write: customer-service
7. Click the Save Category button
8. Click on Catalog>URL Rewrite Management in the main menu at the top
9. In the Request Path box, type first word of the category you just created (such as: customer, or about), and click the Search button
10. The page you are looking for will then populate the table…write down the path in the Target Path column for that page (example: catalog/category/view/id/40)
11. Click on that row
12. On the Redirect dropdown, change it to Permanent (301)
13. Click the Save button
14. Click the Add URL Rerwite button on the top right
15. Click the Create URL Rewrite drop down and choose Custom
16. In the ID Path text field, type the URL key you wrote in step 6
17. In the Request Path input, type in path you wrote in step 10
18. In the Target Path input, type in the key you wrote from step 1
19. Redirect dropdown should be set to Permanent (301)
20. Click the Save button

If you then refresh your store page, you should now see your page in the main navigation.

Magento, are you serious?

If you got through half of that without saying “What the F*#@?” Then you are of a different mind than me. I am used to WordPress’ easy to use navigation system. THIS is by far the most ridiculous thing I’ve ever seen in adding a page to a CMS navigation. I find it hard to believe, and I am not the only one after reading some comments on other pages. How can such a powerful piece of software suck so greatly at such a simple thing? Why is there not an easier method? Simply checking “Add to Navigation” should suffice. I am not a programmer, or a Magento pro, but come one, don’t make this more complicated than it has to be. Why are there so many steps? I was extremely frustrated in trying to figure this simple thing out, and the one place I found that wrote the directions out was written very poorly, to the point where I was unsure what exactly it was telling me to do.

I will be very happy if this post helps just one person from going through the anger and swearing that I went through.

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.

<a href="#" class="video-ibanez" rel="#video1" data-idvalue="v1" data-url="Ibanez">Ibanez Guitars</a>

And the div that will contain the video:

<div class="simple_overlay" id="video1"></div>

Now for the javascript, aaaannnnnd then we’ll explain it. Cool? Zang.

$('a[rel]').click(function(){
		var newId = $(this).attr('data-idvalue');
		var videoUrl = $(this).attr('data-url');
		var appendId = $(this).attr('rel');
 
		if ($(this).hasClass('video-ibanez')) {
			var guitarName = "ibanez";
		} else if($(this).hasClass('video-peavey')) {
			var guitarName = "peavey";
		} else {
			var guitarName = "dean";
		};
 
		$('<div class="video-holder">').appendTo(appendId).attr('id', newId).html(
			'<video class="stop-video" height="360" width="640"  controls>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.mp4" type="video/mp4"></source>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.webmvp8.webm" type="video/webm"></source>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.theora.ogv" type="video/ogg"></source>' +
			'<embed src="videos/' + guitarName + '/' + videoUrl + '.swf" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed>' +
			'</video>'
			);
	});

Shiny HTML5 data attributes

Let’s go over the three variables. First off is ‘newId’, which we are setting to the value of clicked link’s HTML5 data attribute ‘data-idvalue. So if you clicked the ‘a’ tag above, newId would be set to ‘v1′.

The second variable, ‘videoUrl, is set to the clicked link’s data attribute ‘data-url’, and finally the third variable, ‘appendId’ is equal to the ‘rel’ attribute.

HTML5 data attributes are cool, and I will quote John Resig, where he says:

“Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page.”

So what am I using them here for? Well, let’s go over the next section, and eventually we’ll get to that. But we need to explain this before hand:

if ($(this).hasClass('video-ibanez')) {
			var guitarName = "ibanez";
		} else if($(this).hasClass('video-peavey')) {
			var guitarName = "peavey";
		} else {
			var guitarName = "dean";
		};

Let’s build the video

This is simply setting a variable based on what class the link that was clicked, has. So if the link clicked has the class ‘video-ibanez’, then the variable ‘guitarName’ is set to ‘ibanez’. If it’s class is ‘video-peavey’, then ‘guitarName’ is set to ‘peavey’. Otherwise, ‘guitarName is set to ‘dean’. Got it? Good.

Now comes the juicey part. Creating the video tags that will be inserted once you click the link.

$('<div class="video-holder">').appendTo(appendId).attr('id', newId).html(
			'<video class="stop-video" height="360" width="640"  controls>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.mp4" type="video/mp4"></source>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.webmvp8.webm" type="video/webm"></source>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.theora.ogv" type="video/ogg"></source>' +
			'<embed src="videos/' + guitarName + '/' + videoUrl + '.swf" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed>' +
			'</video>'
			);

Right off the bat, we create a div element with a class of ‘video-holder’. Done. Where do we stick it? Easy, within a div whose ‘id’ is equal to ‘appendId’. Which if you have been paying attention, was set to the ‘rel’ attribute of the link that was clicked. In this case is ‘#video1′.

Then we’ll give the newly created div an ‘id’, just in case we need it. The attr(), sets the ‘id’ to the variable ‘newId’, which is where…FINALLY…we see the first HTML5 data attribute we used. If you go back and look at the link at the top, you’ll see I set ‘newId’ to be the clicked link’s ‘data-idvalue’ attribute’s value. Which in this case is ‘v1′.

Enter the source tags

Finally we need to build the source and embed tags. The meat of the HTML5 video elements. I’ll go through the first one, and I’m confident you can figure out the others. Because we know you aren’t stupid.

The video tag is the same for any of the video created this way, at least in this case. They all get the same class, height, and width. The source tags though are what determines where the actual videos are located.

Take note here…the mp4 video should go first. This is because of an issue in iOS 3.2 not recognizing anything but the first source element. Now, how many people are actually still using that iOS? Probably not many, buuuut you never no, and it is a simple thing to do. If you have any questions on getting HTML5 video working though, Mark Pligrim kicked ass with this very informative page.

Back to the source element. The only thing we have to worry about is the ‘src’ attribute, so it knows the correct video to play. You will notice that the path starts with ‘videos/’ and then adds ‘guitarName’ to the path. Well, we figured that out when we asked jQuery to find out what the clicked link had as a class. In the given link example, this is set to ‘ibanez’.

Then we add this to the path: the ‘videoUrl’ variable, which was set at the beginning when the link was clicked, to the link’s ‘data-url’ attribute. In this case, that is ‘Ibanez’.

The final path then, when all that is put together, looks like this:

<source src="videos/ibanez/Ibanez.mp4" type="video/mp4"></source>

It then writes the other source elements for the ‘webm’ and ‘ogg’ video types, and one embed element for the flash.

Now get rid of the damn thing

Well, now that we created that, we actually have to remove it. Why? Because we are using one container to hold the ‘video-holder’. And we don’t want to keep adding a bunch of video tags to it each time a link is clicked that triggers this whole thing. We do that easily.

Add a link in the modal to close it (most have that already built in), and when its clicked, remove the ‘video-holder’ element we created to hold all the video information.

$("a[rel]").overlay(function(){
		$('.close').click(function(){
			$('.video-holder').remove();
		});
	});

BOOM! Done.

On the seventh day, the front-end developer took a break

This is just what I had to do, now go use that for something entirely different. I created elements, and used HTML5 data attributes to set variable information. I hope I set your mind going and got you to think a little differently by seeing something you might not have thought of.

If you have used HTML5 data attributes before, leave a comment below and let me and the readers know what you did!

I’m working on a project that required an unordered list. Who the hell cares, right? Well the list was the navigation for a timeline slider. Each block of content on the timeline needed its own list item to move the slider’s position so that the block was centered. The problem though was I didn’t know how many blocks there would be, and I wasn’t sure who would be making the changes later, if there were any. So here is a way to create a list, based on the number of other elements and their ‘rel’ attributes.

I know that barely makes sense, but you will understand once you see what I’m doing. Take a look at the demo…

View Demo

First up, the list, but you’ll notice that the list has no list items in the HTML.

<ul id="myList"></ul>

Pretty simple, yes? Now we need a bunch of elements that will determine the number of list items. We’ll also remember to put a ‘rel’ attribute on each of them.

<div class="content-block" rel="jan2012">There was a lot of snow this month. Plus I had a birthday</div>
<div class="content-block" rel="feb2012">My mom had her birthday.</div>
<div class="content-block" rel="march2012">My son had his birthday.</div>
<div class="content-block" rel="apr2012">Absolutely nothing happened this month</div>
<div class="content-block" rel="may2012">Something might have happened this month, buuuuuut I can't remember</div>
<div class="content-block" rel="june2012">Played a bunch of board games. Anyone a fan of Ascension?</div>

HTML wise, that is about all we need. Now to the fun part. The jQuery. I’ll leave out the styling in this post, because you can do that yourself, you don’t need me for that. Ready? Here we go!

var $contentblocks = $('.content-block');
 
$contentblocks.each(function() {
	var $this = $(this);	
	$('<li>', {
		text: $this.attr('rel')
	}).appendTo('#myList');			
});

That is it. Just a few lines of jQuery and we are up and running. What is happening there? Well, I’m declaring a variable that is all of the content-block divs. Then using the each() function that basically says, “For each of those divs, create a list item, whose text value is equal to the ‘rel’ attribute of the relating div. When you have them all, put them into that unordered list with an id of ‘myList’. Thanks.”

What do you end up with? If you haven’t yet, click the demo button above and you’ll see!

For me, there was a ton more javascipt, because there was a slider involved, a mess of other stuff, and a click event on each of the list items. Speaking of which, if you need them to do something on click, here is what that would look like:

var contentblocks = $('.content-block');
 
$contentblocks.each(function() {
	var $this = $(this);	
	$('<li>', {
		text: $this.attr('rel'),
		click: function() {
			//Do stuff here. Like start phase two of taking over the interwebs.
		}
	}).appendTo('#myList');			
});

There you have it. An easy solution!

So at the final months at my previous job, I was tasked with building an e-commerce site using OpenCart. I’m sure they won’t mind the free advertising, so check out Dental Association Gloves to see what I did. While I was first reading through the documentation, I was a little intimidated by it all. There are tax fields, supply numbers, and SKU numbers, entering all the products…needless to say there is a lot of things that go on in an e-commerce site. Once I was done with it though, I was a lot more confident in my ability to do something like this for a freelance client.

A few weeks ago, I recieved a call from a potential client (which didn’t turn out most likely due to money issues) that wanted to set up an online t-shirt e-com site. The catch was, he wanted to use Shopify. I had heard of it, but never used it so I dove in to see what it was all about by setting up a test account. Below is a short review with my brief time looking through Shopify.

No hosting for you!

The first thing that I looked for was, how do I install this on my server? Is there a one button install with my host, or am I going to have to do this the long way. After logging in to my control panel, I noticed Shopify was not in the easy install list. Damn. Ok, so I went to see how to install it on my server. That was when I got to the “Ah crap.” moment. You can’t. You want to use Shopify? You are on their machine. It also isn’t free, so I was not getting excited about using this cart. I was almost ready to recommend something else to the client, like OpenCart or Magento, but I decided to check it out some more.

Pay the poor bridge toll

The pricing isn’t all that terrible for a small online store. They have $29, $59, $99, and $179 plans which obviously add more features/amount of SKUS the higher the price goes. The most common is the Professional plan, which is the $59 price point. You get 5GB of storage, 2,500 SKU’s, unlimited bandwidth, and the transaction fee is 1% (the $29 plan is 2%). It is hard to tell if their prices are high or not without actually having a real store and using it day in and day out. What I can tell you is that ease of use of their interface justifies a lot of it.

Theming Shopify

Most of you reading this are probably curious about this part. How easy is it to theme Shopify? Easy. Even if you have never used it before, you will understand how to get in and change things, because you are able to get to all of the HTML. You can edit the stylesheet, write your own HTML and javascript…really I don’t think they could have made theming this any better. You can take a look at the image below to get an idea. The main theme template contains the header and footer, while all the other templates contain the content for each page. Which I should mention, you can have an umlimited amount of pages.

On top of being able to access all of the actual code, Shopify has created its own little programming language called Liquid. You can see it in the screenshot above. The documentation for writing it is well done, and actually writing it is not all that hard even if you have no programming skills. Which is good, because you can create a theme for a client without any back end help. Of course you could also just purchase a theme, or get a free one if you wanted to just get your store up and running.

Shipping, taxes and other important settings

I won’t go into much detail here other than to say, getting to these settings are a breeze, and actually setting them up is just as easy. You just need to know your tax rate and shipping fees. Otherstuff includes setting up a payment gateway, and possible order fullfillment. All of this is presented in an easy to understand way. I am very impressed with how Shopify has handled all of these things.

Additional features

Besides being an e-commerce cart, you also get a blog, the ability to add discount codes, and a bunch of what they call apps available in the App Store. Think of these as WordPress plugins. Some are free, some are not, but they all seem to add functionality to your store that can be very helpful. Things like social buttons, to Magento/WordPress importers if you are switching from them to Shopify…really a lot of cool stuff.

Final thoughts

A quick note, because I haven’t mentioned it is that adding products to your Shopify store is stupid easy. This cart seems literally built to be used by the average idiot. Which is amazing. Once you enter your products, you can then add them to specific collections like creating one for “Most Popular Items” or something like that.

I’m having a really hard time trying to come up with anything bad about Shopify, other than you can’t host it yourself and it not being free. Everything else feels intuitive and easy to set up. Theming is done really well, with the ability to add functionality writing in Liquid. There is really not much here to like. I’d be very interested to hear if any of you have used it and come into contact with some downfalls or concerns. So based on what I have seen and done with the limited time I spent in Shopify, I have to say it might very well be my go to cart. Other than price, the lack of hairpulling frustratoin is pretty much worth going with them.

Let me know of your experiences with Shopify!

Coupon Code: webmachine

I consider myself an intermediate level Sass user. I’ve used it enough now to know that I have written some stupid crap in Sass. I’ll take a guess that a lot of others new to Sass have done the same thing because you get excited about the stuff you can do. Like what you ask? Like nested your selectors more than three deep, or creating variables for stupid one word properties even though it would take the same amount of time to write the word out. What? OH FINE! I once created a variable $l: left; Okay? Happy? I don’t know why I did it, but variables in CSS were new to me and I was looking to shorten everything I possible could. Unfortunately it took me just as long to find the ‘$’ symbol as it did to just type the word ‘left’. But with use comes experience, and there are some cool things you can be using, and nothing all that difficult.

Extending is good

I am just finishing up a project, and came to realize that I am not leveraging the @extend directive. It is so stupid easy to use, that I actually am mad that I haven’t used it more, as it would clean up a lot of my CSS. I will plan things out a lot better in my next go at a site that I use Sass with. Anyway, what does @extend do? Well, it sort of creates virtual class. By that I mean a class that isn’t really used anywhere in the markup, but that contains a bunch of properties common to multiple classes. Let me give you an example for a bunch of different buttons.

Note that the below example assumes you are using Compass as well (cause you’d be foolish not to):

	$mainColor: red;
	$secondaryColor: green;	
 
	.buttons {
		@include border-radius (5px);
		padding: 5px 10px;
		color: $fff;
		text-decoration: none;
		font-weight: bold
	}
 
	.backButton a {
		@extend .buttons;
		background-color: $mainColor;
		&:hover {
			background-color: $secondaryColor;
		}
	}
 
	.doneButton a {
		@extend .buttons;
		background-color: #0079C2;
		&:hover {
			background-color: #666666;
		}
	}

This is just an example, but you can create classes to extend others that share common styles. Would I do this if they shared 1 or two properties? No, but three seems to be a good number to really start using @extend to shorten the amount of repitition that can go on in a style sheet.

The Ampersand is Cool

Another common feature of Sass that I think beginners either ignore or don’t really know how to use is the ampersand. I think most of us starting out get the use of it with hover, as you see in the above example, but there is another way to use it, and that is referencing a parent selctor. Where you place the ampersand changes the output of the CSS. Here is a look at a great example I got from The Sass Way:

	h1 {
		color: red;
		.highlight & {
			color: blue;
		}
	}

Which outputs this CSS:

	h1 {
		color: red;
	}
 
	.highlight h1 {
		color: blue;
	}

Now let’s put the ampersand in front:

	h1 {
		color: red;
		&.highlight {
			color: blue;
		}
	}

And you get this output in CSS:

	h1 {
		color: red;
	}
 
	h1.highlight {
		color: blue;
	}

Big difference with just the placement of the ampersand. Everyone will use it when defining pseudo-selectors, but I think a lot of us don’t even know you can use it in this method.

To Each Their Own

Unfortunately I can’t remember where I got this example, but when I saw @each being used in such a simple way, it was mind bottling:). In the below example, I am creating variable called guitarBrands, containing the names of guitar brands. Then I’m using a mixin using @each, that says for each brand in guitarBrands, do something. Once you see the CSS output, you will understand what is happening.

	$guitarBrands: ibanex peavey gibson fender esp;
 
	@mixin guitar-images {
		@each $brand in $guitarBrands {
			.guitar-#{$brand} {
				background: url("images/#{brand}.jpg") no-repeat;
			}
		}
	}
 
	.guitar-info {
		@include guitar-images;
	}

Which gives you this CSS:

	.guitar-info .photo-ibanez {
  		background: url('/images/ibanex.png') no-repeat;}
	.guitar-info .photo-peavey {
 		background: url('/images/peavey.png') no-repeat;}
	.guitar-info .photo-gibson {
  		background: url('/images/gibson.png') no-repeat;}
	.guitar-info .photo-fender {
 		background: url('/images/fender.png') no-repeat;}
	.guitar-info .photo-esp {
		background: url('/images/esp.png') no-repeat;}

Holy crap that is awesome, is it not? Granted this isn’t going to be the most used feature for me, or you most likely, but it just gives you a hint of what you can do with it.

By the Power of Sass!

Sass is awesome. Plain and simple. Out of the three items above, I think the most best in the bunch has got to be @extend. It can cut down on a ton of clutter if used properly, and make things more readable. I think one of the toughest parts in learning Sass, is when to use each feeature. Nesting too deep can get you in trouble, making ridiculous variables is just stupid, and as I found out, and for me, making a mixin for ‘font’ was beyond dumb considering it took just as long to type it out the normal way. Once you get the hang of things and crash your way through your first site using Sass, you quickly realize what you should be doing.

I also recommend reading The Sass Way’s article Sass control directives: @if, @for, @each and @while for more cool stuff. Actually, any article on that site is good.

Let me know if you have any cool tips or tricks using Sass or Compass!

Coupon Code: webmachine

I will admit that I had been just going with the flow and not really excited about things going on in our field for a while. The new job has changed that though. I’m working on a variety of things, and FINALLY learning again. When you are not learning anything new or doing the same repetitive things over and over, things get tedious. Where I’m at now has given me what I needed to recapture. Excitement in what I’m doing. Already I have picked up some new stuff that I didn’t know before, and things are changing again in the technology we use. So I thought I’d share some of this with you.

Adobe Shadow

If you haven’t checked Adobe Shadow out, you should. I even figured out how to take a screen shot with my iPhone so you can see this. There are three things you actually need for this to work: the desktop app (Mac or Windows), the Google Chrome extension, and the free app for your phone (iOS/Android). Once you have all of them installed, its time to try it out. Make sure your phone and computer are on the same network by the way, or it won’t work.

Start the desktop app, then start the phone app, and open Chrome (obviously after you have the extension installed). You should have a little icon that says ‘Sd’ on it now. The Adobe Shadow app on your phone will give you a code number that you enter in the Chrome extension. Once you are connected, you can browse to the site you are working on and view it on your phone.

Now, why is this cool? because you can browse on multiple devices at the same time. You can have an Android phone, the iPhone, and computer all looking at the same time. Whatever you are looking at on your computer will display on the other devices. What is super cool is that you can inspect an element in Chrome, and it will show you inspecting on the phone as well. If you are using media queries, this is helpful. If you are using a framework like Sencha Touch or jQuery Mobile, I am not sure how helpful this is actually going to be, as the structures are going to be totally different. This is because while you are looking at the same site, the devices will show their appropriate version. Still cool and worth messing with.

CSS variables get published as first working draft!

Ask and you shall recieve! While variables is the least of the cool things if you are currently using Sass/LESS, it is at least a step in the right direction for CSS. I’m sure the syntax is going to suck badly, but I’m not going to complain. This was needed. Go read what Tab Atkins wrote about CSS Variables. NOW!

Sass Stuff and more

Couple more items for you to think about, go get. If you find you want to use the Twitter Bootstrap, but want to incorporate it using Sass rather than Less, well you are in luck. Some one has already done it for you and created the Sass Twitter Bootstrap.

Annnnd one last little bit for you. Want to see what your Javascript looks like it CoffeeScript? Dump your code at Js2coffee and see!

That is a lot of cool stuff, so check it all out and let me know what you think about any of it!

Coupon Code: webmachine

So 2012 has already been a busy year. I’ve been working on some freelance projects, but the bigger deal is that I have taken a new position. I don’t like talking about where I work, so don’t ask. I am just not comfortable about putting that kind of info on the web. I do work in the city now (Chicago), so that is a huge change, but I’m very happy with where I’m at. Searching for jobs though was taking up a lot of my time, hence I haven’t been able to write any posts in a while. I am settling in now though, so that will change. Starting today!

Using a Version tool is cool, but a pain in the ass

I have used SVN before, and I never really had a problem with it. Mostly because there was only one person at a time working on something, so nothing bad ever happened. The only worry I really ever had was usually a permissions thing. Now though, I work for a larger company. Many, many people are working on the same projects at different times, which can obviously lead to some issues. Trust me when I say I have found that out the hard way.

Not only am I using Tortoise SVN, but Git as well. I’m using them every day, and I found out that while they do the same kind of thing, Git does not work the same as SVN. Sorry to say, it took me a while to figure everything out, and I probably annoyed a few people asking for help as well. I would have to say this has been my biggest hurdle at the new place, but I think I’m past the major problems I was having.

Getting to use new tools and experimenting

Well, I don’t know if you would call it tools per say, but different ideas than I am used to at work. There are a few big things that have me greatly relieved with my new position. I can use HTML5 stuff at will if it is applicable, and CSS3 stuff without having to worry about using things like PIE. It is refreshing to be at a place that actually embraces what is going on in the industry. Oh, and people love jQuery where I’m at. Trust me, that is new to me.

HTML5 Rocks! Or wait….does it? Crap.

Now back to HTML5 and all its glory. The more freedom I have with the use of the new tags and attributes, the more I realize that I am not a huge fan of the new tags. I’ve used them on my own site, and read about them, but I have really not put a lot of thought into ‘really’ using them. I’ve had to clean up a few pages now and convert them over to using a version of the HTML5 Boilerplate, and look into what tags I should use.

Know what I learned? People are REALLY f’ing confused about when to use them. You ever think about when to use a ‘p’ or ‘ul’ tag? No, because it is so damn obvious when and where you should. It is clear cut with no gray area. How about a section tag though? Go read this article by Louis Lazaris and you will realize he has it about right, saying this:

In short, HTML5′s ‘section’ element could be used in any instance where it contains standalone, non-syndicated, non-aside content whose wrapper is not for styling purposes. In other words: Hardly ever.

Read through the comments of that article and you will get a sense of what I’m talking about. I’ve seen major abuse of the ‘article’ tag as well due to confusion about when to use it. I think everyone gets that one now, but I understand where people can these things wrong. Just look at how the ‘aside’ tag has changed since people started using it. There was a time when it was NOT meant to be used for a tradional sidebar wrapper, but apparently enough people bitched to change some minds.

What bothers me the most is, while adding these new tags to a page, I feel like I am cluttering up my HTML again. Remember when it was get all the styles out and use as little as possible? Well now we are adding things back in.

Do I really need a ‘nav’ tag? I use it, but really I can style the ‘ul’ anyway I want without adding another tag to the mix. I do though, so don’t bitch in the comments. It is even more annoying when you read this article about HTML5 and SEO, because it is saying that Google doesn’t give you any advantage to using it at the moment. Will it? Sure, but who the hell knows when that will happen. Especially since nothing in HTML5 feels like it is written in stone. End of my ramblimg.

What did I take away from 2011 concerning web development?

Responsive web design is huge. I like the simple frameworks that popped up, and I plan on getting more and more into that. More people seem to be getting into CSS preprocessors, and that makes me happy. The more the merrier I say.

I also feel that, while CSS3 stuff is cool in general, it is going to be quite a while before transitions and animations are the norm. It didn’t feel like we got any closer to being free to use any of the crazy stuff. I’m ok with that though.

Really though, I didn’t find 2011 to bring anything ground breaking as I have before. Ya there are some cool ways of doing things, such as responsive layouts, but everything you needed was already there. Nothing new brought to the table, just a cool way of doing things with existing tools.

Anything else interesting I can pass along to my readers?

Yes, two things. I downloaded Sublime Text 2 to give it a whirl. I am liking it a lot. Especially because you can download a package that allows for SCSS syntax highlighting. That and the view pane make it pretty damn cool in my book.

The second thing I can pass to you is Voyage, a SASS and Haml WYSIWYG editor. I am not all that sure what the real value is yet, but it is still cool. You can test out your SASS and get the CSS output, as well as use Haml to template out your HTML. Be warned that I am not sure if it allows SCSS syntax, as it did not seem to when I tried. It does however work with any Compass mixins! Check it out though, its free.

I hope to be writing a more, so stay tuned. Follow me on twitter too and I’ll pass you guys stuff I find interesting.

Coupon Code: webmachine