DevKick Blog http://devkick.com/blog Kick-start your web development Wed, 24 Sep 2008 19:00:26 +0000 http://wordpress.org/?v=2.5 en Hello? http://devkick.com/blog/hello/ http://devkick.com/blog/hello/#comments Wed, 24 Sep 2008 19:00:26 +0000 admin http://devkick.com/blog/?p=22 Devkick has been taking a break. A loong break. The team has been up to some heavy client work and this site has not been updated for over three months, except some minor forum posts. Sorry for that.

That said, things are happing around here and we are in need of a re-structure. The next goal is to step down from the bar, take a deep breath and look around to see what this site is all about. It’s about keeping the ambition streamlined with it’s resources and man-power behind the controls.

We have noticed how popular the lab products actually are. Galleria and Tripoli alone stands for over 60% of this site’s visitors. Another 30% is the blog, that only contains around 15 posts. The rest is all of the rest.

In other words: we are not out. Stay tuned.

]]> http://devkick.com/blog/hello/feed/ Design Inspiration: European Graphic Design from 1950-1970 http://devkick.com/blog/design-inspiration-european-graphic-design-from-1950-1970/ http://devkick.com/blog/design-inspiration-european-graphic-design-from-1950-1970/#comments Fri, 30 May 2008 16:08:30 +0000 admin http://devkick.com/blog/?p=21 European graphic design from the early days is a powerful inspiration source for designers all over the world. The new graphic design movement, also known as swiss graphic design or International typographic style that emphasizes cleanliness, readability and objectivity has had a huge impact on all areas of design ever since it was developed in Switzerland in the 50's.

The typical large, straight typography, sophisticated grids systems and a simple, clear message are all useful ingredients when designing web sites as well. So as a casual and relaxed weekend inspiration pack, I have hand-picked a small collection of 32 great posters and other artwork from the golden ages of european graphic design. These are not all very typical swiss style, but many of the designs presented here are clearly inspired by it in, one way or another.

]]> European graphic design from the early days is a powerful inspiration source for designers all over the world. The new graphic design movement, also known as swiss graphic design or International typographic style that emphasizes cleanliness, readability and objectivity has had a huge impact on all areas of design ever since it was developed in Switzerland in the 50’s.

The typical large, straight typography, sophisticated grid systems and a simple, clear message are all useful ingredients when designing web sites as well. So as a casual and relaxed weekend inspiration pack, I have hand-picked a small collection of 32 great posters and other artwork from the golden ages of european graphic design. These are not all very typical swiss style, but many of the designs presented here are clearly inspired by it, one way or another.

André-Franccois Marescotti



Record case by Joseph Müller-Brockman.

Tele Communicate



Belgian poster from 1962

Citroen 1974



One of the beautiful Citroen graphic designs

Design by Max Schmid



Basel 1959 for geigy.

Wanner AG



Designed by MB+Co, Zürich, sometime before 1972.

De Stijl



DeStijl exhibition poster designed by Almar Mavignier 1964.

Wohnbedarf



After the war ended, a new interest swept modern furniture design on to the international market.

Armin Hofman



Graphic design manual by Armin Hofmann

Die Gute Form

Jauna Gaita







Three beautiful covers from the eastern european magazine Jauna Gaita.

Italsider



1968 Magazine Advertisement, Italy

Film Special



1969 Magazine Advertisement, Milano Itay.

Beethoven

Pediatric Assistant

Citroen Advertising



Designed by Grafix Holtman 1976.

Geneve 1976



Sports poster designed by J.F. Calame 1976.

Strawinsky



Joseph Müller-Brockman 1955 design in the series for concert posters for the Tonhalle Gesellschaft Zürich.

Musica viva



Another poster by Joseph Müller-Brockman.

NKF



Piet Zwart design, double page, catalog. This was designed before 1950 (1922) but is worth including because of it’s typographic influence.

Union



Graphics for a Swiss bank.

Der Film



Josef Muller-Brockman was one of the great pioneers in the New Graphic Design movement.

Kunstgewerbemuseum



Design by Jorg Hamburger for the Kunstgewerbemusuem, Citroen, Zurich, Switzerland 1967.

Taptoe Delft

Luigi Franci

Grignani





Two beautiful posters by italian designer Franco Grignani

Europameisterschaft 1974

Nona Triennale

swb



Marcel Wyss 1962

]]> http://devkick.com/blog/design-inspiration-european-graphic-design-from-1950-1970/feed/ Parsing Strings With jQuery http://devkick.com/blog/parsing-strings-with-jquery/ http://devkick.com/blog/parsing-strings-with-jquery/#comments Wed, 28 May 2008 11:21:15 +0000 admin http://devkick.com/blog/?p=20 Regular Expressions is a powerful tool when parsing and validating strings. And combining regular expressions with the simplicity of jQuery selectors can create some fast and useful string parsers. This post will show you a couple of really useful parsers that you can use in various environments, or as a base to create your own.

]]> Regular Expressions is a powerful tool when parsing and validating strings. And combining regular expressions with the simplicity of jQuery selectors can create some fast and useful string parsers. This post will show you a couple of really useful parsers that you can use in various environments, or as a base to create your own.

Regular expressions introduction

Virtually any modern programming language supports regular expressions. Regular expressions are used to parse or match strings with patterns using a certian language that the program intercepts and parses to generate a result. From wikipedia:

In computing, regular expressions provide a concise and flexible means for identifying strings of text of interest, such as particular characters, words, or patterns of characters. Regular expressions (abbreviated as regex or regexp, with plural forms regexes, regexps, or regexen) are written in a formal language that can be interpreted by a regular expression processor, a program that either serves as a parser generator or examines text and identifies parts that match the provided specification.

