Which box is darker in the following image?
If you chose one of them, you are wrong. Lets use HTML5 drag&drop to see that they’re exactly the same: http://tomdev.me/fun/drag/
Making HN mobile-friendly with a few lines of code
Every pixel counts in smaller devices, so hiding mobile browser’s URL is a great idea. You can do it by adding:
|
1 2 3 |
window.addEventListener('load', function(e) { setTimeout(function() { window.scrollTo(0, 1); }, 1); }, false); |
Add viewport:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> |
Add mobiletable class to the main table:
|
1 |
<table width="85%" class="mobiletable" border="0" cellpadding="0" cellspacing="0" bgcolor="#f6f6ef"> |
Add a media query:
|
1 |
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="mobile.css" /> |
Mobile.css can look like this:
|
1 2 3 4 5 6 7 8 9 |
.mobiletable { width: 100%; } .pagetop b { font-size: 9pt; } .pagetop { font-size: 8pt; } |
Here you go, a few lines of code and now the website looks much better for mobile and other devices. Here’s demo. You can compare this page to the main page of current HN and see the difference.
Having different stylesheets for different browser widths and heights
If you want to have different stylesheets for different browser widths and heights, so you can have stylesheet for any device, you can use CSS3 media queries.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Media Queries</title> <link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="style.css" /> <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" href="media1.css" /> </head> <body> <div class="container"> <h1>Bootstrap starter template</h1> Other text </div> </body> </html> |
Here is working example: http://tomdev.me/fun/media/ (just try to resize the window and see the magic).
It works well in all the browsers, of course, except IE 6-8. But you can use https://github.com/scottjehl/Respond to solve this issue.
HTML5 Tic Tac Toe game with local storage and canvas
Tic Tac Toe – a simple HTML5 game which uses local storage to store player’s and pc’s moves and draws a game with canvas. Here’s source code, I tried to comment as much as I can, but if you don’t understand something, leave a comment and I’ll try to explain.
Local storage stores key/value pairs locally. Like cookies, this data doesn’t get deleted even after you close your browser. So, you can make few moves in the game, close your browser, return to the game and you’ll still see stats and previous moves made by you and AI.
Why use local storage instead of cookies?
Local Storage is basically the same as cookies. Problem with cookies is that they are sent between browser and server with every HTTP request, so it slows our application. Secondly, Cookies are limited to ~4 KB of data when Local Storage can store up to 5MB.
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| 8.0+ | 3.5+ | 4.0+ | 4.0+ | 10.5+ | 2.0+ | 2.0+ |
TakeBreak – app which notifies when you should take a break
TakeBreak - an android app which notifies you when you should take a break.
Taking breaks at least every 45 minutes is very important to your health. The stretch exercises will help you to lower or even eliminate your neck, back, waist or shoulder pains and eye exercises will make your eyes stronger and your vision better. The program has 15 exercises and takes approximately 3-4 minutes to finish.
The Benefits of Stretching
• Improves circulation and boosts your immunity
• Improves balance and coordination
• Helps alleviate or even eliminate neck, back, waist and shoulder pains
• Helps you lose weight by burning fats
• Makes you feel more energized and relaxed
The Benefits of Eye Exercises
Our eyes need regular exercise to keep them healthy. Especially if you spend lots of time in front of computer or TV. Regularly exercising your eyes will naturally improve your vision and prevent you from wearing glasses.