WEB404 - CSS, JavaScript, HTML and more!

Blog discontinued

2009-06-26T16:03:00.002+02:00

From now on I will only post at http://basvandijk.eu please update your RSS and bookmarks.

Ajax loader generator

2008-12-09T10:04:00.004+01:00

Ajaxload is a dynamic ajax load image generator. Just pick your colors and a template and you are done!

JQuery plugin - s3slider

2008-12-04T23:00:00.003+01:00

The s3slider plugin for JQuery creates nice sliding boxes with text over fading images. See the demo yourself.

Trac project management / bug tracking tool

2008-11-25T09:39:00.006+01:00

Trac is an opensource project management / bug tracking tool. With this tool people can make tickets of tasks / bug fixes they need to do. It can be coupled to Subversion which makes it possible to refer to a trac task in the commit messages.

Some useful links:

Subversion version control

2008-11-25T09:23:00.005+01:00

If you work with source code, you might want to have some version control system. Subversion is free. There is a free book about Subversion which might help you setup the server. Otherwise this quick guide will do. A complete guide can be found here.

C# tutorials

2008-11-25T09:19:00.002+01:00

Here you can find 23 lessons about C#. There are several topics included:

Lesson 01: Getting Started
Lesson 02: Expressions, Types, and Variables
Lesson 03: Control Statements - Selection
Lesson 04: Control Statements - Loops
Lesson 05: Methods
Lesson 06: Namespaces
Lesson 07: Introduction to Classes
Lesson 08: Class Inheritance
Lesson 09: Polymorphism
Lesson 10: Properties
Lesson 11: Indexers
Lesson 12: Structs
Lesson 13: Interfaces
Lesson 14: Introduction to Delegates and Events
Lesson 15: Introduction to Exception Handling
Lesson 16: Using Attributes
Lesson 17: Enums
Lesson 18: Overloading Operators
Lesson 19: Encapsulation
Lesson 20: Introduction to Generic Collections
Lesson 21: Anonymous Methods
Lesson 22: Topics on C# Type
Lesson 23: Working with Nullable Types

Slow development server in ASP.NET and Firefox

2008-11-10T22:25:00.001+01:00

When developing a website waiting on the compile can be very time consuming. I noticed that I was waiting for about 20 seconds on every refresh. After some research it turned out that there is a problem with the combination of ASP.NET development server and Firefox. To solve this slowness goto about:config in Firefox, filter by "network.dns.disableIPv6" and double-click to set to true.

Open Source Dutch postal code database

2008-11-03T10:10:00.002+01:00

Normally you have to pay a lot of money to get access to a postal code validation database. 6PP is an initative which created an open source postal code database for Dutch postal codes. You can query an url and it will return the streetname and address matching the postal code. Currently 71% of all Dutch postal codes are in the database.

AquaPath - Xpath evaluater

2008-10-21T11:18:00.003+02:00

From the AquaPath website:

AquaPath is a free Cocoa-based developer tool for Mac OS X Tiger that allows you to evaluate XPath 2.0 expressions against any XML document and view the result sequence in a dynamic, intuitive tree representation.

80 Large Background Websites

2008-10-16T22:17:00.002+02:00

Webdesignerswall.com links to 80 websites which use a large background wallpaper for their websites. It might be worth to have a look for inspiration...

Practical UML: A Hands-On Introduction for Developers

2008-10-16T19:04:00.002+02:00

This website has a really nice hands-on introduction in UML. Forgot how to make a class diagram of Sequence diagram? No problem. The shows it in a minute covering:

ArgoUML

2008-10-04T19:00:00.001+02:00

ArgoUML is a free UML drawing tool which can export your diagrams to various image formats including jpg, png and SVG. See this page for more features.

Adobe Flex examples blog

2008-08-30T12:21:00.003+02:00

This blog shows various examples with sourcecode which can be helpful when developing Adobe Flex applications like:

Internet Explorer 6 (IE6) for Vista

2008-08-28T11:35:00.003+02:00

I needed to test a webpage against IE6. I am using a Mac and running Vista in vmware. The problem is there is no IE6 for Vista. After some Googling I found this program. It is called IETester and can check against multiple browser versions. Btw it supports IE8b1 as well...

Learn Adobe Flex in a week

2008-08-26T09:35:00.004+02:00

On this website Adobe offers a lot of videos which learn you Adobe Flex in one week. The site is under development but there are already a lot of video's.

Test your webdesign in different browsers

2008-08-17T13:50:00.003+02:00

With browsershots.org you can view your website in lots of browsers. You provide browsershots.org with an url and they are processing it through dozens of browsers. When the job is done you get an overview with all the screenshots from these browsers so you can see which browsers are a problem for your website.

Top 10 Application Security Vulnerabilities in Web.config Files

2008-08-10T22:19:00.001+02:00

This website describes the top 10 security issues which you can have in your web.config file when using .net technology.

