Iphone/Ipad number format css style change in safari

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.

Share

25 Google Chrome Extension For Web Developer and Designer

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.

WhatFont

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.

Pretty Beautiful Javascript


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.

PHP Ninja Manual

With PHP Ninja Manual you can search easily and very quickly in PHP 5.3 documentation in 7 languages. Speed is everything we want in web development.

CoNetServ (Complex Network Services)

Extension that integrates network tools into the browser. I find it pretty useful for both network and web developer to know their server well.

jQuery API Browser

Simple extension for jQuery developers that allows quickly search through API documentation. Web developers and designers who uses jQuery surely find this valuable.

Speed Tracer


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.

Chrome Sniffer

 

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.

Edit This Cookie


Edit This Cookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!

IE Tab (Windows)


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.

Awesome Screenshot: Capture & Annotate

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 for Google Chrome


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.

  • Cannot read external resources
  • Won't work well on pages with frames
  • JavaScript debugger isn't available
  • Net Panel isn't available

Web Developer

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!

speedtest.net

Sometimes things doesn't go well and you will start wondering whether its your internet connection issue. Test it on your Chrome straight away!

Resolution Test


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


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.

Lorem Ipsum Generator


Both web developer and designer will appreciate this Chrome extension whenever they want to test a particular form or just throw some text into a design.

Click&Clean (Windows)


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,
  • Clean up your hard drives and Free up more disk space, icluding secure file deletion using external applications, like CCleaner or Wise Disk Cleaner.
  • Watch flash videos offline, without being connected to the Internet!

Web Edit


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.

Eye Dropper


Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.

YSlow

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.

IP Address and Domain Information


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.

Session Buddy


Web developers will find this pretty handle. Session Buddy is a flexible session management extension that allows you to easily save, edit, and restore your browser sessions.

SEO SERP


A simple tool to quickly check the position of a list of sites given a keyword.
For example, on the sample image you can see Wikipedia ranking #1 and Amazon ranking #18 for the keyword "lcd".

SEO SERP Workbench


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.

HTML5 Pointers!


A HTML5 Collection resources for those of you who wish to know more about html5 and wanted to try out the power of html5.

Share

200++ Photoshop Photo Effects

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

wave-explosion

Photo to Pencil Sketch Effect

pencil

Sin City Style Effect

sincity

How To Make Your Own Vector Portraits

vector

Tutorial: Good and Evil Photo Effect

evil

The Making of Mystic Effect

mystic

Transform A Person Into An Alien Effect

alien-photoshop

Reflective Bubbles Effect

3315027133_4f9e8c8241

Crack and Peel Effect

3315027243_4fcabe071f

Expressive Lighting Effect

aura-effect

Displacement Effect

awesome-effect

Vector Composite Effect from a Photo

blabus

Easy Watercolor Painting Effect

cartoon-effect

Twins Effect

clones

Apple Style Portrait Effect

coldplay

Compositing Effect

compositing

Dimension Effect

dimension

Blue Glow Dreamy Effect

dreamy

Ink Drops in Your Digital Compositions Effect

dropink

Super Slick Dusky Lighting Effect

earth effect

Electrifying Energy Beams Effect

electric

Eery-Eye Photo Effect

evil-eye-effect

Fairy Night Eye Effect

Fairy-Night

Fairy tale Effect

fairytale

Make your image look awesome with a few light effects

fewlights

Fire Lines Effect

firelines

Make Perfume Commercial

fragrance

Dirty Grunge Effect

grunge

Coloring Effect

guitar-girl

Photoshop Effect: Focus With Light

hand-light-effect

Speeding Car Effect

car-effect

The Maiden and Hummingbird Photo Manipulation

doll-effects

Design an Epic Fantasy Scene with Photoshop

fantasy-effects

Thermal Photo Effect

flame-effects

Create an Abstract Design with Curved Light Streaks

hand-effect

