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.
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.
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.
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! 🙂
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.
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.
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.
After clearing the float it results in something like this.
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.
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.
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).
Run the installation, give path in your browser (http:localhost/demo).
Follow steps as shown in the image below (click “Let’s go!” button).
Fill in the database details. Db name must be similar to one which we have created, no need for password to a local database.
Click “Run the install“ button.
Fill in the details.
Installation is complete. Now click “Log In” Button to enter admin dashboard.
Enter your User name and Password to open admin dashboard.
Click on the top-right link and Preview Your Website.
A default twenty-ten theme is activated.
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.
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.
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.
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 FirebugLite 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:
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.
As shown in the image above, you will see the icon on the right bottom of your screen.