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

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

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

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