Categories
Reviews

Find Font Details With Just A Single Click [Firefox Extension-Font Finder]

Usually what I do to find font details like font family, font size, its color etc I open Firebug(F12) and start inspecting with it but this becomes time-consuming. What if we get something that provides font details with just a single click. It can be done with the help of Mozilla extension i.e. Font Finder which provides font details in a pop up window.

  • Download the Addon and install it.
  • Restart your browser and you will find an icon at bottom-left in the status bar.

As you can see in the image below there is a font finder icon. Click once on it and then click on the font whose details you need. In a pop up window it provides all details about Color, Font, Spacing, Decoration, Transformation and Element.

Font-Finder-icon

Do drop in your views through your comments.

Link: Font Finder

Go to Parent Post

Categories
Tips

Remove All Unused CSS Selector And Keep Your Stylesheet Clean [Firefox Extension]

It detects all unused CSS selectors from the stylesheet and helps removing unwanted classes from the stylesheet. This Firefox extension “dust me selector” is very useful for keeping your stylesheet clean.

Dust-me-Selector

Once you have finished writing CSS, click on the ‘dust me selector’ icon in the status bar and it will find all the unused selectors. As you can see in the above image it provides the line number which you can use as reference to remove the selectors from your stylesheet. Lesser the code smaller the file size! 🙂

Link: Dust-Me Selector

Go to Parent Post.


Categories
Tips

How to create a WordPress project in NetBeans

NetBeans is such an awesome IDE that I use for all my WordPress projects. This tutorial will help you understand how to create WordPress project using NetBeans IDE.

I have downloaded WordPress version 3.0.1  and unzipped it to a new folder in “C:xampphtdocs” directory. I then created a database with xampp server for this demonstration. Check out details on installing WordPress on your PC.

First download NetBeans from its official website.

Now to configure NetBeans project

First we need to create a new project with existing sources.

Existing source

  • Now browse for the ‘Source Folder’ where we have unzipped WordPress. (eg: C:xampphtdocs)
  • Then fill in your project name.
  • Make sure that the check box is selected which ensures NetBeans meta data goes into separate folder.

Browse source folder

  • Now we can specify if the project will run as a local website or a remote website.
  • Here I have selected  it to run locally. Now click finish button to complete the project.

Run as local host

  • Now the project is created in NetBeans.

Project created

Run “localhost/Demo” on the browser and we can see the website we are working on.

Advantages of using NetBeans for WordPress projects

  • NetBeans IDE is built using an open source API called NetBeans Platform.
  • Extensible and easy modular design.
  • Vast API of commonly used tasks.
  • Pre-defined update center and automatic update notification.

Do write in your views through your comments.

Categories
Reviews

Split Browser Screen for Comparing Mockups [Firefox Extension-Tile Tab]

I always find it difficult to compare mockups with my website, so I came across a Mozilla add-on which splits the browser in tile pattern. I used to compare the mockup with the original website is to toggle ALT + TAB. Then I found a better solution which can be used with Mozilla add-on called Tile Tabs. There are several ways of doing this but I found Tile Tabs the easiest to use.

How to go about it :

  • Install fire fox add-on “Tile Tabs”.
  • Open your .JPG (whatever the extension is .gif .png) file in browser window.
  • Right Click your mouse button to open the image with Firefox.

open-with

  • Now switch to your browser.
  • Go to file menu->Tile.
  • Tile Tab->Below->choose your tab (in which the image file is opened).

tiletab

  • Press F9 (Shortcut key) to toggle screen and F8 to toggle synchronize scroll.
  • Now you can see in the below image how it works.

f9

Do drop in your comments.

Link: Tile Tabs

Go to Parent Post.

Categories
Tips

Clear Parent Element In CSS Using Clearfix

Overflow:hidden is very popular method to clear floats without adding extra markup. I always use overflow:hidden but it becomes undesirable in few circumstances where I place absolute positioned element it cuts off the element. So we can make use of different methods.

