Sunday, December 28, 2014

Annual Retrospective - Welcome to the new year 2015!



    The curtains are about to fall and another year will have gone by. A brief interval, the curtains go up and we would be looking forward to the next year - 2015! This past year, I wrote comparatively few posts, but some really good ones. Though I have shared a few posts this year round, I have learned new things and techniques this year. I have upgraded my skills and am looking forward to put these to use in the new year and share new things with you all.

    I did a retrospective of what I shared during the last year and the data has revealed the top-shared and read posts over the last year. I present to you the top 5 posts of the last year.
  1. Exploring Jquery Mobile 1.4.0
  2. Material UI, Google Polymer & Web Components
  3. Difference between word-break: break-all versus word-wrap: break-word
  4. The bitter divorce of PSD and HTML
  5. Setting up a Sandbox for Google Polymer
    This year Spatial Unlimited crossed the 300K visits mark. All thanks to you readers and all of you who wanted to learn something new and liked what I shared. A heart felt thank you to all of you readers! Keep reading and giving your feedback. I also have set up a Facebook page for Spatial Unlimited and you can stay connected with me here as well. You can share new things on this page, ask questions and we can try to find solutions to some problems and issues in front-end web development together.


    So far I have been writing from India and now am writing from a new postal address in USA. It's a new year, new techniques, new skills and a new place. A perfect recipe to share some great techniques and articles with the community. Things are looking bright and I am hoping to write more this year! Hope you all had a great year too and wish you all a very happy new year 2015! Stay tuned for more updates and new things. See you in the new year!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Sunday, December 21, 2014

Merry Christmas

    Hello everyone! Its been a long time since I last wrote. Got real busy with some exciting projects and exciting opportunities. It has been a crazy and really exciting and knowledgeable journey this year. Hope you all had a great year and are looking forward to the holiday season! I wanted to take this opportunity to wish you all a very happy Christmas!

    As you all relish the goodies, decorate every nook and corner of your home and enjoy the get-togethers... May the joy and festivities continue to radiate in your lives, long after Christmas is gone! Stay safe, enjoy the holidays and get refreshed to join me on an enriching journey in the new year! I'll make sure that I write consistently and write about new things I learn.

    Signing off for the holiday season!



If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Friday, September 12, 2014

Crisis tool for Jammu & Kashmir floods

    To further aid the rescue efforts in Jammu & Kashmir, Google has launched a crisis map with updated satellite imagery showing the incredible extent of the flooding. Let's hope that this crisis map helps the rescue agencies, volunteers and others involved in the rescue efforts to respond to the crisis by identifying the flood zones, evacuation routes and weather conditions.

Flooded area of central Srinagar near the Jhelum river

    Please share the word and do your bit to speed up the rescue efforts in Jammu & Kashmir.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Tuesday, August 12, 2014

The bitter divorce of PSD and HTML

    Today's article is an interesting post that I read. The original post in Portuguese and authored by Fabricio Teixeira can be found at arquiteturadeinformacao (Now don't ask me pronounce this =)).


    Some are calling it the death of PSD but I prefer calling it a "divorce". PSD and HTML are both healthy and living strong, just that they do not live together anymore. "PSD to HTML", which for years was the most accurate and sometimes the only right path to web design process, seems like has its days counted.

    Firstly you draw a page in Photoshop; impeccable layout, representing exactly how the web pages would appear when opened in a browser. After a sign-off on this picture (PSD) from the client the front end developer transforms these pictures into HTML, CSS and Javascript. The assets are cut, one by one, exported from the PSD and integrated into the HTML. Plugins and new tools are created in the process and some companies even charge upto $100 to do this process for you.

    As articulated by Nick Pettit on the treehouse Blog, PSD to HTML is a process that makes perfect sense at first glance. It can be a difficult process to start working on the development of a web page without knowing exactly how the designers hope to get the final result. Experience in PSD first and then create a final product seems to be a very reasonable process.

    It turns out that the scenario has changed considerably in recent years. The direction in which the web design is heading brings some aspects that make this process of PSD to HTML to start getting outdated. Among the major changes are:

Design in CSS

    After CSS3, many of the visual effects that were earlier achieved only with the tools of Photoshop (shadow, rounded corners and gradients among many others) started becoming available by mere use of CSS code. Previously, if a box had rounded corners, then the developer had to export the edges as images and make them fit to the pixel. Most modern browsers now support the CSS to implement this. Rare are the scenarios where we still have to support the troublesome Internet Explorer.

