Before the workers…
To overcome single thread limitation HTML5 is bringing us true multi-threading capability via Web Workers. We can execute the long processing script without freezing the main window. The Web Worker execution will not affect the main “UI Thread”.
When’s the good time to use Web Worker
Any script that you want to execute in the background is a good candidate to run as a Web Worker. Think about the sorting of large arrays, parallel processing, and I think you’ll see where Web Workers could be a big help.
Web Worker Limitations
Please click to know more about Web Worker: The Basics of Web Worker
Now, for generate snake on board I make one global numeric array variables ‘snake’. At starting I set snake array as [73,72,71,70] that means 73th td, 72th td, 71th td and 7th td are part of the snake and I set the background color of all these four td to black by adding snake css class (function – generateSnake()).
For generate cherry that snake need to eat will be a single td. Function generateCherry() – will generate random number withing the limit of our game console and which is not a part of snake.
Function runSnake() – for move snake in appropriate direction as per user input from keyboard arrow keys. We also have speed dropdown to set speed of snake. By using setTimeout(), runSnake method is recursively executes at certain interval as per the snake speed.
You can find complete code on my github repository, as well as find demo page here.
Any feedback and suggestion please revert back in comment section.
Page Rendering is Faster
Bootstrap 3 introduced a new “flat” design. Yes, it’s trendy, but it dramatically improves the page rendering time, which is basically how long it takes the browser to “draw” all the elements on a webpage.
How much faster, exactly? Paul Irish demonstrates in this video:
Improvements in Grid System
Here’s the grid system documentation, but here’s the some overview:
- .col-xs- When two or more of these columns are in the same row, they will always remain side-by-side, even on the smallest mobile screens. Most of the time you’ll want your columns to stack on mobile devices, so use this only when you have a very specific reason to maintain columns on mobile devices. These are also the only column type that cannot be nested.
- .col-sm- These columns are collapsed to start, but become horizontal at widths of 768px and above.
- .col-md- These columns are collapsed to start, but become horizontal at widths of 992px and above. These are a good default to use for just about every column. Once you have your rough layout, you can start to tweak things with some of the other column types.
- .col-lg- Again, collapsed to start, but horizontal at 1200px and above. This is useful if you have an element that normally stretches the full width of the page, but might look ridiculous across a 27″ iMac screen.
Turn Off Responsive Features
Bootstrap 3 was designed with responsive approach, but if you have more specific needs and responsive design not need, you can always turn it off.
It’s not as simple as an off button, but just follow these step-by-step instructions and you can disable the responsive features of Bootstrap. Nice!
There’s such a nice documentation for migrating from Bootstrap 2.x to 3.0. and lots more cool stuff, so be sure to check out the Bootstrap site and read the docs. If you have any learnings or tips, share them in the comments!
As you all knows that there is a boom of responsive design and everyone wants to make their sites and web application responsive for all devices. But today I just go through the article – Why Responsive Design is wast of time, written by John Sonmez. As of now I’m thinking that Responsive design such a nice and great in web development. But after reading whole article I’m also little agree that for simple content site (like blog, company profile) Responsive Design is good but for a web application of any considerable size, responsive design is waste of time. Here are some reasons that John mention.
- When you try to make a product that can do multiple things, the complexity of creating that product increases exponentially. Consider this. Which is more difficult to create: a car that turns into a motorcycle, or a car and a motorcycle?
- Things are changing rapidly. Mobile devices are getting bigger screens and higher resolutions and becoming much more powerful. While two years ago it was a pain to visit a desktop site from a mobile browser, it is much less painful now. With latest smartphones, I hardly feel the difference at all and I even find myself specifically requesting the desktop version of a mobile site from time to time.
My opinion is that if you have simple content site (like blog, company profile, portfolio) than you should move to responsive design. But if you already have huge size complex web application than I think you should not waste your time to make it responsive.
What do you think? If you have a convincing argument as to why responsive design is worth the effort or why it isn’t as much extra effort, I’d love to hear it. Let me know in the comments below.