C# MD5 and SHA1 calculator

2008-08-03T17:10:00.001+02:00

I was looking for a way to hash a string with MD5 or SHA1. I found this website which uses the formsauthpasswordformat method.

Holiday break

2008-07-03T13:51:00.002+02:00

I will be on holiday break from July 5th till July 15th. There will be new posts from July 16th.

Fliddler HTTP debugger

2008-07-03T13:44:00.002+02:00

Fiddler can help you debugging your http traffic. This can be quite useful when working with AJAX requests and you really need to see which data goes over the line.

IE tab for Firefox

2008-07-03T13:41:00.004+02:00

Are you getting bored by switching from Firefox to IE to check if your layout works with both? IE tab is a Firefox extention which can load IE inside a Firefox tab. Just click the tiny icon and your page is reloaded in IE.

Free CSS templates

2008-06-26T13:36:00.003+02:00

Freecsstemplates.org gives you lots of webdesigns for free. Below are some of the designs you can choose from. So if you are not graphical artist, no worries just visit the website!

CSS webtemplates

2008-06-24T23:31:00.003+02:00

Why reinvent the wheel? CSS Tinderbox provides lots of free templates ready to use in your websites or your designs. It does not matter whether you need a fixed width or a flexible template, CSS Tinderbox has it for you.

Google chart API

2008-06-24T00:04:00.000+02:00

Google has created a chart API. With this API it is possible to let Google render charts which you can use as an image within your own website or webapplication.

For example, the url:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Results in:

There are lots of charttypes available like:

EasyRGB - Calculate matching colors

2008-06-22T01:33:00.000+02:00

The EasyRGB color calculator calculates the matching colors for a provided color. Working with this tool is easy. You provide a base color in RGB or HEX. Next thing to do is press the "Start" button. The color calculator show you something similar as:

Here you can see which colors best match the provided one.

Top 5 worst web designs in the world

2008-06-20T15:18:00.000+02:00

Sometimes when surfing the web I visit a website and think: damn this hurts my eyes! Spoongraphics has listed a top 5 of the worst webdesigns of the world.

Sliding JavaScript menu highlight

2008-06-20T15:04:00.003+02:00

Leigeber.com has a nice post on a JavaScript menu highlight. When moving the mouse over the menuitems, the highlight follows the mouse (see demo). This project is free to use for both personal and commercial projects.

NOEMATA - Random name generator

2008-06-18T23:40:00.000+02:00

A good name is hard to find. NOEMATA generates names randomly. Just press the "click here to generate a name" button and see if it generates something useful for you.

Ten CSS tricks you might not know

2008-06-17T12:22:00.001+02:00

Though the article is quite old (2005) it still contains valid and useful information. Webcredible shows ten CSS tricks in "Ten CSS tricks you may not know". The topics are:

CSS font shorthand rule
Two classes together
CSS border value
CSS document for printing
Image replacement technique
CSS box model hack alternative
Center aligning a block element
Vertically aligning with CSS
CSS positioning within a container
Background colour running to the screen bottom

BitFontMaker - Create bitmap fonts

2008-06-16T08:39:00.000+02:00

Remember FontStruct the online TTF font creator? BitFontMaker is something similar but this one creates bitmap fonts.

Visitor statistics with Google Analytics

2008-06-15T19:27:00.000+02:00

In the old days you used statistic services on your website which put an icon on your website, and sometimes even worse: they raised popup windows with banners. Google has developed a tool called Google Analytics. With this tool you can collect all the statistical data of you visitors without bothering them. The nice thing about this: it is free.

screenshot of Google analytics

favicon from image

2008-06-15T14:17:00.000+02:00

A lot of websites make use of the "favicon". This tiny icon appears next to the internet address and in the favorites menu. FavIcon from Pics offers the possibility to upload an image and generate a favicon for you.

Screenshot of FavIcon from Pics

Most common CSS font-families

2008-06-15T12:56:00.002+02:00

Sometimes I want to set a font family, but I can not remember which are "common known". For CSS, these are the common Font Families:

Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Packer JavaScript Compressor

2008-06-15T12:55:00.000+02:00

Packer is free online JavaScript compressor created by Dean Edwards. This compressor comes in several other versions as well like .NET, PHP, WSH, Perl and as an Aptana plugin.

Packer makes your JavaScript code smaller, but without losing functionality. Another great advantage is that it "encrypts" your code. Normal source code can easily copied and pasted. After using Packer someone will have a hard time decoding the encrypted JavaScript.

An example. We provided Packer the following code:

