HTML5 Web Worker v/s setInterval()

Hi all,

In HTML5 we have new Web Worker feature but at first look I think its similar like as setInterval() then why they introduce Web Worker. But no there is one major difference between both is: In JavaScript all execution process remains inside a unique thread while Web Worker supports multi-threading.

Before the workers…

In JavaScript, a long running processing will freeze the main window and blocking the “UI Thread”. This is the main thread in charge of handling all the visual elements and associated tasks: drawing, refreshing, animating, user inputs events, etc. Sometimes you may notice that due to long JavaScript processing browser throws unresponsive script warning as:
5939882671_3bf264fd60

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

Web Workers operate independently of the main browser UI thread so they’re not able to access many of its objects. One limitation is that Web Workers cannot access the DOM, so they can’t read or modify the HTML document. In addition, they can’t access any global variables or JavaScript functions within the main page.

Please click to know more about Web Worker: The Basics of Web Worker

Advertisements

Snake Game with Javascript

Hi All, I don’t have any experience in game development. In free time I think lets try to make simple game with jQuery and javascript. So I start to do code to make simple basic snake game that was inbuilt with past simple model of Nokia mobile.

snake

Here, I just try to implement simple snake game with javascript and html. First, I made game console with html table and logically I have give number to each td of table.

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.

What’s New in Bootstrap 3

Bootstrap is a front-end framework, which is basically just a few CSS and JavaScript files that help you build websites more quickly. In next project, I decided to use bootstrap 3 which was released few month ago. I would like to highlight the some of the things in Bootstrap 3 that have impressed me a lot.

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!

Does Responsive Design Required???

Hi All,

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?
  • There is another major reason why responsive design might just be a waste of time anyway: this should all be the browser’s responsibility, not the web developer’s. This is just like HTML5 brought us changes to HTML that required the browser vendor to start supporting many of the things that web designers were doing manually, like playing video and drawing with JavaScript, it is very likely that eventually the responsiveness of responsive design will be relegated to where it actually belongs anyway, the browser and the markup itself
  • 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.