MySQL Remove Duplicates

If we have a table like that and want to remove rows with duplicate name fields.

| id | name   |
| 1  | google |
| 2  | yahoo  |
| 3  | msn    |
| 4  | google |
| 5  | google |
| 6  | yahoo  |

1) If you want to keep the row with the lowest id value:

DELETE n1 FROM names n1, names n2 

2) If you want to keep the row with the highest id value:

DELETE n1 FROM names n1, names n2 


Replacing jQuery live with on

.live() function is removed on jQuery version 1.9.

So if you want the same behaviour, you can use on with versions gte 1.9.

Let’s say we have a code that’s like:

$(“#serviceItemsContainer input“).live(“change”, function(){ /* some code */ });

then this code block can be changed like that:

$(“#serviceItemsContainer”).on(“change”, “input”, function(){ /* some code */ });

Notice, there is an extra parameter to pass the function as a selector. This way you can attach a function without having the item on DOM, when you execute the code.

Happy Coding


Google Crawl Error 404

A word about 404 errors

One of the most common crawling errors are 404 errors, which occur when somebody tries to access a page that does not exist (usually because the page has been deleted or the user clicked on a broken or incorrect link). Most of the time, 404 errors can be ignored. However, if you’re seeing a lot of traffic leading to a URL that 404s, check your site for broken links. More information about dealing with 404 errors.

Adding and modifying history entries

Introduced in Gecko 2

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate event.

Using history.pushState() changes the referrer that gets used in the HTTP header for XMLHttpRequest objects created after you change the state. The referrer will be the URL of the document whose window is this at the time of creation of the XMLHttpRequest object.


Suppose executes the following JavaScript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

This will cause the URL bar to display, but won’t cause the browser to load bar.html or even check that bar.html exists.

Suppose now that the user now navigates to, then clicks back. At this point, the URL bar will display, and the page will get a popstate event whose state object contains a copy of stateObj. The page itself will look like foo.html, although the page might modify its contents during thepopstate event.

If we click back again, the URL will change to, and the document will get another popstate event, this time with a null state object. Here too, going back doesn’t change the document’s contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate event.

The pushState() method

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let’s examine each of these three parameters in more detail:

  • state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry’s state object.

The state object can be anything that can be serialized. Because Firefox saves state objects to the user’s disk so they can be restored after the user restarts her browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you’re encouraged to use sessionStorage and/orlocalStorage.

  • title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you’re moving.
  • URL — The new history entry’s URL is given by this parameter. Note that the browser won’t attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts her browser. The new URL does not need to be absolute; if it’s relative, it’s resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn’t specified, it’s set to the document’s current URL.

Note: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) through Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) , the passed object is serialized using JSON. Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) , the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.

In a sense, calling pushState() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current document. But pushState() has a few advantages:

  • The new URL can be any URL in the same origin as the current URL. In contrast, setting window.location keeps you at the same document only if you modify only the hash.
  • You don’t have to change the URL if you don’t want to. In contrast, setting window.location = "#foo"; only creates a new history entry if the current hash isn’t #foo.
  • You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.

Note that pushState() never causes a hashchange event to be fired, even if the new URL differs from the old URL only in its hash.

The replaceState() method

history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.

replaceState() is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.

Note: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) through Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) , the passed object is serialized using JSON. Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) , the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.

The popstate event

popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState or affected by a call to replaceState, the popstate event’s state property contains a copy of the history entry’s state object.

See window.onpopstate for sample usage.

Reading the current state

When your page loads, it might have a non-null state object.  This can happen, for example, if the page sets a state object (using pushState() or replaceState()) and then the user restarts her browser.  When your page reloads, the page will receive an onload event, but no popstate event.  However, if you read the history.stateproperty, you’ll get back the state object you would have gotten if a popstate had fired.

You can read the state of the current history entry without waiting for a popstate event using the history.state property like this:

var currentState = history.state;

Browser compatibility

  • Desktop
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
replaceState, pushState 5 4.0 (2.0) 11.50 5.0
history.state 4.0 (2.0) 11.50

You may use History.js to overcome the cross-browser compatibility problems.


Browser User Agent Types (iPhone, iPad, Android, etc)

There are lots of strings that you can get from visitor's http header called "User-Agent". With this information, you can distinguish content, partial content or complete sites to visitor. Here ise the list below:
  • Mozilla/5.0 (Danger hiptop 3.4; U; AvantGo 3.2)
  • Mozilla/3.0 (compatible; AvantGo 3.2)
  • Mozilla/5.0 (compatible; AvantGo 3.2; ProxiNet; Danger hiptop 1.0)
  • Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; BOLT/2.800) AppleWebKit/534.6 (KHTML, like Gecko) Version/5.0 Safari/534.6.3
  • DoCoMo/1.0/P502i/c10 (Google CHTML Proxy/1.0)
  • DoCoMo/2.0 SH901iC(c100;TB;W24H12)
  • DoCoMo/1.0/N503is/c10
  • KDDI-KC31 UP.Browser/ (GUI) MMP/2.0
  • UP.Browser/3.04-TS14 UP.Link/3.4.4
  • Vodafone/1.0/V802SE/SEJ001 Browser/SEMC-Browser/4.1
  • J-PHONE/5.0/V801SA/SN123456789012345 SA/0001JP Profile/MIDP-1.0
  • Mozilla/3.0(DDIPOCKET;JRC/AH-J3001V,AH-J3002V/1.0/0100/c50)CNF/2.0
  • PDXGW/1.0 (TX=8;TY=6;GX=96;GY=64;C=G2;G=B2;GI=0)
  • ASTEL/1.0/J-0511.00/c10/smel
  • Mozilla/1.22 (compatible; MSIE 5.01; PalmOS 3.0) EudoraWeb 2.1
  • Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240×320)
  • Mozilla/2.0 (compatible; MSIE 3.02; Windows CE; PPC; 240×320)
  • Mozilla/5.0 (X11; U; Linux armv6l; rv Gecko/20070619 Minimo/0.020
  • Mozilla/5.0 (Windows; U; Windows CE 5.1; rv:1.8.1a3) Gecko/20060610 Minimo/0.016
  • OPWV-SDK UP.Browser/ (GUI) MMP/2.0 Push/PO
  • UP.Browser/ (Google CHTML Proxy/1.0)
  • Continue reading

SVG vs. Canvas

Comparison of SVG and Canvas

The tables below give you an overview of the advantages and disadvantages of SVG and Canvas.


Canvas SVG
  • High performance 2D surface for drawing anything you want.
  • Constant performance — everything is a pixel. Performance only degrades when the image resolution increases.
  • You can save the resulting image as a .png or.jpg.
  • Best suited for generating raster graphics (for example in games, fractals, etc.), editing of images, and operations requiring pixel-level manipulation.
  • Resolution independence — this makes SVG better suited for cross-platform user interfaces because it allows scaling for any screen resolution.
  • SVG has very good support for animations. Elements can be animated using a declarative syntax, or via JavaScript.
  • You have full control over each element using the SVG DOM API in JavaScript.
  • SVG is an XML file format, which means that depending on each Web browser implementation the accessibility of SVG documents can be much better than that of canvas elements. This makes SVG a better solution for Web application user interfaces. Even if SVG provides mostly presentational markup, the semantics of the user interface can be improved with ARIAattributes.

Disadvantages Continue reading