CSS: Block vs Inline vs Inline-Block

Here are the major differences without any fancy words or pictures: 

Inline: Cannot have a height, width or a vertical margin but can have horizontal margin. Behaves much like floating left.

Block: Can have a height, width and margin. Takes up the entire width and pushes the successive content to next line.

How about Inline-Block? For that, let's understand why the above two display modes are used:

Inline is a display mode that is to be used in a sentence. For instance, if you have a paragraph and want to highlight a single word, you would wrap the particular word with an em or a span tag. It makes sure that the word stays in the same line, as span and em tags are set to display: inline by default. But if you want to use properties like height for the em or span tag, you need to make it display: inline-block to use the properties, and yet keep them on the same line.

Container-type elements (like <div>, <article>, <p>, etc.) are set as block-level elements by default, so the computed value of the display property for these is “block”. All headers (<h1>, <h2>, etc.), even though they generally only contain text content, are likewise block elements by default.

On the other hand, elements that are used to append with content are inline elements. That is, their computed display value is “inline”. These are elements like <span>, <em> and <cite>.

Changing the eraser size in Illustrator

Changing the brush size of the eraser in Adobe Illustrator didn't seem an easy task at first. So for those who faced the same problem, read on.

You can simply double click on the eraser icon in the toolbar to bring up this menu:

The eraser tool options in CS6

For a quicker change of eraser size, use the [ and ] keys while having the eraser tool selected.

Follow this blog for more tips. Please do share this article if you found it useful.

Multiple CSS Transforms on single element

I wanted to rotate an element in CSS and also wanted to mirror it. I thought of flipping the element, wrapping it with another div and then rotating the div. I found that I could do this in a single step by applying multiple transforms on a single element. Here's the syntax (vendor prefixed):

transform:rotate(-45deg) scale(-1, 1);
-ms-transform:rotate(-45deg) scale(-1, 1);
-webkit-transform:rotate(-45deg) scale(-1, 1);

Similarly, you can combine multiple css transformations. Got suggestions/improvements? Do comment below.

Responsive Web Design: Tips and Tricks

I recently worked on an application (Zoho Pulse) and made the application responsive for mobile and tablet devices. The website was previously built for web, and I had to face a lot of challenges to make it responsive. Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. 

1. Simple DOM structure:

This is perhaps the most basic of them all - keep it simple. Complex DOM means a complex layout, which means a lot more burden for you. It also would mean that the interaction and scroll will become sluggish - an effect you don't want. Divide your website into proper sections (like a header, left navigation pane, content area, etc.)

2. Media Queries:

Media queries in CSS adjust the content based on width of the device. Choose to display/hide content using media queries. Make sure that only the most important content of your page is displayed on mobile devices. You can hide everything else that you feel are not-so-important.

3. Breakpoints:

Make sure you have the right media query breakpoints for standard devices. Uneven breakpoints would make your website behave oddly in different devices which might nearly be of the same display resolution but above/below the breakpoint.

Here is a list of common breakpoints borrowed from the Foundation framework by Zurb:

// Small screens

@media only screen { } /* Define mobile styles */



@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */



// Medium screens

@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */



@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */



// Large screens

@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */



@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */



// XLarge screens

@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */



@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */



// XXLarge screens

@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */

4. Box-sizing: 
You probably know this property, but you will start appreciating it more while using it in responsive design. It helps you control the size of your divs even while resized. Box-sizing: border-box property gels the width, padding and border properties of the element within the specified width. In other words, the padding and border are 'inset'.

5. Max and min properties:

The max-width, max-height, min-width and min-height properties limit the maximum or minimum height/width of the element. Enough said.

6. Em and Rem units:

If your website is zoomable, the clarity of your fonts may be lost if you have specified the fonts in px units. It is well known to specify font sizes in ems. But what does it mean?

"If you define a font-size as 1em (font-size:1em;) you are telling the browser to set the font height to the same height as the parent element default height."

Rems are different from ems in one distinct way – ems use the containers font size to calculate, whereas rems are root based, I.E they use the HTML font-size as the base to calculate from.

7. Meta tags on your page:

I use this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

It indicates that the height and width must be of that of the device, the zoom must be set to 100%, and must not be allowed to be zoomed in or out by the user. 

<meta name="apple-mobile-web-app-capable" content="yes" />

If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

8. Eliminating touch delays:

Touch devices have a delay of nearly 300ms to allow double click. Anything more than 50ms as a negative impact and makes your app look sluggish as it takes time to respond. To eliminate this click delay, you can use the Fastclick plugin.

9. Bring native scrolling to your web app:

Mobile browsers do not scroll content like a native web application does. The 'momentum' or 'kinetic' scroll that your phone provides for apps isn't provided for browsers. To use this, you need to add a CSS property in your scrolling container:

webkit-overflow-scrolling: touch;

10. Backface-visibility:

The backface-visibility property defines whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see its backside. However, it is known to crash Safari in iPhone and iPad, so it is better to avoid this property.

Some more information on this here:

http://dontwakemeup.com/webkit-backface-visibility-and-browser-crashing/

http://stackoverflow.com/questions/16166849/ios-multiple-divs-with-webkit-backface-visibilityhidden-crash-browser-when-zo

https://discussions.apple.com/thread/5397323?start=75&tstart=0

11. Lesser jQuery bindings:

More jQuery bindings would mean that you are increasing the initial loading time and the DOM becomes heavier, also the performance and response is affected. It is generally advisable to use lesser jQuery bindings and use plain JavaScript instead.

12. Avoiding hover states:

If you find your website to be sluggish while scrolling, the single main reason would be the :hover selector in CSS. When you scroll on content that has a hover state, the browser mistakes the touchstart of scroll to be that of a hover state. Instead of scrolling the content, it shows you the hover state of the element, which makes the scroll look sluggish. Avoid hover states wherever possible and the best suggestion would be to gather all hover statements into a single file and not loading it for mobile devices.

13. Avoid using orientation in media queries:

@media screen and (orientation:portrait)
@media screen and (orientation:landscape)

These statements in media queries allow you to define styles specifically for portrait or landscape orientations. It is, however known to cause problems in Android when the "focus" event of input boxes is fired. Sometimes, the whole layout goes beserk.

14. Relative design:

This is again the basics of responsive design revisited. Try to specify all widths and heights in %. It allows content to adjust automatically to the available width/height.



Got more ideas? Do leave a comment below! Also, you can grab a presentation of the same here on Slideshare.

Differentiating mobiles and tablets in Javascript via User Agent

User agent for Android is pretty confusing - There's no separate UA for Android tablets. Hence, I came up with a generalized UA detection technique to differentiate tablets (Android and iPad) from mobile phone UAs. This will particularly be useful when you'd want to render separate layouts for Mobile and Tablet. Here's the JS code:

function getUserAgent(){
 var ua = navigator.userAgent.toLowerCase();
 if((ua.indexOf("iphone") !== -1) || ((ua.indexOf("mobile") !== -1) && (ua.indexOf("android") !== -1))){
  //The device is a mobile.
 }
 else if((ua.indexOf("ipad") !== -1) || (ua.indexOf("android") !== -1)){
  //The device is a tablet.
 }
  else{
  //Desktop or unrecognised device.
 }
}

You can also take a look at the same code as a Gist on Github and do check out other gists/projects by me.

How to make smooth circles in Photoshop without jagged edges

I tried numerous times to make a smooth circle, but I kept ending up with jagged edges in Photoshop. I knew I had been missing something and that's what kept spoiling my design. I then realized - hey, unlike Illustrator, Photoshop isn't a Vector tool. It is a Raster tool. But there must be something I could do to get a perfect smooth circle. And this did the trick:

For circular shapes:

• Select the Ellipse Tool
• On the top panel, change the mode from Shape to Pixels. 
• Tick the Anti-alias checkbox.
• Now draw your shape!

For circular selections:

• Select the Elliptical Marquee Tool
• Tick the Anti-alias checkbox.
• Now go ahead and make that selection!

While making selection from a path:

• Make sure that the 'Anti-Aliased' checkbox is ticked.

For a better understanding of the Anti-Alias feature, see the comparison image below (Click to enlarge):

One sided Box-Shadow in CSS

The biggest problem that I used to encounter with respect to shadows while coding in CSS after designing in photoshop is that I add shadows towards one side in PS and I found it hard to replicate the same in CSS. There's a very simple solution to that.

There's a fourth property for box-shadow, which is the shadow spread property. I didn't know that something like this existed for quite a long time. An example for its usage is as below:

    -webkit-box-shadow: 10px 0px 5px -2px #888 ;

Set the fourth property negative, as required till you achieve the required one sided effect.

Note: The above example sets a 10px box shadow towards the right and sets the vertical box shadow to 0.

Better Global variables in Javascript

If you are using variables in Javascript in the traditional way as follows:

    var testVariable = 1;
    function foo(){
        alert(testVariable);
    }

Then you may be wrong, because this case may fail when you integrate many Javascript files into one. I found that there's a workaround to fix this problem by attaching the variable to a window object. Here's how it can be done:

    var window.testVariable = 1;
    function foo(){
        alert(window.testVariable);
    }

I find that this is a wonderful way to avoid a lot of problems and confusions regarding global variables in Javascript.

Dynamically obtaining a DIV's ID - (When the ID itself is set dynamically).

The Problem:

Given a list of elements, find the ID of the element that was clicked upon. The challenge was that the ID itself was generated dynamically.


The Solution:

As the ID is generated dynamically and must be unique, I noticed that it has a constant class attribute like "post" in  the below example. Then, one line of jQuery did the trick.

For example, the given statement was like this:

..
<div id="post_237" class="post">
..
</div>
<div id="post_238" class="post">
..
</div>

Note that the ID changes every time and I had to find the content of that DIV. But the CLASS "post" is constant. Thus, to find the ID, the corresponding jQuery statement is as follows:

var getID = $('.post').attr('id');

There you go, the variable getID now contains the ID of that dynamic element.

Invert and Mirror X and Y axis using CSS Transforms

To invert or mirror an element (text, image, etc.) you need to use the transform: scale property in CSS. You can choose to laterally (sideways) invert or vertically invert an element.

To invert laterally, use the following code:

transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);

To invert vertically:

transform: scale(1, -1);
-ms-transform: scale(1, -1);
-webkit-transform: scale(1, -1);

To invert both ways:

transform: scale(-1, -1);
-ms-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);

Creating and Saving Paths in Photoshop

When you create a path using a pen tool in Adobe Photoshop CS6, it appears as a work path in the Paths panel. Note that a work path is temporary and unsaved. Also, you can have only one work path at a time.

If the work path is selected when you begin another path, your actions are added to the current work path. If the existing work path is hidden and you begin drawing another path, that new work path replaces the existing one.

Make sure that your path is saved before you start creating it. If you select New Path from the Paths panel pop-up menu before you create the path, Photoshop saves the work path, and it becomes a saved path. You can also click the Create New Path icon at the bottom of the Paths panel.

To save a work path, double-click the path in the Paths panel. Or choose Save Path from the Paths panel pop-up menu. (Click the down arrow in the upper-right of the panel to open the menu.) Then, provide a name in the Save Path dialog box that appears and click OK. You can reuse the path again anytime you wish to.

Loading jQuery Mobile in a dynamic environment

I was writing an RSS feed application on PhoneGap powered by jQuery Mobile. I used the default accordion provided by jQM and it worked out well.

However, I encountered a problem that the style wasn't getting applied when the number of accordion isn't known during page load time. The styles weren't applied to the dynamic elements. Here are some of the highlights of the problem I was facing:

• It is a simple RSS feed reader application.
• The number of elements (RSS news items) are not known beforehand.
• The feed is read and parsed into the page only after the page gets loaded.
• The feed items have got no styles at all, as the jQM has already loaded and set the styles for all the static elements and the dynamic elements do not get their styles set by jQM.

Thus, the solution was that I had to somehow 'refresh' jQM alone so that the styles got applied after all the dynamic content is loaded. You need to refresh the DIV that has the dynamic content once it is loaded. 

Assuming your dynamic content is appended to this node:

<div id="loaded-content" data-role="collapsible-set"></div> 

you have to do:

$('.loaded-content').collapsibleset('refresh');

Thus, you now have the dynamic content's styles and behavior using jQuery Mobile. Is there a better way to do this? Do let me know!

Accordion Expand/Collapse all in jQuery Mobile

The default behavior of the Accordion in jQuery Mobile allows you to expand or collapse only one Accordion tab at a time. I came up with a code to expand/collapse all tabs at once.

HTML:

Hello 1
I'm the collapsible content. By default I'm closed, but you can click the header to open me.


Hello 2
I'm the collapsible content. By default I'm closed, but you can click the header to open me.


Hello 3
I'm the collapsible content. By default I'm closed, but you can click the header to open me.
Open All Collapsible
Close All Collapsible

And here is the jQuery Mobile code to achieve the effect. I assume that you have included all the necessary jQM files.

$('#openAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('expand');
    });
});
$('#closeAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('collapse'); 
    });
});

If you have a better way of doing this, let me know! :)

How to count the number of li (list elements) inside ul (unordered list) using Javascript

Yesterday, I was trying to count the number of list elements inside an unordered list. I came up with the following code:

var ul = document.getElementById("myul");
var liNodes = [];
 
for (var i = 0; i < ul.childNodes.length; i++) {
 if (ul.childNodes[i].nodeName == "LI") {
  liNodes.push(ul.childNodes[i]);
 }
}