This article is not meant to be used as a learning tool for how to use regular expressions, instead I will show you how to integrate regular expressions with jQuery to create powerful string parsers.

If you’d like to view the examples right away, here is a HTML sample file.

Extending jQuery with chainable plugins

By offering a simple mechanisms for creating plugins, jQuery can easily be extended with custom methods. We are going to take advantage of that in this article by creating chainable jQuery methods that parses the selector’s html content. Let’s start with A bullet-proof frame for chainable jQuery plugins:

There. The first <script> line simply adds the jQuery core. The second script contains the plugin frame we are going to use. I always wrap jQuery methods and plugins in a private function that uses the $ to reference jQuery to avoid conflicts with other frameworks using the $ sign. Now, let’s add some regular expressions.

First example: strip HTML tags

As a simple first example, let’s create a simple method for stripping out HTML tags from the selector’s content. This is how I would like to use it later on:

$('p').stripHtml();

Ok, so let’s create the core functionality inside the plugin. First we assign a regex to a variable. This regular expression will match all HTML tags, including the tricky <span class=">">:

var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;

Note the gi after the ending slash - they stand for global and case insensitive, meaning that it will match every instance and ignore cases. Continuing with the parser, let’s apply this regex to the selector’s content:

$(this).html(
    $(this).html().replace(regexp,"")
);

Using our expression and the javascript replace method, we now replace the matching HTML tags with nothing (”"). Using the jQuery html() method, we also replace the old html content of the selector with the parsed string. All we have to do now is to wrap it up and add our code into the plugin frame:

(function($) {
    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,”")
            );
        });
        return $(this);
    }
})(jQuery);

Second example: clickable URLs

Using the same principle, let’s create another plugin that matches all URL’s and replaces them with a wrapping anchor link:

$.fn.clickUrl = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'$1‘)
            );
        });
        return $(this);
    }

Note the new regex that matches all URL’s inside the string and the $1 reference in the replace method that brings the first matching paranthese into the replaced string. In this example, we simply bring the matching url and wrap it inside an anchor tag. You might have to escape the quotes with backslashes.

Third example: escape HTML

Escaping HTML can be useful in some situations. As an example, I can definetely see the benefit of doing something like $('pre').escapeHtml() to render HTML tags correctly inside each preformated element. Doing so, there is no need to use a complicated regexp string, instead we can chain several replace methods to match and replace each instance of HTML 2 entities (a normal pre tag is used here to preserve character rendering):

$.fn.escapeHtml = function() {
        this.each(function() {
            $(this).html(
                $(this).html()
                    .replace(/"/g,"&quot;")
                    .replace(/</g,"&lt;")
                    .replace(/>/g,"&gt;")
                    .replace(/&/g,"&amp;")
            );
        });
        return $(this);
    }

Source

I have included all three examples with some simple test strings in a HTML sample file. Just view the HTML source to see how they are implemented and used.

]]> http://devkick.com/blog/parsing-strings-with-jquery/feed/ Modalpreview - Preview Your Comment in a Modal Window http://devkick.com/blog/modalpreview-preview-your-comment-in-a-modal-window/ http://devkick.com/blog/modalpreview-preview-your-comment-in-a-modal-window/#comments Mon, 19 May 2008 19:32:12 +0000 admin http://devkick.com/blog/?p=19 Some people have asked me about the comment preview functionality that DevKick is using in the blog, so I made it into a handy jQuery plugin called Modalpreview.

]]> Some people have asked me about the comment preview functionality that DevKick is using in the blog, so I made it into a handy jQuery plugin called Modalpreview.

Modalpreview image

I got the idea when was looking for a quick way of adding a preview function to the comment form here on DevKick. I wanted something new and did not want to go server-side. I never liked the live preview thing, mainly because I don’t like when stuff happens on the page automatically when I press a key. So I thought, why not just use a modal window to present the textarea as HTML before submitting the form?

That would prove to be a lot harder than it sounds like.

The first problem: fixed positioning in IE

Modal windows would be really easy to implement if it wasn’t for the fact that IE6 is lacking support for position: fixed. Fortunately, I found some expressions that works well enough for producing modal windows, but the vertical centering is still buggy. That’s ok though, we can always specify a top margin for IE from the modal window up to the browser edge. Anyway, here is the key for adding position:fixed to IE:

top:expression(
    ((ignoreMe = document.documentElement.scrollTop ?
    document.documentElement.scrollTop :
    document.body.scrollTop)) + 'px'
);
right:expression(
    ((ignoreMe2 = document.documentElement.scrollLeft ?
    document.documentElement.scrollLeft :
    document.body.scrollLeft)) + 'px'
);

Second problem: IE’s stacking order

I wanted to append the preview div inside the form element to integrate form functionality, but IE said no. IE has it’s own z-index order that I never understood and I believe it’s some crazy relative logic depending on the nearest positioned ancestor etc. So trying to break out the preview div from the form falied miseably in IE, since it was impossible to place it above the overlay and position it fixed in the body center. This is the main reason why I couldn’t have a submit form button inside the preview division, wich leads us to the next problem:

Third problem: the submit() function

I really, really wanted to clone the form’s submit button and append it to the preview division to add a ’submit form’ button under the previewed text. But in order to do that properly, the preview division needed to stay inside the form tag. That proved to be impossible in IE6 as described earlier, so the other option was to add a simple submit() function to a button.

That could have worked, but since many form elements already use the name="submit" attribute, it will effectively disable the integrated submit() function in javascript. Not even a $('form *[name=submit]').attr('name','_submit') would work, since IE maps the form before DOM ready. So no go there.

The result

