jCounter (a jQuery countdown plugin) – first release

After doing a basic tutorial on creating a jQuery countdown plugin, I’ve been getting many requests regarding its functionality, so I’ve decided to rewrite it and make a release of a more stable version with more control.

Here are a few new things:

  • server-side timezone support to ensure accurate date-based countdowns
  • more control with native methods (stop, start, reset, pause)
  • it creates not only countdowns, but also countups based on custom values
  • it can run multiple independent instances etc.

Right now it’s in BETA, as I’m still improving it here and there.

You could help a lot by checking it 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

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

DIVs role in HTML5

Once we have been progressively adopting the HTML5 technology more and more each day lately, the well known “NO MORE DIVs” propaganda took place.

I was surprised to see that “Divless layouts” already got promoted on some template websites, using the new HTML5 structural elements. Is it me, or we’re confusing the tables -divs era with DIVs -HTML5?

Truth is, we have been abusing the DIV element with HTML4, pretty much because we have had no alternative. Now that we have HTML5 which came with some great new structural elements, we no longer have to DIV our way … Read article

Read More

Time saving project starter kit

It’s time to talk a bit about some time-saving techniques.
Both graphic and web designers lose precious time rebuilding the same graphic elements, recreating browser form elements, coding the same code blocks, finding doctype syntaxes and what not. Just imagine how much you’d improve your web design workflow by having all of these reusable elements at your finger tips!

Inspired by Ben Gribbin’s post Save time and money by systematizing your photoshop workflow, I’ve built a customized project starter kit to not only ease the work for graphic designers, but for web designers as well.

Improving your photoshop workflow

Read article

Read More

Merging from HTML4 to HTML5

If HTML5 is here now, it does not mean that the previously HTML4 built web pages cannot benefit the new technology. In the next few years, HTML5 will change web communication greatly, we’re looking at new indexing methods, more accurate search engine results, richer APIs and web applications, greater accessibility and the list goes on.

With over 250 million websites all over the web, there is unimaginable and priceless information, content that deserves the exposure and attention that HTML5 is focusing on. It’s pretty much our job to make all that content more accessible by updating older HTML4 structures with … Read article

Read More

HTML5 and CSS3’s first steps

Like I promised, I’m going to focus more on HTML5 and CSS3. I’m that dad who wants to witness his baby’s first steps, as how I want to actively progress with the latest web technologies as they get implemented into our browsers today and as how you should too.

THE THEORY

It’s been a very long time since W3C has taken CSS to the next level, we’ve been working with CSS 2* for around 13 years now. It hardly became a recommendation due to browsers’ lack of following common standards and “greed” to offer unique control individually. But I guess … Read article

Read More

Taking the big HTML5 and CSS3 leap

I’ve been reading some HTML5 and CSS3 discussions and noticed how few actually take the challenge. Though it’s understandable to avoid working with languages that lack support, since the new HTML5 and CSS3 are still being implemented in our browsers today.

Truth is, W3C has taken a huge step with HTML5 with massive changes and updates and along with that, most browsers are implementing sides of it independently, which inevitably leads to partial support. But this is another story I’m not planning to cover in this post.

I adore the control HTML5 is giving us over elements we previously had … Read article

Read More

Getting the right color scheme

Creativity comes and goes! That’s one fact all developers and designers experience once too many.
Brainstorming an entire layout and hitting a dead-end when it comes to the color scheme is an often met issue, especially when a client wants to pick from 3 different color schemes.

Picking a few colors to satisfy the majority is not easy, not to mention when the client already has an existent brand and you have to keep that in your formula.

There are a lot theories and methods to consider before building a color scheme, but one main step is color matching! A … Read article

Read More

Web developer essential tools

The tools used in web development are entirely a matter of preferences, but there are some tools which would ease each designer’s work, and here are some I use:

The web developer toolbar

The web developer toolbar can be installed on Firefox and Chrome at the moment, if you haven’t heard of it, then wait no further, it is an essential tool for web developers. Some of its great features are:

– strip pages from their CSS (view as HTML only)
– quickly view all CSS from any page
– one shortcut away from validating your pages on the W3… Read article

Read More