Show/hide left panel using Javascript

To show or hide a left panel, you need to keep an element (the left panel) with its CSS to be display:none so that we can make it appear to slide in from the left.

Let's assume that the ID of the left panel is #left-panel. You need the following code to make it slide from the left.

function showHideLeftPanel()
{
 $('#left-panel').toggle("slide", 
         { direction: "left"  }, 500);
}

You can customize the duration and direction of the toggle and I hope it is self explanatory from the above code. The function can be called on click, on load, etc. and it automatically toggles the state of the element.

You can read more on this here.

A basic example with Git

In this post, I shall talk about how to create a sample project on Github and start pushing files to your Github account from your machine. You will learn how to create and get started with an example project and start working on a full fledged social project.

• Create a new repository on Github. In your computer, create a new folder (Eg. C:\Documents\My Projects\Sample)

• Download and install Git and navigate to the directory in Git console and initialize git – git init

• Create/add all the project files to the folder and use the command – git add .

• Enter the command git commit –m “message” and hit enter.

• Next, enter the command git remote add origin https://github.com/username/repo-name.git where the username is your username and repo-name is the name of the repository you created.

• Enter git push and your project files are now pushed to the server.

Each time when you make changes to your project and push it to the server, repeat the following steps:

• git add . 
• git commit –m “message”
• git push

That's it! You have learnt the basics of Git and all set to start social coding!

Basic Git commands

Github is an online service that hosts git projects and helps achieve social coding. Sign up for Github. After you have signed up and logged in, create a new repository. Once the repository has been created in Github, start the Git Bash/Terminal and navigate to a folder in your local machine where you want to store your project files.

• You can use the Change Directory – cd and Make Directory – mkdir commands in both Git Bash and Terminal to navigate to the directory.

The initial setup requires an username and email that will be used to uniquely identify the user who has made changes to the project. 

• Once you have navigated to the directory, initialize Git in that folder by using the command git init

Add all the necessary project files. To make Git track these files, you need to explicitly specify it using the Git Add command. 

• To track all files, you can use the git add . command (notice the dot in the end).

• Next, the files need to be committed to the local repository. The command is git commit –m “message”. The –m “message” requires a message every time you commit, to uniquely identify the versions and you need to specify it within quotes.

Now, the server location has to be known by Git to put the files on the server.

• The command for this is : git remote add origin https://github.com/username/repo-name.git (where the username is your Github username and the repo-name is your repository name.)

The files now need to be sent or pushed to the server. This enables the server to maintain the latest version of the code every time.

• The command to send the latest commit version to the server is git push

If the server has a newer version of the project, it will not allow a push until you have a newer version. So the push fails and Git asks you to do a pull before you can push.

• The command for a pull from the server is git pull

You will now be able to push your commits to the server once you have a newer version.

Setting up Git

Setting up Git in Windows:

• Login to Github account and create a new repository.
• Download Git for Windows. The exe is available here.
• After the installation is complete, run the Git Bash program in Windows.

Setting up Git in Linux:

• Git can be set up on Ubuntu using the command “apt-get install git-core”
• Start the terminal access and use the features of git.

The basics of Git

In short, Git can be summed up as the following:

• Git is a version control system where multiple people can work on a same project and maintain the code at a central location.
• It maintains all the previous versions of files in a smart way and we can recover the changes the made to any of the versions.
• It is free for open sourced projects and we can use anyone’s code on Github and work on them.
  The set up process for Windows and Linux are different, but the commands are same for both Windows and Linux as well.
• The code is stored in a local project directory and is periodically updated to the server as changes are made to the project.
• Every time, the latest code is always on the server, and changes are always made to the latest version.

I shall explain more about Git and the basic commands in Git in the next post.

How to get rid of system tray in PhoneGap within Windows Phone

Visual Studio 2010 Express Edition creates a basic template for you in PhoneGap, but it does come with an inherent, irritating native system tray for Windows Phone applications. This is what I'm talking about:

 In your Visual Studio project, you can safely disable the system tray with one click so that it doesn't affect the look and feel of your application. You just need to set the SystemTray.IsVisible to "false". Select the system tray in your design area and look at the properties panel. I have illustrated it for better understanding:

 

Now,  take a look at the properties panel and un-check the SystemTray.IsVisible option: 

 Once you have un-checked the box, the System Tray disappears :) This can also be done by modifying the XAML and setting the same property to "False" all by yourself. Also, changing this in one page does not mean that it gets changed for all other pages. You need to manually edit and change them all.