Dance Photo Effect

hip-hop-effect

Glowing Neon Effect

human-3d-effects

Fantasy Art Scene

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvc2lsZW50by5qcGc=

Sexy Model with Glowing Bubbles Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy8xMHN0ZXBzMi5qcGc=

Glamour model

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy9hZG9iZXR1dG9yaWFsei5qcGc=

Create an Amazing A.I. Robot Woman in Photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy9kZXNpZ25yZXZpdmVyLmpwZw==

Impressive Photo Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy9waG90b3Nob3A4eC5qcGc=

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

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy9wc2R2YXVsdC5qcGc=

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

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy9wc2R2YXVsdDIuanBn

Create sexy cyborg Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy9wc2RlbHV4ZS5qcGc=

Create a Stylish Two-Tone Photo Montage Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy9wc2RmYW4uanBn

Design a Stylish Fashion Advert Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy9wc2RmYW4yLmpwZw==

Create a Divine Angel Montage Effect in Photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy90dXRvcmlhbDkyLmpwZw==

Text Image Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy90dXRvcmlhbHBhcmsuanBn

Dynamic Scene with a Fallen Angel Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9fZWZmZWN0cy90dXRzcGx1czMuanBn

Combine Photo Elements to Create a Surreal Photo Manipulation Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcGhvdG9zaG9wdHV0b3JpYWxzLnBuZw==

Fairy and Sunset Landscape Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcHN3aXNoLmpwZw==

Photo Manipulation - Creating a Fantasy Scene

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcHNkcm9ja3N0YXIuanBn

The Soft Sea Light

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcHNkdG9wLmpwZw==

Awesome Fantasy Style Castle Scene Creation in Photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvcHNkdmF1bHQuanBn

Fantasy Photo Manipulation Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvdHV0c3BsdXM0LmpwZw==

Fantasy Creature in a Misty Landscape

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvdHV0c3BsdXMuanBn

Create an Out of Bounds Fantasy Illustration Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvdHV0c3BsdXMyLmpwZw==

Making of a Forest Magical Scene

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvMTBzdGVwcy5qcGc=

Making of Urban Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvY2dhcmVuYS5qcGc=

Create a Magic Crystal Ball

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvYWRvYmV0dXRvcmlhbHouanBn

Warth Best Life

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvYWRvYmV0dXRvcmlhbHoyLmpwZw==

Fantastic Tree

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvYWxmb2FydC5qcGc=

Magic lamp in the old room

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvYWxmb2FydDIuanBn

Fantastic Water Landscape

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvYWxmb2FydDMuanBn

Matte painting

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvZXllc29udHV0b3JpYWxzLmpwZw==

Magic Book

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvZXllc29udHV0b3JpYWxzMi5qcGc=

Serenity Prayer

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvZXllc29udHV0b3JpYWxzMy5qcGc=

Galaxy Angel

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMvZXllc29udHV0b3JpYWxzNC5qcGc=

Badass Bling Effect in Photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL2dvbWVkaWF6aW5lLmpwZw==

Flying Girl in Photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL2FiZHV6ZWVkby5qcGc=

Really cool Eclipse Effect in Photosho

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL2FiZHV6ZWVkbzIuanBn

X-MEN movie poster

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL2Fkb2JldHV0b3JpYWx6LmpwZw==

How to create a stylish mad lady in photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL2Jlc3RwaG90b3Nob3B0dXRvcmlhbHMuanBn

Fantasy light effects in Photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL2RpZ2l0YWxhcnRzb25saW5lMi5qcGc=

Lighting effects in Photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL2RpZ2l0YWxhcnRzb25saW5lMy5qcGc=

Make incredible surreal images

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL2RpZ2l0YWxhcnRzb25saW5lNC5qcGc=

Dazzling Dance Photo Manipulation Effect

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL3Bob3Rvc2hvcHR1dG9yaWFscy5wbmc=

