Next up in our series of short interviews is Karl Swedberg. Karl is the principal author at Learning jQuery and regularly presents and blogs about JavaScript and jQuery.

Editor’s Note: Karl will be hosting a workshop on “jQuery for Designers” at The Future of Web Design New York on November 16-17 2009. You can buy your ticket online now.

For designers that might not of heard of it, what is JQuery?

jQuery is a tool to help designers and developers add interactive elements to their web pages. At the risk of oversimplifying, jQuery’s core feature is a set of commands that enable you to (a) find, or create, elements on a page and (b) do something with them. It’s JavaScript that lets designers and developers avoid the hassles of JavaScript. And since it’s JavaScript, it can do all sorts of stuff without forcing a page refresh.

In your opinion why is JQuery relevant to designers?

JavaScript in general adds another dimension to design, and jQuery makes that other dimension easier to achieve. For designers who are familiar with CSS, writing simple jQuery scripts will feel quite familiar. For designers with Flash experience, jQuery provides a standards-based, non-proprietary, open-source alternative for creating some of the same kinds of effects and interactions as is often done with Flash.

For those considering your workshop at The Future of Web Deisgn New York, what kind of things will you be covering?

I’ll give a quick overview of the jQuery library, and then we’ll look at some practical ways to progressively enhance web sites for better user experiences. I’ll show some techniques for using jQuery to fill in the gaps where CSS, or at least some browsers’ handling of CSS, falls short. We’ll discuss how to put animations to good use and how to avoid their abuse. And we’ll examine a few cool plugins and see how to take advantage of their power and flexibility.

There are a number of really useful plugins available for JQuery. What are the must haves for every designer?

It depends on the needs of the site and often the demands of the client as well. One that I find myself using quite a bit is the Cycle Plugin by Mike Alsup. At its most basic, it’s a slideshow widget that shows images one at a time with a nice transition effect between them. But the plugin is incredibly powerful and gives you the ability to do all sorts of things not just with images but with written content too. It’s particularly nice where a lot of information needs to fit in a small space.

I’ve also begun using the jQuery UI plugin suite quite a bit lately. It makes creating rich user interaction such as drag and drop really easy. Its components are great, too; I’ve used the dialog, tabs, and datepicker in a number of projects.

What do you think is the Future of Web Design?

You mean other than a really cool conference, right? I’m afraid I’d end up looking like an idiot if I tried to predict the future of any technology. In some ways I suppose the future is going to look all too familiar until we can get rid of the albatross of certain legacy browsers. Still, it’s exciting to see what’s going on right now with the newer, better browsers, and I’m hopeful that some of the cutting edge stuff will take root and see more widespread adoption.

The Webkit team is doing amazing things with CSS animations and tapping into hardware graphics to make stunning visual effects. Firefox, Safari, and Chrome have been leapfrogging each other with better and better JavaScript engines — and JavaScript libraries have been tapping into the increased power and performance. We’re seeing more and more use of HTML5 elements such as canvas, audio, and video. Typography on the web is poised to get a whole lot better as progress is being made with font embedding, both on the technical side and the legal side. One thing I can be sure of is that the future of web design is going to surprise me.

There have been a ton of helpful and interesting tips posted to Tipster recently, so I thought we’d pull a few out for you all (and give the submitters a bit of well-deserved publicity).

Topics that we’re covering are: MySQL, CSS, JavaScript, PHP, JQuery, life hacks and server admin.

MySQL Geo Search

Here’s a MySQL statement to search for nearest objects to you in a database, ‘lat’ & ‘lng’ are fields in the ‘items’ table with the location of object and $latitude & $longitude are the users location. The distance field will be the calculated distance in Km between the user and the object:

SELECT *,(((acos(sin((".$latitude."*pi()/180)) * sin((`lat`*pi()/180))+cos((".$latitude."*pi()/180)) * cos((`lat`*pi()/180)) * cos(((".$longitude."- `lng`)*pi()/180))))*180/pi())*60*1.1515*1.609344) as distance FROM `items` ORDER BY distance;

By: Sam Machin
Vote on this tip

Transparent background images – PNG fix for IE6 – a few reminders

When using the MS filter (via The AlphaImageLoader) to fix PNG transparency for IE6 — in your CSS, remember to:

