Categories
Tips

How to clear your DNS Cache in Windows

Windows usually caches the DNS records for faster resolution of web pages, at some point one needs to refresh that cache, this is how you do it,

Open the Command Line Interface of Windows, (Run -> type cmd)

and run the following command

ipconfig /flushdns
Categories
CSS How to Tips

CSS Clearfix Best Cross browser solution

Clearing the divs has always been a solution for web 2.0 sites but there are many ways to implement it. The reason of this post is not to go in the details but giving a simple cross-browser css solution. BTW I prefer this css solution rather than adding the ugly empty clear div all over your html and polluting the markup.

Bad Solution :

<div style="clear:both"></div>

Perfect Cross Browser Solution:

add the css below to your site wide CSS file. and then apply the class clearfix to any containers that need to be cleared, or the containers in which you are adding the clear-div. and yes remove the clear-div of-course.

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
	overflow: visible;
}
Categories
Facebook

Modify how the shared item appears on Facebook

Thousands of websites are shared in facebook each day. Whenever you share a URL on facebook, it generates a feed against that url. The feed has a title, an excerpt or description and an image.

You can enhance how the shared item appears on Facebook by configuring how it gets previewed on a user’s profile and when a user tries to share it.You do this with <meta> tags. If there are no meta tags specified then Facebook share will take the site title, starting content of the site as excerpt and usually the first image shown.

In order to customize how your site looks while being shared on facebook you need to add meta tags in the <head> of your page.

For the title of shared link :

<meta name="title" content="title to be shown" />

For the Description/Excerpt :

<meta name="description" content="excerpt to be shown" />

For Thumbnail Image :

<link rel="image_src" href="absolute path to the image" />

The thumbnail’s width AND height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.
-Facebook

EDIT:  May 15, ’11:

I have just noticed that FB is starting to end the support of these basic tags which I have explained above, I will still prefer using them as many other websites use these tags to get the specified data, but you should also use the new Open Graph tags by Facebook which I am quoting from Facebook’s documentation which is quite clear so I think I don’t have to add my own explanation:

Open Graph Tags:

Open Graph tags are <meta> tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

An Open Graph tag looks like this:

<meta property="og:tag name" content="tag value"/>

If you use Open Graph tags, the following are required:

  • og:title – The title of the entity.
  • og:type – The type of entity. You must select a type from the list of Open Graph types.
  • og:image – The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
  • og:url – The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
  • og:site_name – A human-readable name for your site, e.g., “Kaizen”.

Facebook also has a sixth tag on their documentation but I dont think it will really be necessary for most of the sites.

Source: http://developers.facebook.com/docs/reference/plugins/like/

Found this post helpful? Want to return the favor? Use the button below :)




Categories
Code Javascript Tips

Analyzing your Javascripts performance

Gone are the days when your Javascript’s performance was no issue, developers used to show more love for their server than client’s browser, scripts used to delay the site loading times. There are many best practices for your JS code like having all your scripts at the bottom, etc. If you are looking for the best practices and approaches for you JS code then you should read Steve Souders, Douglas Crockford, Ben Cherry or google it.

But its not easy to remember all such best practices while you code…

what if you had a tool which would love to review your code and point out all the issues?

Yes this is very much possible, this fantastic tool called JSLint. They call it The Javascript code quality tool. and it is rightly so. You have to paste your JS code on the site and it’ll point out the issues, and guide you to improve the quality, hence improving the performance of you JS.