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&…

Jquery Mobile - Single Page Structure

    We have been introduced to Jquery Mobile and have also seen some of the key features of the rich web framework in the previous posts. Today we will take a look at a general page structure using Jquery Mobile. So be ready to start off programming using Jquery Mobile.

    The Jquery Mobile page structure is optimized to support a single page or local, internally linked multiple pages. What does this mean? Well, single page architecture means, having multiple pages that are linked to each other using the normal process of using the anchor tag. So, each page will have its own header, content and footer. The multiple page structure is basically having multiple pages in one single page within different DIVs. So each page becomes a DIV which is linked to another page using an id for that particular page DIV.

    The multiple page architecture, though available is not popularly used because it results in a performance issue. The DOM becomes heavy as multiple pages load at the same time and the website becomes sloppy for the user. The multiple page architecture can be used for websites which are only content based with just 4-5 pages in it. However, for a decent enough website or an application, using the single page architecture makes more sense.

    If the above 2 paragraphs have not made any sense to you, do not get discouraged, take a look at the following to examples, and things will become much more clear.

Example #1:
    The following example shows a general structure of a page using Jquery Mobile. Take a look at the example, the code the result and I will explain the components of the code in further detail.



    You must have already taken a look at the example above. Let's begin with the important parts of the code first.
  • The HTML5 doctype - The HTML5 doctype has to be used to extract the maximum out of this framework. Any device with a browser that does not understand the HTML5 doctype ignores the doctype and custom Jquery Mobile attributes.
  • The viewport meta tag - The viewport meta tag tells the browser how the page zoom levels and dimensions are to be displayed. By setting the viewport attributes to content="width=device-width, initial-scale=1", the width will be set to the pixel width of the device screen. Now here, we are faced with an obvious question?
    • What happens if the viewport meta tag is not included?
      • In one line; your page would look bad. If the meta tag isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with existing desktop sites but the screens may look zoomed out and too wide.
    • However, there is a problem with the usage of this meta tag. The page still can be zoomed, and though Jquery Mobile says its a feature, many a times it is not desirable. To restrict the zooming of the browser, we need to use a more better and refined meta tag, the details of which you will find in this post.
  • Links to Jquery Mobile style-sheet and javascript files and the jquery javascript file.
    Let's come to the body of the code. You would have observed a few things like "data-role=page", "data-role=header", "data-role=content" and "data-role=footer". Inside the  tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute. Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure.

UPDATE: The following example makes use of the next stable version of Jquery Mobile 1.3.1


    Here, we conclude our today's discussion on the Jquery Mobile Single Page structure. We would discuss the Multi-page structure in the further post. Including the multi-page structure in this post would make the post really lengthy and hence we will discuss this in the next post. Do let me know, if you have followed the post and also if you haven't, of any mistakes that you would have come across in this post.

    Hope you enjoy coding using Jquery Mobile and share this post if you have liked it. You can also follow the blog on Facebook by liking the Spatial Unlimited page.

Recommended for You

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 - 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…

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 for..in 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 for..in 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…