Dreamdealer.nl RSS feed

Call for action on vendor prefixes!

Now that we have gotten to the point that we are almost rid of all the problems caused by IE6, we are about to go back to square one. Vendor prefixes, a necessary evil, seem to cause IE6-like-problems. We frontend developers have to stand up and do something!

Collapsing Margins

Part of the CSS Box Model is the concept of collapsing margins. Where the box model concept might be a bit hard to grasp, collapsing margins are even more difficult. This article explains what it is and why.

Frontend Certification

Quite some time ago the Dutch association for Frontend Developers started working on certification. Then it went dark, as all the volunteers had too much other stuff to do. That is, until last autumn. During the last Fronteers conference some members signed up as volunteers. As I have some time on my hands now we have decided to get things started again.

Custom marker icons using the Google Maps API

How to create a custom marker icon with the new V3 of the Google Maps API.

The awesome internet (week 48)

This week: stitched text effect, angry clients, oil spills, selecting countries, typography, more typography and advent calendars!

The awesome internet (week 46)

I've skipped one week because I had a very nasty flu, but The Awesome Internet is back with another roundup of coolness!

One minute 3D flag

In Photoshop it is really easy to create a realistic looking flag that's flowing in the wind. This only takes one minute!

The awesome internet (week 44)

This week's The Awesome Internet is about CSS3 (what else), money, charting, HTML5 gaming, the CSSWG, Chris Coyier and cheatsheets.

The awesome internet (week 43)

Another roundup of the most awesome stuff on the internet. Naked day, new zealand, CSS specifity, local storage, optimizing CSS code, etc.

CSS3 calc(), min() and max() functions

One of the most awesome new features of the CSS3 spec is the calc() function. Currently only supported by Firefox and IE9 but on its way to become part of the spec.

The awesome internet (week 42)

Second week of the awesome internet roundup. This week Adobe's expressive web, regular expressions, typefaces, funnies, twitter stats, wacom, the jwerty plugin, css1k and social media policies.

Free CSS3 iPhone icon

With no apparent reason I created these iPhone icons in pure CSS with no extra markup. Crab the code and do something cool with them!

The awesome internet (week 41)

From today on I will post a list of the most awesome stuff I come across every week. You can see this as a weekly chart of the best of the internet, seen from the eyes of a webdeveloper.

CSS terms poster

I created a handy cheatsheet poster for CSS terms so you don't emberace yourself again when you speak about CSS.

Kern Type, the kerning game

I normally don't do this, but this little game is só awesome I have to post it!

Why is the logo of this site still an image?

Somebody must have been wondering why the logo at the top of this page is still a simple PNG image while I recreate the Apple and Android logo with pure CSS...

Google releases Dart

Today on the 11th of October 2011, Google released Dart, its new "Structured Web Programming" language. It's been said it is Google's aim to replace JavaScript with Dart as the main built-in prgramming language of browsers.

Proper scrollbar page shift fix

You've probably heard this many times in calls with clients: "My page shifts 15 pixels to the left when I go from this page to that page" and there are a few fixes, but this one from HTML5 boilerplate is the best.

Smooth scrolling back-to-top link

With jQuery it's very easy to create a smooth scrolling back-to-top button on your website.

Using the data attribute as content in CSS

Today CSS master Joshua Hibbert pointed out to me that it's possible to use values from data attributes as value in CSS content.

Special characters in CSS :before and :after pseudo-classes

Using special characters in CSS pseudo-classes like ::before and ::after can be quite tricky if you don't know what's the catch.

Apple logo in 100% pure CSS

After creating the android logo in CSS only, I decided to skip a few diffeculty levels and try to create the Apple logo in CSS only, using as less DIV's as possible.

Android robot in 100% pure CSS

The Android robot is a cool logo made of fairly simple shapes. My challenge was to recreate the logo with pure CSS and as less HTML as possible.

HTML5 boilerplate title effect

When looking into HTML5 boilerplate I got distracted by the headings they use on the website and I decided to recreate this effect.

Kings of Code 2011

Last saturday and sunday me and three colleagues competed in the prestigious Kings of Code hackbattle in Amsterdam.

CSS only rainbow

When discovering the spread parameter of box-shadow, I concluded that it's now possible to stack as many "borders" to elements as you like.

Rotating 3D CSS cube

When exploring the CSS3 transform- and transition possibilities, I created these rotating cubes. With plain color, semi-transparent and one with textures. Only one image is used as texture for the crate, but the rest is pure CSS!

CSS only progress bar

This progressbar is created using CSS3 with no images. This was a testcase to learn working with gradients as background-images. Firefox and chrome only!

Changing the text selection color with CSS3

Changing the appearance of selected text is mostly a nice-to-have, but sometimes even necessary to imprive legibility.

Creating alternating rows in ColdFusion

One of those things that could be very complex or very easy is creating zebra-striped alternating rows in a table or list. In ColdFusion this is quite easy to achieve. No counters and lengthy if-statements, just one small line of code!

Pure CSS only loading animation

Inspired by a post on Forrst, showing a simple animation of three dots dancing on a line, which can be used for a loading animation. I took things a bit further and created a more fancy loading animation!

Pure CSS ribbon effect

Another great effect of Joshua Hibbert. A pure CSS ribbon menu. Awesome!

Tucked Corners by Joshua N Hibbert

While browsing for inspiration I stumbled over this nice effect by Joshua N Hibbert.

25 usability tips for a user friendly website

Just a short list of important usability tips to create a user friendly website.

IE's hasLayout in short

There are many articles written on IE's hasLayout property, but I'd like to summarize a good article I found on this subject.

10 common PHP security mistakes

Security is an often overlooked part of PHP programming. So therefore, I present you the basics of PHP security: the ten most common PHP security mistakes.

