Spritesheet animations in WebGL/Canvas using EaselJS

If you want to add fast spritesheet animations, for example, with generated particle spritesheets, then you can use EaselJS.
EaselJS is part of the CreateJS suite, it is an HTML5 Canvas library and it has grown quite the popularity. One of its components is the Spritesheet Animations.
It has always been using the classic Canvas API to render, but it now caught my attention when they pulled out the big guns and went for WebGL.

They wrote spritecontainer.js and spritestage.js which adds this extra functionality to the library, but I’m not going to get into details on this, we’re … Read article

Read More

Inline versus Block Elements (special guest: float)

In HTML, there are two types of elements, inline and block elements.
Most know about them, use them, but do not fully grasp their difference and behavior and thus, stumble upon numerous layout rendering issues.

To use CSS at its best, you need to understand this very basic concept of HTML element construction.

Block

Block-level elements force a new line before and after them and take up the entire width of the page. It is why setting up a background to a heading element, despite its length, the background will stretch to the entire width of the page. It is … Read article

Read More

Building an extensible jQuery countdown plugin from scratch

UPDATE!
I’ve made an official release of this plugin, click here and check it out

It has been some time since I’ve last posted, I’ve been far too busy with a project I’ve been working on the past several months, but it’s almost ready and I hope I’ll get back to my weekly posting.

While working at this project, at some point I needed a countdown script to announce certain features being released on specific dates, maybe I’ve been a bit lazy and tried finding an already built countdown plugin to work with, but not much luck finding exactly what … Read article

Read More

Using the Reset Stylesheet

This is certainly one thing a web designer can’t live without, it has been here for years and many developers have even built their own customized reset stylesheets. Though don’t be surprised, there are developers who still haven’t heard of this technique or haven’t found a use for it.

The most common issues we’ve been facing from the start were cross-browser design inconsistencies and that’s because each browser has a default style for all HTML elements.

The usual differences from a browser to another is the different padding, margin or size of some HTML elements (i.e. heading elements, line-height, lists … Read article

Read More

Checking Your HTML Structure with HTML5 Outliner

There’s this great tool I’ve been using lately to check my HTML5 structures and assure myself that all the new elements have been placed correctly and have the necessary headings.

HTML5 requires all the new structural elements to have a heading, now if you’re meeting situations where a heading does not have its place at the beginning of an element, content-wise, then still have it placed and just hide it via the display CSS property.

To get a better look at this, we’ll use this sample HTML5 page I found online located at deltabluesmedia.com. As for the HTML5 outliner, … Read article

Read More

Populate a select dropdown list with jQuery

It’s common to meet situations where you want a dropdown list to be updated depending on a visitor’s input.

Let’s say we have a contact form and we want to list contact names according to the department the visitor selects. Namely, in our case, we’ll have different contact names for the ‘sales’ and ‘support’ departments.

Read More

Building a PHP Contact form with Captcha from scratch

Web projects are divided into back-end and front-end work, so web designers don’t have to worry about the “scary” programming, but what about simple presentational websites, where web designers can single-handedly work on, but inevitably get stuck on the contact page.
At that point, most either ask a PHP programmer to do the contact form’s PHP processing or implement an open source contact form somewhere from the web.

But! What if we learn how to actually create one from scratch, eh?
Not only it would help you easily manage smaller projects, but also have a better understanding how PHP form … Read article

Read More

Smart HTML5 and CSS3 with Modernizr

As I’ve mentioned in the previous article, with some help from Modernizr, CSS3 can be safely applied, at least to some extent. So let’s see it in action!

To break the ice, we’re going to start with the border-radius property, enhance an element for css3-enabled browsers and also ensure the element’s design and accessibility for non-css3 enabled browsers, thus, providing progressive enhancement.

I want to make sure I am not confusing anyone about CSS3’s implementation with Modernizr, so I’m going to show how it’s done without it as well.

For this example, we have a regular paragraph inside a box … Read article

Read More

JavaScript’s Alert Method vs. jQuery’s Dialog Widget

What’s the quickest and easiest way to send a message, a note or even a warning to a website’s end-user? The JavaScript alert() method! As handy as it is, I’m certain that even yourself have experienced stressful cases where a website kept stuffing alert messages while you were browsing, and not only that, they’re also old-fashion. Despite the message you want to send, whether it’s a welcome message or a hint, they just look like nasty warnings. Furthermore, with alerts, you don’t have much control in terms of design and accessibility.
For presentational reasons, I’ll build all the code in … Read article

Read More

Optimizing and organizing your CSS code

As how we semantically approach our HTML code for a better structured mark-up, that’s how we need to approach CSS as well.

Setting global and local styles.
You probably haven’t heard of ‘local styles’ because I pretty much named them now and I like to think of ‘local styles’ as those we set for certain regions in our HTML document, like a box model which we can reuse throughout our document, while thinking of ‘global styles’ as those we set for the entire document, like links, heading tags and so on.

Often we meet stylesheets that contain overly used CSS … Read article

Read More

Should we always run away from tables?

I’m having second thoughts about writing this article, suddenly I feel under thousands of web developers about to shred me apart! :)
Aheem, like most web developers, I’m crazy, if not obsessed, about semantic mark-up and that’s why I still see the table’s great, if not, unique role.

Web designers do not run away from tables, but rather stopped using them design-wise.
CSS has been here for a very long time, but it only became popular when CSS 2.0 was out, until that point, tables were used to arrange most of the HTML elements (i.e. lists, images, text etc), which was … Read article

Read More

Approaching jQuery for the first time

Learning jQuery is probably one of the most fun rides you can take!
That’s because with just some basic knowledge of jQuery you can do advanced and complex looking designs and effects, without breaking a sweat.
I’ll cover many and simple jQuery tips in my upcoming articles, for now, let’s just get a closer look at how jQuery works.
Throughout this title, I’ll assume you have a good understanding of HTML and CSS, otherwise, I wouldn’t recommend you to approach jQuery just yet.

So what is jQuery? It’s a JavaScript library, but not just an ordinary library, jQuery is an … Read article

Read More

Two-Column Hybrid CSS Layout

There are four types of CSS layouts, fixed-width, fluid, elastic and hybrid.
We’re going to tackle a hybrid layout, which is a combination of the other three and in our case, a combination of fixed-width and fluid.

Before we start, if you’d like to take a peek at the end-result, click here!
Some of you will understand the technique just by looking at the code, but those who don’t understand the logic behind this layout, then don’t jump to copy/pasting! Let’s go through the code line by line first and see what each one does and overall, what makes this … Read article

Read More

Taking advantage of web languages basics

I’ve been asked a lot of times “Based on what skills is a web developer defined?”. That’s pretty hard to answer, a web developer is usually seen as someone who can deal with a project’s both front-end and back-end work, that obviously insinuating the developer’s skills in both design and programming, but when questioning what languages should one know specifically, there’s no official answer. As an example though, when companies are looking to hire a web developer, they’re usually expecting skills in: (x)HTML / CSS / JavaScript / jQuery / PHP / MySQL, either just a few from those or … Read article

Read More

Pure CSS One-Level Dropdown Menu

Alright, time to try and do my own version of a pure CSS dropdown menu tutorial. Despite the very many tutorials out there, few actually explain the entire code, so why not, I’ll give it a try!

Let’s start by creating a regular html nested unordered list as shown below:

Read More