In this post, we'll learn JavaScript’s variable scope and hoisting and every one the idiosyncrasies of each.
It is imperative that we perceive however variable scope and variable hoisting work in JavaScript. These ideas might sound simple, however they're not. There are some necessary subtleties that we should understand, if we would like to achieve JavaScript development.
Variable Scope
A variable’s scope is that the context within which the variable exists. It specifies from wherever you'll access a variable and whether or not you have got access to the variable in this context.
Variables have either a local scope or a global scope.
Local Variables (Function-level scope) :
Unlike most programming languages, JavaScript doesn't have block level scope (variable scoped to close ringleted brackets); instead, JavaScript has function-level scope. Variables declared among a function ar local variables and ar solely accessible among that functions or by fuction within that function. See my post on Closures for a lot of on accessing variables in outer functions from inner functions.
Demonstration of Function-Level Scope
var name = "Richard";
function showName () {
var name = "Jack"; // local variable; only accessible in this showName function
console.log (name); // Jack
}
console.log (name); // Richard: the global variable
Closures are pretty and faithfully serviceable: they permit programmers to program creatively, expressively, and in brief. they're used oftentimes in JavaScript and, regardless of your JavaScript ability level, you'll no doubt encounter them. Sure, closures may seem advanced and on the far side your scope, however when reading this article, closures are additional far more simply understood and more appealing for usage in your everyday JavaScript programming. This is a comparatively short (and sweet :) ) post on the main points of closures in JavaScript. you must be aware of JavaScript variable scope before you browse more, because to know closures you need to understand JavaScript’s variable scope.
What is a closure?
A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has 3 scope chains: it's access to its own scope (variables outlined between its curly brackets), it's access to the outer function’s variables, and it's access to the global variables. The inner function has access not solely to the outer function’s variables, however additionally to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, despite the fact that it can call the outer function’s parameters directly. You create a closure by adding a function within another function.
function showName (firstName, lastName) {
var nameIntro = "Your name is ";
// this inner function has access to the outer function's variables, including the parameter
function makeFullName () {
return nameIntro + firstName + " " + lastName;
}
return makeFullName ();
}
showName ("Michael", "Jackson"); // Your name is Michael Jackson
Most server-side programming languages have tools to try and do performance tuning on applications written in them. With the popularity of Ajax based mostly applications and alternative rich-client HTML applications on the increase, more and more code is being written in JavaScript. So, however the heck do you go about troubleshooting performance problems for these kind of client-side serious applications written in JavaScript? I faced this issue recently in 2 totally different applications wherever the Javascript library wasn't performing quick enough inflicting belated user expertise. I found out that Firebug is an extension for Firefox that can be used to do the performance tuning. The method this works is,
a) install Firebug (and restart the Firefox browser) b) enable Firebug if not presently enabled c) load the page that desires performance tuning d) open up Firebug and within the console, click on Profile e) begin using the UI controls within the page that have performance drawback f) Click on the profile and see a table of all the function calls ordered by the number of time spent This gives you a thought of the functions that are slow. The roughness of this report is just by function (thought it might are sensible if there's how to have line level roughness for a few hot-spot functions to pin-point the line number). From this, it’s doable to figure out what’s going on and go about optimizing. In my specific cases, the 2 things I had to try and do one in every app are 1) take away regular expression object creation and comparison from an inner loop 2) reduce the quantity of math.round calls
I love this one, and that i undoubtedly did not think it up myself, however it is so neat and tidy. If you've got a load of callbacks going on you will be used to doing them inline like this:
$("#someid").click(function()
// guts of the {callback /* returning false * in a jQuery recall stops * propagation and prevents * the default behaviour */ return false; });
Javascript… It’s a weird language. It’s got nothing to try and do with Java, however is termed Javascript. Its proper name is “ECMAScript”, however form ECMA doesn’t exist any longer. It’s got its share of warts and carbuncles. However, it’s not all unhealthy. It’s called the assembly language of the internet. we use it for adding interactivity to web pages. There are cool libraries like knockout.js and jquery. side write server proper name code with it, using node.js. Javascript is cool.
What you can do with javascript: Introduction: Its time to look back from he details lets take an advance look what JavaScript can do for us. You want to use JavaScript in your web pages, why ? Right now you'd hard pushed to get a job as a web developer without javascript skills.
what JavaScript can do ? Lets take look back what JavaScript can do for us.
Fixing web browser problem or patch holes in web browser support.
It can work on user's support.
JavaScript allows you to create highly interactive interfaces that improve user's experience and provide dynamic functionality without having to wait for server to show another page.
JavaScript is able to test for what is possible in your web browser and react.(this is also called defensive scripting ).
JavaScript implementation is very easy. All you need to put code in HTML document and simply tell the web browser that it is JavaScript.
JavaScript works on web user's computer even the user is offline.
JavaScript is commonly referred to as Ajax. It can load content in to the document when the user needs it. without reloading the entire page.
That is a lot for a language. one part of the renaissance of JavaScript is that Building and creating more complex and intractable web application. These days as the web standards JavaScript is the best choice. The main merit of JavaScript is its compatibility with open web standards.
Modern uses of JavaScript:
And this is often essentially what we have a tendency to do of late with JavaScript. we have a tendency to enhance the recent, tried and true net interface — clicking links, coming into data and causation off forms, etc. — to be additional conscious of the top user. For example:
A sign-up type will check if your user name is available once you enter it, preventing you from having to endure a frustrating reload of the page.
A search box can provide you with instructed results whereas you kind, supported what you’ve entered thus far (for example “bi” might talk about suggestions to decide on from that contain this string, like “bird”, “big” and “bicycle”). This usage pattern is named autocomplete.
Information that changes constantly is loaded sporadically while not the necessity for user interaction, as an example sports match results or exchange tickers.
Information that's a nice-to-have and runs the danger of being redundant to some users is loaded once and if the user chooses to access it. as an example the navigation menu of a website may well be half dozen links however show links to deeper pages on-demand once the user activates a menu item.
JavaScript can fix layout problems. exploitation JavaScript you'll realize the position and space of any component on the page, and also the dimensions of the browser window. exploitation this data you'll forestall overlapping parts and alternative such problems. Say as an example you've got a menu with many levels; by checking that there's area for the sub-menu to seem before showing it you'll forestall scroll-bars or overlapping menu things.
JavaScript can enhance the interfaces hypertext mark-up language provides America. whereas it's nice to own a text input box you would possibly wish to own a jazz band box permitting you to decide on from an inventory of predetermined values or enter your own. exploitation JavaScript you'll enhance a traditional input box to try and do that.
You can use JavaScript to animate parts on a page — as an example to point out and conceal data, or highlight specific sections of a page — this will play a additional usable, richer user expertise. there's additional data on this within the JavaScript animation article shortly within the course.
MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.
Features Include:
- Search Engine Friendly
- Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys
- Fails Gracefully: Falls back to suckerfish CSS based drop down menu system in the absence of javascript.
The Fancy Sliding Tab Menu runs on Mootools with an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.
This nice menu adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon. Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.
4. SMOOTH NAVIGATIONAL MENU:
Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that’s a good thing given the important role of this element in any site.
The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus.
5. COLLAPSABLE MENU:
This menu was part of a tutorial written by Antonio Lupetti illustrating the art of reusing code in your web projects. In this example he implemented a collapsable box with an animated effect on mouse over (try to move your mouse over “About Me” and “Click here”).
The purpose of jQuery is to make it much easier to use JavaScript on your website. JQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
AJAX is just another tool that can be used by scripting languages like Javascript in order to enhance the look and feel of their web pages.
Ajax (Asynchronous Javascript and XML) is a subset of javascript. Ajax is way for the client-side browser to communicate with the server (for example: retrieve data from a database) without having to perform a page refresh.
In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.
Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.
Why Use JQuery Instead of Just Basic JavaScript?
JavaScript is a fairly low-level programming language. It does not provide advanced page manipulation and decoration functions, and it provides nothing concerning animations. Moreover, using direct JavaScript can cause issues related to browser incompatibilities. Those issues have made many JavaScript applications difficult to code, resulting in high maintenance costs.
JQuery aims to ease all these problems by providing a lightweight library that adds many advanced and cross-browser functions to the standard language. In addition, there is a very dynamic community that adds more-advanced components based on JQuery.
A modern Web application wouldn’t be complete without some AJAX functionality. JQuery provides functions for sending HTTP GET and POST requests, and it can work easily with the JavaScript Object Notation (JSON) format we saw in the first article. This functionality enables us to query the REST back end we coded in the first article.
Pros:
jQuery removes the headaches of cross platform Javascript compatibilities.
jQuery is very easy to use as compared to other JavaScript libraries and JavaScript as well.
jQuery has a large set of library/functions.
jQuery has good documentation and help manuals are easily available.
You are no longer writing the native language, so your understanding of what is actually occuring may be limited.
jQuery requires to include jQuery library files into project which takes space on the web server. But JavaScript can be used without adding any libraries. Also, if user wants include more jQuery libraries, version conflicts may occur.
AJAX stands for Asynchronous JavaScript and XML. It is used for allowing the client side of an application to communitcate with the server side of the application. Before AJAX, there was no way for the client side of a web application to communicate directly with the server. Instead, you would have to use page loads. With AJAX, the client and server can communicate freely with one another.
Pros:
With Ajax in a website there is no need to refresh a Web page continuously. For users who are waiting to see if they won an auction, keeping an eye on sports scores, or closely following the latest weather forecasts, Ajax enhancements to these types of Web pages can greatly improve their experiences.
AJAX pros and cons
AJAX is rapidly becoming an integral part of several websites, several well established brands online now use AJAX to handle their web applications because it provides better interactivity to their users, this is due to the fact that implementing AJAX on a website, does not require a page to be reloaded for dynamic content on web pages. While there are numerous reasons to switch to AJAX there are quite a few matters that would make you reconsider using this combination of technologies as well. Below are some of the advantages and disadvantages of using AJAX.
Advantages
Better interactivity
This is pretty much the most striking benefit behind why several developers and webmasters are switching to AJAX for their websites. AJAX allows easier and quicker interaction between user and website as pages are not reloaded for content to be displayed.
Easier navigation
AJAX applications on websites can be built to allow easier navigation to users in comparison to using the traditional back and forward button on a browser.
Compact
With AJAX, several multi purpose applications and features can be handled using a single web page, avoiding the need for clutter with several web pages. For our use of AJAX on goedkope-zomervakantie.com, it took just a few lines of code!
Backed by reputed brands
Another assuring reason to use AJAX on your websites is the fact that several complex web applications are handled using AJAX, Google Maps is the most impressive and obvious example, other powerful, popular scripts such as the vBulletin forum software has also incorporated AJAX into their latest version.
Disadvantages
The back and refresh button are rendered useless
With AJAX, as all functions are loaded on a dynamic page without the page being reloaded or more importantly a URL being changed (except for a hash symbol maybe), clicking the back or refresh button would take you to an entirely different web page or to the beginning of what your dynamic web page was processing. This is the main drawback behind AJAX but fortunately with good programming skills this issue can be fixed.
It is built on javascript
While javascript is secure and has been heavily used by websites for a long period of time, a percentage of website surfers prefer to turn javascript functionality off on their browser rendering the AJAX application useless, a work around to this con is present as well, where the developer will need to code a parallel non-javascript version of the dynamic web page to cater to these users.
This report shows the usage statistics of PHP vs. JavaScript as server-side programming language on the web.For explanations on the methodologies used in the surveys. Our reports are updated daily.
Usage
This diagram shows the percentages of websites using the selected technologies.
How to read the diagram:
PHP is used by 80.9% of all the websites whose server-side programming language we know.
Percentages of websites using various server-side programming languages
Usage broken down by ranking
This diagram shows the percentages of websites using the selected technologies broken down by ranking.
How to read the diagram: PHP is used by 80.9% of all the websites whose server-side programming language we know.
PHP is used by 78.6% of all the websites whose server-side programming language we know and that rank in the top 1,000,000.
This diagram shows the market position of the selected technologies in terms of popularity and traffic compared to the most popular server-side programming languages.
Our dedicated market survey shows more server-side languages market data.
Sometimes for beginners, or even those of us that have been doing this for a while, it may be difficult to see how to use PHP and Javascript together to make the page work correctly. I often have to stop and remind myself of the basics.
HTML and Javascript (which includes Javascript libraries, such as jQuery or Scriptaculous) are client-side languages. This means that the browser is responsible for executing the HTML and Javascript code. This is why we must test our web pages in as many different browsers as we can, because, since the browser must execute the HTML, Javascript and CSS, each browser could execute it in a different way giving different results.
PHP, on the other hand, is executed on the host computer, or server, before the page is delivered to the browser. PHP is responsible for pulling things from the server, whether it be in a database or a file, and creating and/or delivering the proper HTML, Javascript and/or CSS code. Much of the time this HTML, Javascript and CSS code is hard-coded, meaning that it doesn’t change. The developer creates the HTML, Javascript and CSS just like they want it to be, saves it to a file and then uploads it to the server. The server, when requested for that web page, just sends the page as it was coded by the developer to the browser.
But, when we need to make the page dynamic, meaning that information needs to change based on input from the user or the time of day that the file is requested, or for many other reasons or conditions, we must use a scripting language, such as PHP, at the server level. PHP is used to create HTML, Javascript and in some cases, CSS code. PHP gathers and processes the information that it needs to create the web page in HTML and Javascript before it sends the finished web page to the browser.
So, when we develop web pages, we can have a combination of HTML, Javascript, CSS and PHP in our pages. This can sometimes get confusing. Remember, the PHP code is executed first at the server level. The PHP code creates HTML, Javascript and CSS to be used by the browser. If you need to use a scripting language, such as PHP, once the page has been loaded into the browser, then you must either refresh the page or use Ajax to request more processing at the server side.
For instance, once my page has been sent to the browser, if I need something new from the database, I must either refresh the page or use Ajax to go out and request the information from the database via the server.
When I first started using PHP and Javascript together, I often forgot that I could make the PHP code create the Javascript. So, if, for example, I had a group of items in the database and I needed a jquery listener for the click event on each item, I could query the database to get my list and then create each listener in a for loop. There are many ways to combine the two to make my web applications more dynamic.
When deciding if I need PHP or Javascript for the job, I ask myself whether I really need anything from the server or if things can just be updated using javascript. Usually, the only reason I need to go back to the server is for accessing the database or another type of file. Even then, I can sometimes anticipate what might be needed and put it in a hidden div and then use Javascript (or jQuery) to display the hidden div when needed. Most everything else can be done by Javascript at the browser side of things which will make things much nicer for the end user.
Innovative use of JavaScript can really make a website. Web design experts Jack Franklin, Rey Bango, Addy Osmani and Stephen Fulljames pick their innovative examples of JavaScript for your inspiration.
JavaScript creates platforms that can engage a user and ensure that they remember your site and continue to revisit. It can be used to create games, APIs, scrolling abilities and much more.
The web is full of great examples of JavaScript being used to bring a website to life and provide great user experiences. Here, pro web designers and JavaScript experts Jack Franklin, Rey Bango, Addy Osmani and Stephen Fulljames pick their favourite examples of JavaScript in action for your inspiration.
Items are arranged in a Pinterest-style layout, with minimal text
Glimpse Catalogs is a merging of TheFind’s shopping search engine and its successful social shopping app on Facebook. Items are displayed in a Pinterest-style layout, with the focus on image and minimal product details. Clicking the image provides a pop-up box containing full information. As part of the project, the team releasedthe framework created as part of the development, which relied heavily on Turn.js, a flipbook library for JavaScript.
"Our goal, from the start, was to implement Glimpse as a web app and not just as a plain website," TheFind’s co-founder and CTO Shashikant Khandelwal explains. “This resolution led us to explore the depths of both JavaScript and CSS while building Glimpse. We employ a model-view-controller paradigm wherein both server-side and client-side templates render the model represented in Thrift or JSON, depending on the computational power of the client (desktop or tablet)," he continues. "We use both jQuery and custom-built JavaScript libraries in our application."
Khandelwal also describes the usage of Turn.js. "While developing magazine-style catalogues, we used Turn.js, an open source jQuery plug-in flexible enough to be adapted to our needs. We also liked that it was managing the page turn effect entirely with DOM elements."
Complex CSS and JavaScript was used to transform plain 2D images into a more immersive experience. "We converted the static 2D images into a more dynamic 3D experience by including shadows and stacking pages, to give it the appearance of a magazine," Khandelwal adds.
Tweetmap represents countries in the world proportionally based on numbers of tweets
Tweetmap by Pete Smart and Rob Hawkes represents countries in the world proportionally based on numbers of tweets. Hawkes explains, "Tweetmap brings together lots of clever technologies, including TopoJSON, D3.js, Node.js, PhantomJS, and an algorithm to construct contiguous cartograms in real-time.
"We chose Node.js to power the server side of things as it's quick, flexible and we already had experience using it to scrape tweets. For rendering and animating the map (in TopoJSON format) on the client we use D3, which is a fantastic library for data visualisation. Specifically, we extensively used the geo module, which allows you to do some complex geographic calculations and conversions."
To prevent performance problems in the browser, Smart and Hawkes use D3.js on the server to render countries and generate contiguous cartograms. "However, we actually run it on the server using PhantomJS (a 'headless' WebKit rendering engine) and transmit the maps back to the client," says Hawkes. This prevents the performance hit experienced when generating the cartograms on the client. "The browser locked up for four seconds," explains Hawkes.
Nike M vs W uses running data from Nike+ to enable runners to compare runs and their performance
Nike M vs W uses running data from Nike+ to enable runners to compare runs and their performance. "In this website we collect the running data from Nike+, and allow the runners to compare their runs virtually," explains Henry Chu, designer at the Pill & Pillow studio behind the site.
"We used three.js to create the 3D visualisation: the motion was designed to display the data of two to six runners. We used two tweening libraries: tween.js and jstween to program the motions. Most 3D motions are controlled by tween.js."
The Trip is an interactive film with audio, powered entirely through JavaScript and HTML5
The Trip is an interactive film with audio, powered entirely through HTML5 and JavaScript (with Flash nowhere to be seen). The complexity of the project proved challenging, as developer Otto Nascarella explains. He says, "Most of the difficulties we had during the development process were due to the lack of cross browser/devices consistency of HTML5 new technologies, so it was decided we'd ‘recommend’ Chrome for a better experience on desktops," he says.
"The JavaScript code uses jQuery for almost everything - even though I flirted with the possibilities of using Zepto - I wrote two plugins for jQuery, [used] TextBlur to animate blur on fonts using text-shadow, that did not get used the end, and also TextDrop, the one that is responsible for the typographic animations."
Si Digital's animated homepage was all done through JavaScript
This JavaScript site is Si Digital's new-look portfolio and blog. This grabs the attention via its intriguing homepage animations, all done through JavaScript. Lead developer Alex Crooks explains that the homepage "guides the user through our services, with liquid moving through tubes activating an animation at each stage.
"To achieve this effect I used jQuery .animate(), using its step() option to work out where the liquid was in the tube - and if it needed to activate any other animations on its journey," says Crooks. He adds, "Everybody reads at different paces, so we tried to find the right balance for the liquid speed. However, if it’s too fast for the user, it [the animation] will always wait at the next stage for them to scroll down.
Pointing the way
"To 'open' new stages for the liquid to flow through I used the jQuery Waypoints plug-in," says Crooks, "which was also used to trigger the text fading in, and other various loading/waiting animations so users that skip ahead still get a great experience."
The interactive timeline on the team page, which enables users to drag with their mouse to see some of the company’s past work and events, makes use of jQuery UI. "The team page has a timeline to highlight Si digital milestones and events, pulling in our social media accounts ranging from Twitter updates to Dribbble uploads," Crooks explains. "The timeline is generated entirely dynamically based on a database of our events loaded via Ajax. The primary way to navigate the timeline is by dragging with the mouse (using jQuery UI draggable), but keyboard navigation is also included."
Create gorgeous patterns with your mouse on developer Jean Helfenstein's homepage chase
Developer Jean Helfenstein’s personal site features an eye-catching canvas animation on the homepage. "I really had fun with the backgrounds," says Helfenstein. "I always love to experiment with new technology, so I decided to use my landing page as my playground and mess around with three.js and the canvas element.
"The idea was to create a site that follows the current minimalist design trend [but adds] something fresh. To achieve that, I decided to use click-and-drag navigation rather than the usual left/right arrows. With mobile devices becoming more popular, I feel that people are starting to be familiar with this type of interaction."
Everything about the site is impressive, including the subtle animations between pages - and in particular, the way you can drag between projects on the 'Playground' page. It's a brilliant showcase of what can be achieved with some of the newer technologies we have available.
Nick Jones moved from Flash to JavaScript for his redesigned site
Nick Jones's redesigned site caught our eye with some clever animations. Jones has more experience in Flash, but tried the JavaScript route to see what it's capable of. "Once I got started, I realised the syntax is the same as ActionScript, so the transition felt totally natural after only a short time," he told us. "Access to the mouse wheel is something I never had in Flash, so it was a fun new interaction to play with."
Jones (who wrote a controversial article on responsive web design for our sister site, netmagazine.com) used JavaScript to capture events and enhance them. "I wanted a responsiveness I couldn’t achieve with CSS transitions between classes," he goes on, "so I relied heavily on JavaScript to dynamically update the CSS properties on mousewheel and mousemove events. Scrollbars are dead, so I made the page itself draggable."
Jones was pleased with his results. "If you’re thinking of jumping from ActionScript to JavaScript, don’t wait another second. I made this site using heavy JavaScript interactivity to see if it was capable of what I’ve come to expect from Flash. I was impressed."
The KIKK Festival site, produced by Dog Studio, needed a strong identity and immersive experience, which creative director Henry Daubrez set about delivering. "We had three main interactions needed to achieve this goal: falling feathers, a draggable timeline program and a nice and sleek page transition," he summarises. "The most touchy (but killer) JavaScript feature is probably the program timeline that can be linked from every page and loads a specific part of the program if needed."
A common trend is to use HTML5 pushState to allow the user to go back and forward between transitions. "The page transition is visually the most interesting feature," reckons Daubrez. "It’s been composed with a dynamic URL rewriting using the history.pushState feature, so it gives the impression of travelling in an horizontal single page."
Dog Studio made full use of some quirky jQuery plug-ins to produce the falling feather effect: "For that we simply used a Snowfall jQuery plug-in we modified to give the feather rotation effect, and get more control over the number of items and their speed. Those three main directions really make us think we managed to get a unique experience."
The TakeOff Conference site makes great use of 'bottom up' scrolling
The website for this year’s TakeOff Conference deserves a mention for the way it uses 'bottom-up' scrolling. When you first visit the page, you are scrolled all the way to the bottom, and then are able to scroll upwards. It’s something unique that initially I didn’t think would work, but that in reality is perfectly usable.
"We created a disturbing yet stunning website for the 2013 edition of the TakeOff Conference," says developer Florian Le Goff, one of the conference organisers. "We have to pay a tribute to the modern web ecosystem for making this project a reality in such a short matter of time."
Le Goff utilised a number of projects, libraries and plug-ins: "A paid Typekit account was used to include uncommon fonts in two lines of code, while a few jQuery hacks and plug-ins were used to power our bottom-up reading pattern."
The work is largely done by the popular jQuery.scrollTo plug-in, which provides an intuitive API for page scrolling. Not all the animations were achieved with JavaScript, though: "A few CSS animations allowed us to quickly deliver an usual creative experience," says Le Goff.
MapsTD harnesses the power of Google Maps for an immersive gaming experience
MapsTD is a tower defence game, but with a difference. You tell it where your home is, and through the power of Google Maps, it will produce a game in which you’re defending your hometown, with the baddies relentlessly charging past the streets and houses of your neighbourhood.
Creator Duncan Barclay explains how it works. "It’s obviously built using the Google Maps API, with MooTools being used for the other aspects of the UI and as a general-purpose JavaScript library. It uses several bits of functionality provided by Google Maps. As well as the map itself, the biggest part is the route finder API, which is used to work out the paths the enemies follow. Once you’ve picked a start location, it does a lookup to get the latitude and longitude. It then looks for four routes by adding or subtracting a fixed number from that latitude and longitude (to get a point due north, due east, and so on), and uses Google to find a path between the two."
Creeps
As the game progresses, more enemies (or 'creeps' as he has called them) appear on screen. Barclay found himself battling to keep performance high and timings correct: "One of the biggest challenges – one that still isn’t quite right - was the timing. Firstly, if the page isn’t active, most browsers reduce how often they check if timeouts have reached the end, resulting in creeps moving in bursts rather than moving steadily. I ended up fixing that by pausing the game when the tab loses focus. The detection code was taken from David Walsh’s blogand is in the game credits.
"The other problem was that as you progressed, there were too many things happening, which resulted in the game slowing down a lot. The workaround ended up being to use harder creeps rather than more of them, and making the game incrementally more difficult each level after level 50."
Command & Conquer is back, and it's online, thanks to Aditya Ravi Shankar
This is an amazing example of how powerful today’s tools are. Aditya Ravi Shankar has used them to create an online version of classic real-time strategy game Command and Conquer.
Recreating the original 1995 game was a long and painstaking process, says Shankar. "Every little thing took time - things like selecting single units or multiple units; being able to select by drawing the box from left to right or from right to left; making sure the panning was smooth; figuring out a decent fog of war implementation; allowing for building construction, dependencies (the Power Plant is needed for the Refinery, which is needed for the Factory) and building placement (buildings cannot be constructed on top of other buildings); and depth sorting when drawing so units could move behind buildings and trees."
It’s only when the development tasks are itemised in this way that you realise just how much work went into the project, including some very complicated logic - making it even more impressive that the entire thing could be achieved using only HTML5 and JavaScript.
Glimpse: Exploring the depths of both JavaScript and CSS
Online shopping has been taken in a new direction following the launch of Glimpse Catalogs. Developed as a partnership between the Windows IE team and TheFind, Glimpse Catalogs is a merging of TheFind’s shopping search engine and its successful social shopping app on Facebook. As part of the project, the team released the framework created as part of the development which relied heavily onTurn.js, a flipbook library for JavaScript.
"Our goal, from the start, was to implement Glimpse as a web app and not just as a plain website," TheFind’s co-founder and CTO Shashikant Khandelwal explains. "This resolution led us to explore the depths of both JavaScript and CSS while building Glimpse.
"We employ a model-view-controller paradigm wherein both server-side and client-side templates render the model represented in Thrift or JSON, depending on the computational power of the client (desktop or tablet). We use both jQuery and custom-built JavaScript libraries in our application."
Page turn effect
Khandelwal also describes the usage of Turn.js. "While developing magazine-style catalogues, we used Turn.js - an open source jQuery plug-in flexible enough to be adapted to our needs. We also liked that it was managing the page turn effect entirely with DOM elements."
Complex CSS and JavaScript was used to transform plain 2D images into a more immersive experience: "We converted the static 2D images into a more dynamic 3D experience by including shadows and stacking pages, to give it the appearance of a magazine," Khandelwal continues. "Additionally we integrated product highlighting and hotspotting overlays to make the pages more interactive.
"Both of these together helped create an HTML5 magazine with interactive markup. It also gave us a great deal of satisfaction to contribute some of our code back to the developer community."
Golden State of Mind: A perfect example of JavaScript
Examples of JavaScript keep getting better. It’s fantastic that with advances in JavaScript, sites that two years ago would have been built with Flash can now be created using JS - and Golden State of Mind is a perfect example of this.
The site has been built by JUXT Interactive to showcase, "art, fashion and happenings live from California". JUXT Interactive’s creative director Jeff Whitney reckons its highlight is its, "unique, rotating brand showcase, allowing the user to explore the current season through images and video in an uplifting way... to a Golden State of Mind".
"JavaScript was used extensively for the Experience portion of
the GSOM website," Whitney explains. "A custom scrollbar plug-in was found and rather heavily modified to allow for the infinite scrolling, and a lot of sweat and tears went into getting the reversed scrolling to work correctly. The movement and parallax of the elements on the page were easily handled with jQuery."
Chrome Web Lab launched as a partnership between Google and agency B-Reel. It's available online to all, but is also featured in the London Science Museum. The Lab relies heavily on WebGL but also features some complex JavaScript, in particular the use of the canvas element and heavy use of three.js, a lightweight 3D JavaScript library that supports both canvas and WebGL.
Red Bull Music Academy Radio, bringing kickass beats to your browser
Red Bull is the energy drink that keeps fingers moving during late-night coding sessions: couple it with music and you have an awesome setting for code cranking. Looks like Red Bull gets this: its Red Bull Music Academy Radio brings kickass beats to your browser.
RBMA Radio is all about standards, and using Modernizr helps it get there. From a feature-detection perspective, Modernizr continues to be the best choice for enabling you to leverage new HTML5 and CSS3 features in a cross-browser manner, and the fact that it's continuously updated ensures that as new features come out, you can scale your code to handle them.
Client-side MVC has really generated a following, with Backbone.js (which the site uses) being a popular choice. It's well-designed, lightweight and well-maintained. All this leads to a nice fluid design that also includes dynamic loading of tiles (an endless page feel) as you scroll down: a cool effect, nd one of the best examples of JavaScript we've seen.
.jpg "learn-javascript-design-development")
