Devirtuoso » development Tools

Minify and Gzip CSS in JavaScript

Shawn — Wed, 21 Sep 2011 13:30:03 +0000

Found a pretty cool site. It allows users to minify and compress both their CSS and JavaScript. So I thought I would just share it with you so you can bask in it’s speed inducing glory.

zBugs

Although still in beta at this point in time, zBugs has an easy to use interface which makes compressing and minifying easy. The coolest thing of all, if you sign up they give you a FREE CDN link to your compressed and minified files…..SWEEET. They also have an xml sitemap generator, which is handy. Be sure to check them out, well worth the look in my humble opinion.

http://www.zbugs.com

Get Users Location With JQuery and Ajax

Shawn — Thu, 02 Sep 2010 18:29:15 +0000

Ever needed to know where your user is from? Ever needed to do it with jQuery / Ajax? Today my friend you are in luck. This article will show you how to get the user’s location using jQuery, Ajax and the users IP.

What are we building?

Our application here isn’t overly complicated. We’re just going to tell our users where they’re from…incase they didn’t know

Download Example

How to do it

We’ll be using a service from ipinfodb.com to get this bad boy off the ground. They offer an api that allows you to pass in an IP and it spits out all the information we need. So all we have to do is tap into this via jQuery and Ajax.

Step 1: Getting the user’s ip address

First thing we need to do is pull in the user’s ip address. We’re just going to use some PHP for this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/**
* Get users IP address.
*
* @return string ip address
*/
function visitorIP()
{
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
$TheIp=$_SERVER['HTTP_X_FORWARDED_FOR'];
}else{
$TheIp=$_SERVER['REMOTE_ADDR'];
}

return trim($TheIp);
}

$ip = visitorIP();

?>

Step 2: The Ajax

Now that we have the users ip, we can use it in ipinfodb’s api. We’ll just use jquery’s ajax to get the information.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Build the URL to query...notice the php ip address at the end.
var url = "http://ipinfodb.com/ip_query2.php?output=json&callback=?&ip=";

// Utilize the JQuery's JSON function
$.getJSON(url, function(data){

//Make sure it processed it okay.
if(data.Locations[0].Status == "OK"){

//Parse the JSON
var location = data.Locations[0]
var city = location.City;
var country = location.CountryName;
var region = location.RegionName

var output = "Your location is: "+ city+ ", "+region+ " "+ country;

//OUTPUT
$('body').append(output);
}

});

The magic lies in the GET variables passed with the ipinfodb’s url.

output = json – specifies which format we want…in this case JSON

callback=? – this is for a javascript callback. Since we’re using jquery’s callback we gave this a value of ?. Alternatively you could pass in a javascript function name and it would call the function for you.

ip = (ip address) – is the user’s ip that you want to look up the location.

The JSON it returns will look something like:

1
2
3
4
5
6
7
8
9
10
11
12

{
"Ip" : "74.125.45.100",
"Status" : "OK",
"CountryCode" : "US",
"CountryName" : "United States",
"RegionCode" : "06",
"RegionName" : "California",
"City" : "Mountain View",
"ZipPostalCode" : "94043",
"Latitude" : "37.4192",
"Longitude" : "-122.057"
}

Notice that it include the latitude and longitude. This is particularly handy with google maps

Hopefully this will help you out. I know I’ve used it numerous times. It’s a simple way to personalize your site. Enjoy.

Download Example

Adding a Twitter Tweet Box to your site.

Shawn — Wed, 25 Aug 2010 13:15:01 +0000

It’s always good practice to make things easy for your users. So why not make it easier for them to update their tweet while visiting your site. This article will show you how to implrement Twitter’s tweet box on your site.

What we’re making

Twitter’s @Anywhere allows you to integrate twitter into your site with little to no trouble. So we’re going to take advantage of that and integrate a tweet box for our users to tweet to their tweeps. (Everything is cooler when you put a “tw” in front of it)

Here is an example of what we are making….WARNING THIS WILL POST TO YOUR TWITTER PAGE…so keep love notes about Justin Bieber to a minimum.

Download Example

Step 1: Get the Key

The first thing we need to do is grab an application key from Twitter…same sort of idea as Facebook, you need it to add any widgets onto your site.

You can get your key at Twitter @Anywhere Dev site, just click on start using it now.

This will ask you to login if you’re not already. After that you’ll have a form to fill out…fun. For what we’re doing you don’t have to fill out much. Give an name to the application, your website url, and be sure to give READ WRITE access.

At the point in writing this I got an error message after I submitted. If you did too, not to worry it still created your application. If you click on the “View Your Applications” you’ll see your newly created application right there. YAY. Click on the app and you’ll see your API Key right at the top.

Step 2: The JavaScript

This is the easy part. All you have to do is cut and paste. Head to the Twitter documentation page. At the top of the page you’ll find the javascript you’ll need to include in your html document. Be sure to put your brand spankin’ new API key in there.

