Arduino Uno – Music Player with IR Motion Sensor

Catalin 4 Comments

I’ve started experimenting with Arduino lately (a bit late in the show, I know).
But at least, now I have access to so many resources out there and a huge community.

As for my first project, I have made a Music Player based on Motion Detection, mainly intended for bathrooms to play funky jazz, but it can be used in many other situations as well.

Components used:
– Arduino UNO R3 (Does not have to be the original one, you can get cheap arduino clones for a few dollars each from ebay or aliexpress, however, buying the original arduino supports … Read article

Read More

Spritesheet animations in WebGL/Canvas using EaselJS

Catalin Leave a comment

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

jCounter (a jQuery countdown plugin) – first release

Catalin 4 Comments

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)

Catalin 3 Comments

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

The Google Feedburner is NOT closing down.

Catalin Leave a comment

I felt like jumping in this little silly propaganda of this “Feedburner riot” where people started yelling how Google is going to shutdown Feedburner and all bloggers will lose their feed service and their subscribed users.

To put it simple, you, as a Blogger, who only uses feedburner to share your feed, you will ‘still’ be able to do this for a very long time.

Google has indeed shutdown the feedburner ‘API’, but that’s a different story and the API is just a service tied up to Feedburner, you (as a blogger) will NOT be affected.
What’s going to be … Read article

Read More

Building an extensible jQuery countdown plugin from scratch

Catalin 30 Comments

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

Catalin 9 Comments

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

Catalin 8 Comments

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

Catalin 3 Comments

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

Catalin 8 Comments

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

Populate a select dropdown list with jQuery

Catalin 5 Comments

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.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
 
<form>
<select name="dep">
<option>Department</option>
<option>Sales</option>
<option>Support</option>
</select>
<select name
… Read article

Read More

Merging from HTML4 to HTML5

Catalin 3 Comments

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

Building a PHP Contact form with Captcha from scratch

Catalin 191 Comments

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

Appreciating commentators and contributors

Catalin 25 Comments


Comments on blogs are now harshly viewed, both article writers and readers see comments as spam traffic.
I’m not really going to say no to that, since a lot of advertising is being done through blog comments, but not all comments are spam and that’s why bloggers have to be extra careful and embrace the contributing relevant comments and I personally disagree with the ‘NoFollow’ tag on the commentator’s website link.

I feel that a DoFollow link towards their website is a normal way to appreciate their contribution for commenting on articles and it’s the article author’s job to check … Read article

Read More

Smart HTML5 and CSS3 with Modernizr

Catalin 6 Comments

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