function helloWorld() { alert("Hello World); }

When compressing it using Base62 encode, Packer returns:

eval(function(p,a,c,k,e,r){e=String;if(!''.replace(/^/,String)){while(c--)r[c]=k[c]||c;k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0 1(){2("3 4)}',5,5,'function|helloWorld|alert|Hello|World'.split('|'),0,{}))

As you can see, this code is not easy readable and can prevent code theft. Note that this an simple and small example where the compressed code is larger than the original code. In larger JavaScript files the opposite is true.

2008 Design Trends

2008-06-14T10:20:00.000+02:00

Webdesignerwall wrote an article on what the trend in webdesign of 2008 is. It comes down to vintage/retro styles. Remember glossy is out retro is in ;) Some of the listed websites have really nice designs, which can of course be used as inspiration.

W3Schools online web tutorials

2008-06-13T23:13:00.000+02:00

W3Schools is a website which provides lots of tutorials on web related topics like:

All tutorials are free and can help you starting with new techniques.

Free icons

2008-06-13T15:32:00.000+02:00

Famfamfam.com offers free icons in three categories: Silk, Flags and Mini. These iconsets save you lots of time in designing your own.

Online gradient image maker

2008-06-12T23:37:00.000+02:00

I you have no Photoshop or The Gimp available to make gradients. You might want to check out this online gradient image maker. You simply provide the colors, the gradient type, the dimentions and the image type (png or jpg), and the tool does the rest.

jQuery for designers

2008-06-11T22:55:00.001+02:00

jQuery for designers is another blog from Remy Sharp. This blog shows different examples of thing you can do with jQuery, created for designers. Therefore most of the topics are GUI related. Examples are:

Click on "live demo" to see the example in action.

Create a progessbar with only CSS and one animated gif

2008-06-11T08:30:00.000+02:00

Alen Grakalic showed on his blog "Css Globe" an example of creating an animated progressbar by only using CSS and one animated GIF. In his post he is referring to a live demo of this progressbar.

A schematic view of Alen's solution

FontStruct - Online TTF font creator

2008-06-10T23:17:00.000+02:00

FontShop has created an online font creator tool called FontStruct. With this tool you can construct your own fonts by putting small "tiles" on a grid. Simply pick the character you would like to design, select the pattern you want to draw with, and off you go!

The tool work very intuitive, and takes only a few minutes to understand. To use FontStruct you need to sign up (it is free). FontStruct also has a font-gallery where you can view fonts created by other users.

All fonts you created are private by default. If you decide to share your cool looking font with others you can pick one of the Creative Commons licences.

FontStruct in action

jQuery API lookup

2008-06-10T09:55:00.001+02:00

Remy Sharp, a developer which mainly focuses on jQuery and JavaScript has developed a project called jQuery API. This webtool is a repository containing all the jQuery functions. By entering a keyword you can easily find the method you need.

A screenshot of the jQuery API application while searching for the keyword "fade"

daFont - Font search engine

2008-06-09T17:22:00.005+02:00

I was searching the web for some "designer's blog" and came at youthedesigner.com. They had a post about 12 free graffiti fonts which came from dafont.com. I liked the fonts so I checked out this font search engine.

The nice thing is the ability to select a font license. Though the website stated that this license-type is just an indication, it can help you search for fonts which you can use commercially.

When you click on "top 100" there is an option called "More options" here you can select the license you want your fonts to match.

The licence selector in the top 100 view

Some of the Top 100 fonts

CSS Zen Garden

2008-06-09T11:32:00.000+02:00

Dave Shea, a web designer from Vancouver, Canada, created the website CSS Zen Garden which shows you the great benefit of using CSS. On their website you can select several designs which completely change the layout of the website by only using CSS.

CSS Zen Garden can also be an inspiration for new web designs. When viewing on of the designs have a look for the "view this design's CSS" link. Clicking on this link will show you the CSS of the current displayed layout.

Some of the designs you can pick at CSS Zen Garden

jQuery JavaScript library.

2008-06-08T16:29:00.002+02:00

jQuery is a very easy to use JavaScript libray which can help you with cross browser compatibility, animations and easy event handling. jQuery comes with great documentation which can help you getting started. jQuery also created a blog post in which they explain "Why jQuery's philosophy is better".

If you do not like online documentation, there are some printed books available as well, like: jQuery in Action by Bear Bibeault and Yehuda Katz and Learning jQuery by Karl Swedberg and Jonathan Chaffer.

Here are some jQuery examples. Imagine you want to select an object in JavaScript. You probably use:

document.getElementById('myImage').src = 'image.jpg';

Instead, jQuery uses:

$('#myImage').attr('src', 'image.jpg');

Another example is animation. You want to fade your object in? No advanced code blocks are needed! Just use:

$("p").fadeIn("slow");

The statement above is enough to make the fade work.

Another nice feature is setting multiple properties at once, like:

$('#myImage').attr('src', 'image.jpg').fadeIn("slow");

WEB404 started

2008-06-08T16:19:00.000+02:00

Today I created a new blog called WEB404. On this blog you can find links to web development related websites; CSS, Javascript, HTML and more! I hope you find these links useful and use them to make your web developing life easier ;)