Posts Tagged tips

Best Tools to help Web Developer for easy work

Image optimization

https://kraken.io/web-interface

 http://html.validator.pro/#/start

 

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.


pForm

Create a HTML forms in seconds.


ColourLovers

COLOURlovers is an international creative community that helps people discover their inner designer.


Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page


HTML Entity Character Lookup

Using HTML entities is the right way to ensure all the characters on your page are validated. However, often finding the right entity code requires scanning through 250 rows of characters.


960 Grid System


Em Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.


Browser Shots

Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place.


Icon Finder

Iconfinder provides high quality icons for webdesigners and developers in an easy and efficient way. The site launched in 2007 as the first search engine focused on icons.


WhatTheFont

Seen a font in use and want to know what it is? Submit an image to WhatTheFont to find the closest matches of that font.


MeasureIt

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.


ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies…


Pingdom

Pingdom Test tool to help you analyze the load speed of your websites and learn how to make them faster. It lets you identify what about a web page is fast, slow, too big, what best practices you’re not following, and so on.


Test Everything


CSS Sprite Generator

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.


Web Developer Toolbar

The Web Developer extension adds various web developer tools to the browser.


Domainr

When you want a short URL or something big, Domainr will find it, fast.


Font Burner

Font Burner is a website enhancement tool that makes it easy for you to add new fonts to your website.


Smush.It

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality.


Load Impact

Load Impact is a leading online load testing service that lets you load test your website over the Internet. It’s a true On Demand service, where you can start testing instantly and there are no licenses fees. You simply pay as you go.

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

Regular Expressions for PHP Developers

Regular expressions syntax

Regular Expression Action
xyz The string “xyz”
^xyz “xyz” at the start of a string
xyz$ “xyz” at the end of a string
^xyz$ “xyz” when it is alone on a string
[abc] a, b, or c
[a-z] Any lowercase letter
[^A-Z] Any character not included a uppercase letter
(gif|jpeg) Matches either “gif” or “jpeg”
[a-z]+ One or more lowercase letters
[0-9.-] Any number, dot, or minus sign
^[a-zA-Z0-9_]{2,}$ Any word of at least two letter, number or _
([wx])([yz]) wy, wz, xy, or xz
[^A-Za-z0-9] Any Symbols (No Numbers or Letters, Only Symbols)
([A-Z]{4}|[0-9]{5}) Matches four letters or five numbers

PHP regular expression functions

Function Description
preg_match() The preg_match() function searches string for pattern, returning true if pattern exists, and false otherwise.
preg_match_all() The preg_match_all() function matches all occurrences of pattern in string.
preg_replace() The preg_replace() function operates just like ereg_replace(), except that regular expressions can be used in the pattern and replacement input parameters.
preg_split() The preg_split() function operates exactly like split(), except that regular expressions are accepted as input parameters for pattern.
preg_grep() The preg_grep() function searches all elements of input_array, returning all elements matching the regexp pattern.
preg_quote() Quote regular expression characters

1) String Match

<?php
function alphaNumericCheck($element) {
return !preg_match ("/[^A-z0-9_\-]/", $element);
}
?>


2) Password Match Validation

<?php
$password = "Fyfjk34sdfjfsjq7";
if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password)) {
echo "Your passwords is strong.";
} else {
echo "Your password is weak.";
}
?>


3) Email Address Validation
<?php

$email = “someone@example.com”;

if(eregi(“^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$”, $email)) {

echo “Valid email address.”;

}

else {

echo “Invalid email address.”;

}

?>


4) Date Format Validation

<?php
function checkDateFormat($date)
{
//match the format of the date
if (preg_match ("/^([0-9]{4})-([0-9]{2})-([0-9]{2})$/", $date, $parts))
{
//check weather the date is valid of not
if(checkdate($parts[2],$parts[3],$parts[1]))
return true;
else
return false;
}
else
return false;
}
//Usage :
print_r(checkDateFormat("2008-02-29")); //return true
print_r(checkDateFormat("2007-02-29")); //return false
?>


5) Validate URL

