javascript tips

1. Convert a json object into a pretty format string

You do not need library to do that, here is an example

var obj = {a:1, 'b':'foo']};
var str = JSON.stringify(obj, undefined, 2); // indentation level = 2

The str will be with pritty format string

{
   “a”: 1,
   “b”: “foo”
}

jQuery Mobile Tips

Tested under jquery mobile 1.3.2, and jquery 1.9

*) Go back

$.mobile.back()

// or
window.history.back();

*) change to a cached page

$.mobile.changePage($(“#pageId”));

*) change value of a checkbox(radio button)

$(‘:selector’).attr(“checked”, true).checkboxradio(“refresh”);

*) Refresh current page via javascript

$.mobile.changePage(window.location.href, {
    allowSamePageTransition: true,
    transition: ‘none’,
    reloadPage: true,
    changeHash: false
});

width versus device-width for mobile website

In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen’s resolution is 1440 x 900. This means the screen is 1440 pixels across, so it has a device-width of 1440px. Most mobile phones have a device-width of 480px or lower, including the popular iPhone 4 (with device-width: 320px), despite it technically having a 640 x 960 resolution. This is due to iPhone 4′s retina display, which crams two device pixels into each CSS pixel on the screen. This is true for the Ipad 3 as well; its reported device-width is 768px just like its predecessors, even though its actual screen resolution is 1536px x 2048px. In general width is more versatile when it comes to creating responsive webpages, thoughdevice-width is useful when you wish to specifically target mobile devices (and not desktops with a small browser window for example), as rarely do desktops have screen resolutions below a certain number such as 320px x 480px.

initial-scale=1.0,maximum-scale=1.0

Setting initial-scale=1 tells the browser not to zoom in or out regardless of what it thinks the page width is. This is good when you’ve designed your page to fit different widths since the browser will use the appropriate CSS rules for its own width, and initial-scale stops the zooming problem that we faced without the viewport meta tag.
Unfortunately a bug, or more likely a mis-feature, in mobile safari messes this up when a device is rotated from portrait to landscape mode. initial-scale is honoured only on full page load. On rotate from portrait to landscape mode, the browser assumes that the page width stays the same and scales accordingly (1.5) to make 320 pixels fit into 480pixels. However, as far as @media queries go, it reports a 480px width, and uses the appropriate CSS rules to render the page. This results in a page designed for 480px rendered scaled up 1.5 times. It’s not horrible, but it’s not desirable. It does the right thing in this case. The Android emulator is impossible to work with and I haven’t tested on mobile Opera yet.
To get around this bug, the pixel perfection camp suggests also setting maximum-scale=1. This stops the page zoom in on rotate, but it has the undesired side effect of preventing the user from zooming the page. This is a problem from the accessibility point of view. Zooming in is a very valid use case for users with bad eyesight, and in some cases, even users with good eyesight who just want a closer look at some part of your page. Do this only if you hate your users. It goes without saying that setting user-scalable=no should also not be used on most general purpose pages.
A better solution may be design your page to use the same styles in portrait and landscape orientation and set width=device-width. This way even if it does zoom, it will still be proportionate.

AND you can go http://screensiz.es/phone to see the screen size of latest mobile devices.

3 tools to Manage MySQL from Windows tools to Manage MySQL from Windows

MySQL is one of the most popular database servers on the planet. It’s free, open source, and as powerful as any other database around. MySQL is also cross-platform; and, like with Linux, there is no built-in GUI tool for Windows. However, that’s not really an issue because there are plenty of GUI tools available that can manage your MySQL database – even from the Windows environment. These tools can connect to both local and remote databases; so it doesn’t matter of your MySQL server is on the Windows machine or a Linux server.

1. HeidiSQL

HeidiSQL is a lightweight database administrator that allows you to connect to multiple database servers in one easy to use window. HeidiSQL features: Connect via SSH tunnel, create and edit tables/views, generate SQL-exports, manage user privileges, import text files, export, browse and edit table data. HeidiSQL also allows you to bulk edit tables, batch insert ascii or binary, write queries, pretty reform, monitor and kill client-processes, search for text in databases, and optimize and repair tables. HeidiSQL offers a very easy to use GUI.     

2. MySQL Workbench

MySQL Workbench is the de facto standard for MySQL database management. This particular tool is ideal for DBAS to aid with: Database Design & Modeling, SQL Development (replacing MySQL Query Browser), and Database Administration (replacing MySQL Administrator). MySQL features: SQL editor, SQL code completion, SQL code formatter, SQL Syntax highlighting, server start/stop, server status/health, server logs, server/replication configuration, user management, session management, and much, much more. 

3. Toad for Windows

Toad for Windows allows you to quickly create and execute database queries. With Toad you can:  Compare, extract, and search for objects; manage projects; import/export data; and administer the database. Toad also features: Version control, macro record/playback, database browser, code snippet editor, security manager, SQL editor, multi-tab schema browser, import/export utility. Toad supports Windows from XP on and is incredibly easy to install and use.

Web development via angularjs, javascript, asp.net, c#, html5, SEO, etc