1	<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>

On the same documentation page, about half way down you’ll also find the code for the tweet box, copy and paste that code into your html doc and you’re ready to go.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="tbox"></div>
<script type="text/javascript">

twttr.anywhere(function (T) {

T("#tbox").tweetBox({
height: 100,
width: 400,
defaultContent: "CONTENT HERE>"
});

});

</script>

That’s it! As far as API’s go I’ve always loved Twitter. Facebook has always been a pain up until recently. So enjoy, and be sure to experiment with all the Twitter goodness that @Anywhere has to offer.

Download Example

20 Mobile Device Emulators

Shawn — Wed, 18 Aug 2010 15:52:21 +0000

Mobile websites are becoming more popular, and you need a way to test everything on different phones. Here is a list of emulators that will get you started.

The Emulators

I know I am always looking for emulators, so hopefully this list will help you out.

Six Revisions has a great article on best practices for mobile. Be sure to check it out, that is where I got this list from. Super helpful. Thanks!

Development Tool: Zen Coding

Shawn — Fri, 13 Aug 2010 13:25:11 +0000

Zen Coding is by far my favorite development tool. It makes website development quick and easy, and like the name suggests it instills a state of calm

So What is Zen Coding?

Zen Coding is a variety of snippets to make your life easier. Their demo video explains it all too well.

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

The best part about all of this is how many IDEs it’s available for. There is 21 versions of it in the downloads. Check them out, there is probably one for your favorite IDE.

Be sure to get your copy at Zen Coding’s website. I guarantee you’ll love it. Haven’t met a developer who hasn’t.

Enjoy!

Development Tool: CSS3 PIE for Internet Explorer

Shawn — Thu, 12 Aug 2010 14:12:06 +0000

Gone are the days of using images for rounded corners. With CSS3 PIE internet explorer can now use CSS3 awesomeness.

What is it?

Quite simply CSS3 PIE is a file that you include in your CSS definitions to enable CSS3 styling (rounded corners, shadows, etc.) Internet Explorer is one of the last browsers that doesn’t support it natively, either by browser specific hack or proper CSS3.

Creating Rounded Corners

Here is a quick demo to show how simple it is to implement the htc file.

HTML

1	<div class="sampleBox"></div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.sampleBox{
/* Initial Layout */
display:block;
background:#014A8D;
color:#fff;
width:200px;
height:200px;
border:1px solid #000;

/*Rounded Corners for Firefox*/
-moz-border-radius:10px;

/*Rounded Corners for Safari / Chrome*/
-webkit-border-radius:10px;

/*Standard CSS3*/
border-radius:10px;

/*THE MAGIC...includes htc file for IE*/
behavior: url(PIE.htc);
}

.sampleBox:hover{

-moz-box-shadow: 5px 5px 5px #666; /* FF3.5 */
-webkit-box-shadow: 5px 5px 5px #666; /* Saf3.0 , Chrome */
box-shadow: 5px 5px 5px #666; /* Opera 10.5, IE 9.0 */

/* Don't need to include PIE here because it's inherited.*/
}

Download Example

There is a bit of a delay as the script is run, so it’s not completely seamless. Beggers can’t be choosers though. Also one thing I noticed while working with it, your element needs to be a block element. So if you’re have problems just throw up a display:block to fix any problems. Otherwise a great tool.

For more examples visit CSS3 PIE’s demo page

Be sure to check out the main site as well.

10 Useful jQuery Plugins

Shawn — Wed, 09 Sep 2009 14:07:16 +0000

With project deadlines looming jQuery plugins can help add a lot of functionality in little to no time.
Here is a list of 10 extremely useful jQuery plugins.

Superfish

Should call this one lifesaver. This one is a little more than a plugin. It is a whole menu system. It makes pain in the butt menus easy. I’ve used this one a fair amount.

Visit the Website

HoverIntent Plugin

If you’re doing anything fancy on your navigation this is a must have. It simply adds a delay before triggering the hover event handler. In terms of menus, this means that your submenu won’t pop out when a user accidentally scrolls over it. A must have for horizontal menus.

Visit the Website

Bgiframe Plugin

This one fixes a lot of problems with z-index and form inputs, with little to no effort.

Visit the Website

Tablesorter

It wouldn’t be a project unless there was a last minute request. This one saved my life a couple times. For that I salute you Tablesorter. (It’s a plugin that sorts your tables)
Visit the Website

Cycle

This plugin is a slide show for your images. It has more transitions than you’ll ever use, and a lot of options for customizing.

View the Website

jQuery Easing Plugin

This adds a little flair to your jQuery transitions and ultimately make your website stand out from the crowd.

View the Website

jQuery ThickBox Plugin

There are thousands of lightbox plugins out there. This one is my favorite for jQuery.

View the Website

Curvy Corners

When designers make it there mission to make the roundest website every, this will save you, and you will thank Curvy Corners.

Visit the Website

