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 »

jQuery – Creating Elements Part I: Using The each() Function

June 27th, 2012
jQuery – Creating Elements Part I: Using The each() Function

Generating a list

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

Read the rest of this entry »

A Web Developer’s review of Shopify

May 30th, 2012
A Web Developer’s review of Shopify

E-Commerce used to scare me…until now

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.

Read the rest of this entry »

Sass Features Ignored by Beginners

May 22nd, 2012
Sass Features Ignored by Beginners

From Beginner to Intermediate

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.

Read the rest of this entry »

Adobe Shadow, CSS Variables, Sass Stuff and More!

May 9th, 2012
Adobe Shadow, CSS Variables, Sass Stuff and More!

Excited about web development again

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.

Read the rest of this entry »