Responsive Design

    If you are a front end web developer, you are pretty much aware of the challenges involved in designing websites that run on all resolutions available in the market - especially after the rise of smart phones, tablets, phablets and the chaos by the lack of standardization of the screen sizes by the manufacturers of these devices. The Responsive Design comes as a very effective solution to these problems. Now back to the example of rounded corners. It is almost impossible to make these fit perfectly on all resolutions available in the market and it deceives those who think that its ok to support the 3 or 4 most common breakpoints and chuck the rest.



Flat Design

    With the trend of flat design setting in, interfaces without much shadow, bevel, emboss and all that jazz allow more and more sites to be designed using CSS alone using images for photos and specific backgrounds only. This has resulted into greatly reduced use of Photoshop visual effects.

Market Maturity

    Over the years, the web design industry has matured significantly. Designers and developers have begun to learn what works well and avoid what does not. In most companies, designers are expected to have an accurate knowledge of what is achievable with the currently available technologies. No crazy solution is proposed which hasn't been tried and tested earlier.

Does that mean Photoshop is dead?

    No. Definitely not. Photoshop is still very important in web design. However, it is now more of a sketchbook than an actual step in the process of web development. Designers test solutions in Photoshop to determine the harmony of the page and display the visual identity for customers and other stakeholders. The layout also serves as a discussion tool for everyone to come a consensus on the look that the product should have.

Designing in the browser

    Brad Frost is one of the programmers who has captured this shift in thinking. According to him, the best way to design a website in a browser is to get the developer to code on the same day the designer starts thinking on the branding. Below is a interview in which he tells a bit about the process that he usually applies in the projects he participates in.


    This is how the sketch board looks now a days for the developers while the designers create the branding for the customer.


    This is how a once popular and sometimes the only method to generate good functioning web pages is slowly and steadily making way for a more developer oriented web development with little to no dependency on Photoshop assets and layouts.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Thursday, July 31, 2014

Setting up a Sandbox for Google Polymer

    In the last article, we got introduced to Google Polymer which implements Google's Material Design for the web. Google Polymer is based on the concept of Web Components and provides users with 2 types of components that can be readily utilized - the Polymer Core Elements and the Paper Elements.

    Polymer's core elements are a set of visual and non-visual utility elements.They include elements for working with the layout, user input, selection and scaffolding apps.


    Polymer's paper elements collection implements material design for the web. They are a set of highly visual, highly interactive elements that includes things like controls, layout, hero transitions and scrolling effects.


    We will be taking a look at the implementation of the Paper Elements in the next few posts, but before that we need to set up a sandbox to try out Google Polymer on our local systems. Follow the steps below and you can successfully set up your Google Polymer sandbox.
  1. Download the zip file of Polymer Paper Elements from the link - http://www.polymer-project.org/docs/start/getting-the-code.html
  2. When you download a component or components (we are downloading the entire components set for development) as a zip file, you get all of the dependencies bundled into a single archive. You need not install any additional tools.
  3. Extract the zip and add the folder to your local web servers home/htdocs folder.
  4. That's all that you have to do get Google Polymer components and set it up on your local system.
    You need to set the paths of the platform js file, the Roboto font and paper-elements html in the head section. Refer to the code below to get an idea.


    Do not worry about the code above as of now. We will take a look at it in detail from the next post onward, where we take a look at each Paper Element in detail. Stay tuned for the fun!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Friday, July 11, 2014

Celebrating 200K visitors!



    I’m so excited that I have finally reached this milestone. 200K blog hits! Yes, we have crossed 200K visits.

    I never thought when I started this blog in November, 2010 that I would have much to offer that people would appreciate so much. But today with more than 200,000 page views, more than 500 followers and several Likes and +1s the response to this blog has been nothing short of amazing. Now I have the added responsibility of contributing better code samples and better articles.

    At the end, I would  like to thank all visitors and members for making this blog successful. I am so happy to have readers such as you. Thank you all who have been reading. If you are a regular reader, or if you just dropped by today, do comment and tell me what you liked about the blog!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Thursday, July 10, 2014