jQuery Media Plugin

Want to add media to your website? No prob. Plug this bad boy in and you’ll be soaking in the rays in no time.

Visit the Website

PNGFix

This tops my list of most used plugins. Until IE6 disappears, this one is a staple for me.

Visit the Website

jQuery Image Zoom Plugin

Shawn — Sun, 30 Aug 2009 02:46:57 +0000

The imageZoom jQuery plug-in makes it easy to show off your images in an easy and attractive manner.

The jQuery Plug-in

I put this plug-in together for a website that I’m doing. I figured it might be good idea to put it in plug-in form so I can reuse the effect on other websites.

Here is a look at what the website looks like.

Download Example

How to Use It

I tried to make it as simple as possible. You simply have to add a class to an image, and initialize the plug-in in your JavaScript.

Here is a sample page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="screen">
.zoom{
float:left;
}
</style>

<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.imageZoom.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.zoom').imageZoom({captionHeight:40});
});
</script>
</head>
<body>
<img src="image1.jpg" alt="Fan" class="zoom" />
<img src="image2.jpg" alt="Head Stand" class="zoom" />
<img src="image3.jpg" alt="Fail" class="zoom" />
<img src="image4.jpg" alt="Last Pick in Gym Class"class="zoom" />

</body>

</html>

Parameters

When initializing the plug-in you can pass in an object full of parameters to customize the look and feel of the display.

Here is a list of the parameters and what they do:

color – set’s the color of the caption’s text (e.g. “#ff0000”)
bgColor – set’s the color of the box behind the caption (e.g. “#ff0000”)
opacity – changes the opacity of the box behind the caption (e.g. 0.5)
captionHeight – the height of the box behind the caption (e.g. 40)
fontSize – the size of the caption’s font (e.g. “10pt”)
fontFamily – the font of the caption (e.g. “Arial, sans-serif”)

e.g.

1	$(.zoom).imageZoom({captionHeight:40, color:”#efefef”, bgColor:”#369”});

How it Works

The plug-in basically takes the image and wraps it in a div and gives the div the class that the image originally had. It then proceeds to create a background for the caption which is just a div with some CSS. Then it creates the text based on what the image’s alt tag is. This caption is wrapped in a span tag for styling.

So if you started with something like this:

1	<img src="image1.jpg" alt="Caption" class="zoom" />

You’ll end up with something like this:

1
2
3
4
5

<div class="zoom">
<img src="image1.jpg" alt="Caption" />
<span>Caption</span>
<div class="bg"></div>
</div>

Feedback

I would definitely like to hear your feedback on the plug-in. What you like about it, what needs improvement, etc. By no means is this plug-in fully complete. I look forward to hearing your suggestions. Feel free to twitt me any recommendations at http://www.twitter.com/devirtuoso

Download Example

Contributing to the Death of IE6

Shawn — Wed, 05 Aug 2009 03:26:10 +0000

IE6 as every developer knows is a real pain. The website killie6.com has given an easy solution to help drive people away from using IE6. Here is my spin on killie6’s module.

The Idea

I liked killie6’s module, but I think it has to be a little more in your face. Originally I thought having something like a humorous 404 page would do the trick, but that would kill any sort of navigation of your site. So I opted to create a lightbox that pops up if you’re using IE6, make the user feel painfully guilty for using IE6, then give them a way to upgrade right then and there. Hopefully this will get the idea across to users not to use IE6.

Download Example

If you like this idea please download and use it. If you want something less obtrusive go with killie6.com. Something has to be done, the browser is driving everyone CRAZY!…okay maybe not everyone…probably just me.

Adobe Browserlab: Speed up Website Testing

Shawn — Tue, 07 Jul 2009 18:33:07 +0000

Adobe has created a tool to help speed up testing of your website. Right now it’s a free preview, but it’s worth a look.

Abobe Browserlab

What is Adobe Browserlab?

Adobe Browserlab takes screen snaps of your website in different operating systems and different browsers. Allowing you to see how your website looks different in the most popular browsers. Right now Browserlab only handles Internet Explorer and Firefox and Safari. Which pretty well covers the major browsers. Odds are if it looks good in those browsers, it will look good in Opera and Chrome as well.

Features

What impressed me the most about this was the speed at which it captured the images. There are some services out there that do the same thing but can take a fair bit to do. Adobe has done a good job in my opinion in keeping it fast enough that it is usable. Another great feature is the ability to have two captures up at the same time. That way you can compare. Even more impressive, they have an onion skin feature that allows you to overlay two captures on top of one another. Of course all of these have quick keys allowing you to quickly switch between views…slick.

If your a CS4 Dreamweaver user you’re in luck. Browserlab integrates into Dreamweaver giving you access to additional functionality such as testing local and active content.

Overall

All in all it looks very promising. If it had a few more browsers I would make it a staple in my development process. I’m still waiting for the ultimate browser which will allows you to switch between all browser. Until then this does the job.