In the end, I came up with a cross-browser alternative that works pretty good, even if the modal window can’t submit the form. The overlay and preview division is appended to the body in order to always stay on top and centered. I resorted to a simple close button, which is fine since you might want to have a last look to see if you filled in all the other required form fields. You can see it in action just here below.

When dealing with stuff like z-index, fixed positioning and modal windows, IE is a real pain. If any of you can find a cross-browser solution for submitting the form inside the modal window, you would be my hero.

Links:

]]> http://devkick.com/blog/modalpreview-preview-your-comment-in-a-modal-window/feed/ Milestone 01 - 70+ High-End Components for Web Designers and Developers http://devkick.com/blog/milestone-01-70-high-end-components-for-web-designers-and-developers/ http://devkick.com/blog/milestone-01-70-high-end-components-for-web-designers-and-developers/#comments Tue, 13 May 2008 20:52:33 +0000 admin http://devkick.com/blog/?p=18 Here at DevKick we collect high-quality components, sort them into categories and present them on the site with regular updates. But once in a while, we flag our current state and present all components since the previous milestone in a handy blog post with direct links to each component's home page, demo and downloads.

]]> Here at DevKick we collect high-quality components, sort them into categories and present them on the site with regular updates. But once in a while, we flag our current state and present all components since the previous milestone in a handy blog post with direct links to each component’s home page, demo and downloads.

So here is Milestone 01 - a handy collection of hand-picked, quality components sorted in framework/programming categories with the most popular component presented first in each category. Note that these components have been selected and tested during the last three months times to make sure each meets a certain quality criteria. Enjoy!

Tables

Flexigrid image

Flexigrid / jQuery

Flexigrid is a lightweight but rich data grid written in jQuery with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Read more | Demo | Download

TableHover image

TableHover / jQuery

TableHover is a jQuery plugin to highlight table rows and columns when hovering over them.

Read more | Demo | Download

Tablesorter image

Tablesorter / jQuery

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

Read more | Demo | Download

TableKit image

TableKit / Prototype

TableKit is a collection of HTML table enhancements using the Prototype framework that implements row striping, column sorting, column resizing and cell editing using Ajax.

Read more | Demo | Download

Calendars

Calendar image

Calendar / Mootools

Calendar is a MooTools Javascript class that adds accessible and unobtrusive date-pickers to your form elements.

Read more | Demo | Download

Menus

Kwicks for jQuery image

Kwicks for jQuery / jQuery

Kwicks for jQuery is a plugin that simulates the insatiably attractive Mootools effect of the same name.

Read more | Demo | Download

Sliding Dropdown Menu image

Sliding Dropdown Menu / Javascript

This lightweight drop down menu script allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc.

Read more | Demo | Download

Horizontal Image Menu image

Horizontal Image Menu / Mootools

Phatfusion image menu is a horizontal image menu that reveals more of the image as you rollover it.

Read more | Demo | Download

ddMenu image

ddMenu / Mootools

ddMenu is a simple MooTools-based script to create your own context menus using right-click.

Read more | Demo | Download

Accordion image

Accordion / Prototype

Accordion is a well-written accordion script using prototype and scriptaculous.

Read more | Demo | Download

Superfish image

Superfish / jQuery

An enhanced Suckerfish-style menu plugin for jQuery.

Read more | Demo | Download

Digg-like Navigation Bar image

Digg-like Navigation Bar / CSS

This component demonstrates how to design a digg-like navigation bar using a liquid design with rounded corners for links.

Read more | Demo | Download

List Expander image

List Expander / Javascript

Listexpander can be used for any type of content that needs to be organized in some sort of hierarchy and presented as an expandable list.

Read more | Demo | Download

TreeView image

TreeView / jQuery

Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements.

Read more | Demo | Download

Popups

FancyBox image

FancyBox / jQuery

Inspired by many other lightbox-like tools, FancyBox is a image zooming script written in jQuery for those who want something fresh.

Read more | Demo | Download

JavaScript Dialog Boxes image

JavaScript Dialog Boxes / Javascript

Here is a small, lightweight, framework independent and ready-to-use JavaScript dialog box library that offers four dialog styles: alerts, warnings, prompts and success.

Read more | Demo | Download

Window.Growl image

Window.Growl / Mootools

Window.Growl is a simple but handy MooTools component for creating translucent messages that are displayed over the contents of your screen.

Read more | Demo | Download

TJPzoom image

TJPzoom / Javascript

TJPzoom is an image magnifier written in javascript. If you move your mouse over the picture, you can see a little zoom window with a magnified version of a part of the picture in it.

Read more | Demo | Download

Facebox image

Facebox / jQuery

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

Read more | Demo | Download

Shadowbox image

Shadowbox / Javascript

Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating away from the linking page.

Read more | Demo | Download

jqalert image

jqalert / jQuery

jqalert is a Javascript library that uses jQuery to create a compelling alternative to window.alert().

Read more | Demo | Download

Modalbox image

Modalbox / Prototype

ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads.

Read more | Demo | Download

Lightview image

Lightview / Prototype

Lightview was built to change the way you overlay content on a website.

Read more | Demo | Download

photoViewer image

photoViewer / YUI

photoViewer is an updated and upgraded version of a YUI Lightbox. This version offers a more robust API, better performance, greater stability and compatibility.

Read more | Demo | Download

Tooltips

MooFilm image

MooFilm / Mootools

MooFilm is a a tooltip fader for images.

Read more | Demo | Download

Prototip image

Prototip / Prototype

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.

Read more | Demo | Download

Uploaders

FancyUpload image

FancyUpload / Mootools

Swf meets Ajax for beautiful uploads. FancyUpload is a MooTools upload widget thats allows queued multiple-file upload including progress bars.

Read more | Demo | Download

Asynchronous File Upload image

Asynchronous File Upload / YUI

