Time saver CSS tools and resources for web developers

Posted on September 25, 2010 by Shajed Evan

As a website developer we have to keep our-self up to date and at the same time keeping personal resource database is a must indeed.Keeping yourself well organized is an asset. If you can use more time saving tools, it gives you time to think about other important things in life. On internet you may find so many tools for web development work-flow. It becomes quite impossible to choose a good one because almost all of them deals with same entity, yet usability, experience or accessibility may vary.

In this article I am going to write about some useful tools which may help web developers reduce their work load while working with CSS. References of these tools have been collected from various famous tech blogs. I tried to mix up different tools for different purposes.
Related reading
You may like to read one of our previous writing on CSS – All about CSS : Useful blog post on CSS3

CSS Processor

CSS Processor gives you the option to be more productive within short time. There are so many CSS Processor out there. Every single of them gives you extensive support based on their special ability to process CSS to it’s extend.

Less CSS

LESS is an extension of CSS. You can write LESS code just like you would write CSS, except you need to compile it to CSS. LESS uses existing CSS syntax. This tool got some mindblowing option like Variables, Mixins, Nested rules, Operations and many more. See there Docs

Sass

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Turbine

Turbine is a PHP-powered tool that introduces a new way for writing CSS. It’s syntax and features are designed to decrease css development time and web developer headache. Have a look at their Docs

CSS Porcessor

CSSP extends the CSS language to help you develop and maintain sane CSS code. Now you can do what you’ve always wanted to do in CSS:

* Define constants in CSS files, and use them throughout your codebase.
* Import constants from other files.
* Emit browser-specific CSS code.

IE Converter Tools

Still Internet Explorer holds major market segment in browsing software. Though developers try to avoid IE for their development purpose, but good developers try to keep in mind their website should be all browser’s fruit! Below you will find few tools which helps you eliminate problems that we face while writing CSS for IE.

Selectivizr

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

IE6 CSS Fixer

A tool specifically designed to ease the pain of the ie6 css debugger. If you want to read up on all the specifics, I advise you to check the articles on the ideology, the specific fixes and the scope of this tool.

CSS Optimizer

Compress, optimize your CSS code to load your website faster. Most of the developers now using these tools for optimization, hence YSlow is a popular tool for testing CSS size and loading time which can be used along with Firebug for Firefox browser. It gives you and option to cmpress the whitespaces within inline codes, but for even better results I will suggest using following tools for your optimization.

Clean CSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

CSS Optimizer

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file.

CSS Drive -> CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.

CSS Frameworks

Who like to write down same CSS-Code or any other Markup twice? It’s very common scenario web developer has to face repeated classes and ID’s used on previous projects. CSS Framework gives you the way of using reusable predefined styles for your new project. Below I am going to showcase few of them.

Blueprint CSS

The framework offers an easily customizable grid, sensible typography, a typographic baseline and a stylesheet for printing. It also uses relative font-sizes, provides a CSS reset and is supposed to be cleaned of code bloats. (Recommended by Sven Lennartz on Smashingmag)

960 GRID SYSTEM

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

Elements

Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy. Read the Overview for more information.

Few other CSS tools

Below you will find source of different tools with different functionality.

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

Colors Palette Generator

Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.

W3C CSS validation service

W3C validation for CSS, This is the ideal place to check your CSS script’s validity. While valid you will get a W3C Valid CSS badge

You will contribute now

I tried to include most common yet useful tools that we frequently use over development purposes. It is for sure you may have already gathered even better resources for your CSS job. Please share with us your valuable experience about these tools. For those who are still thinking of using such tools you can always check with us or leave a comment so that we can refer you with better tools. Please subscribe our RSS feed and help us grow.

Are you switching to Google Chrome? – Extensions that will make you decide!

Posted on January 26, 2010 by Shajed Evan

When I first start using Google chrome which was introduced search engine giant Google, by end of 2008; I didn’t get much impression about it. It was fast for sure, but as a developer Firefox was feeding all my requirements with its rich extensions and plug-in. After a long gap I again downloaded The Google Chrome to find out difference of browser capability to one of my newest site and I got stunned. It is fast and came with new useful extensions. As a loyal Firefox user, I had gone though few articles to find out the difference and ongoing battle between Firefox and Chrome. Let’s have a look what Tech giants find out about this new browser,

