Tag Archives: jQuery

My Upcoming Posts

Posted on by
Reply

Below you can find the upcoming blog posts on Frontendbook.com with a short excerpt for them. Please come with input if you find some of them more interesting than others.

jQuery Plugin Template

In this article I will show how easily you can write your own plugin template for jquery plugins. Having a template for this eases development and lets you get up to speed quickly. I will also share this template for Textmate so that you easily can use the best editor out there for writing your jQuery plugins.

Extend Google Analytics

In this post I will go into details on how you can extend Google Analytics to better suit your needs. We will look into custom reports, user types, tracking external links, tracking downloads and more. After reading this article you will be able to better track and analyze the behavior of your visitors.

Writing a SEO-friendly Widget

In this article we will go through the steps needed in order to setup a SEO-friendly widget. If someone is willing to put your content on their website, you should thank them, but you should also take the advantage to send some link-juice back to your site with the preferred keywords you are targeting. I show you how.

Piggybacking API-loading

Sometimes you will have to write some generic JavaScript code that can be used in a wide variety of environments, maybe on platforms not hosted by you (read our Writing a SEO-friendly Widget article) or maybe as script used in a plugin on some CMS or blogging platform. Of course you should make use of any of the nice libraries that exists (jQuery, Prototype, YUI, MooTools or Dojo) but at the same time, you should not distribute these libraries as a lot of websites already have them included, and if not better alternatives exists. I show you how.

The Zen of Internal Linking

Why is internal linking important? I see internal linking as way describing your content in a more dynamic and interactional type of pattern, adding usability to the user. Internal linking done right is very close to the first idea of hypertext or hyperlinking. Look at Wikipedia, they have taken internal linking to perfection. This article will discuss the philosophy and zen behind internal linking and discuss why and who users and search engines likes it.

Weekly Best of – Selected Links

Posted on by
Reply

Auto Resize jQuery Plugin

I really like Facebooks implementation of automatic expanding textareas. This auto resize plugin for jQuery helps you add that neat usable effect to your forms.

Typography on the web

Smashing Magazine has a really good list of resources for web typography.

API for Location based on IP

I think we have only seen the beginning of location-based web-apps. This little GeoIP-API helps you geographically locate your visitors.

Screen Scraping with CSS Selectors

This Simple HTML DOM Parser written in PHP makes it easy for you to screen scrape content. For all jQuery and CSS selector fanatics out there, it will be great news for you that it supports CSS Selectors and it supports invalid HTML (if it wouldnt it would be pretty useless).

How to create a leaner User Interface

There is a good list on Webdesigner Depot about different techniques you could use in order to de-clutter your user interface.

Library Independent JavaScript

I found this article by James Padolsey interesting, because I think it is a growing problem. People tend to write jQuery, Prototype now a days, not JavaScript, this is ok for me, but when you are building something that other people will maintain and develop it may be interesting to try to find a development model that are framework agnostic. James has some examples in this article how to create an absctraction on top of your favorite javascript library.

Free Database for IP to Country

Maxmind has free databases for retrieving country and city from the users IP-address. I am using this on a number of websites and believe it is a very good tool for creating more usable web sites and easier to target (and split) advertising.

One Trillion Dollars

One trillion dollars is a lot of money. This article shows you how much it is in real life in volume. Amazing.

Do you have more links I should share or look at? Follow me on Twitter and share your favorite links.

Is it on?

Posted on by
Reply

Pretty funny day today. It all started with Christian Heilmann posting this on Twitter:

Another simple, but very useful and needed web site: http://ismycomputeron.com

And Dion Almaer who runs Ajaxian.com followed up with the question we all had:

We just need a JSON version and then we are all set!

Of course Heilmann wrote a JSON API for this really useful service using YQL and posted it on Twitter.

@dalmaer that what YQL is for. Finally ismycomputeron.com as a jsonp api: http://is.gd/eXyo §

I figured we had to add another level of abstraction to this beast so I wrote a really simple plugin using jQuery making it easy to integrate into your web apps and posted it on Twitter.

@codepo8 Now as a jQuery-plugin http: //jsbin.com/ofiwi

After that Christian felt he had to let the world know about the R&D being done in different parts of the world on the topic “is it on”, so he blogged and tweeted about it.

But I know my script was actually not that good, it was not unobtrusive, and my fellow tweeter icaaq told me friendly but respectfully that:

@hising not the most unobtrusive script I’ve seen though

Even though my feelings were a little bit hurt, I took the time to rewrite the script in order to be more unobtrusive, and now you can find the new version here http://frontendbook.com/sandbox/is-it-on/

What to expect next in the evolution of is-it-on?

  • Widget for blogs
  • Mobile version (an iphone is not a computer right?)
  • Adding configurable options to the script (uppercase, lowercase etc)
  • Adding error handling to script

Whatever, it was good fun. More of that.

jQuery 1.3 Beta 2

Posted on by
Reply