While many people are familiar with YUI Connection Manager’s Ajax capability, only a few know that Connection Manager can be used to simulate Ajax-like file upload.

Read more | Demo | Download

Charts

amCharts Pie & Donut image

amCharts Pie & Donut / Actionscript

Pie & Donut is a very universal and fully configurable Flash chart. Using it, you can easily have good-looking, animated pies or donuts on your website. You can also use it for creating elaborate navigation menus.

Read more | Demo | Download

MooWheel image

MooWheel / Mootools

MooWheel is a javascript connections visualization library written in MooTools.

Read more | Demo | Download

GoogChart image

GoogChart / PHP

GoogChart is an easier way to create charts out of data using the Google Charts API and PHP.

Read more | Demo | Download

fgCharting image

fgCharting / jQuery

fgCharting is a jQuery script for visualizing HTML table data with the canvas element.

Read more | Demo | Download

TableToChart image

TableToChart / Mootools

TableToChart is a MooTools script that can take a HTML table source and automatically draw a graphic chart based on the table data.

Read more | Demo | Download

Flot image

Flot / jQuery

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

Read more | Demo | Download

Ajax

History image

History / jQuery

This useful jQuery plugin helps you make your Ajax-driven page available for “Go Back” button and “bookmark” of browser.

Read more | Demo | Download

Drag and drop

EasyDrag image

EasyDrag / jQuery

EasyDrag is a jQuery plugin that adds the ability to drag and drop almost any DOM element without much effort.

Read more | Demo | Download

Drag. Drop Lock. image

Drag. Drop Lock. / Mootools

Drag Drop Lock is a MooTools example on how to create a user interface where you can drag a box and drop+lock it inside another box.

Read more | Demo | Download

User Interface

Mocha UI image

Mocha UI / Mootools

Mocha is a web applications user interface library built on the Mootools javascript framework.

Read more | Demo | Download

Tags

Tag Suggest image

Tag Suggest / jQuery

If you’re familiar with del.icio.us you will be familiar with the tag suggesting as-you-type support.

Read more | Demo | Download

Ratings

Starbox image

Starbox / Prototype

Starbox as a prototype component that allows you to easily create all kinds of rating boxes using just one PNG image.

Read more | Demo | Download

Forms

MarkItUp! image

MarkItUp! / jQuery

MarkItUp! is a JavaScript plugin built on the jQuery library that allows you to turn any textarea into a markup editor.

Read more | Demo | Download

Auto-Growing Textarea image

Auto-Growing Textarea / jQuery

This plugin was inspired by Facebook’s auto-expanding text areas and makes it easy to have auto-growing textareas.

Read more | Demo | Download

Securimage PHP Captcha image

Securimage PHP Captcha / PHP

Securimage is an open-source free PHP Captcha script for generating complex images and captcha codes to protect forms from spam and abuse.

Read more | Demo | Download

TextboxList image

TextboxList / Mootools

TextboxList is a MooTools component that can create an input field that resembles the famous Apple Mail to: textfield as seen on Facebook.

Read more | Demo | Download

Styling File Inputs image

Styling File Inputs / CSS

File inputs are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire.

Read more | Demo | Download

jQuery Validation image

jQuery Validation / jQuery

The ultimate goal of this plugin is to make working with forms more fun for anyone. By improving the interaction, it is easier and less annoying for the user to fill out the form and submit it.

Read more | Demo | Download

Easy Field Validation image

Easy Field Validation / Prototype

The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

Read more | Demo | Download

Password Strength Meter image

Password Strength Meter / Javascript

Password Strength Meter is a javascript designed to assess the strength of password strings.

Read more | Demo | Download

Textarea Resizer image

Textarea Resizer / jQuery

Textarea Resizer allows the user to extend the textarea element/area within the web page whenever they feel.

Read more | Demo | Download

PasswordMeter image

PasswordMeter / Ext

A password field with strength meter using ext forms.

Read more | Demo | Download

Flash TA image

Flash TA / Actionscript

FlashTA is a WYSIWYG replacement text area for HTML forms using flash.

Read more | Demo | Download

Effects

Reflection.js image

Reflection.js / Javascript

Reflection.js uses unobtrusive javascript to add reflections to images on your webpages.

Read more | Demo | Download

Cornerz image

Cornerz / jQuery

Cornerz is a bullet proof corners plugin for jQuery using Canvas/VML.

Read more | Demo | Download

ColorBlend image

ColorBlend / jQuery

ColorBlend is a robust jQuery plugin that can fade objects from one color to another.

Read more | Demo | Download

Speech Bubbles image

Speech Bubbles / CSS

Speech Bubbles is a CSS technique to create dynamic speech bubbles using CSS. Works great for blog comments.

Read more | Demo | Download

Asciify image

Asciify / Actionscript

Asciify is an actionscript class to render ascii art from pictures using AS3 in real time.

Read more | Demo | Download

TweenLite image

TweenLite / Actionscript

A Lightweight and fast Tweening Engine written in actionscript.

Read more | Demo | Download

Flipv image

Flipv / jQuery

Flipv is a jQuery script that lets us display vertical text in an accessible way.

Read more | Demo | Download

Color Pickers

mooRainbow image

mooRainbow / Mootools

mooRainbow is a Javascript color picker written in MooTools that allows you to visually choose and use colors from a HSL spectra.

Read more | Demo | Download

ColorPicker image

ColorPicker / Prototype

This prototype color picker mimics Photoshop color picker by layering transparent images.

Read more | Demo | Download

Utilities

jQuery File Tree image

jQuery File Tree / jQuery

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

Read more | Demo | Download

Feedwriter image

Feedwriter / PHP

Feedwriter is a universal feed generator written in PHP that supports RSS 1.0, RSS 2.0 and ATOM.

