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?

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!

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.

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.

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! =)

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.

Friday, December 27, 2013

New Year 2014 wishes




May every day of the new year glow with good cheer and happiness for you and your family.

Spatial Unlimited wishes all its readers a a very
" Happy New Year "

Enjoy the Holiday Season...