I have explained it with two different examples below how we can clear the parent element.

A parent div with child element which has float property affects the parent div or makes it disappear.

General

ADVERTISEMENT
<div class="parent">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
<div class="child">child 4</div>
</div>

<!--------------------------------------------->

.parent {   width: 416px;   padding: 20px ;  background-color: tan;   }
.child  {   width: 200px;   height: 100px;   float: left; border: 1px solid #000;   margin:2px;   background-color: green   }
.clear  {   clear:both   }

As you can see in the below image what happens when the child element has float property.

clear1

I have  added an extra div at the end this it will clear the float and solves the issue but in the next example I will show you how to clear it without including extra markup.

Method 1

ADVERTISEMENT
<div class="parent">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
<div class="child">child 4</div>

<div class=”clear”></div>
</div>

After clearing the float it results in something like this.

clera2

Now I am adding a class to a parent element which forces its children to self clear, in this technique we do not have to create extra markup. Both technique results in same but I found using clearfix better as it is also implemented in HTML5 Boilerplate.

Method 2

<div class="parent clearfix">
<div class="child">child 1 </div>
<div class="child">child 2 </div>
<div class="child">child 3 </div>
<div class="chlid">child 4 </div>
</div>
<!-------------------------------------------->

.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

That concludes two methods to clear parent element,  one uses extra markup and the other method saves the extra structural markup. Thanks to Thierry Koblentz for Clearfix Realoded.


Categories
Reviews

Search WordPress stuff with wpseek

When I started using WordPress I always used to search for tools that help in coding, save search time, provide rich features and all content should be available at the same place.

wpseek is an excellent web application that helps in searching WordPress stuff. It’s a centric searching tool. This helps developer find all the WordPress Functions, Hooks, Function Sources,  Actions, Template Tags and a lot more just at one place.

wpseek_search

Features of wpseek

  • While searching for functions with wpseek, you get auto-suggestions making it very easy to look up those functions.
  • The search results show up top Google search links for that keyword along with links to related codex documentation.

wpseek_info

  • You can look up the general information for the function along with code snippets.
  • You can add wpseek as a search engine in your browser.

add-search

If you are a WordPress developer or theme author then you will find wpseek useful. If you know any other such web application do share it with me through the comments.

Link: wpseek

Categories
Tips

How to install WordPress on your PC?

When I started with WordPress I found that it is better to experiment on a local server. The following tutorial will help you installing WordPress on a local server or your home PC.

Steps to install WordPress on local server:

  • Install a local server xampp.
  • Download latest WordPress from WordPress.org.
  • Extract the files to a new folder in C:xampp htdocs folder and rename it.
  • Run localhost in your browser window.
  • Create new database (http:localhost/phpmyadmin).

Database

  • Run the installation, give path in your browser (http:localhost/demo).

configuration File

  • Follow steps as shown in the image below (click “Let’s go!” button).

Lets Go

  • Fill in the database details. Db name must be similar to one which we have created, no need for password to a local database.

DB details

  • Click “Run the install“ button.

Run Install

  • Fill in the details.

Admin details

  • Installation is complete. Now click “Log In” Button to enter admin dashboard.

Login success

  • Enter your User name and Password to open admin dashboard.

Admin login

  • Click on the top-right link and Preview Your Website.

Admin Panel

  • A default twenty-ten theme is activated.

Wp-install

This way you can you start playing around with WordPress software, test plugins and themes on your computer itself without the need to set up test servers. Installing WordPress locally is a starting point for most people who are new to WordPress.

Links: WordPress | xampp

Categories
Tips

Run Multiple IE Browsers On Your PC?

A web designer wants his web-site to be visually same across all the browsers.  Amongst other browsers or even the latter incarnations of Internet Explorer, i.e. IE 6 which is a very different animal.

We always want to test  web-sites in various IE versions IE6,  IE7 and IE8 for browser compatibility. But it is always difficult to test on different machines.

Different Ways to Test Website on Various Versions of IE

  • What I used to do is to install 3 operating systems on a machine for IE testing, but it consumes a lot of time.
  • We can also make use of IE Tester but in some cases I found this unreliable, so I prefered to avoid it.
ADVERTISEMENT

But I came across an excellent way to run multiple version of Internet Explorer on standalone computer.

Thanks to spoon browser ,which provides hundreds of desktop applications. It also provides multiple IE version that runs at the same time on standalone PC.

To test all IE browser we can use spoon browser sandbox .

Run your applications anywhere, anytime as Spoon virtualization lets you run desktop applications with no installations. Do you know about similar tools to test multiple IE versions? Do drop in your comments.

Link: Spoon Browser

Categories
Tips

Alternative To Conditional Stylesheets And CSS Hacks

When we  need to apply CSS for other browsers, we either create new CSS files and enclose it with conditional comments. This actually causes blocking issue, which slow downs  the site’s  loading speed for a few seconds. We might also use browser specific hacks which will create issues while getting W3C validation.

What happens with Conditional Stylesheets?

Below I am using a typical example of using conditional stylesheets to work with various versions of Internet Explorer.

<link rel=”stylesheet” type=”text/css” media=”screen” href=”css/style.css”/>

ADVERTISEMENT

<!–[if IE 7]><link rel=”stylesheet” media=”screen” href=”css/ie7.css”/>

< ![endif]–>

<!–[if IE 6]><link rel=”stylesheet” media=”screen” href=”css/ie6.css”/>

< ![endif]–>

ADVERTISEMENT
  • Conditional style-sheets will mean additional HTTP requests to download.
  • As the statement is included in the tag, rendering of the page is affected. This happens because the page has to wait until the style-sheets are loaded.
  • This can separate a single CSS rule into multiple files which should be avoided.

What happens when we use CSS Hacks?

Example:

.ClassName{ margin-right: 15px; _margin-right: 5px; float:right;}

  • CSS hacks are targeted at specific browsers but it certainly does not validate the code.
  • Use of hacks are not necessary as many time hacks and workarounds can be avoided by just coding things to work in IE from the beginning.
ADVERTISEMENT

Solution

We can make use of “Rob Larsen’s” technique which is used in Paul Irish’s boilerplate.

<!–[if lt IE 7 ]> <html class=”ie6″> <![endif]–>
<!–[if IE 7 ]> <html class=”ie7″> <![endif]–>
<!–[if IE 8 ]> <html class=”ie8″> <![endif]–>
<!–[if IE 9 ]> <html class=”ie9″> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–><html class=””><!–<![endif]–>

  • This will fix the file blocking issue and we do not need to write any empty comment which also fixes the issue.
  • CMS platforms like WordPress and Drupal use the body class more heavily. This makes integrating there a touch simpler.
  • This technique when used will not be validated in HTML 4 but it works fine with HTML 5.

So CSS experts out there, do you find this article useful? Do drop in your views and any other alternate solutions through your comments.

Categories
Tips

How To Use Firebug Lite In IE6, Chrome And Safari ?

Firebug Lite is a Java Script that enables us to use Firebug like features in other browsers. It gives the same look and feel like Firebug. If you wish to use Firebug Lite for IE6 or other browsers like Chrome,Safari then here’s the way how to do that.

Just add the following code at the top of the <head> of your page:

Stable Live Link:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
Stable Local Link:
<script type="text/javascript" src="/local/path/to/firebug-lite.js"> </script>

Features

ADVERTISEMENT
  • Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome.
  • It has the same look and feel as Firebug.
  • Inspect HTML and change style in real-time in different browsers.

Firebug liteAs shown in the image above, you will see the icon on the right bottom of your screen.

You can visit here for more details.

Hope it helped you a bit. If you know any other way of doing so do share it with your comments below.