10 essential tools and websites for frontend developers

In this article I will show you 10 tools and websites which are essential for a frontend developer to have and master.

How to get all possible values of an ENUM field

Sometimes it's a little overkill to create an extra table and connecting table to add a parameter to an object. An ENUM field comes in handy, but how about getting these values when setting the field?

Organizing your CSS

There is no such thing as a golden rule for organizing ones CSS file(s). In all the years of working as a frontend developer, I developed a organizing system that works for me. Maybe it works for you too?

CSS3 animations introduction

Maybe somebody noticed, but there are a few CSS3 animations used in this site. In this article a few samples of these transitions.

jQuery Accordion 'Object doesn't support this property or method' error in IE

Today we ran into an 'Object doesn't support this property or method.' error caused by an jQuery UI Accordion effect in a page. The error was vague and the IE Developer Tools Stack trace wasn't making thing clear either.

Using the HTML5 data attribute

HTML5 contains a new attribute wich can be used to store raw data in an element. This raw data isn't visible for the viewers of the page, but can be used by a JavaScript application, for example.

Getting quick user experience feedback with Usaura.com

Today I found out about this new website on www.usaura.com where you can quickly test designs for specific user experience questions...

Find all links without title attribute

To create good and usable sites, it's important to use a title attribute on all your links. When creating a site it's often forgotten, but with this regular expression you can easilly do it afterwards.

What does your customer actually want?

If you're a designer I bet you have talked to a customer once, thought you understood what he wants, created something very nice, but it turned out the customer didn't like it and wanted something completely different...

Fixed width or responsive design?

I took a look into my statistics to see where my visitors came from, but more important what devices they use, wich resolutions they prefer, etc. Maybe it's time to change some of the patterns I use for a few years now...

Update the order of multiple records in one query

I bet you have had this problem once before: a bunch of pages/documents/whatever with an order column in the DB that all needed to be updated when you changed the order with this nifty jQuery UI Sortable drag-n-drop script.

Placing form fields outside the form tag

I had had numerous encounters with the problem that I needed to place a form element outside a form, but still submit it within this form. In HTML 5 there now is a solution for this problem!

What dateformat should you use?

Programmers and other computer oriented people tend to use dateformats that aren't as clear or logic as we (the nerds) would think.

Speeding up your website with properly included scripts

Today I found out that the cufon I used in a project was slowing down the site. After a short google search i found the problem...

When should you use Cufon or @font-face?

This articles discusses the question when to use Cufón or @font-face.

Create a planner with directions using the Google Maps API

How to create a route planner with directions with the new V3 of the Google Maps API. It has never been so easy to create a planner on your own website! (updated 31 october 2011).

Make your website mobile friendly

In this tutorial you'll learn how to make your website mobile friendly with CSS media queries. This is called responsive webdesign or responsive webdevelopment.

Horizontal menu with CSS, part 1

Learn how to create a horizontal menu with CSS.

Relative and absolute positioning in CSS

Introduction in relative and absolute positioning in CSS.

CSS Box Model

Introduction to the CSS Box Model with examples.

MYSQL basic skills

In this tutorial you'll learn the basic skills to manage a MySQL database. Fetch a record from the database, display it, edit it and delete it.

Benchmark and optimize PHP script speed

Sometimes you create a script that can get slow for several reasons. In this tutorial you'll learn how to analyze what is slowing the script and foremost what you can do about it!

MySQL Join Tutorial

What are joins and how do you make them?

AJAX callbacks with jQuery

In this tutorial we will create an AJAX callback with the jQuery library. The sample is very easy, but you can make it as complicated as you like!

Textwrap in photoshop

Photoshop has the option to make textwrap around an image. In this tutorial you'll learn how to do this in a few easy steps!

Changing the backgroundcolor of the canvas in photoshop

There is an option in photoshop to change the color of your canvas. This can be very handy to create some contrast between the canvas and your image.

Burning a music CD in Nero

In this tutorial you'll learn how to burn a music CD with Nero.

Edit the 'places bar' in your open/save as dialogs

In this tutorials you'lll learn how to edit the so called 'places bar' in your open and save as dialog boxes. Change them in your own favorite folders in Windows Vista and older versions of Windows.

Glowing curves in Photoshop

Learn how to make those nice glowing curves with Adobe Photoshop in a few minutes!

Resizing photo's in Windows XP

Windows created a nifty little programm for Windows XP for you to resize images in a few clicks.

Creating great shadows in Photoshop

This is a tutorial on creating great shadows in Photoshop

The techno effect

Learn how to make this great techno-effect in photoshop

The Cool text effect

Learn how to make a cool text effect with photoshop

Adding color to a black & white photo

In this tutorial you'll learn how to add color to a black and white photo. For example a black and white face with red lips or a coloured tie.

Graffiti with Photoshop

Your own logo on any random wall in just 8 easy steps! No knowledge of photoshop required!

Javascript windows

In this tutorial you'll learn how to use Javascript windows. Asking a name with a Promptbox, asking a question with Confirmboxes en ginving an alert with an Alertbox.

Repeatedly copy and transform a selection in Photoshop

In this tutorial you'll learn how to repeatedly copy and transform a selection in Photoshop. You can use this to create the dashes in a clock for example.

Pimp your text with photoshop

In this tutorial, you'll learn how to pimp your text with Photoshop, in a few easy steps!

How to create a WEB 2.0 style logo

In this tutorial, you'll learn how to create a fancy WEB 2.0 style logo.

WEB 2.0 Style Buttons

In this tutorial you learn how to make those nice WEB 2.0 style buttons.

What's up with all the colors?

Since Carlos Gallupa sponsored me some webspace and unlimited datatraffic, i was finally able to upgrade my website and try to get the best out of it.