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.

» Read the rest of this entry

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.

» Read the rest of this entry

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.

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.

» Read the rest of this entry

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!

» Read the rest of this entry

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

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.

» Read the rest of this entry

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.

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.
» Read the rest of this entry

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.

» Read the rest of this entry

So, finally it’s done and DevKick has just grown into something bigger. Here is a quick summary of what has happened and what will happen.

» Read the rest of this entry