Material UI, Google Polymer & Web Components

    Google introduced Material UI during the Google I/O a few days back. Since then the web is all abuzz with articles about material UI and what Polymer is and how these 2 fit together. In this article today, I will try and helps us all to get a better understanding of these new concepts.


    So, let's start with Material UI first. Google has for long been trying to bridge the gap between the Web and the Android worlds with a unified user interface and Google's Material UI is a big step towards this. The new design philosophy is about dynamically adjusting the elements according to screen size, add more white space between elements, provide a lot of user feedback using animations, make use of bold UI colors and be flat and 3D about the design at the same time. Now that sounds really cool, isn't it? Well, actually it is and you will actually appreciate and enjoy it all the more when you watch the following video from this year's Google I/O.


    Now let's shift our focus to Google Polymer. Google Polymer is not new and has been around for about more than a year now. Though it is still available as a developer-preview sort of a thing, it is being used to create applications. Polymer is a pioneering library that makes it faster and easier than ever before to build beautiful applications on the web. Polymer is built on top of a set of powerful new web platform primitives called the Web Components. Web Components has been around for quite some time now, after it had been conceptualized in 2010. This is a great article that you should definitely read to understand what web components are.

  
    Now, we have looked into Material UI, Google Polymer and Web Components. How does this all fit together? Polymer is the embodiment of material design for the web. The Polymer team works closely with the design teams behind material design. In fact, Polymer has played a key role in material design's development. It was used to quickly prototype and iterate on design concepts. Watch this next video where Eric Bidelman speaks about how web components are a complete game changer and how this revolution will make developers more productive and reduce the cognitive load of being a Web Developer.


    Till this point, we now have a clear understanding of the Material UI, Google Polymer and Web Components. Now let's get a brief overview of what components does Polymer offer the web developers. Watch this next video again from Google I/O 2014 by Rob Dodson.


    Hope you are all excited by now to try your hands at Google Polymer and embark on a new design jouney with Google's Material UI. I will soon be sharing sample codes on how to use the various components of Google Polymer - that means there is more fun on the way! Stay tuned!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Friday, June 27, 2014

Responsive Websites - Why bother?

    Responsive website is now the need of the day with a large user base shifting to mobile devices to browse the web on the go! This is not a relatively new concept, but I came across 2 really nice info-graphics regarding "Responsive Websites" that talk about the mobile web design and the responsive website design or the responsive template. I would like to share these with you all.

    The first info-graphic is courtesy of SPINX explaining Why Responsive Websites are Key in a Multi Device World!



    The next info-graphic courtesy of Splio provides 10 basic tips to developers that they can remeber while build responsive websites.


Note: The content of the info-graphics belongs to their respective creators.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Wednesday, May 21, 2014

List item image marker - A cross browser solution

    Styling the list item markers is required on so many instances. There are so many readily available list styles like - square, circle, lower-alpha, roman and many more. Even after having a wide range of list styles, we are often faced with the challenge of using a custom list style. This is when we tend to use an icon mage for the list items.

    With CSS adding a custom image icon for list style is easily possible using the following code.

list-style-image:url('icon.png');

    However, this is not as simple as it appears. The above code doesn't display the output in the same way in all the browsers. IE7 and Opera will display the image marker a little bit higher than Firefox, Chrome and Safari. Our dear QA friends, will pounce on this and log an issue. QA 1 up! Now what? The developers have to find a solution to this and most will end up with a dirty hack. To avoid this, and be 1 up on our QA friends, here is a cross browser solution that works!


    Hope this small bit of code proves useful to all of you. If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. Till next time; happy coding!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Thursday, March 20, 2014

CSS - Counter-increment and counter-reset

Today we will take a look at a couple of CSS properties that are usually used together but not very frequently used. We will be talking about the counter-increment and counter-reset properties.

As the name suggests counter-increment and counter-reset definitely have something to do with counters. Let's take a look at the example below which will clearly illustrate the usage of these 2 properties.



The implementation is very clear and straight-forward. The only question that remains now, can these CSS properties replace the ordered list (ol-li) HTML code? Do let me know your comments and feedback. Would you use these CSS properties against the standard ol-li structure?
If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Thursday, March 6, 2014

CSS Text and Font

    In this post today, we will take a look at some of the most interesting CSS text and font properties listed below.
  • text-transform
  • white-space
  • word-break
  • word-spacing
  • word-wrap
  • font-variant


