jQuery Fly Out Menu Update, And Web Development Goodies

May 18th, 2011
jQuery Fly Out Menu Update, And Web Development Goodies

JC Designs update

I know it has been like a week and a half since I last posted, but my life has been busy. Very busy. Today started out crazy, with a person in the UK wanting 63 psd files sliced and built. Ya, you read that right….63! I thought to myself “Self, this could be some good money.” All had the same outer shell, but the content areas were insanely packed with forms, icons, lists, navs…seriously a ton of work. Was for a online gaming company. You know how she found me? Googled “how to slice a psd” and I showed up on the bottom of one of the pages, she came here, clicked contact…and there you go. The problem? Budget was $1200 and needed it in 2 weeks. I actually felt bad turning that down, but there is no way I was going to go through that stress, and that amount of work for $1200. I was think at the least 5-6k.

Anyway, here is the list of goodies I’ll comment on later:

  • CSS3 -moz-crisp-edges, and -webkit-mask
  • CSS3 Gradient lines under links
  • CSS Regions

Read the rest of this entry »

Web Development In 2011 Part 2: Are We Getting Dumber?

April 28th, 2011
Web Development In 2011 Part 2: Are We Getting Dumber?

Still more no charge awesomeness

Before I start my small discussion on “Are We Getting Dumber”, let me just say that there is yet even more kick ass things that have come out since I wrote the first part of this little series. Sass 3.1.0 came out, and is going by the name of Brainy Betty. It added some neat stuff to its already great ability, like getting the inverse of a color, Sass based functions, keyword arguments, and more. Granted I probably won’t use a lot of it, but it is still cool that it has been updated. You can read about the improvements it received on Sass’ changelog. Just to note as well, Haml and Sass have been separated into two different gems, so you can install them independently now.

Compass received an update as well, going to version 0.11.1. Some things have changed in this new version which might force you to go back and rewrite some things if you update, but I’ll let you know about that when I upgrade this week. I read the change log and a couple of things stand out. First, is that the linear and radial gradient mixins have been deprecated. We’ll use the background-image mixin instead, and pass it a gradient function. Here is an example of the old way (from my site):

#myDiv {
@include linear-gradient(color-stops($orange, darken($orange, 25%)), left); 
}

And what it will look like now:

#myDiv {
@include background-image(linear-gradient(left, $orange, darken($orange, 25%))); }
}

Read the rest of this entry »

Tutorial On Using setInterval To Make A jQuery Rotator

April 21st, 2011
Tutorial On Using setInterval To Make A jQuery Rotator

A combination of things

I was tasked last week with building…well, I don’t know what the hell to call it, but at work we named it “the wheel.” Basically, it is a circle with a bunch of gray icons around it. I needed to get them to change to blue, show a larger graphic with additional content, and change to the next icon after a certain amount of time. When one of the icons is clicked though, the animation has to stop, and show whatever content goes with that icon. I used setInterval to accomplish the rotation through the icons, and pretty much the same jQuery I used on the Portfolio Content Gallery I wrote about. You’ll get a better idea of what I am talking about if you see it. I sped up the rotation so you don’t have to wait as long.

View Demo

I’m still learning Javascript/jQuery, and I have never used setInterval before, so this was a lesson for me as well. Turns out it is actually pretty easy, but I thought I would show you how to accomplish this so you don’t have to do any ridiculous searches like I did.

Read the rest of this entry »

Web Development In 2011 Part 1: There Is No Charge For Awesomeness

April 19th, 2011
Web Development In 2011 Part 1: There Is No Charge For Awesomeness

Better than I expected

We are coming up on May, and I started thinking about what is going on in web development in the past few months. It occurred to me that things are actually better than I thought in terms of what is evolving and being created/used. This could be because of a shift in what I actually read now compared to the last year or two. I am way less worried about trends and what the new flavor of Javascript library is. Which is good. Don’t get me wrong, I read about those things still, but I judge more on how useful they are to me rather than “Everyone is using it, so it must be awesome!” I have noticed a change though on what people are discussing. It seemed like last year it was about cool CSS3 buttons and how to make ridiculous crap with all the new CSS properties, but only worked in one or two browsers. There is still some of that, but the amount of articles about it seems greatly reduced.

Read the rest of this entry »

Compass Gets An App – No Command Line Needed

April 8th, 2011
Compass Gets An App – No Command Line Needed

Another post on what you think about Compass?

Oh shut up. If it wasn’t as bad ass as it is, I wouldn’t write about it. This isn’t really about Compass though. Well…it is, but more about the app that was built for it, so that users don’t have to use the command line. Honestly, if I can figure out how to at least make Compass compile my Sass through the command line, then anyone can. BUT…this makes the whole process of a hell of a lot easier.

Compass made easier

At first, I thought, the command line really isn’t that hard because you only need to know a few commands, why do I need an app to do this? Then I tried Compass.app by Handlino. After trying it out, there is only one reason why I can see someone not wanting to use this product (which only costs $7 by the way), but I’ll talk about that last.

After you have unzipped the file, and opened the app up, all that happens is that a gray version of the Compass logo appears in your task bar. When you click the icon, you get several things you can do, depending on where you are in your project. If you are starting a new one, you have a bunch of different Compass project options you can install. I went with the HTML5 Boilerplate option, since I love using it. The others are: Blueprint, basic Compass Projects, 960gs, or HTML5 Boilerplate. You can see what I’m talking about in the image below.

Compass.app project creation

Read the rest of this entry »