When first formed, a review by Tech Herald was “Will Google Chrome shape the way Web browsers are developed and designed? It is too early to tell, but Google has certainly come up with something appealing and unique. Will Chrome replace Internet Explorer or Firefox? Perhaps not in its present form, and not for a very long time. Overall, Chrome is a killer little application to have and offers a nice break from tradition when surfing the Web. While there’s plenty of room to for growth and improvement, the first beta release is impressive.” – Tech Herald

Uses rate of this is growing faster to fastest, within 1 year it crossed Safari. By the end of December 2009, 9.8% share for Chrome and 3.8% for Safari; just thinking what will happen after this year (Source W3Schools Browser Stat).

This light weight browser become my daily friend because of following features:

It is faster than any other browsers
Works really well with low specific machines.
Work seamlessly at same speed with or without many tabs than any other browser (You can see more you open Firefox tabs more resources it uses, test it on Task Manager)
It has smart search engine detection tool.
Simple elegant interface.
Increasing rate of extensions as its source is free for all, developers are getting chances to show their innovative ability.
Downloads is bit easier, you will get track of your download instantly.
It remembers your most visited links and make it easy to find out, reduce searching time.
Are you Google Holic? Chrome is your first option.

There are lots of features included with this new growing browser and I am quite confident people will adopt it more in future. It is true it still have lacking in supporting extensive featured plugins that Firefox has, but it is just a matter of time for Google to close that gap. You can find some important links which might help you to know more about Google Chrome.

Important readings:

Chrome Extensions, resources you should use!

1. Top 46 Google Chrome Shortcuts That Save Time

All the shortcut command while using Google Chrome. Separated by categories and well explained.

View Source

2. Google Reader

Google reader extension by Google. Easy way to view all your unread items from GReader. Displays the Google Reader unread count. Clicking the icon shows a preview of your reading list in a popup (or it can open Reader in a new tab, see the options page for configuration).

3. Adthwart

AdThwart makes browsing the web less taxing on both your computer and your sanity. Choose from a number of filter lists, including the continuously updated EasyList. You can just install and forget it.

4. Chromed Bird

I am using it and it is great! Quick, easy to update and notify. It has URL shortener capability and most of all copy and paste your favorite article it will do the rest.

5. RSS Subscription Extension

Detects RSS the site you are visiting. Allows you to click and view the contents and if you want subscribe.

6. StmbleUpon

Stumble UP your favorite site? Just one click and it will redirect you to your StumbleUpon account to confirm your bookmarking.

7.SEO SERP

Still on its first release, but not bad as a SEO tool. It search for the top ranking sites according to searched keywords. You should try it.

8. META SEO inspector

Meta data is not just the usual HTML meta tags, but the XFN tags, various microformats, the recently introduced canonical attribute, the no-follow links and so on.

9. Feedly

A magazine-like startpage. A fast and stylish way to read and share the content of your favorite sites and services. Provides seamless integration with Google Reader, Twitter, Delicious, YouTube and Amazon.

10. One Number

Your Gmail, Wave, Reader all in one single button. Make your Chrome less crowded.

11. Quick Scroll

After you click on a Google search result, Quick Scroll may appear on the bottom-right corner of the page, showing one or more bits of text from the page that are relevant to your query. Clicking on the text will take you to that part of the page.

12. Digg

Digg for chrome. Digg your pages right from browser.

13.TooManyTabs for Chrome

Ever tried having 20 tabs or more open in Chrome? You can’t even see the favicon of the tabs, not to mention the tab titles! If that happens to you, TooManyTabs is a must-have extension that manages your tabs, reduces your tab overflow, and saves your sanity!

14. Delicious

Adds a Del.icio.us button in your Chrome Toolbar.
Now with ctrl + D keyboard shortcut and selected text populates your delicious notes field.

15. Blog This

Are your Blogger user? Then this is the right extension for you. It will linkup your favorite post from any web page. Should use.

There are even more extensions are coming every single day from different part of the world. So it is really hard to give an specific name of the best one. The extensions references given above are based on ratings and popularity. You can find more extensions and download your preferred one from GOOGLE EXTENSION site.

You will tell me know!

Yes, i am not perfect. You are the judge and definitely more experimental so please let me know if you find any interesting plugins, and please don’t forget to share!

304 free fonts for web designers!

Posted on November 17, 2009 by Shajed Evan

I like to thank Stumble first for letting me know about this website : TypeNow

I just visited this site and really impressed with its fonts collection. Around 304 different fonts for you and absolutely free! Most amazing thing is that these are fonts from popular TV, Movie, Cartoon, restaurant, comic, food, beverage items brands. Well to me it is a good resource lets see how much you can find it …. below i am just trying to show what sort of fonts you will get from TypeNow!!