Light and Glow Effect In Photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL3NlY29uZHBpY3R1cmUuanBn

Energize Your Graphics with Abstract Energy Lines

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL3R1dG9yaWFsOS5qcGc=

Ps Advanced Splatter Effect Tutorial

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyL3R1dGNhbmR5LmpwZw==

Lighting Effect in Photoshop

L2hvbWUzL3BzZGVsdXhlL3B1YmxpY19odG1sL2ltYWdlcy9zdG9yaWVzL3dlYnR1dHMyLzEwc3RlcHMuanBn

Creative Photoshop Animal King Photo Manipulation Tutorial

anime-king-effects

Robotic Frog

frog

How to Create a Flying Land Illustration On Fire

knight-story-effects

Watercolor Effect

light-girl-effects

Alien Invasion

invasion-effects

Creating Energy Spheres

light-beam

Seriously Cool Photoshop Explosion Effect

light-effect

Lightning from hand

lighting-effects

Adding Light Streaks Effect To A Photo

lights

How To Make Circle Pixels Effect

lines-effect

Giving A Mafia-Look Effect

mafia

Design an Awesome Space Dancer Scene Effect

magic-effects

The Little Mermaid Photo Effect

mermaid

Design a wolf howling at the moon effect

midnight-effects

Light Effect On A Model

modern-effect

How To Turn Your Photo Into Movie-Like Effect

movie-effect

Dynamic Lightning Effect

building

Dark Art Picture Style Effect

night-effect

The Ocean Girl Photo Effect

ocean

How To Make Digital Photos Look Like Lomo Photography Effect

old-effects

Age Progression

old-lady-effect

Creating an Abstract Watercolor Effect

painting-effects

Fiery Photoshop Space Explosion Effect

planet-effect

Add Realistic Rainbow Effect To A Photo

ranbow-effect

Fantastic Disintegration Effect

rawr-effects

Realistic Water Reflection Effect

reflect-effect

Grunge Photo Edges Effect

shouting-effects

Add A Sparkle Trail Effect To A Photo

sparkle

How to Place a Use lighting effects to make photos sparkle

sparkle02

Creating Light Motion Trails & Glowing Sparks Effect

sparks

Christmas Fairy Magic Effect

star-effects

Bringing A Stone Statue To Life Effect

state-effects

How to Turn Humdrum Photos into Cinematic Portraits

storm-effects

Colorful Picture Style Effect

strong-impression

Realistic Tattoos Effect

tatoo-effect

Cool Halftone Effect

text-effect

How to make a Typographic, Retro, Space Face Effect

topology-effect

Photo Editing / Retouching

tragic

How to Apply Textures to Uneven Surfaces

tree-effects

Create a fantasy illustration in Photoshop

unicorn-effects

Urban-Style Piece Of Artwork

urban

Watchmen Effect

watchman-effects

Make an Apple Coldplay Style Ad in Photoshop

welcome-effect

Zombie Effect

zombie-effect

Halftone Dots And Linear Light

3315027899_4deff3e472

Beautiful Lady Effect

3315027947_3b5fe05642

Mosaic, Fill A Photo With Photos Effect

3315028177_dfda4429b6

Creating A Rocking Silhouette

3315028369_d29730bbd1

Make Photos More Suggestive

3315028409_7f18db32d7

Adding Reflections To Sunglasses Effect

3315028555_e6cf210930

Devil's Eye Effect

3315854678_0ee80c73ea

Fantasy Art

3315855042_3dd0fdbdb2

Retro Comic Book Effect

comic-effect

Water effect photo montage

wave

Vibrant Image Effect Using Photoshop

dance-effect

Ghost Effect

ghost

Dramatic gritty effect

Dramatic-gritty-effect

Photo to Illustration Effect

photo-to-illustrator

Turn A Photo Into A Collage Of Polaroids In Photoshop

Collage-Polaroids-Photoshop

