Become a Javascript Console Power-User

September 29th, 2011

Level up on the Javascript console in the Chrome DevTools. Look at XHR requests, learn console helper functions to monitor events or explore objects better. Paul Irish from the Chrome team gives you a rundown.

Base list of libraries I use to develop web apps

September 13th, 2011

I want to share my personal set of tools that I use whenever I start a project from scratch. And the general idea here is to save time so let’s start by choosing a framework to speed up the workflow.

 

To start things up I’ve been using the G5, this is a framework based on HTML5/CSS3 and  It has a bunch of useful must haves like CSS3PIE, Modernizr, a grid system, tool tips, image slider, lightbox modal box type, and other set of css defined classes to style text and forms elements.

 

From here I would start defning my layout with CSS and the grid system. If you’re not a grid user, please give it a shoot. Moving things around your site will become much much easier, I promise.
Also, from that list I really must recommend using Modernizr to detect when a browser supports a feature or not. Say you want to check if the browser supports rounded corners, you can drop in conditionals, and if the browser doesn’t support it, it will fallback to alternative solutions that you can define for older browsers.

 

if (!Modernizr.borderradius) { /* If it doesn't support the rounded corner */
	$.getScript("jquery.corner.js", function () {
		$("#some-div").corner();
	});
}

 

Cool article to get started: http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

 

To continue my app I define the application dynamic structure and flow using Backbone.js. This great library uses the MVC convention that will let you separate you application’s interface from the functionality. The maintenance of your code will become clean and easier to read. And you know how a javascript application can become bulky and messy after a few pages.

 

http://backbone.js/

 

For the CSS I don’t think I have found anything better than LESS.  It enhances CSS with dynamic behavior such as variables, operations and functions.

 

http://lesscss.org/

 

And for the back-end I use CodeIgniter

 

Extras:

 

I also use a Javascript library called Kapi that let’s you define keyframed events to create anmations ala flash. Very cool.

 

https://github.com/jeremyckahn/kapi

 

And another fun library called spin.js. It’ll let you decorate and configure how your loader spin wheel looks based on a bunch of parameters offered on the site. Very handy.

A collection of HTML5 tutorials

May 4th, 2011

10 HTML5 Tutorial Sites
Read the rest of this entry »

JQuery Foundation

March 24th, 2011



If you’re new to JQuery, please take the time to read this article by Mike Gleason. He takes a different approach explaining the foundations, how it works (visual approach), compares it to other frameworks, and he even goes in to what AJAX is. Not your usual JQuery tutorial, recommended.

Read complete article here.

How are WordPress themes structured?

January 16th, 2011

WordPress themes are made up of a folder of template files, each of which controls a specfic piece of your theme.

WordPress Theme Structure

Breaking projects into primary elements

January 3rd, 2011


Read Complete Article Here.

Redirect your iphone users

December 18th, 2010

To detect whether someone is viewing your site on an iPhone or iPod Touch, you can either use JavaScript or PHP.

THE JAVASCRIPT

  1. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i|>))) {
  2. if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://mobile.yoursitehere.com";
  3. }

THE PHP

  1.  
  2. if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
  3. {
  4. header('Location: http://mobile.yoursitehere.com');
  5. exit();
  6. }

(via. 24ways http://24ways.org/2010/life-beyond-media-queries)

WordPress and Flash integration

November 21st, 2010

This short tutorial will get you started on how to exchange information between WordPress and Flash.
Read the rest of this entry »

So you want to start a web startup

November 5th, 2010

Another one bites the dust.

This is your life, do what you love and do it often…

October 25th, 2010

Great statement from Holstee
The Holstee Manifesto
Link here


Blog
  • Recent Posts

  • Categories

  • Twitter

Contact Us