Read more | Demo | Download

PHP Mailer image

PHP Mailer / PHP

PHP Mailer is a PHP email transport class featuring file attachments, SMTP servers, CCs, BCCs, HTML messages, word wrap, and more.

Read more | Demo | Download

imgAreaSelect image

imgAreaSelect / jQuery

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

Read more | Demo | Download

MooCrop image

MooCrop / Mootools

MooCrop is an Image Cropping utility using the mootools javascript framework. Alone it serves no practical purpose but used in conjuction with a server side script becomes a powerful image manipulation tool.

Read more | Demo | Download

SyntaxHighlighter image

SyntaxHighlighter / Javascript

SyntaxHighlighter is a Javascript that makes it possible for web site authors to post code snippets and have it look pretty without preprocessing on the server.

Read more | Demo | Download

EXIF Reader image

EXIF Reader / Javascript

Javascript EXIF reader is a small library capable of reading EXIF data from JPEG images.

Read more | Demo | Download

Feeds

SimplePie image

SimplePie / PHP

SimplePie is a PHP library for parsing RSS and Atom feeds.

Read more | Demo | Download

Data

Taffy DB image

Taffy DB / Javascript

Taffy DB is a free and opensource JavaScript library that acts as thin data layer inside Web 2.0 and Ajax applications.

Read more | Demo | Download

]]> http://devkick.com/blog/milestone-01-70-high-end-components-for-web-designers-and-developers/feed/ Tripoli Beta http://devkick.com/blog/tripoli-beta/ http://devkick.com/blog/tripoli-beta/#comments Thu, 08 May 2008 18:08:04 +0000 admin http://devkick.com/blog/?p=17 Tripoli, the generic CSS standard for HTML rendering, have reached the Beta stage. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

So, what’s new in the beta?

There are many new things in Tripoli. I have listened to the public voices from people using it in real world projects during the last 6 months and the result is even more stable, generic and dynamic. Here’s a quick run-down:

  • no more print styles
  • a brand new layout plugin
  • more ways of implementing Tripoli to simplify installation
  • hundreds of tiny corrections since the alpha
  • even less specific styles in the base component, expand tripoli as far as you need
  • the heavy IE expressions in the late alpha has been removed for better performance

Tripoli is the same as before, only much better and more dynamic. If you are using tripoli today and would like to upgrade, you should be able to do so without any major issues.

Read more and try it out in the Tripoli project page. If you are new to Tripoli, you might want to check out two earlier blog posts as the project was initiated: Introducing Tripoli and Tripoli Beta in Development

]]> http://devkick.com/blog/tripoli-beta/feed/ The Visual Active State: Popular Techniques and Examples http://devkick.com/blog/the-visual-active-state-popular-techniques-and-examples/ http://devkick.com/blog/the-visual-active-state-popular-techniques-and-examples/#comments Fri, 02 May 2008 18:34:02 +0000 admin http://devkick.com/blog/?p=16 A menu with a visual active state is a popular technique on web sites for obvious reasons. This article aim to explain how some popular techniques are used to achieve an active state, including a digestion of our latest laboratory project called :path. It will also show you some simple examples of different visual approaches, including some very popular sites that doesn't use active states at all.

]]> A menu with a visual active state is a popular technique on web sites for obvious reasons:

  1. It gives the user a clear signal of where he/she is on the site, especially for visitors coming from a search engine or deep link
  2. It can be attractive and signal a well-structured and balanced site
  3. Used carefully, it can replace the classic breadcrumb trail.

This article aim to explain how some popular techniques are used to achieve an active state, including a digestion of our latest laboratory project called :path. I will also show you some simple examples of different visual approaches, including some very popular sites that doesn’t use active states at all.

Is active states on navigation anchors crucial? Should you always use them or are there cases when it is not such a good idea? Use the comments form to discuss the topic.

Examples of active state techniques

Del.icio.us

The minimalistic del.icio.us has the most basic form of active state:

By using server-side logic, delicious removes the anchor on active menu items, producing a black non-linked text. This is the most basic form of active states, but rarely used:

<a href="/devkick">your bookmarks</a></strong> | <a href="/network/devkick">your network</a> | subscriptions | <a href="/for/devkick">links for you</a> | <a href="/post/" id="new-post">post</a>

The disadvantages:

  • Relies entirely on server side logic.
  • If your site has pages on several levels, you cannot use the main nav to go back to parent pages.

The advantages:

  • The solution works without javascript and CSS
  • Less markup.
  • If your site is only two levels deep, the main nav represent the current page and becomes un-clickable, which may be a good thing according to Nielsen.

Domänhanteraren

The swedish site for domain handling has a left-side menu with a blue active state:

If you look at the source code, you’ll see that they have gone the server-side route by adding a class="cur" to the active menu anchor:

<ul id="leftNav">
	<li><a href="/start/login">Logga in</a></li>
	<li><a href="/start/info">Begär inloggningsuppgifter</a></li>
	<li><a href="/start/create" class="cur">Skapa konto</a></li>
	<li><a href="/start/welcome">Om Domänhanteraren</a></li>
	<li><a href="/start/idn">IDN-konverterare</a></li>
</ul>

And here is the CSS that controls the active menu item:

#bodyWrap #leftWrap #leftNav li a.cur {
	background-color: #006699;
	color: #FFFFFF;
	background-image: url(../images/cur.gif);
	background-repeat: no-repeat;
}

By simply adding a “cur” class to the active anchor, you can style it like an active state using CSS. This is a solid technique, but not perfect.

The disadvantages:

  • You need extra markup in the HTML source.
  • There is a link to the current page that might confuse inexperienced visitors, especially if there is a form on the page.
  • You will depend on rather complicated server side logic to control the active state.

The advantages:

  • The solution works without javascript
  • The extra markup required is minimal

Smashing Magazine

The popular web blog Smashing Magazine has a top-menu that directs visitors to different categories of the site that has an orange active state:

Smashing uses a similar technique as above. Here is the (stripped) HTML source:

<body id="showcases">
<div id="header">
<ul>
	<li><a title="Home" href="http://www.smashingmagazine.com/" class="home">Home</a></li>
	<li><a title="Graphics" href="http://www.smashingmagazine.com/category/graphics/" class="graphics">Graphics</a></li>
	<li><a title="Showcases" href="http://www.smashingmagazine.com/category/showcase/" class="showcases">Showcases</a></li>
	<li><a title="Monday Inspiration" href="http://www.smashingmagazine.com/category/monday-inspiration/" class="monday-inspiration">Inspiration</a></li>
	<!-- [...] -->
</ul>

And the CSS:

#showcases #header ul a.showcases {
	background-color: #EB4C07;
	color: #fff;
	-moz-border-radius: 3px;
}

By adding a unique #id to each section’s <body> and a unique class name to each anchor in the nav, you can use descendant selectors in the CSS to style each active state individually. This is a common and also pretty solid technique.

The disadvantages:

  • The HTML and CSS code gets rather bloated with lots of redundant markup
  • There is a link to the current page that might confuse inexperienced visitors, especially if there is a form on the page
  • You still depend on server-side logic, even if it’s limited to only adding an id to the body tag

The advantages:

  • Server-side logic is minimal
  • Full control via CSS
  • Works without javascript

:path

:path is our own laboratory project that takes a different route. Is uses javascript & jQuery to automatically fetch “active” links and lets you style and manipulate them using jQuery and CSS.

How it works

:path loops through the selected DOM elements, finds the anchors, extracts their href attributes and begins a comparison loop that does the following:

  1. convert the href attribute into an absolute url without ending slashes, www etc.
  2. parse the absolute href url and create an array
  3. take the window.location and make it go through the same parser as the href
  4. compare the two arrays and return true if the href is within the window.location path

A simple example

If :path finds the following href attribute:

/lab/

..and the window.location returns:

http://www.devkick.com/lab/path/index.html

:path converts both URLs using it’s parser and end up with two arrays that looks something like:

["http:", "", "devkick.com", "lab"]
["http:", "", "devkick.com", "lab", "path"]

Since the first array, taken from the href, is shorter than the window array, :path will slice the window array using the same length as the href array. Then it will compare the sliced window array with the href array and if there is a match, it will return true and let the active styling begin.

So in this example, the href /lab/ will match the location http://devkick.com/lab/path/ and :path will assume that the href points to a parent or ancestor page related to the current.

This is the basic functionality of :path.

Why?

The main reason for building this selector was that it often requires quite complicated server-side logic to add “active” classes to all navigational elements. And many times I do not have control of the server-side code at all. Since styling a menu including active states shouldn’t be a server-side task, :path takes control of the active navigation elements and lets the front-end developer style it without server-side interaction.

It’s also great because you can style navigational elements on multiple levels without any server-side logic. Just include the script and decide what you want to do with the active anchors. In most cases, it’s enough with simply adding an ‘active’ class to the parent element by typing (example):

$('a:path').parent().addClass('active');

And then do something like this in the css:

#nav .active a{cursor:default;color:black}
#subnav .active a{cursor:default;color:red}

:current

But what if you want to style the links that points to the current page differently from the ones pointing ot ancestors? Well, using the same comparison technique, I created a :current selector as well, only targeting the anchors whose href points to the current page. Jacob Nielsen says that you should never have a link that points to the current page, so by following his advice we can eliminate the anchors around those links by doing something like:

$('a:current').each(function() { $(this).replaceWith($(this).text()); });

Conclusion

The disadvantages:

  • No active state for users without javascript
  • Requires jQuery and a somewhat logical URL structure

The advantages:

  • No server-side logic - full control for the designer or front-end developer
  • Can style and manipulate active states
  • Will automatically fetch active hrefs from a custom selection of elements on any level

Is :path worth using on your site? it’s up to you. I have been using similar techniques before on a few projects and I’m really pleased with taking control of the active states without asking the back-end developer a “favour”. BTW: this sie uses :path itself.

Sites with active states - a visual gallery

Here is a small inspirational collection of visual active states on web site navigation.

New York Times has a tiny tabbed-like nav with active states.

Apple has a clear and attractive active state that fits their brand.

BestWebGallery uses a negative, slick menu with a glowing active state.

I always liked K10k’s nav. It has a clear active state and some unique hover effects with a tagline.

Web Designer Wall has a different hand drawn image-based side menu with an active state that looks like if someone highlighted one of the items with a pen.

Yahoo Sports has a multiple-level menu with classic active states that form an easy-to-follow location trail.

Jaha! Design uses a rare and unique slider as main navigation, with an obvious active state.

The new Coda Coza’s photography section uses clear active states in both it’s main nav and sidebar.

Examples of sites without active states

A lot of large and popular web sites does not have an active state in the main navigation. Some of them does not even have a breadcrumb trail to follow. This makes it really hard for visitors to know where they are, especially if you are landing on a sub-page from a search engine.

Emigre font foundry is one of the sites not having an active state or even a breadcrumb navigation.

The popular weblog TechCrunch does not have active states on their main menu.

Bryan Veloso’s Avalonstar has a main nav without active states. You even have to scroll down pretty far to see where you are.

The grand daddy A List Apart does have active states in their main navigation, but not in the secondary nav on the right side. Not exactly a huge issue, but the visitor’s location would be even more clear if they did.

