Thursday, August 23, 2012
Wednesday, August 22, 2012
SVN: Update To Older Revision
This will come in handy if the current revision that you’ve updated to had a problem. svn update -r REV or svn merge -r HEAD:REV, where REV is the previous revision number and HEAD is the head revision before the problem occur.
Tuesday, August 21, 2012
Php: Get dates by week number
Given a week number, how do you calculate the days in that week starting from Monday?
$week_number = 40;
$year = 2008;
for($day=1; $day<=7; $day++) {
echo date('m/d/Y', strtotime($year."W".$week_number.$day))."\n";
}
$week_number = 40;
$year = 2008;
for($day=1; $day<=7; $day++) {
echo date('m/d/Y', strtotime($year."W".$week_number.$day))."\n";
}
Sunday, August 12, 2012
Css3 Ribbon Generator
A generator for beautiful 3D ribbons with pure CSS.
Source : http://www.css3d.net/ribbon-generator/#preview
Source : http://www.css3d.net/ribbon-generator/#preview
JQUERY 1.8 RELEASED
You can pick up the code from jQuery’s CDN:
- http://code.jquery.com/jquery-1.8.0.min.js (compressed and minified, for production)
- http://code.jquery.com/jquery-1.8.0.js (uncompressed, for debugging)
Thursday, August 9, 2012
meta name="viewport"
Nowadays, the new generations of mobile browsers can render full web pages (desktop version) without any problems and scale them to fit nicely inside the mobile browser’s visible viewport. The user then can zoom in on areas of interest and pan around on the page using touch, or keypad that depending on the mobile devices. This may not sounds user-friendly for mobile users, because if the web page loaded is wider than 320px, everything in the page were too small to read without zooming.
Now, we have a solution to solve it by telling the mobile browsers to render the page according to the mobile devices using “viewport meta tag“.
In order to define mobile’s viewport, you have to include a viewport meta tag in the <head> section of your HTML document as shown below:
Now, we have a solution to solve it by telling the mobile browsers to render the page according to the mobile devices using “viewport meta tag“.
In order to define mobile’s viewport, you have to include a viewport meta tag in the <head> section of your HTML document as shown below:
<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=1.0,
user-scalable=no, target-densitydpi=device-dpi"/>
<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=3.0,
user-scalable=yes, target-densitydpi=device-dpi"/>
<meta name="viewport" content="width=640, minimum-scale=0.5, maximum-scale=3.0,
user-scalable=yes, target-densitydpi=device-dpi"/>
- width=device-width will tell the browsers to use the native resolution of the phone.
- target-densitydpi=device-dpi is needed for the phones with Android and a high-resolution (or high-dpi, example screens with 480x800, like Samsung Galaxy S) to not zoom. Note that the target-density is at the end of the content attribute. This is because it is unrecognised by iPhone and if iPhone encounters and unrecognised option in the viewport content attribute it stops parsing and will ignore the rest of the string.
- device-dpi: Use the device’s native dpi as the target dpi. Default scaling never occurs.
- high-dpi: Use hdpi as the target dpi. Medium and low density screens scale down as appropriate.
- medium-dpi: Use mdpi as the target dpi. High density screens scale up and low density screens scale down. This is also the default behavior.
- low-dpi: Use ldpi as the target dpi. Medium and high density screens scale up as appropriate.
- maximum-scale=1.0 together with user-scalable=no is there to forbid zooming in. If the page is optimized for the mobile resolution it's ok to disable it.
- maximum-scale=3.0 together with user-scalable=yes can be used to let the freedom to the users to make the fonts/links/images bigger. Just one note here. Once the user applies his own zoom on the page there is no way with JavaScript to get the native screen resolution.
- minimum-scale=0.5 is a little bit tricky. The 0.5 is there for the iPhone 4. This device under normal conditions is rendering images 320px wide to the full screen width, which means zooming them in => 320px images is shown on the full width of 640px wide screen. I found just one way to force iPhone 4 to show 640px images natively (without width attribute) and that is to set width=640 in the viewport meta tag. The problem is that the only way to recognize iPhone 3 from iPhone 4 is via JavaScript and
window.devicePixelRatio == 2. But the JavaScript is a little bit too late for the content of the page. - width=640 setting the proper (fixed) width is also necessary for the windows mobile phones with IE in order to have the native resolution.
This is not all. There are device databases (WURFL, DeviceAtlas) that collect user-agent strings and helps to provide screen widths to the mobile page rendering engines, but for an Opera Mini & Opera Mobile the user-agent string is the same/similar for all kinds of devices. And the change of device orientation is also worth to consider, as just by turning the phone around, width of the screen changes from 480px to 800px.The only way to get the screen resolution is in JavaScript, but that is too late, the page is already there...
One solution I've described in the beginning and that is to let the browser scale down the high-resolution pictures. This works for the modern phones and is not too bandwidth friendly (providing 640px wide images to all types of phones) and not so reliable with the old phones either. Another solution, that I'm testing currently, is to try to guess the screen width as good as possible based on user-agent string and then use JavaScript to get the proper screen width, reloading the page with a cookie set if necessary (if the width is not what was expected) or having the proper width set for the next page request.
Subscribe to:
Posts (Atom)