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);