Facebook’s main menu does not have active states (and neither does MySpace)

]]> http://devkick.com/blog/the-visual-active-state-popular-techniques-and-examples/feed/ Introducing the Lab http://devkick.com/blog/introducing-the-lab/ http://devkick.com/blog/introducing-the-lab/#comments Tue, 29 Apr 2008 12:58:25 +0000 admin http://devkick.com/blog/?p=15 DevKick has a new section called the Lab. DevKick Lab is a growing repository of web development experiments that we conduct using technologies like jQuery, CSS and HTML.

]]> DevKick has a new section called the Lab. DevKick Lab is a growing repository of web development experiments that we conduct using technologies like jQuery, CSS and HTML.

:path

Bundled with the grand opening, I will release the first version of a new jQuery selector called :path. :path is a very useful selector that automatically adds an active state to all your navigational elements. Normally, this is done server-side or by adding lots of redundant classes to each navigational element and use descendant selectors in CSS. To simplify this process for front-end developers or designers, :path filters out anchor elements where the href attribute matches the window.location path, including ancestors and lets you style those easily using jQuery and CSS. The package also includes a :current pseudo-class that targets the anchor that links to the current page.

More about :path and active states in a forthcoming blog post.

In time, I will also move my previous projects here, such as Galleria and Tripoli.

]]> http://devkick.com/blog/introducing-the-lab/feed/ Useful jQuery: a Compilation of jQuery Utilities http://devkick.com/blog/useful-jquery-a-compilation-of-jquery-utilities/ http://devkick.com/blog/useful-jquery-a-compilation-of-jquery-utilities/#comments Wed, 23 Apr 2008 18:49:21 +0000 admin http://devkick.com/blog/?p=14 useful jQuery scripts and utilities, created to make your web development easier. You won't find any fancy slides or animations in here, instead I have compiled a list of the best, most well-written and useful jQuery components I could find on the web.]]> jQuery is great in many ways. You probably first heard about the framework when browsing through a showcase of beautiful “ajax” scripts and became impressed with how easy it can be used to create advanced and delightful effects. But jQuery is much more than that. After you’ve seen all the fancy slides and animations and got to know the framework, you realize that it can do much more to assist you in building advanced, content-driven web sites and applications.

Here is a hand-picked list of useful jQuery scripts and utilities, created to make your web development easier. You won’t find any fancy slides or animations in here, instead I have compiled a list of the best, most well-written and useful jQuery components on the web that I would use myself.

Am I missing something? Let me know in the comments.

Google Analytics Integration for jQuery

This plugin is intended to simplify the process of adding Google Analytics tracking to a page, including the tracking of outbound links, mailtos, and downloads, which are not otherwise tracked by default.

Masked Input Plugin

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

Switch stylesheets with jQuery

The stylesheet switcher allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet.

jQuery.ScrollTo

With this plugin, you will easily scroll overflowed elements, and the screen itself. It gives you access to many different options to customize and various ways to specify where to scroll.

Terracoder

xmlObjectifier is here to help. In just one method call your XML document is converted into a JavaScript Object and is ready for simple data browsing using a familiar dot notation. xmlObjectifier is written in client-side JavaScript in an object oriented manner to reduce processing overhead and to provide optimal compatibility across various browsers.

jQuery AlphaNumeric

jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

jQuery BlockUI Plugin

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

Chili

Chili is the jQuery code highlighter plugin, featuring very fast highlightning, trivial setup, fully customizable, thoroughly documented, MIT licensed and much more.

Form

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted.

JQuery Media Plugin

The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page. The plugin converts an element (usually an <a>) into a <div> which holds the object, embed or iframe tags neccessary to render the media content.

jQuery Taconite Plugin

The jQuery Taconite Plugin allows you to easily make multiple DOM updates using the results of a single AJAX call. It processes an XML command document that contain instructions for updating the DOM.

jFeed

A lightweight JavaScript feed parser based on jQuery.

jScrollPane

jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS.

Mouse Wheel Extension

Adds mouse wheel support for your application! Just call mousewheel to add the event and call unmousewheel to remove the event.

jQuery Dimensions Plugin

The dimensions plugin extends jQuery with dimension centric methods. It has been rigorously tested and gives accurate results cross-browser. Methods like width and height are extended by dimensions to enable you to get the width and height of both the window and the document. Methods like offset and position help you find the coordinates of an element on your page.

Livequery

Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.

jQuery Easing Plugin

A jQuery plugin to give advanced easing options.

Cookie

A simple, lightweight utility plugin for reading, writing and deleting cookies.

JavaScript text higlighting jQuery plugin

jCache - A client-side caching plugin for jQuery

to improve web apps performance, you make calls to the server to get data and cache them on the server. This is of course effective, but sometimes not enough, since the browser must wait for the response from server none the less.

jMaps Framework Documentation

The jMaps Framework is a jQuery plugin that provide a easy to use and powerful API for creating dynamic Google Maps.

History plugin

This plugin helps you make your Ajax-driven page available for “Go Back” button and “bookmark” of browser.

]]> http://devkick.com/blog/useful-jquery-a-compilation-of-jquery-utilities/feed/ Choosing a Domain Name - Tools, Resources and Articles http://devkick.com/blog/choosing-a-domain-name-tools-resources-and-articles/ http://devkick.com/blog/choosing-a-domain-name-tools-resources-and-articles/#comments Mon, 14 Apr 2008 23:17:44 +0000 admin http://devkick.com/blog/?p=9 A solid understanding about domain names is essential when building web sites. But what excactly is a domain name? And where do you start when choosing a suitbable name for your web project?

The web is full of articles about domain names. Unfortunately, many of them are published as a marketing tool with the intention to sell more lucrative domain names. We have a compiled a list of free, informative and unbiased resources, articles and tools that are worth a look through when thinking of buying a domain name for your web presence.