Instant Photo To Oil Painting Action

Instant-Photo-To-Oil-Painting-Action

Photo to sketch Effect

soft-contrast-2

Pop Art Silkscreen Effect

pop-art-silkscreen-350

The Louis Daguerre Effect

daguerre-photo-effect-final

Cubism Effect

cubic-effect

Cross-Processing Effect

cross-effect

Create an Illustrated Look From a Photograph

photo-to-drawing

Super mysterious lighting effects for your image

sun-effect

HDR Effect Tutorial

HDR-tutorial

FAKE MODEL PHOTOGRAPHY EFFECT

fake-photography-effect

Photo to stencil Effect

Photo-to-stencil

Transform your Photos into a Beautiful Mosaic

picture-mosaic-14

Panoramas on Steroids Effect

panographyfeature

Pop Art Effect

Pop-Art

Filtering Out Colours

filter-color

City Globe Effect

city-global

Vintage photo effect

Vintage-photo-effect

Selective Sepia Effect

Selective-Sepia

Photoshop Rain Effect

photoshop-rain

Soft Glow Effects

slow-glow-effect

Charcoal Effect

charcoal-drawing-photoshop

High-Key B&W Portrait Effect

high-key01

Horror Film Effect

Horror-Film-Effect

Snow Effect

Snow-effect

HDR - High Dynamic Range Photography

HDR

English Tea can Painting Effect

English-Tea-can-Painting

Realistic Spotlight Effect in Photoshop

Realistic-Spotlight-Effect-Photoshop

Better negative effect

negative-effect

Dave Hill Look Effect

dave-hill-photoshop

Frosted Pixels Effect

Frosted-Pixels

Darklight Photomanipulation

Darklight-Photomanipulation

Blue Print Effect

blue-print-effect

PIXEL STRETCH EFFECT

pixel-stretch

OLD MOVIE EFFECT

old-movie

REALISTIC FOG & MIST EFFECT

realistic-fog-mist-effect

The Night Vision Thing Effect

night-vision-2

A Realist Painting Effect

realistic-painting

Hot & Fiery Photo Effect

Hot-Fiery-Photo-Effect

Trippy Colors Photo effect Tutorial

trippy_color_effect_preview

Digital Painting with Light

Digital-Painting-Light

Displacement Water Effect

Displacement-Water-effect

Creating a 3D effect with image editing software

3d-pop-out

India Movie Look

movie-look

Faking Depth Of Field Effect

Depth_Of_Field

Infrared Photo Effect

infraned-effect

Blurry TV Effect

blurry-tv-effect

PUZZLE PATTERN EFFECT

puzzle-effect

Face painting on cracked wall Tutorial

Face-on-Cracked-wall

Create photo mosaics effect

photo-mosaics

Bourne Ultimatum Color and Motion Blur Effect

Bourne-Ultimatum-Color-and-Motion-Blur

Cast Light From A Window Effect

window-light-effect

Stylized paint effect

Stylized-paint-effect

Night shooting effect

Night-shooting-effect

Give Your Photos a Color Ink Sketch Effect

Color-Ink-Sketch-Effect

Wicked Blast Effect

Wicked-Blast

Fix Perspective Effect

fix-perspective

Sharpen with Edge Mask

sharpen-edge

Making Your Subject Pop Out Of A Photo

photo-pop-out

Telling Stories With Shadows

superman

Digital Pixel Effect

digital-pixel

Tearing A Photo To Reveal Another

tear-effect

Worn, Torn Photo Edges Effect In Photoshop

photoshop-worn-torn-photo-edges

image-hard-light

Mirror Image Effect In Photoshop

photoshop-mirror-image-effect

Placing An Image Inside Of Another In Photoshop

tv-image

Create A Starry Sky In Photoshop

starry-sky

Photo Into a Beautiful Painting

tutorial-how-to-turn-a-photo-into-a-beautiful-painting-in-photoshop

 

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 🙂

