Skip to main content

ES6 101 - Map

ES6 101 - Map
ES6 Map is the topic of today’s post which also is the 11th in the ES6 101 Series. Map is going to be fairly easy, so before jumping into it, if you want to look at other features we have covered so far, here is a quick list for your reference.Fat Arrow FunctionsLexical Declarations - LetLexical Declarations - ConstSpread OPeratorTemplate LiteralRest OperatorDefault parametersDestructuringFor…ofSetNow let’s see what Map has to offer. As opposed to Set (which by the way, I highly recommend reading), Map saves values as key-value pair. Let’s see for ourselves how this works!Example of ES6 Mapvar dummyMap = newMap(); dummyMap.set("1"); // Method is set as against add in ES6 Setconsole.log(dummyMap); // [["1",null]] dummyMap.set("1", "one"); console.log(dummyMap); // [["1","one"]] dummyMap.set("2", "two").set("3","three"); console.log(dummyMap); // [["1","one&…

Panoramio Hangout Game

    Google has launched a new web based game powered by the Panoramio and Google+ Hangouts platform. The concept of the game is to guess where a photo was taken on Google Maps. You compete with your friends to make the best guess. The game is played in rounds. In every round, one player is the round master and the other players are the guessers. The round master chooses a photo. Then the other players take guesses at where the photo was taken from. When the time is up, the player who made the best guess wins, and becomes the round master for the next round.

    In more detail…
  1. The round master sees a map. He or she can drag and zoom the map, or enter a place name in the search box. Meanwhile, the guessers need to wait.
  2. Next to the map, the round master sees a selection of photos from the area shown in the map.
  3. The round master chooses a photo by clicking on it.
  4. If the round master is satisfied with the photo, he can click on "start round with this photo" to start the round.
  5. Then all the other players will see the photo, a world map, and a countdown.
  6. Each guesser can drag and zoom the map, or enter a place name in the search box. Once he thinks he knows where the photo was taken from, he can click on the map to drop a pin at the chosen position. Until the round ends, he can click more times to change his guess. Meanwhile, the round master will see the guesses of every player.
  7. When the countdown reaches zero, the round ends. The player whose guess is closest to the place where the photo was taken wins. Every guesser gets some points based on how good his guess was. The winner becomes the round master for the next round.
Following are a few tips that will help you master the game:
  1. You need to guess the place where the camera stood when the photo was taken, not the place that is shown on the photo. So you thought this was an easy round, because you recognized the Empire State Building in New York? Think again. All other players will recognize it too, but who will find the exact corner where the photographer was standing?
  2. You can change your guess any number of times until the time runs out. So start with a rough guess, and get closer and closer if you have time. It's better to be wrong by a thousand miles, than not to guess at all!
  3. Precision counts. Google has designed the scores so that every little improvement counts. Once you've found the right country, try to guess the city too. Then the building, then the exact point on the street. Or, if it's a countryside picture, try to find the correct point in the path, not just the correct mountain. That is, if you have time. Every little improvement will give you a score boost that can be very valuable, if you play multiple rounds, to make up for an unlucky guess later.
  4. It's in a Hangout! You can ask the round master for hints, you can send other players on the wrong track; you can all gang up against the round master, and instead of competing to make the best guess, try to be the round master that chooses the most difficult picture. It's your game.
  5. You make it fun: If you are the round master, you need to choose a good photo. Sunsets look the same everywhere, so the game will be boring if you choose a photo of one. If the photo is too hard, you may want to give some hints.
  6. The more people you play with, the higher the scores get. If you want to improve your high score, play with more friends. You'll see that you will get higher scores even though your guesses are equally successful if more people take a guess in that round.

    The photos that are used in this game come from , a community-powered website for exploring places through photography: cities, natural wonders, or anywhere you might go. Panoramio is a showcase for the talents of its contributors, a place to see the world, and a community to discuss about photography.

So what are you waiting for...Get online and start exploring the world with your friends and compete to be the best explorer...Cheers!

Recommended for You

