DesignerFied.com » Web Design

Google Chrome Extensions For Designers

Jake Hurst — Wed, 28 Apr 2010 07:12:41 +0000

Well I decided to leave the comfort of FireFox to try out Google Chrome for a few weeks.Â There are some very important firefox add-ons that I use every day.Â After digging around a while I found most of the same addons extensions that I now able to use with Chrome.Â As for the results, well as usual I am not fully satisfied.

Anyway here is what I have installed so far.

Web Developer

What it does: Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox. Version 0.2 fixes a number of issues and adds two new features: ‘Edit CSS’ and ‘View Document Outline’.

It might just be me but Chrome freezes when I try to use Edit CSS, that sucks!!

Another thig that bothers me is Disable JavaScript is not possible to implement with the current Google Chrome APIs. Basically Web Developer toolbar for Chrome will not act like the toolbar for FireFox.

Hopefully soon this will all get better!

Chrome Sniffer

What it does: This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework.

Currently, this extension can detect up to 50 popular CMS and javascript libraries, and more will be added in future releases.

I love this extension a lot and I don’t have this as a FireFox addon. Sometimes I go to a site and think wow this place is great, I wonder what they have as a CMS/javascript etc. Chrome Sniffer will answer all that!

Eye Dropper

What it does: Eye Dropper and Color Picker extension which allows you to pick color from any web page or from advanced color picker.

See a crazy color? Use Eye Dropper to snag it with ease!

Firebug Lite

What it does: Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

More like what I wish it did. I wouldn’t waste your time on this one. Does not work for me.

jQuery Shell

What it does: jQuery Shell allows you to run JavaScript and jQuery 1.4.2 commands in the context of the current web page. It is simple tool to use when experimenting with / learning JavaScript and jQuery commands.

I had fun messing around with this one!!

Lorem Ipsum Generator

What it does: Chrome Extension that generates random “Lorem Ipsum” text.

Pendule

What it does: Extended web developer tools for Chrome.
Use this extension in addition to the built-in Developer Tools (Ctrl+Shift+I).

Love the Display Ruler!

So far I like Chrome, its has gotten a lot better since I first used it , way back when. Guess I am sticking with FireFox for now. Just because of need for me to use Web Developer toolbar and Firebug. I need these more than anything.

They just don’t work very good with Chrome. Maybe someday soon!

Red Grunge Website Background

Jake Hurst — Fri, 15 Jan 2010 08:08:48 +0000

Here is a basic grunge background. Image dimensions are 1600X800px. Took about 10mins to build, PSD included. I started with a center content area size of 960px wide. If you have PhotoShop then you can edit this to fit your needs.

The body CSS for this background:

background: #f9f9f9 url(/images/red-grunge.jpg) top center no-repeat;

PSD Download: Red-Grunge.psd

Twitter Background:

Twitter Styles:

tile background unchecked

Background color: f9f9f9

Text color: b0b0b0

Link color: a10000

Sidebar color: 400102

Sidebar border: c90000

Example Twitter Page:

Custom Background For Your Pixeled Theme

Jake Hurst — Sun, 04 Oct 2009 01:22:52 +0000

I built a pack of backgrounds for the WordPress theme called Pixel. Try this one and let me know what you think. I will soon post the rest of what I have built for that theme. All you have to do is back up the old image, name the new one the same and upload the new one to your server.

Download

10 Colored Carbon Fiber Backgrounds with PSD

Jake Hurst — Thu, 28 May 2009 08:00:12 +0000

I found a carbon fiber image that I use a while back for a project and decided to offer it in different colors. So if anyone needs a large size carbon fiber background check out this post. I included the PSD so you can change to any color that you want. These backgrounds are free so have fun!

Download the PSD

Check out Purple Pepper Designs

Jake Hurst — Mon, 06 Apr 2009 10:40:07 +0000

Purple Pepper Designs used the pinup brushes that I made for Photoshop! Check out awesome custom designs Sara built.

Purple Pepper Design 1