We are getting closer to 1.3. The jQuery team has just released jQuery 1.3 Beta 2.

How to provide feedback:

  • Submit a bug to the jQuery bug tracker (you will need to create an account, first).
  • Be sure to include a simple test case for any problem that you’re experiencing (either attach the test case or provide a link).
  • Mention that you’re testing “jQuery 1.3 Beta 2″ (otherwise your ticket will get confused with another release).
  • Email a link to your test case and bug report to the jQuery Dev list so that the dev team will be notified about your issue.

2009 is the Year of jQuery UI

Posted on by
Reply

I found this post by Karl Swedberg on Learning jQuery interesting.

Two years ago I made the somewhat immodest claim that 2007 would be the “Year of jQuery.” Since then, jQuery’s popularity has grown in ways that none of the core contributors could have imagined. Now I’m ready to make another bold pronouncement: 2009 will be the year of jQuery UI. Here’s why:

Read the full story at Learning jQuery

jQuery UI, ThemeRoller and jQuery 1.3

Posted on by
Reply

jQuery UI ThemeRoller 2

jQuery UI ThemeRoller 2

jQuery UI is coming close to 1.6 and today a new version of the Themeroller application was released. Just before Christmas the first beta of jQuery 1.3 was released for testing.

News in jQuery UI 1.6

  • New classes for error, highlight and disabled states
  • Extended, sprite-based ThemeRoller icon set
  • Class system for adding rounded corners via CSS (Firefox and Webkit, gracefully degrades)
  • New ThemeRoller tool with inspector style view
  • Theme gallery with voting and user-generated themes
  • Improved documentation for generating custom themes and using the class framework

News in jQuery 1.3

  • Selector Engine (Sizzle)
  • DOM Manipulation rewrite
  • Event Namespaces
  • Event Triggering

Unobtrusive Form Enhancements

Posted on by
Reply

I have had an idea for some time, writing a jQuery plugin that enhances the user experience on forms unobtrusively. I started playing with my plugin jForm but development have halted, and I need inspiration. The goal with the plugin is/was to add things such as input elements as labels, out of the box form validation, tooltip for inputs, check-all-check-none functionality and more. The idea is to use classes for bootstrapping the unobtrusive form plugin. The philosophy behind the plugin is to focus more on roles using it as designers, and not as developers, trying to abstract all code away. A lot of the plugins today are very configurable and aims at solving each and every problem that could occur. I believe what designers need are more out-of-the-box functionality with no or very little confguration needed. And if they need more functionality the plugin could expose the possibility to actually do more specified things, but these things should be implemented when requirements exists, not in order to cover all potential problems.

jQuery Plugin for using default value as label

Posted on by
3

Wrote a little plugin for using the default value in text elements as label, you know. Look at the right hand side in the newsletter form for an example.

[sourcecode language='javascript']
$.fn.label = function(options){

var default_settings = {
clearLabels : true
};

var settings = $.extend(default_settings, options);

return this.each(function(){
var elm = $(this);
if($(this).val().length > 0) {
$.data(elm, ‘default’, $(this).val());
elm.focus(function(){
if($(this).val() == $.data(elm, ‘default’)) {
$(this).val(”);
}
}).blur(function(){
if($(this).val() == ”) {
$(this).val($.data(elm, ‘default’));
}
});

if(settings.clearLabels) {
$(this.form).submit(function(){
if($(this).val() == $.data(elm, ‘default’)) {
$(this).val(”);
}
});
}
}
});
}
[/sourcecode]

JavaScript CSS Parser for Custom Properties

Posted on by
7

Wouldn’t it be great to have a generic CSS parser implemented in JavaScript in order to move presentational options to the stylesheet instead of having presentational and behavioural settings it in the markup. I ran across the problem the other week when I was writing a jQuery plugin for grabbing external data using getJSON-function. First I intended to only use an anchor as a bootstrap for the jQuery plugin, that worked well until the designers went Andy Warhol and started saying: Sometimes we want this generic solution to be more generic, and other times we want it to be yellow, and sometimes yellow is just not the colour we are after, yada yada. And I replied: As long as you treat those babies the same when they appear on the same page. But of course they had some crack-brain-solution where they would go bezerk on usability and treat all of these generic items as they were specific, I felt the need for some smart way to adjust the presentation via parameters, and I used John Resigs metadata plugin, which is neat when you need to treat every instance passed to a generic plugin specific. But I was a bit annoyed moving presentation settings to the markup, it would have been neat to have a non-standard css-based stylesheet for handling these kind of issues. Typical plugins that could use such a plugin is of course all lightbox-clones (it would be great to move presentation data such as width, height, position to a stylesheet) and form validation plugins and other plugins that are heavy on configuration.

I do not know if this is a good idea, I have to check for existing solutions and see what the side-effects are? Probably someone have already implemented this, but I have yet to find the solution, otherwise I might as well try to write it (and fight all the potential browser bugs that I am sure will evolve during an implementation of such a solution).