Domain Name Introductions

New to domain names? Not sure why you need one or how to pick one? These resources will get you started.

Domain Name at Wikipedia

This wikipedia article explains the basics around domain names, why you need them and how they work.

The Domain Name System: A Non-Technical Explanation

A thorough and easy to read article about the Domain Name System (DNS) basics.

Domain Name Basics

Another old-school article about the very core of domain names and how they work.

Domain Name Suggestion Tools

If you have an idea of what domain you are looking for - perhaps you have a strong keyword or two, or maybe an established brand. Using a domain name spinner or suggestion tool might set you on the right track towards finding a suitable domain for your business, blog or web service.

MakeWords

Recommended. MakeWords.com is an online domain name generator - a brainstorming tool that simply returns a list of available domain names. Various algorithms and wordlists are used generate words and names that are “pronounceable” in different languages. You can select from sets of language rules to generate new words and query the entire .com and .net domain registry based on the results. Other uses of the tool can be unique name search for startup companies, brandable names for products, original names for roleplay characters, and naturally, creating names for anything that hasn’t been named yet.

Domain Suggestions at DomainTools

DomainTools name-spinning technology can suggest up to 100 domain names using their proprietary semantic domain name technology.

One Word Only

One Word Domain Name Search - featuring a domain name searchable database showing only one word names from the English pocket dictionary.

DomainsBot

DomainsBot was built to solve a couple of the most annoying problems facing anyone who wants to start a website on the Internet - finding decent domain names; figuring out who to register them with; and keeping track of them once you do.

Dotcenter

Dotcenter searches expired and available domains from keywords. Can also search using simple regular expressions using their Advanced search page

Bust a Name

Bust a Name have combined linguistic data with a unique interface to let you quickly search through thousands of domains and see which are available..

Deleted Domains at whois.net

Simple, fast and almost ad-free search engine for deleted domains, but the search tools available are limited.

Just Dropped

Another search engine for deleted domains. Requires account registration.

Useful Domain Name Resources

Here is a small list of articles, blogs and resources worth visiting prior to buying domains.

Matt Cutts Blog

Matt Cutts was the unofficial Google official at WebmasterWorld for a long time before his identity was revealed and his official blog was announced. The blog contains tons of useful tips about domains and other SEO-related topics.

Choosing the Domain Name for your Blog

Another excellent post by Darren Rowse where he guides bloggers into choosing the right domain name for their blog. Interesting discussion as well.

Domain Names at SitePoint

SitePoint has some good articles about choosing domain names, even if some of them are pretty old.

Choosing a Domain Name - Brandable Domains vs. Keyword Domains

This discussion has been going on forever. Keyword domains were hot when there actually where some keyword domains still available. Brandable domain names is more popular these days, not only because you can find your own memorable brand identity, but also because the fact that unique and often made-up words stand a beter chance in availability.

We have compiled a list of articles and discussions about brandable domains versus keyword domains so you can make up your own conclusions.

How to Choose a Domain Name - Brandable Domains vs Keyword Rich Domains

A great discussion at ProBlogger about what route to take when choosing domain names

Domain Names - Brandable v Keyword-Rich?

Caroline brings up topics like the SEO factor, Brandability = Visibility and Authority v Niche Sites when choosing between brands and keywords.

Choosing a Domain Name? Do Your Keyword Research First

Rachelle Money has some useful tips you might consider before choosing domain names such as Do not assume your brand name is the best domain name to select. Carry out some keyword research before making a decision and consider incorporating a keyword alongside the brand name.

Keyword or Brandable

Old but still very relevant discussion at WebmasterWorld about the cons and pros in brandable vs. keyword domains.

Buying and Selling Domains

Sometimes you just can’t find the domain on the available domain spinner tools. Or perhaps you just need some domain inspiration. Either way, it might be a good idea to start looking at used domains on different domain markets around the web. Here is a few to get you started:

Domain Names at eBay

Ebay is actually a pretty good place for finding cheap domain names. Be aware of dodgy domains with a spammy history - make sure you do a history check at archive.org before any purchase. Naturally - ebay is also great for selling domains.

Domain Names at SitePoint’s Marketplace

SitePoint’s marketplace is another good place to start looking for a used domain name.

GoDaddy’s Domain Name Aftermarket

A busy and rich marketplace for domains, but hopelessly cluttered and hard to navigate through.

Afternic

Another marketplace where you can sell and buy domains. Has categories and a good search engine, but promotes their own domains a bit too much.

Domain Name Auctions at DNForum

A busy marketplace for domain names in a forum environment.

Background Check and Blacklisting

When buying a used domain it can be important to buy one that hasn’t been abused by spammers in the past. If that is the case - chances are that google might have a blacklist on the domain and it can be hard to get your site indexed.

Archive.org

Use this tool to check the domain history and make sure the domain you’re buying hasn’t been a link farm or spam site.

Further Reading

Even more useful articles about domain names.

Dot-com names get dottier

From Abazab to Xoopit, start-ups try to be clever and unique to stand out from the hundreds of new firms online. Still, many are just gibberish.

How to Value a Domain Name

While there is no scientific method to determine a precise value for any domain name, there are some considerations that go into determining a reasonable ballpark value for that domain name you want.

10 Tips for Choosing a Domain Name

Your domain name is like your street address. How will customers find you if they don’t know where to look — or worse, if they go to what they think is your address only to find your company is not there? Here are ten tips to choosing a domain name for your business:

Making Domains Your Business

Even though there’s not a NASDAQ or S&P 500 for domain investors, industry insiders all know how steeply the domain market rose in 2007.

]]> http://devkick.com/blog/choosing-a-domain-name-tools-resources-and-articles/feed/