Designer

Here's something interesting yet simple to share for a long time. If you are wondering and debugging countless hours for a very simple thing such as color change on a number format in ipad or iphone, you might just arrived to the correct blog post. We all know that debugging CSS and HTML in ipad or iphone isn't an easy task although we can emulate the environment, there are certain things we cannot emulate such as the behavior of the ipad or iphone OS itself. Interestingly, a client of mine faced such issue with their website where his 'contact' number listed on his website was changed to blue instead of white as declared on the css file when view on ipad or iphone.

Now, the odd thing is that even the emulator is showing the colors correctly. Debugged for a few hours without any luck but notice that whenever i added alphabet into the numbers, it changes back to the correct colors. I though it was some javascript but it wasn't. In the end, i disabled the whole CSS and notice something different on the emulator and the ipad. Weirdly, ipad and iphone treat numbers as a link because it can be a contact on safari. Therefore, it automatically wrapped around a group of numbers with an anchor link on a web page. Therefore, your CSS declaration have to write something like

.style{
color: blue
}

and added something like

.style, .style a{
color: blue
}

if you wish to cater to ipad or iphone on your website. Even if you do not have a mobile stylesheet, ipad or iphone will still behave this way. Therefore, for any group of numbers on your website, just take note of such behavior on mobile devices such as iphone or ipad.

Firefox is really good web development tool for both web developer and designer for many years. However, it is getting slower and utilize a lot of resources which can be as much as 2GB on my laptop which really doesn't seems to justify. The best alternative i am looking at? Chrome. (DEFINITELY NOT IE ! RAGE!) Here are 25 Google Chrome extension that every web developer and designer will definitely be interested to have.

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

Even web developers and designers will shout "YEAH!" with this extension.

Automatically makes Javascript files you come across on the net look great! Combines both Beautifier (http://jsbeautifier.org/) and Prettify (http://code.google.com/p/google-code-prettify/) to unpack/unobfuscate, format, and add syntax highlighting. No need for copy/pasting or anything else it all happens on the fly for your convenience.

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.

This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Version detecting is being implemented. One of the most interesting thing a web developer will want to know.

It exactly emulates IE by using the IE rendering engine directly within Chrome. This will enable you to use ActiveX controls and test your web pages with different versions of IE (IE6, IE7, IE8, or IE9). Any web developers and web designers will definitely want a Chrome plugin that can assist you will cross browser issues.

Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click. One of the easiest and most powerful screen capture apps on Chrome. For both web developer and designe will definitely want this on your Chrome so that you can explain to your client more clearly on what are you referring on the site. Picture speaks a thousand words.

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.

However, for web developer who is using this you might face problems as not all features are available on a lite version. Here are some of it which you might want to take note of.

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person and best of all, we will be enjoying it on Chrome!

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size. Something web developers and designers won't want to miss.

Pendule extended web developer tools for Chrome. It gives you more features for both web developer and designers could ever think of. Something similar to web developer tool above but built within Chrome developer tool.

For windows user, you are in luck. Click & Clean is something you want to have on your list, especially web developers. Just think of all the clearing of cache makes me headache but that's not all this Chrome extension do.

Scan your PC for Malware

Delete your browsing history,

Remove download history,

Erase temporary files,

Clear cookies and Empty cache,

Delete client-side Web SQL Databases

Remove Flash Cookies (LSOs)

Protect your privacy by cleaning up all traces of your internet activity,

Just press F12 on any http:// webpage, and edit text and delete things like photos, and embed elements. You can even delete a YouTube video off a page! Once you've had your fun, just press F2 to turn off edit mode, for a convincing looking defaced webpage. Web designers will definitely find this useful infront of your client.

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page. bla bla bla.. i bet most web developers know more than i do.

Web developers and designers often have to assist their client with domain stuff. Whois.is is probably somewhere we always visit. Before even going to google, this might just tells us more about our client before approaching them.

A tool to quickly check the position of multiple sites (yours and your competitors) given a keyword. Many countries are supported. Web developers like me will definitely welcome such extension on my Chrome.

Have you ever wonder where is that photo effect tutorial you saw the other day and start searching all over the internet but couldn't find what you saw initially? Honestly, i have. That is why i throw them all into this article instead. But i also use these article to gain inspiration on what to do with my photo image. Sometimes we are like a lost bird when it comes to creative design. Hence, putting up links of images can really benefit myself and hopefully people who come across this article too.

Create a Powerful Mental Wave Explosion Effect

Photo to Pencil Sketch Effect

Sin City Style Effect

How To Make Your Own Vector Portraits

Tutorial: Good and Evil Photo Effect

The Making of Mystic Effect

Transform A Person Into An Alien Effect

Reflective Bubbles Effect

Crack and Peel Effect

Expressive Lighting Effect

Displacement Effect

Vector Composite Effect from a Photo

Easy Watercolor Painting Effect

Twins Effect

Apple Style Portrait Effect

Compositing Effect

Dimension Effect

Blue Glow Dreamy Effect

Ink Drops in Your Digital Compositions Effect

Super Slick Dusky Lighting Effect

Electrifying Energy Beams Effect

Eery-Eye Photo Effect

Fairy Night Eye Effect

Fairy tale Effect

Make your image look awesome with a few light effects

Fire Lines Effect

Make Perfume Commercial

Dirty Grunge Effect

Coloring Effect

Photoshop Effect: Focus With Light

Speeding Car Effect

The Maiden and Hummingbird Photo Manipulation

Design an Epic Fantasy Scene with Photoshop

Thermal Photo Effect

Create an Abstract Design with Curved Light Streaks

Dance Photo Effect

Glowing Neon Effect

Fantasy Art Scene

Sexy Model with Glowing Bubbles Effect

Glamour model

Create an Amazing A.I. Robot Woman in Photoshop

Impressive Photo Effect

Make Perfect Selection for Human Object by Utilising Channel Mask Technique in Photoshop

Create a Realistic Break-Apart Effect with Debris Brushset in Photoshop

Create sexy cyborg Effect

Create a Stylish Two-Tone Photo Montage Effect

Design a Stylish Fashion Advert Effect

Create a Divine Angel Montage Effect in Photoshop

Text Image Effect

Dynamic Scene with a Fallen Angel Effect

Combine Photo Elements to Create a Surreal Photo Manipulation Effect

Fairy and Sunset Landscape Effect

Photo Manipulation - Creating a Fantasy Scene

The Soft Sea Light

Awesome Fantasy Style Castle Scene Creation in Photoshop

Fantasy Photo Manipulation Effect

Fantasy Creature in a Misty Landscape

Create an Out of Bounds Fantasy Illustration Effect

Making of a Forest Magical Scene

Making of Urban Effect

Create a Magic Crystal Ball

Warth Best Life

Fantastic Tree

Magic lamp in the old room

Fantastic Water Landscape

Matte painting

Magic Book

Serenity Prayer

Galaxy Angel

Badass Bling Effect in Photoshop

Flying Girl in Photoshop

Really cool Eclipse Effect in Photosho

X-MEN movie poster

How to create a stylish mad lady in photoshop

Fantasy light effects in Photoshop

Lighting effects in Photoshop

Make incredible surreal images

Dazzling Dance Photo Manipulation Effect

Light and Glow Effect In Photoshop

Energize Your Graphics with Abstract Energy Lines

Ps Advanced Splatter Effect Tutorial

Lighting Effect in Photoshop

Creative Photoshop Animal King Photo Manipulation Tutorial

Robotic Frog

How to Create a Flying Land Illustration On Fire

Watercolor Effect

Alien Invasion

Creating Energy Spheres

Seriously Cool Photoshop Explosion Effect

Lightning from hand

Adding Light Streaks Effect To A Photo

How To Make Circle Pixels Effect

Giving A Mafia-Look Effect

Design an Awesome Space Dancer Scene Effect

The Little Mermaid Photo Effect

Design a wolf howling at the moon effect

Light Effect On A Model

How To Turn Your Photo Into Movie-Like Effect

Dynamic Lightning Effect

Dark Art Picture Style Effect

The Ocean Girl Photo Effect

How To Make Digital Photos Look Like Lomo Photography Effect

Age Progression

Creating an Abstract Watercolor Effect

Fiery Photoshop Space Explosion Effect

Add Realistic Rainbow Effect To A Photo

Fantastic Disintegration Effect

Realistic Water Reflection Effect

Grunge Photo Edges Effect

Add A Sparkle Trail Effect To A Photo

How to Place a Use lighting effects to make photos sparkle

Creating Light Motion Trails & Glowing Sparks Effect

Christmas Fairy Magic Effect

Bringing A Stone Statue To Life Effect

How to Turn Humdrum Photos into Cinematic Portraits

Colorful Picture Style Effect

Realistic Tattoos Effect

Cool Halftone Effect

How to make a Typographic, Retro, Space Face Effect

Photo Editing / Retouching

How to Apply Textures to Uneven Surfaces

Create a fantasy illustration in Photoshop

Urban-Style Piece Of Artwork

Watchmen Effect

Make an Apple Coldplay Style Ad in Photoshop

Zombie Effect

Halftone Dots And Linear Light

Beautiful Lady Effect

Mosaic, Fill A Photo With Photos Effect

Creating A Rocking Silhouette

Make Photos More Suggestive

Adding Reflections To Sunglasses Effect

Devil's Eye Effect

Fantasy Art

Retro Comic Book Effect

Water effect photo montage

Vibrant Image Effect Using Photoshop

Ghost Effect

Dramatic gritty effect

Photo to Illustration Effect

Turn A Photo Into A Collage Of Polaroids In Photoshop

Instant Photo To Oil Painting Action

Photo to sketch Effect

Pop Art Silkscreen Effect

The Louis Daguerre Effect

Cubism Effect

Cross-Processing Effect

Create an Illustrated Look From a Photograph

Super mysterious lighting effects for your image

HDR Effect Tutorial

FAKE MODEL PHOTOGRAPHY EFFECT

Photo to stencil Effect

Transform your Photos into a Beautiful Mosaic

Panoramas on Steroids Effect

Pop Art Effect

Filtering Out Colours

City Globe Effect

Vintage photo effect

Selective Sepia Effect

Photoshop Rain Effect

Soft Glow Effects

Charcoal Effect

High-Key B&W Portrait Effect

Horror Film Effect

Snow Effect

HDR - High Dynamic Range Photography

English Tea can Painting Effect

Realistic Spotlight Effect in Photoshop

Better negative effect

Dave Hill Look Effect

Frosted Pixels Effect

Darklight Photomanipulation

Blue Print Effect

PIXEL STRETCH EFFECT

OLD MOVIE EFFECT

REALISTIC FOG & MIST EFFECT

The Night Vision Thing Effect

A Realist Painting Effect

Hot & Fiery Photo Effect

Trippy Colors Photo effect Tutorial

Digital Painting with Light

Displacement Water Effect

Creating a 3D effect with image editing software

India Movie Look

Faking Depth Of Field Effect

Infrared Photo Effect

Blurry TV Effect

PUZZLE PATTERN EFFECT

Face painting on cracked wall Tutorial

Create photo mosaics effect

Bourne Ultimatum Color and Motion Blur Effect

Cast Light From A Window Effect

Stylized paint effect

Night shooting effect

Give Your Photos a Color Ink Sketch Effect

Wicked Blast Effect

Fix Perspective Effect

Sharpen with Edge Mask

Making Your Subject Pop Out Of A Photo

Telling Stories With Shadows

Digital Pixel Effect

Tearing A Photo To Reveal Another

Worn, Torn Photo Edges Effect In Photoshop

Mirror Image Effect In Photoshop

Placing An Image Inside Of Another In Photoshop

Create A Starry Sky In Photoshop

Photo Into a Beautiful Painting

Summery

Finally, this article has ended (after 200 tutorial i lost count). This really eats a lot of my time but i think it is worthwhile since i can refer back to it every single time and won't find myself in 'where's that tutorial again' situation. Nonetheless, if any of you are using this too, please throw in more photoshop photo effect tutorial that can benefit us all. Enjoy 🙂

It is a common thing for most web beginners to wonder which style will the browser print first when we declare multiple style. Although i have explain previous on the order priority of CSS, i forgotten about the importance of inline, internal and external CSS style that both designers and developers might wonder when they started on web.

Inline CSS

The inline CSS also refer as embedded style is usually mark as the highest priority over internal or external style. An inline style has the highest priority among others but the style can only be apply to an individual element. Here's an example

when the external CSS is after the internal CSS, the external CSS will have a higher priority.

Priority Sequences

Hence, we can produce a priority sequences of how CSS prioritize our CSS types.

User Style

Inline Style (inside HTML tag)

Internal Style (usually on the HTML head section)

External Style

Browser Default Style

User style (the style that user define for your website) have the highest priority over all other types but as a developer or designer we should only worry about the priority given on inline, internal and external style. Nonetheless, it is also important to know that using !important will also mean that user style priority is overwrite by the HIGHEST priority (which is style declare with !important). That is also the reason why we should try to avoid the use of !important as a developer or designer to avoid any usability problem and utilize order priority in CSS.

Summary

Once we understand how order priority work in CSS, we can easily figure out how CSS cascade all our different styles into one. But one last thing to take note of. The order priority in this link only apply to internal and external style. Hence, if both internal and external have the same exact style definition which order priority in this link will CSS take as the highest priority. The answer lays in this article where we explain on the internal CSS section.

Its been quite a while since i write anything about jQuery. Furthermore, i have been writing many different optimization articles and jQuery is something that i have not write for quite sometime. Since many uses jQuery quite intensively in either design or application, why don't i give some tips on jQuery too. I think it will be beneficial that such optimization tips can be share and utilize in future application. Therefore, in this article you will see 8 jQuery optimization tips and tricks that might just benefit you during your jQuery coding.

1. Profiling

Once of the most important thing in every optimization, profiling. We can easily perform profiling using firebug. Everyone who is a developer or even designer should be well aware of firebug that could help assist in this task. Profiling allow us to see exactly how many times each function has run and how long does it take. With the help of profiling you will be able to see which function is the bottleneck in your jQuery functions.

2. Benchmarking

Another thing that every optimization will have to come across eventually is benchmarking. In programming, it is very common to use different ways to achieve the same result when we are writing our codes. In order to know which ways give us the best result, benchmarking will be required in order to justify correctly that certain way of achieving the same result is better than the other. Benchmarking across different JavaScript frameworks is the only way we can see which framework run faster than the other in certain ways. Hence, benchmarking is really required in order to justify the efficiency of two or more methods or script.

3. Specific Selector

In jQuery v1.3 below, specific a selector is necessary to optimize jQuery selector speed. A selector that are more specific will result in a faster result found. Hence, an id such as this:

jQuery('#someid').attr('value');

id is always the fastest compare to class or tag where classes is the worst (we do not have document.getElementByClasses don't we). Nonetheless, we can improve the efficiency of the selector by being more specific. Hence, instead of just calling out classes like this:

jQuery('.classes').html();

we can improve it by telling it where it exactly located at

jQuery('div ul li.classes').html();

By being specific in jQuery, we can improve the selector speed. However, this is what happen before jQuery v1.3. After the introduction of 'Sizzling' selector engine, this is no longer the case. We can see that by doing a selector test that the selector has speed up than before. This means that being specific with classes will not have significant differences after v1.3 (because it required more call to be specific) unless you are doing a rather odd selector such as this

jQuery('#id .class div').html();

It will be rather faster with just

jQuery(' .class').html();

Try to avoid id, classes and attribute combination that might just hit your selector badly. The point is to specific a selector but not over specific that might cause a degrade in selector performance.

This is something that we often see in many plugin. Many plugin contains unnecessary selector which degrade the perform of the plugin little by little.

5. Avoid Unnecessary Styling

This is another common mistake that many jQuery developer made. jQuery provides us with the ability to manipulate styling through styling methods. Although it is very convenient to do that but it also contribute to the size of the script and makes maintenance difficult. Furthermore, some of the selector is made solely for styling purposes which makes it even undesirable. To make thing worst, the styles made with jQuery are all inline style which doesn't help caching. Hence, instead of styling everything with jQuery. It is much more advisable to give classes to your tag and style it on a external stylesheet. Instead of writing jQuery styling such as these,

This way we can easily eliminate a lot of extra code in our script. Unless, absolutely necessary to manipulate styling through jQuery, it is better to leave styling to the stylesheet.

6. Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimize our selector is simple. Naive JavaScript provides two method to get id and tag (getElementById and getElementByTagName). Hence, it is always faster to use tag or id on your selector. No matter what algorithm used for classes and attributes selection, the naive built-in JavaScript method will always have the upper hand. Nonetheless, classes and attribute selector have also been improved dramatically through the introduction of 'sizzling' selector engine. However, it is always advisable to reduce the number of attribute selector as they are the slowest in many cases. On the other hand, making your selector as simple as possible is good for pure tag and id selector but may not be true for attribute and selector. Hence,

jQuery('div')
jQuery('#id')
jQuery('.classes')
jQuery('p:last')

is considered as good selectors while the below might not give you very good selector result.

Leaving aside the additional operation on append() each time we call, we are also doing some expensive DOM creation each step when we can really help ourselves by doing a one line query and leave the rest to jQuery. For customize table you might do this.

The above is a CSS method in jQuery that takes a key and a value which we are familiar using in this way

jQuery('#id').css('display', 'block');

We can see that jQuery present certain overhead for doing something simple where JavaScript can also achieve.

document.getElementById('id').style.display = 'block';

Other methods such as show(), hide(), hasClass() and etc. also present some overhead which you should balance between complexity and efficiency. Hence, we must understand some of the cost of jQuery action and balance between JavaScript and jQuery. jQuery is build for general public and making a general public framework might means additional operation to meet everyone needs. Hence, if you truly going all out on optimization, you should consider the trade-off of some action between JavaScript and jQuery.

Summary

jQuery is a great framework that ease all our development life. Operation that gets complicated can easily become simple with jQuery. However, like i stress the important of keeping out unnecessary jQuery code will certainly help generating a more efficiency and optimize jQuery script.