^(?:https?:\/\/)?(?:[a-z0-9-]+\.)*((?:[a-z0-9-]+\.)[a-z]+)
Explanation
^ # start-of-line
(?: # begin non-capturing group
https? # "http" or "https"
:// # "://"
)? # end non-capturing group, make optional
(?: # start non-capturing group
[a-z0-9-]+\. # a name part (numbers, ASCII letters, dashes) & a dot
)* # end non-capturing group, match as often as possible
( # begin group 1 (this will be the domain name)
(?: # start non-capturing group
[a-z0-9-]+\. # a name part, same as above
) # end non-capturing group
[a-z]+ # the TLD
) # end group 1

Validating URL using regular expressions:

function isValidURL($url) {
return preg_match('|^http(s)?://[a-z0-9-]+(.[a-z0-9-]+)*(:[0-9]+)?(/.*)?$|i', $url);
}

Validating URL using filter_var:

function isValidURL($url) {

if (filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED)) return true;
else return false;
}

Validating Email using regular expressions:
function isValidEmail($email) {
return preg_match(“^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$^”, $email);
}

Validating Email using filter_var:
function isValidEmail($email) {
if (filter_var($email, FILTER_VALIDATE_EMAIL)) return true;
else return false;
}


6) Ip address validation in PHP using regular expression


function validateIpAddress($ip_addr)
{
//first of all the format of the ip address is matched
if(preg_match("/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/",$ip_addr))
{
//now all the intger values are separated
$parts=explode(".",$ip_addr);
//now we need to check each part can range from 0-255
foreach($parts as $ip_parts)
{
if(intval($ip_parts)>255 || intval($ip_parts)<0)
return false; //if number is not within range of 0-255
}
return true;
}
else
return false; //if format of ip address doesn't matches
}


7) Get all images from a HTML document

 

 


8) Remove repeated words (case insensitive)

 


9) Remove repeated punctuation


10) Matching a XML/HTML tag

 

 


11) Matching an XHTML/XML tag with a certain attribute value

 

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

Best and important jQuery Plugins, Every Web Developer / Designer must try it

Scrolling

jQuery Waypoints

Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

screenshot

skrollr

Parallax scrolling for the masses. Skrollr helps with all kinds of different scrolling effects including color shifts, transforms and more.

screenshot

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

screenshot

arbor.js

A graph visualization library using web workers and jQuery

screenshot

Layout

Wookmark jQuery Plugin

A dynamic column grid.

screenshot

jQuery Masonry

A dynamic layout plugin for jQuery The flip-side of CSS floats

screenshot

Isotope

Isotope: An exquisite jQuery plugin for magical layouts

screenshot

FitVids.JS

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

screenshot

gridster.js

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns.

screenshot

Freetile.js

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout.
screenshot

Text

jQuery TextExt Plugin

TextExt’s modular design allows you easily turn a standard HTML text input into a wide range of modern, tailored to your needs input field without bloating your source code

screenshot

Jeditable

Edit In Place Plugin For jQuery

screenshot

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

screenshot

Cool UI

jQuery Knob demo

Nice, downward compatible, touchable, jQuery dial

screenshot

noty – A jQuery Notification Plugin

Noty is a jQuery plugin that makes it easy to create alert, success, error, warning, information and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue.

screenshot

PageSlide

A jQuery plugin which slides a webpage over to reveal an additional interaction pane

screenshot

jQuery Collapse

This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.

screenshot

Avgrund

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations

screenshot

jQuery One Page Navigation

Smooth scrolling navigation and animation for single page sites. Super simple, incredibly handy.

screenshot

jqPagination

jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application.

screenshot

jQuery Joyride Feature Tour Plugin

Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved.

screenshot

Tooltips

jQuery PowerTip

PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.

screenshot

tipsy

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

screenshot

Slideshows, Images & Sliders

jQuery Slider Shock

The most complete responsive jQuery / WordPress slider.

screenshot

Backstretch

a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element

screenshot

jQuery Anystretch

Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes.

screenshot

jQuery Lightbox

A simple lightbox based on prototype and scriptaculous.

screenshot

FlexSlider 2

An awesome, fully responsive jQuery slider toolkit.

screenshot

ColorBox

A lightweight customizable lightbox plugin for jQuery

