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!
Buy Me A Coffee :) @ ko-fi.com

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!
Buy Me A Coffee :) @ ko-fi.com

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!
Buy Me A Coffee :) @ ko-fi.com

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!
Buy Me A Coffee :) @ ko-fi.com

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!
Buy Me A Coffee :) @ ko-fi.com

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!
Buy Me A Coffee :) @ ko-fi.com

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!
Buy Me A Coffee :) @ ko-fi.com