Share

Inline, Internal or External CSS Style Print First?

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

<div style='height:200px;width:200px;text-align:center;'>Click me!</div>

Inline style may be convenient to write but maintenance work will definitely kill you one day.

External CSS

The external CSS which the style is usually placed on an external file will usually have the lowest priority over these three type.

<link rel="stylesheet" type="text/css" href="http:/hungred.com/external.css">

Nonetheless, sometimes external CSS can have higher priority over the internal CSS in some circumstances.

Internal CSS

Internal CSS are definition declare inside of the HTML document with the style tag,

<style type='text/css'>
div{
height:200px;
width:200px;
text-align:center;
}
</style>

Internal CSS usually have the second highest priority among them. However, it will lose its priority if the external stylesheet declaration is placed at after the internal CSS. Hence,

<link rel="stylesheet" type="text/css" href="http:/hungred.com/external.css">
<style type='text/css'>
div{
height:200px;
width:200px;
text-align:center;
}
</style>

the internal CSS is after the external CSS. Therefore, the internal CSS has a higher priority. On the other hand,

<style type='text/css'>
div{
height:200px;
width:200px;
text-align:center;
}
</style>
<link rel="stylesheet" type="text/css" href="http:/hungred.com/external.css">

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.

  1. User Style
  2. Inline Style (inside HTML tag)
  3. Internal Style (usually on the HTML head section)
  4. External Style
  5. 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.

Share

8 jQuery Optimization Tips and Tricks

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.

4. Avoid Unnecessary Selector

Common subexpression elimination is a common way to optimize any programming code. Doing unnecessary selector is expensive. Doing something like this:

jQuery('.class').each(function(){
	jQuery(this).html();
	jQuery(this).find('div').each(function(){
		//etc.
	});
});

which required many selector it is best to use 1 instead since we are repeating ourselves and doing some redundant selector.

jQuery('.class').each(function(){
	var obj = jQuery(this);
	obj.html();
	obj.find('div').each(function(){
		//etc.
	});
});

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,

jQuery('div').each(function(){
	var obj = jQuery(this);
	obj.css({'background-color' : 'yellow', 'font-weight' : 'bolder', 'color': '#000', 'font-size': '15px'})
});

Where styling is being applied through jQuery, we can just add a class or even better do it on the HTML file itself!

jQuery('div').each(function(){
	var obj = jQuery(this);
	obj.addClass("mystyling");
});

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.

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

It is important to treat jQuery as a helper of JavaScript instead of a new language.

7. Avoid DOM Manipulation

Since we are using jQuery as a framework, making life difficult for ourselves is the most silly thing anyone can make. Example, using jQuery to write a table in DOM style~

var table = $('<table></table>');
for (var i = 0; i < 6; i++) {
  var tr = $('<tr></tr>');
  for (var j = 0; j < 7; j++) {
    tr.append('<td></td>');
  }
  table.append($tr);
}

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.

var table = '<table>'
for (var i = 0; i < 6; i++) {
  var tr = '<tr>';
  for (var j = 0; j < 7; j++) {
    tr +='<td></td>';
  }
  tr +='</tr>';
  table += tr;
}
table += '</table>';
var table = $(table);

For a static table, its really one line.

var table = $('<table><tr><td><td>...</tr><tr>...</tr>...</table>');

But if you really want a table, do it in HTML. You don't need to create everything using jQuery. Treat jQuery as an expensive action and use it when absolute needed. (same goes with styling)

8. Balance between JavaScript and jQuery

jQuery is excellent to speed up ANY front-end developer job. However, there are times when jQuery may take more time to perform certain action than using JavaScript. For example,

	css: function( key, value ) {
		// ignore negative width and height values
		if ( (key == 'width' || key == 'height') && parseFloat(value) < 0 )
			value = undefined;
		return this.attr( key, value, "curCSS" );
	}

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.

Share