screenshot

WOW Slider

WOW Slider is a responsive jQuery image slider with amazing visual effects (Rotate, Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates.

screenshot

Miscellaneous

Timeago

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps

screenshot

jQuery Validation

The jQuery Validation Plugin provides validation for your existing forms.

screenshot

jQuery File Upload Demo

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.

screenshot

jQuery Instagram

A simple jQuery plugin to show a list of Instagram photos.

screenshot


MotionCAPTCHA

MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas requiring users to sketch the shape they see in the canvas in order to submit a form.

screenshot

jQuery Transit

Super-smooth CSS transitions & transformations for jQuery

screenshot

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

Top Payment gateways in India

CCAvenue: It is the most popular and important gateway used in India. It processes almost all kind of cards, supports direct bank transfer and USD payments. No alternative gateway will match the services offered by the gateway. Although the gateway is totally reliable but it is also the most expensive service in the market.

Features

  • Widest range of payment options
    Your customers can pay using 5 Credit Cards, 50 Debit Cards, 44+ Indian Net Banks, 4 Cash Cards and 2 Mobile Payments.
  • Highest Level of Security
    Stringent security measures ensures the security of critical and sensitive information – state-of-the-art security firewalls, PCI DSS 2.0 Compliance, VeriSign 128 bit SSL Technology, IndusGuard.

 


EBS : The services offered by EBS are next to CCAvenue.EBS is equally reliable and offers plans cheaper than other gateway services. It offers multiple plans along with some discounts. If you do not like any of them then you can select from the custom plans offered as per your needs.


Transecute: Transecute is one more payment gateway that’s gaining popularity in recent times mainly because of the services it offers. The best part is it does not charge any setup fee or withdrawal charges. The rate per transaction is 5% and it supports master and visa cards. The application is claimed to be processed within 15 days and one can withdraw weekly. Apart from that, in case a transaction is reversed the gateway also refunds the commission charged.


DirecPay: DirectPay is a Times group endeavor and is known for its fast and reliable services.


Benefits of DirecPay

  • One Gateway for Various Payments- DirecPay is a payment gateway solution that enables you to accept customer payments from credit cards, debit cards and net banking, all under one roof.
  • Watertight Security
  • Short Settlement Period– Settlement of payments made to you are done within 2 days, ensuring that your working capital is not blocked by the payment processing services.
  • Payment Alerts– Merchants receive alerts via email for every transaction conducted. They can track transaction details themselves by logging into the Merchant Information System (MIS).
  • Merchant Account Not Mandatory– Merchants need not open any additional bank account on being a DirecPay merchant. Settlements are made to the existing bank account of the merchant.

 


Paypal: Paypal is one of the most popular gateways over the internet. However, it is suitable for you only if you have to deal with international clients. The gateway is not suitable for purely Indian market customers as it does not deal in Indian currency and hence one has to pay additional currency conversion charges along with the per transaction charges.


ICICI Payseal : It is an ICICI bank venture and their rate per transaction charge is also very less. The only thing is the gateway requires java technology to integrate it and the company sometimes take long to set the deal.

 


Paysignet: Paysignet not only supports most major international and domestic cards however that offers earn and pay facility. As per the facility, one has to pay only half the amount during account setup. The remaining half can be paid when you actually start earning from your website and funds are collected by the gateway.


IndiaPay: Last but not the least, IndiaPay additionally supports multiple payment options accepting almost all cards along with the option to collect payment from international clients. It also offers you a comprehensive API along with fraud and risk management services.

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

Top Most Popular Social Bookmarking Websites

Twitter Pinterest Reddit StumbleUpon BuzzFeed Delicious Tweetmeme digg FARK Slashdot Friendfeed Clipmarks Newsvine| Diigo DZone Chime.in

Other Social Bookmarking Sites

slashdot.org

reddit.com

squidoo.com

stumbleupon.com

delicious.com

digg.com

technorati.com

folkd.com

diigo.com

metafilter.com

newsvine.com

blinklist.com

bibsonomy.org

hotklix.com

dzone.com

current.com

buddymarks.com

mister-wong.com

jumptags.com

bizsugar.com

designfloat.com

popscreen.com

fark.com

dropjack.com

startaid.com

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

Usefull CSS Selectors for Developers / Designers

*
:
Any element
[TagX]
:
An element of type “[TagX]”
[TagX]#myid
:
An “[TagX]” element with ID equal to “myid”
[TagX].className
:
An “[TagX]” element whose class is “className”
[TagX][className]
:
An “[TagX]” element with a “className” attribute
[TagX][className=”bar”]
:
An “[TagX]” element whose “className” attribute value is exactly equal to “bar”
[TagX][className!=”bar”]
:
An “[TagX]” element whose “className” attribute value does not equal to “bar”
[TagX][className~=”bar”]
:
An “[TagX]” element whose “className” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar”
[TagX][className^=”bar”]
:
An “[TagX]” element whose “className” attribute value begins exactly with the string “bar”
[TagX][className$=”bar”]
:
An “[TagX]” element whose “className” attribute value ends exactly with the string “bar”
[TagX][className*=”bar”]
:
An “[TagX]” element whose “className” attribute value contains the substring “bar”
[TagX][className|=”en”]
:
An “[TagX]” element whose “className” attribute has a hyphen-separated list of values beginning (from the left) with “en”
[TagX]:nth-child(n)
:
An “[TagX]” element, the n-th child of its parent
[TagX]:first-child
:
An “[TagX]” element, first child of its parent
[TagX]:last-child
:
An “[TagX]” element, last child of its parent
[TagX]:only-child
:
An “[TagX]” element, only child of its parent
[TagX]:empty
:
An “[TagX]” element that has no children (including text nodes)
[TagX]:link
:
“[TagX]” link
[TagX]:focus
:
An “[TagX]” element during certain user actions
[TagX]:enabled
:
[TagX] user interface element “[TagX]” which is enabled
[TagX]:disabled
:
[TagX] user interface element “[TagX]” which is disabled
[TagX]:checked
:
[TagX] user interface element “[TagX]” which is checked (for instance a radio-button or checkbox)
[TagX]:input
:
An “[TagX]” element that is an input element (includes textarea, select and button)
[TagX]:text
:
An “[TagX]” element that is an input text field or text area
[TagX]:checkbox
:
An “[TagX]” element that is an input checkbox
[TagX]:file
:
An “[TagX]” element that is an input file
[TagX]:password
:
An “[TagX]” element that is an input password
[TagX]:submit
:
An “[TagX]” element that is an input or button of type submit
[TagX]:image
:
An “[TagX]” element that is an input of type image
[TagX]:button
:
An “[TagX]” element that is an input or button of type button
[TagX]:reset
:
An “[TagX]” element that is an input or button of type reset
[TagX]:header
:
An header element, one of h1, h2, h3, h4, h5, h6
[TagX]:parent
:
“[TagX]” parent element, an element that contains another element
[TagX]:not(s)
:
An “[TagX]” element that does not match the selector s (multiple selectors supported)
[TagX]:contains(t)
:
An “[TagX]” element whose textual contents contains t (case sensitive)
[TagX]:first
:
An “[TagX]” element whose position on the page is first in document order
[TagX]:last
:
An “[TagX]” element whose position on the page is last in document order
[TagX]:even
:
An “[TagX]” element whose position on the page is even numbered (counting starts at 0)
[TagX]:odd
:
An “[TagX]” element whose position on the page is odd numbered (counting starts at 0)
[TagX]:eq(n)/:nth(n)
:
An “[TagX]” element whose Nth element on the page (e.g :eq(5))
[TagX]:lt(n)
:
An “[TagX]” element whose position on the page is less than n
[TagX]:gt(n)
:
An “[TagX]” element whose position on the page is less than n
[TagX] [TagY]
:
An “[TagY]” element descendant of an “[TagX]” element
[TagX] > [TagY]
:
An “[TagY]” element child of an “[TagX]” element
[TagX] + [TagY]
:
An “[TagY]” element immediately preceded by an “[TagX]” element
[TagX] ~ [TagY]
:
An “[TagY]” element preceded by an “[TagX]” element
[Tagx] & [TagY]= it can be any tag like div, span, tr, font etc..

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →