Tag Archives: javascript

jQuery Plugin: Jcrop

Sep 22, 2008 by Matt | Posted in Software & Scripts No Comments

A lot of web apps these days involve images. Twitter, Gravatar, Facebook, you name it. For avatars, sharing photos, or whatever, user-submitted images are a big part of the modern web.

Now, suppose you’re building a web app, and you want to allow a user to upload an image of a certain size or aspect ratio (for whatever your purpose is). Now you can’t guarantee that the user will upload an image of the correct dimensions, and you probably don’t want them breaking your layout by submitting a 1200-pixel-wide image. What do you do?

Provide means for the image to be cropped in-browser. There’s a cool little jQuery plugin called Jcrop that allows users to crop images in browser. It seems customizable enough, letting you re-style the selection box, contstain it to a specific aspect ratio, etc. It works fairly similar to Gravatar’s cropping tool.

CSS and JavaScript: More Files or Less?

Jul 3, 2008 by Matt | Posted in Design 4 Comments

If you do much reading about web optimization, you will have heard people say that you should cram all your CSS into a single large file, and all the JavaScript into another, in order to save on loading times.

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages. (Yahoo Developer Network)

In other places, you will be told that you should separate your CSS into multiple files to make it easier to manage. One for layout, one for typography, one for colors…

Which do you think is a better idea? Personally, I prefer quick loading times. Your users will thank you for faster pages; they don’t care if it’s easy to edit parts of your site or not. Generally I prefer to put all of the main CSS into one file, but on pages that require a large amount of unique styles, I include a separate file with the page-specific styles.

FaceBox: Facebook-Style JavaScript Overlays

Mar 31, 2008 by Matt | Posted in Software & Scripts No Comments

FaceBox DialogLightbox-type DIV overlays have a multitude of uses. If you’re building a web app, or if you are just looking for a way to declutter your blog, you can just sweep elements under the proverbial rug until they’re needed, and then call them back in a “almost-window.”

FaceBox, is yet another way of implementing this functionality, but styled in a similar manner to FaceBook’s pop-up boxes.

FaceBox can display DIVs, images, AJAX-loaded pages, or you can just write content in dynamically via JavaScript. It’s fairly easy to implement the script, though it took me a little bit of tweaking to get all of the images to display correctly (I just had to change a few paths throughout the code).

The JavaScript file is just 6KB, and the 1KB worth of CSS can easily be pasted into your existing stylesheet, or referenced separately. There are also a few assorted images that are required, though they’re mainly under 1K. Also note that FaceBox requires jQuery to function, so you may not want it if you’re a Prototype aficionado.

Display Twitter Statuses via JavaScript

Mar 19, 2008 by Matt | Posted in Social Media 2 Comments

Need to add information from Twitter to a website? I needed to recently, for a project I’m working on, but I wanted to do more than Twitter’s widgets provided. Searching for a viable solution, I discovered Remy Sharp’s Twitter.js.

The script, once included in your page, allows you to use the getTwitters() function to display tweets the way you want them. The statuses are loaded dynamically after the page is done loading, cutting a few seconds off your page load time.

The function has numerous options, as well as a templating variables you can use to display the statuses the way you want. You can show just your tweets (and specify the quantity), or you include your friends’ tweets too. One of my favorite features is the ability to display avatars along with the statuses.

At 3.2k, the script won’t add much to your pages’ loading times either.

When Should You Use AJAX?

Jan 9, 2008 by Matt | Posted in Design One Comment

AJAX, or Asynchronous JavaScript and XML, was probably the most-hyped web programming technique in the last two years. It’s no surprise, as it enables you to do a lot that couldn’t have been done just a few years ago.

AJAX is being used in more and more places, often when it doesn’t need to be…and when it shouldn’t. With all the talk about how you can use AJAX for everything, the real question is when should you.

You should use AJAX in places where it will improve the user experience. One example is with polls. Why should a full pageload be required just to vote in a poll (or view the results)? That’s a waste of your users’ time, and a waste of your server resources.

Do not use AJAX for loading your main content, though. It’s not a good idea. I’ve seen a few sites that have tried it, and it doesn’t work that well. You have to come up with extra solutions for search engines, because they can’t understand your JavaScript trickery (you thought the dreaded “text-only version” link only applied to Flash sites? ). You also cause problems for people using some browsers (Safari, IE5, etc).

Basically, you want to use AJAX for things where an extra pageload would be irritate the heck out of everyone. Suppose you have a star-rating system, like on Netflix. Wouldn’t it be horrible if you had to sit through a page refresh every time you rated a movie? Use your own judgment.

MiniAjax

Jan 7, 2008 by Matt | Posted in Software & Scripts One Comment

Looking for some AJAX scripts? MiniAjax is a gallery of “nice looking simple downloadable dhtml and ajax code.”

The one-page site shows 62 (to date) entries for various useful scripts. There are star-rating systems, modal dialogs, heatmap generators, poll scripts, tabbed interfaces, and more. Thumbnails make the site easy to browse.

If you’re looking for a specific type of script, or if you just want to see what’s out there, be sure to take a look at MiniAjax.

Which Lightbox is Right For You?

Dec 20, 2007 by Matt | Posted in Software & Scripts No Comments

I was going to write a post comparing different lightbox scripts, but it looks like “etc” beat me to it. Which Lightbox is right for you? covers 18+ different scripts for your lightboxing needs.

For those of you who have never heard of the term “lightbox,” it’s a photographic term that has been recycled for web use. A lightbox, in the photographic sense, is a device used for viewing negatives. In the web design area, “lightbox” refers to a script that displays images or other content in an overlay DIV.

Which Lightbox is right for you? This post will help you figure that out.

jQuery vs. Prototype

Nov 20, 2007 by Matt | Posted in Software & Scripts 12 Comments

The two biggest JavaScript frameworks in use are jQuery and Prototype. Until recently, I used Prototype a bit. After having to use jQuery for a recent project, I’ve actually started to enjoy using it. It’s easy to use, and it’s lightweight. I’m probably going to re-code a bunch of things over at NTugo so I can use jQuery there instead of Prototype. It’s a lot better.

Enough of my personal experiences, here are the hard facts:

jQuery

File Size: 21KB

Code Required to Toggle a DIV:

<script type="text/javascript">
$('#mydivtrigger').click(function() {
$('#mydiv').toggle(400);
return false;
});
</script>
<a href="#" id="mydivtrigger">Toggle!</a>
<div id="mydiv">
Lorem ipsum.
</div>

Continue reading →