The UI Dev

    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. Exploring Jquery Mobile 1.4.0 Material UI, Google Polymer & Web Components Difference between word-break: break-all versus word-wrap: break-word The bitter divorce of PSD and HTML Setting up a Sandbox for Google Polymer     This year Spatial Unlimited crossed the 300K visits mark. All tha...

    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!

    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.

    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 eve...

    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 u...

    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!

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

    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.

    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 w...

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?