Text-transform property:

    Let's begin with the text-transform property. The filler text used in all the examples below has been taken from Andy Matthew's filler text generator which is a humorous replacement to the traditional boring lorem ipsum.

    The text-transform property will turn your text to uppercase, lowercase and also will capitalize the first character of every word. So now you don't need any javascript to do your bidding. This transformation will be done irrespective of the special characters preceding and following the text characters. The following example will make things much more clear and editable of course =)


White-space property:

    The next property to explore is the white-space property. The white-space CSS property is more of a replacement to the "pre" tag in HTML with some added advantages as well. The various values of the white-space property like the nowrap, pre, pre-line and pre-wrap will handle the white spaces and new lines differently. The following example will clearly define the value that this property gets to the table.


    As you can see in the example above, "nowrap" will not allow text or other inline elements to break naturally to the next line, but instead will push the boundaries of its parent until the line is completed, putting everything on a single line.

    The value pre works exactly as you would expect: The same as content wrapped inside the pre tags. All spaces and line breaks are honored, creating output in the browser that is virtually identical to what is in the markup. Also just like the pre tag, if everything in the markup is on a single line, the line will push the boundaries of its parent to keep everything in the output on a single line.

    The value pre-line will work exactly as normal with just one change. Line breaks in the HTML will be honored. So, if you have multiple spaces between elements, those will be ignored as usual, but if in your markup you drop to a new line, the new line will also occur in the output.

    The last value pre-wrap will work exactly as pre except that it will naturally wrap lines according to the boundaries of its parent. So it will not force everything on a single line to imitate what's in the markuo, but it will honor multiple spaces and explicit line breaks.

Word-break property:

    Let's explore the word-break property now. This property has 1 main value that we will discuss - the break-all value. Let us take a look at the example below.


    In the example above, I have put a border and width on the paragraph to demonstrate the usage of the word-break property. As you will notice in the first para, line breaks in text can only occur in certain spaces, like when there is literally a space or a hyphen. However, when you set the word-break property to break-all line breaks will occur between any character, as seen in the second para in the example above.

Word-spacing property:

    The word-spacing property helps to add space between words in a paragraph. The syntax is pretty simple and is as follows.

word-spacing: 10px;

Word-wrap property:

    The word-wrap property has a very useful value break-word. This value forces long words or sentences with no logical space or hyphen to wrap to the next line. The following example will make this much more clear.


    Note: If you have followed the post right upto this point, then you must be wondering that word-wrap: break-word and word-break: break-all are doing the exactly same thing. Aren't they? Well, these 2 things are slightly different and you can check the details on this post here.

Font-variant property:

    In font-variant there is one important value small-caps. In a small-caps font all the lowercase characters are converted to uppercase characters. However the uppercase characters are a font size smaller than the original uppercase character in the text. The following example will make things much more clear.


    This concludes our article today. Do let me know your thoughts on it. Do drop a line if this has helped you or even if you have found a mistake or would like to suggest something to better this post. Till the next post, happy coding!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Difference between word-break: break-all versus word-wrap: break-word

    The 2 CSS properties word-break: break-all and word-wrap: break-word appear to work in the same way or generate the same output, but there is a slight difference between the 2 and we will be discussing these differences today.



    Take a look at the example above. The difference is quite evident, however I will try to explain it further.

word-break: break-all
  • Irrespective of whether it’s a continuous word or many words, break-all breaks them up at the edge of the width limit even within the characters of the same word

word-wrap: break-word
  • This will wrap long words onto the next line.
  • break-word adjusts different words so that they do not break in the middle.

    So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).
    In case you want to explore more text and font related properties, you can head on to this post here. Hope you have liked this article. Do drop a line to let me know if this has helped or if there is any mistake or you would like to suggest anything. Till next time, happy coding.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Friday, February 28, 2014

CSS inheritance sequence

    Starting today, I will also write about a few things CSS apart from Google Maps Javascript API and Jquery Mobile. I will cover some really interesting things in CSS and keep updating this blog as and when I learn something new and think its worth sharing with you all.

    Today we will look at a very common mostly known thing in CSS - the inheritance sequence of CSS. Most of you reading this post must be aware that there are 3 ways in which you can include CSS into your web application.

  • External Stylesheet
  • Internal Stylesheet
  • Inline Styles

External Style Sheet
    An external style sheet is ideal when you are writing a style that would be applied across multiple pages. The external style sheet gives the developer lot of control over the look and feel of the entire website or web application. The external style sheet is included using the the "link" tag which is included in the head section.