1. Set width and height for the element/s containing the transparent background image.
2. First set background to none — then apply filter for background image.
3. Apply ‘position: relative;’ to any contained links to ensure functionality

(Also, bear in mind that the background images can no longer be tiled or positioned via ‘background-position’).

By: Prisca
Vote on this tip

Address Longitude and Latitude in Google Maps

Google maps does not show the Longitude and Latitude of an address you search. To get this information, enter this piece of JavaScript into you browsers address bar and hit enter:

javascript:void(prompt('',gApplication.getMap().getCenter()));

A little window will then pop-up displaying the Longitude and Latitude for you. Bingo!

[Editor's note: If you add this to your bookmarks toolbar, it's even easier to use. Just click it whenever you're on Google Maps. Hat tip to Phil Balchin.]

By: Pete Roome
Vote on this tip

Custom Details in Code Hints – Zend Studio for Eclipse

Zend Studio is a brilliant platform for PHP development. In my view, well worth the cost. One of the best things about it now being built on Eclipse is the project-wide code hinting.

When you see the built-in code hints and highlight an option, you get loads of lovely details regarding the functions and classes that you are about to use… as you would expect from most modern IDEs. However, Zend Studio for Eclipse takes this further for your own classes and functions!

When you have written your classes and functions, start placing a multi-line comment just above the opening line, i.e. /**, hit Return and Studio will prompt you for data types and descriptions for your method variables.

This is invaluable in understanding those classes you wrote at 3:47am, 3.5 years ago and haven’t used since!

By: Simon Hamp
Vote on this tip

Use a Print Stylesheet

Print stylesheets allow you to change the style of your page when printing, without having to provide a separate “print version” of the markup.

You specify a print CSS by adding “media=’print’” as an attribute to the link tag.

<link rel="stylesheet" type="text/css" media="print" href="print.css"/>

In the print CSS you should remove unnecessary elements such as sidebars, menus, background colours, presentational images, etc so as not to waste ink and paper on parts which don’t need to be printed. You can also change the font and size to make sure the text is clear on the printed page.

You can even add some CSS to show the URLs of links on the page, which wouldn’t normally be seen when printing.

a[href]:after { content: " (" attr(href) ") "; }

By: Rich Adams
Vote on this tip

Make your links easier to read

Instead of using { text-decoration: underline; } on your links (as browsers do by default) use:

{ border-bottom: 1px solid; }.

This makes your links easier to read, as there will be more space between the text and the line underneath, so the line will no longer cross through your ‘y’s and ‘g’s.

You can also then style your underline with all the usual border stylings, much more exciting than a plain underline :)

By: Laura Kalbag
Vote on this tip

Manual filmstrips in jQuery

Really simple manual photo film-strip in jQuery. Used to swap a large image on a page with that of a thumbnail elsewhere on the page, such as different photos of a product in an e-commerce store.


$(document).ready(function(){
imageSwapper(".thumbnails a");
});



function imageSwapper(link) {
$(link).click(function(){
$('#largeimage').attr('src', this.href);
return false;
});
};


Just link the thumbnails to their larger versions and pop them in a div or paragraph of class thumbnails, and give the large image an ID of large image, and you are good to go!

By: Michael Peacock
Vote on this tip

Store user passwords as salted hashes

Just using a hash of the user password is not strong enough. If two users have the same password, they’ll have the same hash. Dictionary attacks are also still possible as the attacker can have a list of dictionary word hashes. Using a salted hash involves generating a random string of characters, which you then concatenate with the password before hashing. Two users with the same password will then have different hashes, and the stored hash will never just be a hash of a common word if the user chose a weak password. You then store the salt, and the hashed value in your database.

hash_to_store = sha1(salt + real_pass)

There are many different methods you could use too, such as concatenating the salt with a hash of the password and then hashing that, etc.

hash_to_store = sha1(sha1(real_pass) + ...

By: Rich Adams
Vote on this tip

CD/DVD stuck in Macbook

Having gotten a DVD stuck inside my Macbook the other day, i found the only way to force eject it was to hold down the trackpad button on reboot. DVD popped right out.

By: Pete Roome
Vote on this tip

Photo credit: flickr.com/photos/mance