Category: Tips

Categories
Facebook Tips

How will a page show up on Facebook Share.

Umair Jabbar facebook share

Facebook share is widely used these days to share web pages people like, on their profile. The sharing mechanism is quite simple, fetches the related image and excerpt from the url being shared to ensure that the person seeing the post gets an idea of what the shared page is about. A webdesigner has control over how the webpage will look when shared on facebook. How to control what image and text shows up when your page is shared is explained here.

This post is focused on how to test exactly what your page will look like, even the minor details. Facebook has a very simple tool for this called URL Linter.

Just paste the URL of the page to be tested and facebook will fetch the title, description/excerpt, image, the link shown with the post, and any other meta properties on the page. This is extremely helpful for any page which is expected to be shared alot on fb, so that it can be tested before making it public. Another advantage of using this url linter is that once you make changes to your page and try the linter it will go for the latest version and not show the cached copy while normal facebook share will show a cached copy for a url that has been shared previously.

I hope this post gives you an edge while using Facebook share.

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




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
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.