<link rel="stylesheet" href="styles/default.css" />

Internal Style Sheet
    An internal style sheet is used usually when a single document has unique style. The internal styles are written as part of the "style" tag which is again included in the "head" section.

<style>
    p{
        font-size: 20px;
        color: #a123bb;
    }
</style>

Inline Style
    An inline style loses many of the advantages of style sheets by mixing the content with the presentation. Inline styles should generally be avoided and be used when absolutely necessary and unavoidable!

<p style="font-size: 20px; color: #a123bb;"></p>

    As we know and/or have learned from experience, that these styles cascade into one, let's say a "virtual" style sheet which gets applied on the entire web site/application. This cascade follows the following sequence to override each other and create one final style sheet. Number #4 in the following list has the highest priority in the cascade.
  1. Browser default styles
  2. External style sheet
  3. Internal style sheet
  4. Inline styles
    So an inline styles has the highest priority, meaning that it will override a style defined inside the "head" tag, or in an external style sheet or the default browser styles. However, there are a few cases where this sequence of cascade can change!

Case #1: Usage of the !important keyword
    In case there is the "!important" keyword associated with an of the styles, then that style would get applied irrespective of whether it is part of the internal or the external style sheet.

Case #2: Javascript
    When styles are applied through javascript, these styles will override all styles included as part of the internal or external style sheet or even the inline styles.

Case #3: Sequence of inclusion of stylesheets
    If the link to the external style sheet is placed after the internal style sheet in the "head" tag, the external style sheet will override the internal stye sheet!

    Hope you have enjoyed this post and learned a few new things. Do let me know in case you want me to include a topic as part of the blog and I would be happy to write about it! Till then keep reading and keep sharing.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Thursday, February 20, 2014

Mobile web application - Remote debugging

    How many times have you come across issues on your web project which are specific to your Android devices, some particular version of it and on the Android stock browser or the installed webkit browser or the Chrome browser. Most of you must have been in this situation - "Things are working fine everywhere except on some Android version" - how many times do you see such issues/bugs raised by the QA team and you feel, if only I could debug on the mobile browser just like we do on the desktop browser using our developer tools.

    You can now heave a sigh of relief, you can now debug your mobile web application for any mobile specific issues if you have the issue on the Android Chrome browser. The chrome developer tools now allow the user to remotely debug a web application on Android devices. The experience of web content on mobile operates very differently than what users experience on the desktop. The Chrome DevTools allow you to inspect, debug and analyze the on-device experience with the full suite of tools you're used to, meaning you can use the tools in your desktop Chrome to debug a page on mobile Chrome.



    Debugging occurs over USB and as long as your mobile device is connected to your development machine, you can view and change HTML, scripts and styles until you get a bug-free page that behaves perfectly on all devices.


    To start debugging, you need to have:

  • An Android phone or tablet with Google Chrome for Android 32 or later installed from Google Play.
  • A USB cable to plug in your device. (Windows users will also need to install an appropriate USB device driver.)
  • Google Chrome 32 or later installed on the system you wish to use as your debugging host.

Step #1: Setting up your device

    In order to debug over USB, you need to setup your Android device for development.
    To enable USB debugging:
  • On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Yup, just tap it 7 times, even if it seems crazy. Then, return to the previous screen to find Developer options.
  • On Android 4.0 and 4.1, it's in Settings > Developer options.
  • On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development


Step #2: Connecting directly over USB

    DevTools now supports native USB debugging of connected devices. You no longer need to configure ADB or the ADB plugin to see all instances of Chrome and the Chrome-powered WebView. on devices connected to your system. This functionality works on all OS's: Windows, Mac, Linux and Chrome OS. Just visit "about:inspect" and verify Discover USB Devices is checked. This direct USB connection between Chrome and the device may interrupt an `adb` connection that you may be trying to establish. If you need to use the `adb` binary for other reasons, uncheck the "Discover USB Devices" checkbox, unplug the device, and plug it back in, before establishing your connection via `adb devices`.


    If you encounter problems with the above technique, or are using an older version of Chrome, you can try the legacy workflow for connectivity which uses the adb binary from the Android SDK.
  • Connect your mobile device to the host using a USB cable.
  • Ensure your device is listed as available, by issuing the adb devices command. If not, please check that you have USB debugging enabled on your device.
  • On the mobile device, launch Chrome. Open Settings > Advanced > DevTools and check the Enable USB Web debugging option.
  • Issue the following command in the terminal or console on your host machine to enable port forwarding:
adb forward tcp:9222 localabstract:chrome_devtools_remote

  • If you get a "device not found" error, run the adb kill-server command to resolve.
  • Now open desktop Chrome and navigate to localhost:9222.
  • You will be presented with the set of thumbnails for pages currently open in tabs on your mobile Chrome. Choose the page you would like to debug.


Step #3: Connect your device
  • Connect your mobile device to the development machine using a USB cable.
  • When connecting your device to your development machine, you may see an alert on the device requesting permission for USB debugging from this computer. To avoid seeing this alert each time you debug, check Always allow from this computer and click OK.


    Now, to see all connected devices, go to the Chrome menu > Tools > Inspect Devices:


  • You can have multiple devices simultaneously connected as well as multiple versions of Chrome open on each device.
  • You will be presented with the set of thumbnails for pages currently open in tabs on your mobile Chrome. Choose the page you would like to debug. Find the tab you're interested in and click the inspect link to open DevTools on it. You may also reload the page, bring it to the front, or close it. Lastly, you can open new links on the device through a text input field.
Step #4: Debug your Application
    You can now start debugging and profiling mobile content in the DevTools on your desktop.



    For example, inspect an element in the page you have selected and you will notice the element highlight in Chrome mobile on your device in real time.


    Similarly, editing scripts or executing commands from the Dev Tools console will also apply to the page being inspected on your device, as seen below.


    Hope this article helps you resolve the device specific issues better and hope this has saved you some time and loads of frustration. Till next time, keep reading, keep developing, keep deploying! =)

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Thursday, January 2, 2014

Exploring Jquery Mobile 1.4.0

    The Jquery Mobile team released a new stable version 1.4.0 on December 23, 2013, an early Christmas gift for all the Jquery Mobile fans including myself. The main thing that people noticed in this version was the change in the default theme and design. Jquery Mobile has gone flat with version 1.4.0, some believe that this change has been inspired by the flat metro design style Apple adopted for iOS 7. However, there have not been just cosmetic changes, but many more changes and we will take a look at these today.

Default theme (Swatch A)

    Version 1.4.0 is focused on performance improvements and reviewing widgets. A new default theme has been introduced with SVG icons. A few new widgets have been introduced with this version which include a flipswitch widget, a generic filter widget named "filterable", popups with arrows, tooltips for sliders and 2 new Jquery UI widgets have been intergrated - the Tabs widget and the Date Picker widget. The filterable widget can be used with listviews, collapsibles, tables, controlgroups, select and even a simple paragraph of plain text.

Jquery UI Tabs Widget Integrated

Jquery UI Date Picker Widget Integrated


    As compared to the earlier versions, in the current version of Jquery Mobile, DOM manipulations have been reduced to improve performance. Generation of inner markup for elements styled as buttons has been completely removed and in many cases, the frameworks just adds classes to the native element during enhancement and even the number of classes have been reduced.

    A new default theme with a flat, more modern design has been introduced in this version. Also the number of swatches has been reduced from 5 to 2; a light "A" swatch and a dark "B" swatch. The new theme also includes a completely new icon set which has vector-based SVG icons. A fallback to external PNG icons on browsers that don't support inline SVG and also been included.

Sample of the new SVG icons

    In this version of Jquery Mobile, the slider and the range slider widgets have been deprecated. These widgets will be worked on and supported again in the future versions. Data-role="fieldcontain" has also been deprecated and has been replaced by class ui-field-contain. Several other classes like ui-icon-shadow have also been deprecated in this version.

    2 new events - "Swipe to Delete" and "Swipe to navigate" have been introduced with this version. Many developers, I am sure must have been very happy to see these 2 features included in this release. These are very popular events that are a common requirement of most mobile web applications.

Swipe to navigate

Swipe to delete

    With all these new changes introduced in this version and many more new interesting features proposed for the future releases, Jquery Mobile is becoming one of the most prominent mobile web framework looking at the current market trends. Jquery Mobile is enhancing its existing framework by making it lighter and at the same time loading it with several features.

    Drop a line to share your experiences with the new version of this exciting mobile web framework. Feel free to suggest any new features that I missed to cover in this post. Till next time, have fun exploring the new Jquery Mobile.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!