ES6 101 - Spread operator

ES6 101 - Spread Operator
Welcome to the fourth post in the ES6 101 series and the topic of discussion today is the Spread operator or the dot dot dot operator.... It is not very common to call it the “dot dot dot” operator, but I just kind of like the ring to it! Also when you say “dot dot dot” it actually helps me visualize unpacking multiple gifts from a gift box. Wondering why I am taking about gifts and gift boxes and “dot dot dot”. Well, the spread operator... is actually more like unwrapping gifts from a gift box. The spread syntax allows an iterable such as an array expression to be expanded in-place. Let’s actually dive into some examples straight away. It is much more simpler that way!Examples of the ES6 Spread Operator ...Example #1Problem statement: Let’s write a function to display the sum of 3 numbers passed to it in an array.

We would have done this as follows in the old ES5 way. 😏var arr = [1,2,3]; functionsum(a,b,c) { var output = a + b + c; consol…

Diwali Wishes

Happy Diwali 2017
We are already on the brink of the new year and the festival of lights is already here!May this festival of lights, bring joy, peace and prosperity to you and your loved ones! Wishing you a very happy Diwali and a prosperous new year!For your holiday family portraits and baby shoots I would recommend a really talented and professional photographer in the SF Bay Area. Her portfolio would speak for itself!Happy holidays and have a safe Diwali!

ES6 101 - Destructuring

ES6 101 - Destructuring ES6 Destructuring assignments is the topic of this post and we will take a look at what destructuring means and we will look at multiole examples to understand the concept. As the name suggests, using the destructuring syntax, we would be breaking down values in an array or properties in an object into seperate variables.Arrays and objects allow you create, on-the-fly various packages of data.let a = [1,2,3]; ES6 destructuring uses similar syntax, however the LHS will now be a variable that would hold the package that you need to create. Sounds complex? πŸ˜“ Not really, just move ahead to the example that follows and you should get the hang of it.let a = [1,2,3]; let [x,y] = a; // We are now assigning array 'a' to a new arrayconsole.log(x); // 1console.log(y); // 2let [m,n,o] = a; console.log(m); // 1console.log(n); // 2console.log(o); // 3This helps us clearly see what destructuring does for an array! It basically unpacks the values in the array a…

ES6 101 - For..of

ES6 101 - For..of This is the 9th post in the ES6 series and we have looked at a whole bunch of some amazing and highly productive ES6 features that you can start using right away! Here is a comprehensive list of all the features that we have covered so far. 😍Fat Arrow FunctionsLexical Declarations - LetLexical Declarations - ConstSpread OPeratorTemplate LiteralRest OperatorDefault parametersDestructuringNow let’s look at what for..if has to offer us. Essentially, for..of does exactly the opposite of what does. Let’s see what the difference is.// Using for..inlet someVar = [1,2,3,4,5] for(let item in someVar) { console.log(item); // The index values would be consoled. } When you execute the above code snippet, you will observe that, you get all the index values 0 1 2 3 4 of the array in the console. If you had to get access to the values at these indexes in the array, you would have to add the following to the above snippet in the loop.console.log(`${it…

ES6 101 - Set

ES6 101 - Set
This is going to be the 10th post in the ES6 101 series and the topic for today is Set. Set object is a collection of values and is iterable. One cool thing about the values in set is that these are unique. This means that a set can have a value only once. Moreover you can think of a set as an actualy set in Mathematics. We will see a few samples to understand this concept of set.Examples of ES6 SetCreating a new set and adding values to it.Let’s create a new set and add some values to it and then discuss it further.let dummySet = newSet(); // That's it! A new set object is created dummySet.add(1); console.log(dummySet); // [1] dummySet.add(1); console.log(dummySet); // [1] and not [1,1]. This is because, values in a set are unique. dummySet.add(2).add(3).add(4); console.log(dummySet); // [1,2,3,4] dummySet.add('The UnderTaker').add('John Cena'); console.log(dummySet); // [1,2,3,4,'The UnderTaker…