Tuesday, February 19, 2013

Responsive Tables

Responsive Tables
A few smart folks have already put together their thoughts on responsive tables and, while I think the proposed methods are pretty good, I think there might be room for improvement. As such, I've been tinkering for a while and came up with the following strategy when it comes to tables.

Step 1: Use data-* attributes to hold information about the column header(s) associated with the markup:

Friday, January 25, 2013

Creating web services using PHP

Creating web services using PHP

What is web service?

First of all I want to explain or define what is web service. You can think of web services as DLL files over the web. You write the code, then compile it and every one can use it whatever language they are using. But in the web you don't compile anything. Actually when I started using webservices, I was writing c# code so .NET was doing every thing for me. I couldn't understand what is happening behind the scene. I just type [webservice] above the function and everything is running, so in this article I'm going to explain what is happening.

Friday, January 25, 2013

HTML5 Drag and Drop Avatar Changer with Resizing and Cropping

HTML5 Drag and Drop

In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user's Twitter avatar, Facebook avatar, or Gravatar. That's a smart move. Avatars give users a sense of ownership over a virtual space so any way to get them to have their desired avatar is good for engagement.

Friday, January 25, 2013

What No One Told You About Z-Index

What No One Told You About Z-Index

The problem with z-index is that very few people understand how it really works. It's not complicated, but it if you've never taken the time to read its specification, there are almost certainly crucial aspects that you're completely unaware of.

Don't believe me? Well, see if you can solve this problem:

Tuesday, January 22, 2013

Understand the Favicon

Understand the Favicon

When Alec Rust asked the HTML5 Boilerplate project to switch to a HiDPI favicon, I realized how little I knew about favorite icons, touch icons, and tile icons. When I decided to dive in a little deeper, things got interesting.

Tuesday, January 22, 2013

Using Web Workers to Speed-Up Your JavaScript Applications

Web Workers to Speed-Up Your JavaScript Applications

The performance of JavaScript applications running in the browser has increased considerably over the past few years. This is mainly due to continued work on the underlying JavaScript engines (such as V8) that actually execute the code. But as these JavaScript engines get faster, our web applications also demand more.

Thursday, January 10, 2013

In search of the perfect radius

perfect radius

Few weeks back, I happened to read Chris Coyer's article on nested border radii, which spurred me to do a study that I long wanted to do.

In the figure below, which button looks right? Had you ever had to design such a button or in general, a rounded rectangle nested inside another rounded rectangle and wondered what should be the inner radius for a given outer radius or vice versa? That is what we're going to find out.

Sunday, January 06, 2013

Asynchronous error handling in JavaScript

Asynchronous error handling in JavaScript
Anything that can go wrong will go wrong, so we better prepare ourselves. The lessons we've been taught as programmers to nicely throw and catch excep­tions don't apply anymore in asynchronous environments. Yet asynchronous programming is on the rise and things still can and therefore will go wrong. So what are your options to defend against errors and graciously inform the user when things didn't go as expected? This post compares different asynchro­nous error handling tactics for JavaScript.

Thursday, January 03, 2013

Wrapping long URLs and text content with CSS

Wrapping long URLs and text content with CSS

To wrap long URLs, strings of text and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags):