Geo Location

March 30th, 2010

Interesting article on Smashing Magazine that talks about how Geo Location takes a big part in today’s web development. Simply using IP address and tracing down the location of user. This article shows different online tools and examples with code to help you have a better understanding on this topic, also comment the advantages and disadvantages of different online services.
geo location

Why Geo Matters

First of all, why is it important to consider physical location on this planet (at this moment) when we develop Web products? There are a few answers to this.

The first answer is mobility. The days of people sitting in front of desktop machines at home are over. Sales of mobile devices, laptops and netbooks have overtaken those of bulky stationary computers in the last few years. The power of processors now allows us to use smaller, more mobile hardware to perform the same tasks. So, if people use their hardware on the go, we should bring our systems to them. Which brings us to the second—very important—point: relevance.

Giving the user content that is relevant to the physical space they are in at the moment makes a lot of sense. We are creatures of habit. While we love the reach of the Internet, we also want to be able to find things in our local area easily: people to meet, cafes to frequent, interesting buildings and museums to learn about. The advertising industry—especially of the adult and dating variety—realized this years ago.

Use Google Analytics for Tracking in Flash

March 30th, 2010

Google Analytics allows us to measure how well our sites are doing against our predefined goals: bounce rate, click paths and even custom measurements like how many people scrolled a certain page. Our specialists analyze all this information and use it to optimize the website. If you’re not measuring how people are using your site, you can only guess about its successes and failures. This tutorial on Active.tuts+ shows you how to setup a stripped-down version of an image gallery, that allowed the client to use Google Analytics to discover which images triggered the most interest.
google analytics

Flickr Browser Using Flash Builder 4 & Flex 4 SDK

March 28th, 2010

Flex 4 introduces a boatload of new features, and this article on Sitepoint shows you some of the latest architectural changes that make component development and skinning much easier. Download ZIP file
flickr browser

HTML 5 Video

March 18th, 2010

How to work with HTML 5 video in your own projects. Because older browsers and Internet Explorer do not understand the < video > element, we must also find a way to serve a Flash file to viewers who are utilizing those browsers.

Firefox and Safari / Chrome don’t quite agree when it comes to the file format for videos. As such, if you wish to take advantage of HTML 5 video at this time, you’ll need to create three versions of your video.

OGG: Use VLC ( File -> Streaming / Export Wizard ) to convert video
MP4: Many screencasting tools automatically export to MP4
FLV / SWF: Not all browsers support HTML 5 video, must add Flash version

Read full article on Net.Tuts+

Video tutorials for web developers

March 11th, 2010

Article on Net.tuts+

You can find a good tutorial on just about any subject of web development, but great video tutorials are much less common. Here are a few great tutorials:
Why Learn Object-Oriented PHP?
jQuery For Absolute Beginners Video Series
Intro to Visual Web Developer
Getting Started with Dreamweaver CS3
Performance Tuning Best Practices for MySQL
Advanced Form Styling & Functionality
How to Use Firebug for CSS
Introduction to CodeIgniter
Using CSS
Using CSS3
The Essentials of DOM and Javascript in 10 Minutes

Flash CS4 Bones Tool

March 4th, 2010

Bone tool have been introduced to Flash CS4. You can create bones (armatures) for graphic shapes (like a simple triangle) or a set of movie clips. On Active.tuts+, Steve Dell demonstrate using the bones tool with shapes and will follow up using bones with movie clips.

Read full article

Wordpress online tutorials & resources

February 25th, 2010

WordPress is an open source blog publishing application powered by PHP and MySQL which can also be used for content management. It has a templating system, which includes widgets that can be rearranged without editing PHP or HTML code, as well as themes that can be installed and switched between.

Check out these tutorials & resources
Top 50 Wordpress Tutorials
Video Tutorials for Wordpress Users
110+ Massive Wordpress Video Tutorial Collection
135+ Ultimate Round-Up of Wordpress Tutorials
300+ Resources to Help You Become a WordPress Expert

Install XAMPP

February 24th, 2010

XAMPP is an easy way to install Apache distribution containing MySQL, PHP and Perl. Treat your local drive like a server and save more valuable time.

ActionScript Classes on Bitmap

February 24th, 2010

Article on NTT.cc
“Bitmap is an often used graphics file format in program development. Then it seems how to master it is very important. In fact there are many very useful classes about bitmap can help you to easily create a Bitmap objects.”

Check out this Active Window Blur
active window blur

Feeds 101

February 22nd, 2010

Article by Siddharth on Net.Tuts+

What are feeds – Feeds, to put it simply, are a way to publish frequently updated content. Your feed is a XML formatted document which lets you share content with other users on the web. From a web developer’s perspective, one of the main reason for publishing a feed is user convenience. With a feed for users, they don’t have to check for new content manually each time. They can just subscribe to your feed and get notified new content is posted.
what are feeds
This article basically guide you through how to create a static feed by defining the version and adding information, it also teach you how to generate dynamic feed with some PHP codes. Once you’re done with your code, you should validate the feed before publish it to your webpage.

Regular Expressions for beginner

February 21st, 2010

Article is written by Jeffery Way on Net.Tuts+ about Regular Expression – “The key to learning how to effectively use regular expressions is to just take a day and memorize all of the symbols. This is the best advice I can possibly offer. Sit down, create some flash cards, and just memorize them!”

Downloading the RegExr Desktop app is essential, and is really quite fun to fool around with. In addition to real-time checking, it also offers a sidebar which details the definition and usage of every symbol.
regular expression desktop tool

jQuery: Different layouts for different widths

February 16th, 2010

Article by Jeffery Way on Net.tuts+

“It’s becoming more and more common for web sites and applications to provide different layouts dependent upon the user’s window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions. In this video quick tip, we’ll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method.”

=============================================================
function checkWindowSize() {
    if ( $(window).width() > 1800 ) {
        $(‘body’).addClass(‘large’);
    } else {
        $(‘body’).removeClass(‘large’);
    }
}
$(window).resize(checkWindowSize);
=============================================================

Flash & ActionScript tutorials

January 21st, 2010

Article on NTT.cc

Visual Effect: Lorenz Attractor in Bubble Form

Kaleidoscopic Gallery
kaleidoscopic

Login and Registration System with XML

January 14th, 2010

Tutorial on Net.Tuts+

Create vector twitter bird from scratch

January 9th, 2010

twitter bird
Personally I’m not a super fan on Adobe Illustrator, I seldom post illustration on my blog, but I think it’s worth to post this tutorial by George Coghill on Go Media Zine. It will walk you through the steps from sketch to vector – scan drawing, apply action in Photoshop, create vector paths by using the pen tool and vector art tools, in creating an original cartoon-style character vector illustration.

twitter bird

Cufón – The easiest way to use any font

January 7th, 2010

At times you may want to use fonts other than the likes of Arial, Verdana, Times New Roman, and other mainstream fonts installed on most computers. To implement special fonts on a web page, your choices are to either use images by JavaScript and sIFR (SWF files), or embed the fonts to your computer. Embedding fonts is getting more properly this day, but you have to understand if your user is viewing your website on supported browser.
Here’s a tutorial by Jeffery Way on net.Tuts+, it showcases how to use Cufón, a simple way to use any type of font for your website.

40 Creative Uses Of Cufón Font Replacement – Examples on Spyrestudios

Behavioral CSS

December 23rd, 2009

Article on Smashing Magazine

The Web is an extremely adaptive environment and is surrounded by a collaborative community with a wealth of knowledge to share. CSS 3 properties like border-radius, box-shadow, and text-shadow are starting to gain momentum in WebKit (Safari, Chrome, etc.) and Gecko (Firefox) browsers. They are already creating more lightweight pages and richer experiences for users, not to mention that they degrade pretty gracefully; but they are only the tip of the iceberg of what we can do with CSS 3. In this article, it talks about transformations, transitions and animations.

3D Transform

Animation

Transition

Photoshop masking

December 18th, 2009

masking in photoshop
Learning non-destructive editing techniques helps you produce documents that bend along with your creativity. Photoshop Masks are the cornerstone of this process. Not only do they preserve important pixel data, but they allow for the creation of flexible interface elements as well. In this article on Smashing Magazine, it talks about the technical aspects and creative advantages of incorporating masks into your workflow, it also define five methods of masking: Pixel Masks, Vector Masks, Quick Masks, Clipping Masks and Clipping Paths. It’s worth to spend the time to read this article!

Light trail photography

December 15th, 2009

Article on ReEncodedphoto in hong kong
Light trail photography is just an amazing way to catch a moving light. Light trails occur when a Photo is taken including stationary and moving subjects including a slow shutter speed to capture the movement of the light which create some beautiful trails. Long exposures are easiest to accomplish in low-light conditions, but can be done in brighter light using neutral density filters or specially designed cameras.

Learning how to shot light trail
Check out the tutorial on Digital Photography School

Create crumpled and torn wrapping paper

December 3rd, 2009

Download an image with wrapping paper effect and have the pattern that you want is hard sometime, so why not create it on your own. Here’s a tutorial by Spyrestudios that show the technique on Displacement Map in Photoshop.
displacment