<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>Webdesigner Depot &#187; Extensions</title> <atom:link href="http://www.webdesignerdepot.com/category/extensions/feed/" rel="self" type="application/rss+xml" /><link>http://www.webdesignerdepot.com</link> <description>Web Design Resources and Tutorials</description> <lastBuildDate>Fri, 10 Feb 2012 09:48:34 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=abc</generator> <item><title>25+ Must-have Chrome extensions for web designers and developers</title><link>http://www.webdesignerdepot.com/2011/08/25-must-have-chrome-extensions-for-web-designers-and-developers/</link> <comments>http://www.webdesignerdepot.com/2011/08/25-must-have-chrome-extensions-for-web-designers-and-developers/#comments</comments> <pubDate>Wed, 31 Aug 2011 09:53:56 +0000</pubDate> <dc:creator>JK Thomas</dc:creator> <category><![CDATA[Design]]></category> <category><![CDATA[Development]]></category> <category><![CDATA[Extensions]]></category> <category><![CDATA[browsers]]></category> <category><![CDATA[Chrome]]></category> <category><![CDATA[cloud storage]]></category> <category><![CDATA[Code]]></category> <category><![CDATA[Google]]></category> <category><![CDATA[screen capture]]></category> <category><![CDATA[screenshots]]></category> <category><![CDATA[Web Designers]]></category> <category><![CDATA[Web Developers]]></category><guid
isPermaLink="false">http://www.webdesignerdepot.com/?p=25192</guid> <description><![CDATA[For many web designers and developers, Firefox is unsurpassable. For others, Firefox eats Chrome&#8217;s dust. For the past two years, since Google Chrome&#8217;s release, there&#8217;s been a raging debate on which browser is superior. Mozilla&#8217;s open source product has stood the test of time and Firefox has quickly become the most used browser, having surpassed [...]]]></description> <content:encoded><![CDATA[<p><a
href="http://netdna.webdesignerdepot.com/uploads/2011/08/googlelogo1.jpg"><img
class="image-border alignleft" src="http://netdna.webdesignerdepot.com/uploads/2011/08/googlelogo1.jpg" alt="Google Logo" width="200" height="160" /></a>For many web designers and developers, Firefox is unsurpassable. For others, Firefox eats Chrome&#8217;s dust.</p><p>For the past two years, since Google Chrome&#8217;s release, there&#8217;s been a raging debate on which browser is superior. Mozilla&#8217;s open source product has stood the test of time and Firefox has quickly become the most used browser, having surpassed Microsoft&#8217;s Internet Explorer.</p><p>Don&#8217;t feel sorry for Google Chrome, however. Even in its infancy, Chrome has already reached second most popular, having already surpassed Internet Explorer and with a high chance of surpassing Firefox.</p><p>Although Firefox is more robust (primarily due to its popularity), Chrome is lightning fast and, with new extensions added daily, an exciting option for the serious web designer.</p><p>And here you are to find tools that make Chrome useful to you as a designer or a developer. Fortunately, Chrome has a burgeoning collection of extensions that will make the transition from Firefox a lot easier.<span
id="more-25192"></span></p><h1>1. AppJump App Launcher and Organizer</h1><p>After you finish downloading all the extensions in this list, you&#8217;ll definitely need an organizer. <a
href="https://chrome.google.com/webstore/detail/hccbinpobnjcpckmcfngmdpnbnjpmcbd">AppJump</a> is a Chrome extension that allows you to locate and launch your applications and other extensions quickly from a drop down menu on your toolbar. One cool feature of AppJump is the ability to organize apps and extensions into different groups. For example, you can easily separate your work extensions from your personal, for more effective time management.</p><p><a
href="https://chrome.google.com/webstore/detail/hccbinpobnjcpckmcfngmdpnbnjpmcbd"><img
class="size-full wp-image-25196 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/1.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>2. Awesome Screenshot</h1><p><a
href="https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce">Awesome Screenshot</a> lives up to its name. This awesome extension allows you to take snapshots of the whole or partial page. After taking a screenshot, you can circle or underline relevant parts, blur out irrelevant parts and make comments. You have the option to save to local or upload and receive an image link for sharing.</p><p><a
href="https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce"><img
class="size-full wp-image-25197 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/2.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>3. Aviary Screen Capture</h1><p>After waxing poetic about Awesome Screenshot above, you may wonder why two screen capture extensions are added on this list. One downside to Awesome Screenshot is that it requires access to all the data on your computer and your browsing history. For those users who feel that is an invasion of privacy, <a
href="https://chrome.google.com/webstore/detail/ncgcgghbabbopfcpgcjpfffdgnbadegf">Aviary</a> is a perfectly capable option.</p><p><a
href="https://chrome.google.com/webstore/detail/ncgcgghbabbopfcpgcjpfffdgnbadegf"><img
class="size-full wp-image-25198 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/3.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>4. Chrome Sniffer</h1><p><a
href="https://chrome.google.com/webstore/detail/homgcnaoacgigpkkljjjekpignblkeae">Chrome Sniffer</a> allows you to check the framework of any website. It locates and displays any known Content Management System (CMS) or Javascript library on a website. This extension is great for those mind-blowing websites that leave you wondering, “How is that humanly possible?” Currently, Chrome Sniffer can detect over 100 frameworks.</p><p><a
href="https://chrome.google.com/webstore/detail/homgcnaoacgigpkkljjjekpignblkeae"><img
class="size-full wp-image-25199 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/4.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>5. Cloud Save</h1><p>There&#8217;s a huge shift from operating locally to working in the cloud. As designers and developers, you are accustomed to working on the internet, but do you also save important files online? If your excuse is that it&#8217;s not so convenient, you may want to take a serious look at <a
href="https://chrome.google.com/webstore/detail/omiekjeapoonbhiemenfoccbdpeagdah">Cloud Save</a>. Cloud Save allows you to save files from any website to supported cloud services. Save to Amazon Cloud Drive, Dropbox and Flickr.</p><p><a
href="https://chrome.google.com/webstore/detail/omiekjeapoonbhiemenfoccbdpeagdah"><img
class="size-full wp-image-25200 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/5.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>6. Code Cola</h1><p><a
href="https://chrome.google.com/webstore/detail/lomkpheldlbkkfiifcbfifipaofnmnkn">Code Cola</a> is an extension that allows users to edit individual pages inside of a website. The extension allows you to click on an area within a web page and edit the CSS automatically.</p><p><a
href="https://chrome.google.com/webstore/detail/lomkpheldlbkkfiifcbfifipaofnmnkn"><img
class="size-full wp-image-25201 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/6.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>7. Corporate Ipsum</h1><p><a
href="https://chrome.google.com/webstore/detail/lfmadckmfehehmdnmhaebniooenedcbb">Corporate Ipsum</a> is a fun alternative to the standard Lorem Ipsum text filler. With this extension, you can populate your website with “corporate” speak and buzz words. An example of Corporate Ipsum is, “Competently target enterprise-wide data with multifunctional ideas.” This extension is based on the popular Mac widget of the same name.</p><p><a
href="https://chrome.google.com/webstore/detail/lfmadckmfehehmdnmhaebniooenedcbb"><img
class="size-full wp-image-25202 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/7.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>8. Diigo Bookmark, Archive, Highlight and Sticky Note</h1><p><a
href="https://chrome.google.com/webstore/detail/oojbgadfejifecebmdnhhkbhdjaphole">Diigo</a> is short for Digest of Internet Information Groups and Other stuff. It is an online research tool that allows users to manage information. Highlight webpages in multiple colors, make sticky notes, exchange pages across your social network and create groups to share your research.</p><p><a
href="https://chrome.google.com/webstore/detail/oojbgadfejifecebmdnhhkbhdjaphole"><img
class="size-full wp-image-25203 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/8.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>9. Drag2up</h1><p><a
href="https://chrome.google.com/webstore/detail/bjgjolhpdlgebodaapdafhdnikagbfll">Drag2up</a> is an easy to use file attachment system. Instead of clicking through various windows, simply drag the file you&#8217;d like to attach from your computer onto the input field. Alternately, you can upload files to various hosting sites, including Flickr, ImageShack, Twitpic, and Box.net. This extension is easily one of the must-have downloads.</p><p><a
href="https://chrome.google.com/webstore/detail/bjgjolhpdlgebodaapdafhdnikagbfll"><img
class="size-full wp-image-25204 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/9.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>10. Eye Dropper</h1><p>Every now and then, you come across the perfect shade of green that you must incorporate into your web design. The <a
href="https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka">Eye Dropper</a> extension allows you to locate the exact shade. It also keeps track of your colors history.</p><p><a
href="https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka"><img
class="size-full wp-image-25205 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/10.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>11. Firebug Lite</h1><p><a
href="https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench">Firebug</a> is one of the great tools that makes it difficult to transition from Firefox and leave it behind. Fortunately, Chrome has an extension called Firebug Lite that offers a similar function. Firebug Lite works along side Chrome Development Tools to enable developers to inspect and edit HTML and DOM elements. It also allows you to debug with ease. Firebug Lite is actually a JavaScript file that acts like the original Firebug once inserted into a web page.</p><p><a
href="https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench"><img
class="size-full wp-image-25206 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/11.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>12. Greplin</h1><p><a
href="https://chrome.google.com/webstore/detail/bjclhonkhgkidmlkghlkiffhoikhaajg">Greplin</a> is an extension that allows you to search within your private data. Use this extension to locate a piece of information you post on various social websites, including Twitter, Facebook or even Gmail. It indexes your data for easy searching. Instead of dredging through your history, you can easily call up data with Greplin.</p><p><a
href="https://chrome.google.com/webstore/detail/bjclhonkhgkidmlkghlkiffhoikhaajg"><img
class="size-full wp-image-25207 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/12.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>13. HTML Instant</h1><p><a
href="https://chrome.google.com/webstore/detail/hfgifphlikdnjfcegkkmhohddfjhnpjd">HTML Instant</a> is a real time HTML. It  features a split screen. As you type your code on left side of the split screen, you see the results automatically on the right side. HTML Instant not only works with HTML, but it also supports CSS and JavaScript. You can also upload images from your Image Shack, Photobucket, or a random website that&#8217;s hosting an image. This HTML editor is very user friendly, for the novice designer.</p><p><a
href="https://chrome.google.com/webstore/detail/hfgifphlikdnjfcegkkmhohddfjhnpjd"><img
class="size-full wp-image-25208 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/13.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>14. IE Tab</h1><p>The <a
href="https://chrome.google.com/webstore/detail/hehijbfgiekmjfkfjpbkbammjbdenadd">IE Tab</a> extension allows you to view a webpage from a simulated Internet Explorer, while still using your Chrome browser. Internet Explorer is still the preferred browser of most internet users. And there are still some sites that work best or even exclusively with Internet Explorer. This tab allows you to use Internet Explorer without sacrificing your dignity. First things first, IE Tab only works on Windows. This is because it uses Window&#8217;s built in rendering engine for Internet Explorer. For that reason, Mac users are out of luck on this one.</p><p><a
href="https://chrome.google.com/webstore/detail/hehijbfgiekmjfkfjpbkbammjbdenadd"><img
class="size-full wp-image-25209 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/14.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>15. Image Properties Context Menu</h1><p><a
href="https://chrome.google.com/webstore/detail/khagclindddokccfbmfmckaflngbmpon">Image Properties Context Menu</a> is a useful Chrome extension that provides information on all things related to a selected image. Users can find both the location and the source of an image. It also shows the image&#8217;s dimensions and file size. It&#8217;s a simple but effective extension that is somehow not included in the Chrome browser.</p><p><a
href="https://chrome.google.com/webstore/detail/khagclindddokccfbmfmckaflngbmpon"><img
class="size-full wp-image-25210 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/15.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>16. MeasureIt!</h1><p><a
href="https://chrome.google.com/webstore/detail/aonjhmdcgbgikgjapjckfkefpphjpgma">MeasureIt</a> is a ruler that you use to find the dimensions of any element on a web page. Simply click on the extension and drag out the ruler to find the dimensions quickly and easily.</p><p><a
href="https://chrome.google.com/webstore/detail/aonjhmdcgbgikgjapjckfkefpphjpgma"><img
class="size-full wp-image-25211 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/16.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>17. Microstock Photo Power Search Tool</h1><p>What separates a good web designer from a great web designer is knowing where to go for stock images. Any designer knows that finding the right image is one of the most time consuming parts of design, especially if you have several go-to resources. <a
href="https://chrome.google.com/webstore/detail/ehipnpjjaejnoajfkkgonkhpkpiocekl">This extension</a> allows you to search microstock on 5 of the top stock agencies, including Dreamstime, Fotolia, and Shutterstock.</p><p><a
href="https://chrome.google.com/webstore/detail/ehipnpjjaejnoajfkkgonkhpkpiocekl"><img
class="size-full wp-image-25212 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/17.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>18. Palette for Chrome</h1><p>The <a
href="https://chrome.google.com/webstore/detail/oolpphfmdmjbojolagcbgdemojhcnlod">Palette for Chrome</a> extension is instantly useful. Right click on any image you&#8217;d like to use. This extension creates a 16, 24, or 32 color palette. Alternatively, you can also create a custom palette. Use this extension to incorporate and convey the colors from your favorite image into your web design.</p><p><a
href="https://chrome.google.com/webstore/detail/oolpphfmdmjbojolagcbgdemojhcnlod"><img
class="size-full wp-image-25213 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/18.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>19. Pendule</h1><p>The powerful <a
href="https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi">Pendule</a> extension combines several of the extensions found in this list. Pendule allows you to view and alter Javascript and CSS. You can also view information about specific images or hide them altogether. It&#8217;s a robust developer tool that includes a color picker, an HTML and CSS validator and a link checker.</p><p><a
href="https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi"><img
class="size-full wp-image-25214 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/19.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>20. PlainClothes</h1><p><a
href="https://chrome.google.com/webstore/detail/kleiknekfnnaaibjhlamidabhmckbddc">PlainClothes</a> is a fun and useful extension that allows you to see the bare bones of a website. Sometimes it&#8217;s easier to see mistakes in a design or analyze why it works so well when it goes black and white. PlainClothes allows you to strip down an webpage to one text color, one background color and one link color. Links are underlined, text is your default and suddenly, you&#8217;re in 1998 again. Actually, PlainClothes works very well for adding accessibility to your web design.</p><p><a
href="https://chrome.google.com/webstore/detail/kleiknekfnnaaibjhlamidabhmckbddc"><img
class="size-full wp-image-25215 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/20.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>21. Resolution Test</h1><p>Change the size of your browser to test your website in various resolutions. <a
href="https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal">Resolution Test</a> comes with preset resolution sizes, but you can also view in your own specified resolution.</p><p><a
href="https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal"><img
class="size-full wp-image-25216 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/21.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>22. Search by Image</h1><p><a
href="https://chrome.google.com/webstore/detail/dajedkncpodkggklbegccjpmnglmnflm">Search by Image</a> is one of my favorite Chrome extensions. This extension allows you to find a specific image on different websites. With Search by Image, you also have the option to find similar images. Simply right-click on the image of interest and select “search Google with this image.” You will find pages that include matching images or are visually similar.</p><p><a
href="https://chrome.google.com/webstore/detail/dajedkncpodkggklbegccjpmnglmnflm"><img
class="size-full wp-image-25217 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/22.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>23. Session Manager</h1><p>The <a
href="https://chrome.google.com/webstore/detail/bbcnbpafconjjigibnhbfmmgdbbkcjfi">Session Manager</a> extension saves all of your currently opened tabs for later perusal. This extension is extremely useful if you, like most, find yourself opening the same pages over and over again. Group and save related tabs in Session Manager. For example, bundle all of your social networking sites together so that you can quickly access them without having to individually open each site. And close them just as quickly, with assurance that your tabs are saved.</p><p><a
href="https://chrome.google.com/webstore/detail/bbcnbpafconjjigibnhbfmmgdbbkcjfi"><img
class="size-full wp-image-25218 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/23.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>24. TabJump</h1><p>Similar in scope to Session Manager, <a
href="https://chrome.google.com/webstore/detail/hokofmgcicpnjchllaccgedmmmbbnbmf">TabJump</a> goes a step beyond. Not only does it manage your tabs, this extension can also lock tabs, preventing you from closing an important tab accidentally. If you do close a tab by mistake, TabJump will allow you to re-open it, but keep in mind that extensions cannot restore history.</p><p><a
href="https://chrome.google.com/webstore/detail/hokofmgcicpnjchllaccgedmmmbbnbmf"><img
class="size-full wp-image-25219 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/24.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>25. TooManyTabs</h1><p>Because there can never be enough extensions to address browser tab management, <a
href="https://chrome.google.com/webstore/detail/amigcgbheognjmfkaieeeadojiibgbdp">TooManyTabs</a> is another must-have. This extension shows a thumbnail of all of the tabs you have open. This comes in handy when you&#8217;re operating with so many tabs that you can no longer read the tab titles. Having a visual aid helps you sort through your workspace effectively.</p><p><a
href="https://chrome.google.com/webstore/detail/amigcgbheognjmfkaieeeadojiibgbdp"><img
class="size-full wp-image-25220 alignnone" src="http://netdna.webdesignerdepot.com/uploads/2011/08/25.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>26. Web Developer</h1><p><a
href="https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm">Web Developer</a> is another comprehensive developer tool. It is by the same developer who wrote the wildly popular Firefox extension. With this extension, users can view and edit CSS, display image file sizes and clear session cookies.</p><p><a
href="https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm"><img
class="size-full wp-image-25221 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/26.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><h1>27. WhatFont</h1><p>For most web designers, fonts are kind of a big deal. Have you ever happened upon a random website and found the perfect font, only to search endless code for answers? If you like things simple, install this <a
href="https://chrome.google.com/webstore/detail/jabopobgcpjmedljpbcaablpmlmfcogm">font finding extension</a>. Simply hover over a text and find the font in use. Not only will this extension tell you the name of the font, it also gives font size and color.</p><p><a
href="https://chrome.google.com/webstore/detail/jabopobgcpjmedljpbcaablpmlmfcogm"><img
class="size-full wp-image-25222 alignnone" style="border: thin solid #cccccc;" src="http://netdna.webdesignerdepot.com/uploads/2011/08/27.png" alt="" width="615" height="450" /></a></p><p><br
class="spacer_" /></p><p><em>Jacqueline Thomas is an award-winning writer and web design consultant. Find her on her <a
rel="nofollow" href="http://www.pearlofafrika.com" target="_blank">website</a> and follow her on <a
rel="nofollow" href="http://twitter.com/pearlofafrika" target="_blank">Twitter</a>.</em></p><p><strong><em>Do you have any favorite extensions that didn&#8217;t make this list? Please share it with us in the comments.</em></strong></p><p><br/><br
/><table
width="100%" style="border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;" height="20"><tr><td
valign="center"> <a
href="http://www.mightydeals.com/deal/wpbusinessbundle.html?ref=inwidget"><font
face="Arial" size="3" color="#e64f32"><b>Never Ending WordPress Business Bundle &#8211; only $14!</b></font></a></td><td
width="90"> <a
href="http://www.mightydeals.com/?ref=inwidget"><br
/> <img
src="http://mightydeals.com/web/images/widget-logo.png" height="40" width="90" border="0"  /><br
/> </a></td></tr></table><p><br/></p> <a
href="http://www.webdesignerdepot.com/2011/08/25-must-have-chrome-extensions-for-web-designers-and-developers/">Source</a><style type="text/css">
 p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
</style>]]></content:encoded> <wfw:commentRss>http://www.webdesignerdepot.com/2011/08/25-must-have-chrome-extensions-for-web-designers-and-developers/feed/</wfw:commentRss> <slash:comments>48</slash:comments> </item> <item><title>20 Excellent Plugins for Safari</title><link>http://www.webdesignerdepot.com/2009/04/20-excellent-plugins-for-safari/</link> <comments>http://www.webdesignerdepot.com/2009/04/20-excellent-plugins-for-safari/#comments</comments> <pubDate>Thu, 23 Apr 2009 02:13:55 +0000</pubDate> <dc:creator>Walter</dc:creator> <category><![CDATA[Extensions]]></category> <category><![CDATA[Plugins]]></category> <category><![CDATA[Safari]]></category> <category><![CDATA[Add Ons]]></category> <category><![CDATA[plugins for safari]]></category> <category><![CDATA[safari add-ons]]></category> <category><![CDATA[safari plugins]]></category><guid
isPermaLink="false">http://www.webdesignerdepot.com/?p=8529</guid> <description><![CDATA[These days we have great choices for Web browsers: Internet Explorer, Firefox, Safari, Opera, Chrome and the list goes on. Each browser comes with its own set of advantages and features and one of the greatest benefits of Firefox has been the ability to fully customize it through the use of plugins and add-ons. This [...]]]></description> <content:encoded><![CDATA[<p><a
href="http://www.webdesignerdepot.com/2009/04/20-excellent-plugins-for-safari/"><img
class="alignleft" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/safari_plugins2.jpg" alt="Safari Plugins" width="200" height="160" /></a>These days we have great choices for Web browsers: Internet Explorer, Firefox, Safari, Opera, Chrome and the list goes on.</p><p>Each browser comes with its own set of advantages and features and one of the greatest benefits of Firefox has been <strong>the ability to fully customize</strong> it through the use of plugins and add-ons.</p><p>This feature is especially important for those of you using Mac OS X, when deciding whether to pick one of the two heavyweights: <strong>Firefox or Safari</strong>.</p><p>But Safari actually does support plugins. While the choice is nowhere near as extensive as that of Firefox, there is still a good variety of them to choose from.</p><p>Here&#8217;s a list of <strong>20 useful plugins for Safari </strong>for OS X. <span
id="more-8529"></span></p><p>Please note that many plugins work through something called <a
href="http://www.culater.net/software/SIMBL/SIMBL.php">SIMBL</a> (Simple InputManager Bundle Loader), which is basically a little tool that helps developers manage and run their code as plugins for the different applications on OS X.</p><p>You can grab<strong> SIMBL </strong>for free <a
href="http://www.culater.net/software/SIMBL/SIMBL.php">here</a>. If any of the following need SIMBL to run, just install SIMBL and drop the plugin file into your <em>&#8220;~/Library/Application Support/SIMBL/Plugins/&#8221;</em> folder, though be sure to read the instructions that come with each plugin as well.</p><p><br
class="spacer_" /></p><h1>1. Xmarks</h1><p>Firefox had a very popular plugin called Foxmarks. This plugin still exists but the name has changed to Xmarks, and with the name change also came the support for other browsers, namely Internet Explorer and Safari.</p><p>Xmarks provides a seamless solution for <strong>syncing your bookmarks across many computers</strong>, as well as the ability to <strong>view your bookmarks online</strong>.</p><p>If you use several computers and want to have the same set of bookmarks across all of them without any fuss, Xmarks is the solution for you. <a
href="http://www.xmarks.com/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.xmarks.com/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/xmarks.jpg" alt="Safari Xmarks" width="377" height="151" /></a></p><p
style="text-align: center;"> </p><h1>2. Pith Helmet</h1><p>PithHelmet is a blocker, but it blocks more than just ads. PithHelmet <strong>allows you to block things</strong> like Flash movies, Shockwave apps and those annoying midi sound loops.</p><p>Customize the filter however you like. Currently doesn&#8217;t support Safari 4 beta. <a
href="http://www.culater.net/software/PithHelmet/PithHelmet.php">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.culater.net/software/PithHelmet/PithHelmet.php"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/pithhelmet.png" alt="PithHelmet" width="520" height="372" /></a></p><p
style="text-align: center;"> </p><h1>3. DeliciousSafari</h1><p>del.icio.us is a bookmarking service that lets you <strong>store and share all your bookmarks in one place on the web</strong>.</p><p>You can also tag your bookmarks allowing for better methods of browsing through them. The DeliciousSafari plugin fully integrates with the service, allowing you to bookmark all your favorite sites without having to go to the site itself. <a
href="http://delicioussafari.com/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://delicioussafari.com/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/delicioussafari.jpeg" alt="Delicious Safari" width="516" height="267" /></a></p><p
style="text-align: center;"> </p><h1>4. Safari Tidy</h1><p>This is a great plugin to help you <strong>validate your code</strong>. When running, it adds a little icon in the status bar together with the total number of warnings or errors that the current page has.</p><p>If you view page source using Safari, you&#8217;ll see any lines that were mentioned in the warnings and errors highlighted, and you&#8217;ll also see a summary of them at the bottom of the source view. <a
href="http://zappatic.net/safaritidy/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://zappatic.net/safaritidy/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/safaritidy.jpg" alt="Safari Tidy" width="349" height="132" /></a></p><p
style="text-align: center;"> </p><h1>5. SafariSource</h1><p>The default Safari page source view leaves a lot to be desired. This simple plugin <strong>adds syntax coloring</strong>, which makes scanning source code a lot easier.</p><p>You can customize colors and fonts in the preferences pane that the plugin adds to the Safari preferences window. <a
href="http://www.tildesoft.com/Misc.html">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.tildesoft.com/Misc.html"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/safarisource.png" alt="Safari Source" width="600" height="400" /></a></p><p
style="text-align: center;"> </p><h1>6. SafariStand</h1><p>SafariStand is a useful little plugin that <strong>adds a thumbnail sidebar and a bookmarks shelf</strong>.</p><p>The shelf lets you easily save your browsing sessions and then resume them at the click of a button.</p><p>Other features include site alteration (e.g. modify the minimum font size on a particular site, use a custom style sheet or a different user agent) and an Action Menu, which allows you to easily browse the various assets that a site has, such as Javascript, CSS and cookies. <a
href="http://hetima.com/safari/stand-e.html">Plugin website</a></p><p
style="text-align: center;"><a
href="http://hetima.com/safari/stand-e.html"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/safaristand.jpg" alt="Safari Stand" width="615" height="450" /></a></p><p
style="text-align: center;"> </p><h1>7. Saft</h1><p>Saft is like a Swiss Army Knife. It does so many things that it would take too long to list them all here. Here&#8217;s a link to the <a
href="http://haoli.dnsalias.com/Saft/index.html">full list of features</a>.</p><p>Some notable ones include: ad blocking, always open new windows in tabs, block animations, undo support for closing tabs, sidebar, Growl support, Kiosk mode and full screen browsing. <a
href="http://haoli.dnsalias.com/Saft/index.html">Plugin website</a></p><p
style="text-align: center;"><a
href="http://haoli.dnsalias.com/Saft/index.html"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/saft.jpg" alt="Saft" width="440" height="448" /></a></p><p
style="text-align: center;"> </p><h1>8. Cooliris</h1><p>Cooliris is a great plugin for <strong>viewing image and video galleries</strong>, such as those on Google image search, Facebook, YouTube or Flickr.</p><p>At the click of a button the gallery on a web page turns into a full screen view where you can see all the photos and videos as well as zoom and pan around using the Cooliris interface.</p><p>It features a beautiful interface with smooth animations and transitions that delivers a very satisfying browsing experience. <a
href="http://www.cooliris.com/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.cooliris.com/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/cooliris.jpg" alt="Cooliris" width="615" height="384" /></a></p><p
style="text-align: center;"> </p><h1>9. Inquisitor</h1><p>Inquisitor is a great plugin to enhance the Google <strong>search </strong>field.</p><p>It runs the search live as you type it and brings in the results in a little window that pops up below the search. It can list results and search suggestions and you can customize how many of each you want to see.</p><p>It&#8217;s a very high quality plugin, so much so that Yahoo has recently purchased it and is working on versions for Internet Explorer and Firefox.</p><p>Note: the Yahoo purchase also means that the search engine powering Inquisitor has now been changed from Google to Yahoo, so this is something to consider before you install the plugin. <a
href="http://www.inquisitorx.com/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.inquisitorx.com/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/inquisitor.jpg" alt="Inquisitor" width="291" height="363" /></a></p><p
style="text-align: center;"> </p><h1>10. Safari140</h1><p>Find something interesting on the Web that you just have to share on Twitter? The Safari140 plugin makes this easy.</p><p>It allows you to <strong>write Twitter messages</strong> from an integrated menu in Safari, and will even pre-fill and shorten the URL address of the current site you&#8217;re browsing. <a
href="http://www.newsfirex.com/safari140/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.newsfirex.com/safari140/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/safari140.png" alt="Safari140" width="455" height="283" /></a></p><p
style="text-align: center;"> </p><h1>11. 1Password</h1><p>1Password isn&#8217;t just a plugin, it&#8217;s a whole <strong>password management service </strong>that comes with browser integration.</p><p>The benefit of using 1Password is that you can automatically generally really strong passwords and the service will then remember and automatically fill them in for you. The service costs $39.95, but there is a free trial available. <a
href="http://agilewebsolutions.com/products/1Password/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://agilewebsolutions.com/products/1Password"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/1password.jpg" alt="1Password" width="615" height="328" /></a></p><p
style="text-align: center;"> </p><h1>12. TabExposé</h1><p>OS X comes with a great method for <strong>managing windows</strong> on your desktop called Exposé, which at the click of a button shows you an overview of all of your open windows.</p><p>The TabExposé plugin works the same way, but for opening tabs in Safari. <a
href="http://www.cocoamug.com/tabexpose/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.cocoamug.com/tabexpose/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/tabexpose.jpg" alt="TabExpose" width="615" height="384" /></a></p><p
style="text-align: center;"> </p><h1>13. GreaseKit</h1><p>Power users of Firefox utilize a plugin called Greasemonkey to <strong>modify any website they browse using bits of JavaScript</strong>.</p><p>This really enhances your browsing experience as you can, for example, modify the font sizes and colors on your favorite sites to make them more readable.</p><p>GreaseKit aims to fulfill this need for Safari, as well as other WebKit applications on OS X. <a
href="http://8-p.info/greasekit/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://8-p.info/greasekit/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/greasekit.png" alt="GreaseKit" width="400" height="200" /></a></p><p
style="text-align: center;"> </p><h1>14. SafariStretch</h1><p>One of the key differences between window management in OS X and Windows is the maximize button.</p><p>In Windows, the maximize button makes the window full screen, and in OS X, the window becomes only as large as its content.</p><p>SafariStretch allows you to have the <strong>Windows-like full screen maximize</strong> in Safari. <a
href="http://www.safari-stretch.de/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.safari-stretch.de/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/14.jpg" alt="Safari Stretch" width="502" height="288" /></a></p><p><br
class="spacer_" /></p><p><br
class="spacer_" /></p><h1>15. Glims</h1><p>Glims is a plugin which adds a whole collection of features and functionality to Safari and aims to be the alternative to Saft.</p><p>The full list of features can be found on the <a
href="http://machangout.com/">Glims website</a>, but some notable ones include:<strong> thumbnails in Google and Yahoo search results</strong>, full-screen browsing, favicons in tab labels, auto-close download window, always open links in new tab, close tabs using middle mouse button and dated download folders. <a
href="http://machangout.com/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://8-p.info/greasekit/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/glims.jpg" alt="Glims" width="615" height="282" /></a></p><p
style="text-align: center;"> </p><h1>16. CosmoPod</h1><p>CosmoPod lets you <strong>download and convert </strong>Flash, DivX, WMV and Real Media videos from the Web to your Mac, iPod/iPhone or AppleTV. CosmoPod works with most sites and will automatically detect any videos it can convert.</p><p>With just a click you can then download the video to your iTunes library. Full license costs $10. <a
href="http://www.cocoamug.com/cosmopod/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.cocoamug.com/cosmopod/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/cosmopod.png" alt="CosmoPod" width="508" height="288" /></a></p><h1>17. CutX</h1><p>CutX is a plugin that lets you <strong>create a filter for sites that you want to block</strong>.</p><p>This is useful as a parental tool to ensure your children don&#8217;t visit the wrong sites, or for filtering those productivity drains from the workplace.</p><p>CutX lets you customize site filters for individual users and access to the preferences pane is protected by a master password. <a
href="http://www.app4mac.com/store/index.php?target=products&amp;product_id=8">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.app4mac.com/store/index.php?target=products&amp;product_id=8"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/cutx.jpg" alt="CutX" width="615" height="444" /></a></p><p
style="text-align: center;"> </p><h1>18. DownloadComment</h1><p>DownloadComment is a simple plugin that makes use of the Spotlight comments section in the file properties on OS X.</p><p>Whenever you download a file, DownloadComment will <strong>attach the URL address of the file</strong> into this comments section allowing you to later see where a file has been downloaded from. <a
href="http://www.ecamm.com/mac/free/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.ecamm.com/mac/free/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/downloadcomment.jpg" alt="DownloadComment" width="298" height="74" /></a></p><p
style="text-align: center;"> </p><h1>19. Safarilicious</h1><p>An alternative to the DeliciousSafari plugin, Safarilicious is a standalone app that will <strong>export your Safari bookmarks to del.icio.us</strong>, a popular bookmarking service.</p><p>Safarilicious can also generate del.icio.us tags from your bookmarks folder structure as well as letting you add your own.</p><p>You can also pick which folders get exported if you only want to share a certain set of bookmarks. <a
href="http://www.stylemac.com/safarilicious/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://www.stylemac.com/safarilicious/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/safarilicious.jpg" alt="Safarilicious" width="615" height="523" /></a></p><p
style="text-align: center;"> </p><h1>20. Safari Microformats</h1><p><a
href="http://microformats.org/">Microformats</a> are a set of data formats that aim to make information sharing easier across the Web.</p><p>For example, hCards and hCalendars contain contact and calendar information respectively and are formatted in a consistent way to allow different applications to read this data.</p><p>The Safari Microformats plugin <strong>reads any hCards or hCalendars </strong>present on a web page and notifies you with a little icon in the address bar.</p><p>When you click this Microformats icon you can add these addresses or calendar items to your Address Book and iCal. <a
href="http://zappatic.net/safarimicroformats/">Plugin website</a></p><p
style="text-align: center;"><a
href="http://zappatic.net/safarimicroformats/"><img
class="aligncenter" src="http://netdna.webdesignerdepot.com/uploads/safari_plugins/safarimicroformats.png" alt="Safari Microformats" width="494" height="322" /></a></p><p><br
class="spacer_" /></p><p><em>Written exclusively for WDD by Dmitry Fadeyev. He runs a blog on usability called <a
rel="nofollow" href="http://www.usabilitypost.com/" target="_blank">Usability Post</a>.</em></p><p><em><strong>Do you know of any more useful Safari plugins? Please share them by leaving a comment below&#8230;</strong></em></p><p><em><strong><br
/> </strong></em></p><p><br/><br
/><table
width="100%" style="border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;" height="20"><tr><td
valign="center"> <a
href="http://www.mightydeals.com/deal/wpbusinessbundle.html?ref=inwidget"><font
face="Arial" size="3" color="#e64f32"><b>Never Ending WordPress Business Bundle &#8211; only $14!</b></font></a></td><td
width="90"> <a
href="http://www.mightydeals.com/?ref=inwidget"><br
/> <img
src="http://mightydeals.com/web/images/widget-logo.png" height="40" width="90" border="0"  /><br
/> </a></td></tr></table><p><br/></p> <a
href="http://www.webdesignerdepot.com/2009/04/20-excellent-plugins-for-safari/">Source</a><style type="text/css">
 p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
</style>]]></content:encoded> <wfw:commentRss>http://www.webdesignerdepot.com/2009/04/20-excellent-plugins-for-safari/feed/</wfw:commentRss> <slash:comments>63</slash:comments> </item> <item><title>6 Essential Firefox Add-ons for Designers</title><link>http://www.webdesignerdepot.com/2008/11/7-essential-firefox-add-ons-for-designers/</link> <comments>http://www.webdesignerdepot.com/2008/11/7-essential-firefox-add-ons-for-designers/#comments</comments> <pubDate>Wed, 19 Nov 2008 15:23:48 +0000</pubDate> <dc:creator>Walter</dc:creator> <category><![CDATA[Add Ons]]></category> <category><![CDATA[Extensions]]></category> <category><![CDATA[Firefox]]></category> <category><![CDATA[CSS]]></category> <category><![CDATA[Validation]]></category><guid
isPermaLink="false">http://www.webdesignerdepot.com/?p=134</guid> <description><![CDATA[As a webdesigner (and technologically savvy user of the Internet), there is no excuse for you not to be using Firefox as your primary web browser.  If you aren&#8217;t using Firefox yet, you need to go and download it right now.  Not only does Firefox provide a top of the line Internet browsing experience, but [...]]]></description> <content:encoded><![CDATA[<p><a
href="http://www.mozilla.com/en-US/firefox/"><img
class="alignleft size-medium wp-image-166" title="firefox1" src="http://netdna.webdesignerdepot.com/uploads/2008/11/firefox1.jpg" alt="" width="200" height="160" /></a>As a webdesigner (and technologically savvy user of the Internet), there is no excuse for you not to be using Firefox as your primary web browser.  If you aren&#8217;t using Firefox yet, you need to go and <a
rel="nofollow" href="http://www.mozilla.com/en-US/firefox/">download</a> it right now.  Not only does Firefox provide a top of the line Internet browsing experience, but it also provides an endless amount of functionality that you simply won&#8217;t find in any other Internet browser.</p><p>Because third parties can develop add-ons for Firefox, by downloading the best add-ons that are available, you can transform Firefox into a tool that dramatically increases your productivity and saves you a countless amount of time.   Since there are so many different add-ons available to download, it can be a little overwhelming to pick out which ones you should be using.</p><p>Therefore, I decided to do all of the legwork for you and compile a list of the six best Firefox add-ons for web designers.<span
id="more-134"></span></p><h1>Web Developer</h1><p><a
rel="nofollow" href="http://chrispederick.com/work/web-developer/" target="_blank"><img
class="alignleft" src="http://img293.imageshack.us/img293/2391/webdeveloperyi5.png" alt="Web Developer Screen Shot" width="284" height="196" /></a> Although it is called <a
rel="nofollow" href="http://chrispederick.com/work/web-developer/" target="_blank">Web Developer</a>, this Firefox add-on is absolutely invaluable for web designers. If you were only going to download and install one Firefox add-on, this is the one that I would recommend to you. The reason is that this add-on provides a variety of different useful features, and could be classified as <strong>the Swiss Army Knife of Firefox add-ons</strong>.</p><p>The first feature of this add-on that designers will find useful is the <em>CSS menu</em>.  Features of this menu include the ability to <strong>disable styles, display CSS by media type, view CSS, view style information, add a custom user style sheet or directly edit CSS</strong>.</p><p>The next feature of interest for designers is the <strong>Image menu</strong>. In addition to allowing you to display ALT attributes, image dimensions, image file sizes and image paths, you can disable images, find broken images, outline images, replace images with ALT attributes and several additional functions.</p><p>Although I could devote several pages to all of the features that this add-on offers, I just want to touch on a few other functions that web designers will find especially useful.  These include the ability to <em>outline different elements </em>(ranging from frames to block level elements), <em>edit HTML and show hidden elements</em>.</p><h1>Firebug</h1><p><a
href="http://getfirebug.com/" target="_blank"><img
class="alignleft size-medium wp-image-149" title="fiebug" src="http://netdna.webdesignerdepot.com/uploads/2008/11/fiebug.jpg" alt="" width="300" height="109" /></a>While Web Developer is the first add-on I would recommend to any designer, <a
title="Firebug" rel="nofollow" href="http://getfirebug.com/" target="_blank">Firebug</a> runs a close second in terms of usefulness for designers.</p><p><strong>With Firebug, you are instantly given the ability to edit, debug or monitor any web page</strong>.  Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose.  Best of all, <strong>every change that you make is done live and instantly</strong>, so you can quickly test out different changes and see the results of those changes instantly.</p><p>Like most of the best add-ons for Firefox, Firebug goes beyond its basic functionality and provides a wealth of options that make it easy for any user to completely customize their use of this add-on. Some of the additional features and options offered by Firebug include <em>keystroke shortcuts, the ability to control how and where the Firebug editing area appears, visual guides for editing CSS, analysis of network activity and customizable logging for JavaScript</em>.</p><h1>Colorzilla</h1><p><a
href="http://www.colorzilla.com/firefox/" target="_blank"><img
class="alignleft size-medium wp-image-151" title="colorzilla" src="http://netdna.webdesignerdepot.com/uploads/2008/11/colorzilla.jpg" alt="" width="290" height="101" /></a>As a web designer, you never know when inspiration is going to strike you as you are surfing around the Internet.  For example, you may be looking at a website and come across a color that you really like.</p><p>If you want a quick and efficient way to be able to find out the exact HSV and RGB value for that tool, you should install the <a
rel="nofollow" href="http://www.colorzilla.com/firefox/" target="_blank">ColorZilla</a> add-on.</p><p><strong>The ColorZilla add-on features an online eyedropper</strong>, which makes it quite simple to get the exact value of a specific color.   In addition to the online eyedropper, ColorZilla offers several additional features that most web designers will find useful such as a <strong>DOM color analyzer and online palette viewer</strong>.  The DOM color analyzer allows you to locate elements on the page that correspond to a given color and find out the CSS rules that specify a certain color, while the online palette viewer allows you to bookmark and share color palettes that you like.</p><h1>FireShot</h1><p><a
rel="nofollow" href="http://screenshot-program.com/fireshot/" target="_blank"><img
class="alignleft" src="http://img293.imageshack.us/img293/3590/fireshotii2.gif" alt="FireShot Screenshot" /></a></p><p>Although your OS undoubtedly has a built-in screen capture function, this doesn&#8217;t mean that the default screen capture has all of the capabilities that you may need.</p><p>For example, can the default screen capture of your OS grab portions of a web page that are outside of the browser window?</p><p>In most cases, the answer to that question is going to be no.  Fortunately, there is a Firefox add-on that offers this feature, along with a variety of other useful functions.</p><p><strong>FireShot is an advanced screen capture add-on for Firefox</strong>.  In addition to giving you the ability to capture an entire web page (even when there are portions of the web page that aren&#8217;t visible as a result of the constraints of your browser window), FireShot also allows you to add annotations directly to your screen captures.</p><p><a
rel="nofollow" href="http://screenshot-program.com/fireshot/" target="_blank">FireShot</a> gives you several options for handling your screen captures.  Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server.  As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.</p><h1>CSS Validator/HTML Validator</h1><p><a
href="http://www.nu22.com/firefox/cssvalidator/" target="_blank"><img
class="size-medium wp-image-172 alignleft" title="cssvalidator3" src="http://netdna.webdesignerdepot.com/uploads/2008/11/cssvalidator3.jpg" alt="" width="290" height="101" /></a> As a designer, you want to make sure that all of your hard work can easily be accessed by visitors and displayed to them properly. One of the easiest ways to ensure that both of these tasks are accomplished is by<strong> validating all of your code</strong>.</p><p>Although they are two separate add-ons, both the <em>CSS Validator and HTML Validator</em> should be installed in the browser of any web designer. Once the add-ons are installed, the <a
rel="nofollow" href="http://www.nu22.com/firefox/cssvalidator/" target="_blank">CSS Validator</a> can be accessed from the Tools menu, while the HTML Validator can be accessed from the Firefox status bar.</p><p>Each of the add-ons <strong>validates the code against the appropriate W3C standards</strong>.   While the CSS Validator simply does a standard validation of the code, the HTML Validator provides some additional functionality.</p><p>When using the HTML Validator, you can choose to <strong>validate directly in the browser </strong>(where any errors are shown as a status bar icon), show the source with explanations of errors after the validation or a validation with proposed solutions to any errors.</p><h1>Browser Window Resizer</h1><p><a
href="http://www.yellowpipe.com/yis/tools/window_resizer/" target="_blank"><img
class="alignleft size-medium wp-image-156" title="windowresizer1" src="http://netdna.webdesignerdepot.com/uploads/2008/11/windowresizer1.jpg" alt="" width="193" height="101" /></a>As someone who creates designs for the Internet, one of the most frustrating issues that you undoubtedly encounter is trying to create designs that work across a variety of screen sizes.</p><p>Because you don&#8217;t know whether a visitor is going to be viewing your work at 640&#215;480, 800&#215;600, 1024&#215;768, 1280&#215;1024 or 1600&#215;1200, <strong>it&#8217;s your responsibility to create designs that work at all of these resolutions</strong>.</p><p>While there are a variety of ways to view your work at different resolutions, I have found that the Browser <a
rel="nofollow" href="http://www.yellowpipe.com/yis/tools/window_resizer/" target="_blank">Window Resizer add-on</a> is the most efficient way to accomplish this task.  Once you download and install this add-on, you will be able to <strong>instantly re-size your browser window</strong> to any of the standard resolution sizes listed above.</p><p>This will allow you to see if your design is going to look good to visitors who aren&#8217;t using the same resolution as you.   The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn&#8217;t displaying properly, you can <strong>instantly make adjustments</strong> to your code and see if that fixes the problem, all without ever leaving your current browser window.</p><p><em>Know of any other good extensions for designers? Feel free to comment and leave us feedback.</em><br/><br
/><table
width="100%" style="border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;" height="20"><tr><td
valign="center"> <a
href="http://www.mightydeals.com/deal/wpbusinessbundle.html?ref=inwidget"><font
face="Arial" size="3" color="#e64f32"><b>Never Ending WordPress Business Bundle &#8211; only $14!</b></font></a></td><td
width="90"> <a
href="http://www.mightydeals.com/?ref=inwidget"><br
/> <img
src="http://mightydeals.com/web/images/widget-logo.png" height="40" width="90" border="0"  /><br
/> </a></td></tr></table><p><br/></p> <a
href="http://www.webdesignerdepot.com/2008/11/7-essential-firefox-add-ons-for-designers/">Source</a><style type="text/css">
 p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
</style>]]></content:encoded> <wfw:commentRss>http://www.webdesignerdepot.com/2008/11/7-essential-firefox-add-ons-for-designers/feed/</wfw:commentRss> <slash:comments>51</slash:comments> </item> <item><title>10 Essential WordPress Plugins to Start Your Blog (and Why)</title><link>http://www.webdesignerdepot.com/2008/11/10-essential-wordpress-plugins-to-start-your-blog-and-why/</link> <comments>http://www.webdesignerdepot.com/2008/11/10-essential-wordpress-plugins-to-start-your-blog-and-why/#comments</comments> <pubDate>Sat, 15 Nov 2008 06:20:28 +0000</pubDate> <dc:creator>Walter</dc:creator> <category><![CDATA[Add Ons]]></category> <category><![CDATA[Extensions]]></category> <category><![CDATA[Plugins]]></category> <category><![CDATA[WordPress]]></category> <category><![CDATA[Blog]]></category><guid
isPermaLink="false">http://www.webdesignerdepot.com/?p=298</guid> <description><![CDATA[Ready to start your own blog or online portfolio? Interested in downloading and incorporating WordPress into it? Or maybe you need to spruce up your current site?  Well here are 10 essential WordPress plugins to get your blog started today. Maintaining a blog requires some work, but with WordPress plugin capabilities it has become a [...]]]></description> <content:encoded><![CDATA[<p><a
href="http://netdna.webdesignerdepot.com/uploads/2008/11/wordpress1.jpg"><img
class="alignleft size-full wp-image-302" title="wordpress1" src="http://netdna.webdesignerdepot.com/uploads/2008/11/wordpress1.jpg" alt="" width="200" height="160" /></a>Ready to start your own blog or online portfolio? Interested in downloading and incorporating WordPress into it? Or maybe you need to spruce up your current site?  Well here are 10 essential WordPress plugins to get your blog started today.</p><p>Maintaining a blog requires some work, but with WordPress plugin capabilities it has become a lot more convenient and less time consuming.</p><p>Literally take these plugins and dump them into your /wp-content/plugins/ directory, turn them on in your Dashboard and Voila! A fully functional blog with all your vital needs.<span
id="more-298"></span></p><p>First and foremost, it can be quite a hassle to skim through lists of spam-ridden comments with nonsensical advertisements for Viagra and various other prescriptions drugs. Avoid them all together by adding one of these Spam filters:</p><h1>1. WP SpamFree</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/wp-spamfree/" target="_blank">WP SpamFree</a> allows you to <strong>eliminate automated spam bots from controlling your comments</strong>, by using javascript and cookies that stops the bots from processing the automated spam. This virtually eliminates the need to type out annoying CAPTCHAS for your commenters. However, nothing is as full proof as the CAPTCHA method, as annoying as it may be. Thus, I&#8217;ve also recommended the WP-reCAPTCHA plugin as an alternative.</p><h1>2. Ultimate Google Analytics</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/ultimate-google-analytics/" target="_blank">Ultimate Google Analytics</a> allows you to automatically sync your Google Analytics account with your website. This plugin helps you <strong>manage your visits, page views-by date and location; and track links</strong>. This is very helpful in understanding and analyzing who frequents your site, where they came from, where they linked to from your site. Very useful if you are managing a blog with ads, in which advertisers are paying per page view, etc. Which leads me to my next essential plugin:</p><h1>3. All in One Adsense and YPN</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/all-in-one-adsense-and-ypn/" target="_blank">All in One Adsense and YPN</a> is essential if you want link up your Adsense account with your WordPress blog, with the added benefit of adding your Yahoo! Publisher Network account, as well, doubling your advertising options. It will <strong>automatically create the ad codes in your posts</strong>, once you provide the publisher/channel IDs. Everyone enjoys the benefits of the lucrative advertising empire (except those unfortunate internet perusers unaware of Firefox&#8217;s Adblock add-on).</p><p><a
href="http://netdna.webdesignerdepot.com/uploads/2008/11/allinone.png"><img
class="alignnone size-medium wp-image-318" title="allinone" src="http://netdna.webdesignerdepot.com/uploads/2008/11/allinone-300x163.png" alt="" width="300" height="163" /></a></p><h1>4. Feed WordPress</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/feedwordpress/" target="_blank">Feed WordPress</a> syndicates your posts into lists of entries viewable from your audience&#8217;s feedreaders. This <strong>allows for simple access to your site through a feedreader</strong>, which allows people to stay updated on your posts. Practically everyone in the world-o-blogs needs a way to manage the sites they frequent through a feedreader, and this plugin allows for fast, easy syndication to assist these audiences without difficult configuration.</p><h1>5. Add to Any Share/Save/Bookmark Button</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/add-to-any/" target="_blank">Add To Any</a> is <strong>pivotal to the success of sharing and spreading your name or your blog</strong>. Seen at the bottom of nearly every editorial/news/blog/photolog article is this easy-to-share-with-any-social-networking/bookmarking-site-button. Reddit, Diggit, Facebook post-it, email it: you&#8217;ll need this plugin in order to share your thoughts with audiences beyond your control.</p><p><a
href="http://netdna.webdesignerdepot.com/uploads/2008/11/addtoany.png"><img
class="alignnone size-full wp-image-316" title="addtoany" src="http://netdna.webdesignerdepot.com/uploads/2008/11/addtoany.png" alt="" width="363" height="361" /></a></p><h1>6. Insights</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/insights/" target="_blank">Insights</a> is literally heaven-sent. This plugin is a mold of interconnectedness that will improve your efficiency and strengthen the credibility, understanding, and efficiency of your entries. It allows for <strong>interconnection through this dynamic AJAX control with Flickr, Google Maps, Wikipedia, YouTube, etc.</strong>, establishing a dynamic experience with your audience.</p><p><a
href="http://netdna.webdesignerdepot.com/uploads/2008/11/insights.png"><img
class="size-full wp-image-310 alignnone" title="insights" src="http://netdna.webdesignerdepot.com/uploads/2008/11/insights.png" alt=""  /></a></p><h1>7. Global Translator</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/global-translator/" target="_blank">Global Translator </a>is a fantastic plugin for reaching a wide variety of audiences, allowing for<strong> immediate translation of up to 14 different languages</strong> in an easily configurable plugin. If you are trying to reach large audiences of various nations and languages, this plugin will save you a lot of time and sanity.</p><h1>8. About Me Widget</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/about-me-widget/" target="_blank">About Me Widget</a> allows for a <strong>clean-cut, CSS-able/customizable interface, designed for the sidebar of your WordPress blog</strong>. This isn’t terribly difficult to create yourself, but having a copy/paste plugin option is always the more convenient route.</p><p>The following are not necessarily essential to the blogosphere, but definitely spruce up the interactivity between your audience and your blog:</p><h1>9. NextGen Gallery</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/nextgen-gallery/" target="_blank">NextGen Gallery</a> is an aesthetic, <strong>interactive photo gallery to host your portfolio or just random, personal photos</strong>. You have the visual impact of Jquery’s Lightbox and Thickbox galleries, without the inconvenience of integrating the Jquery code, with this conveniently configurable plugin that packs a powerful punch to the interface of your site/blog/portfolio.</p><p><a
href="http://netdna.webdesignerdepot.com/uploads/2008/11/nextgen.png"><img
class="alignnone size-full wp-image-312" title="nextgen" src="http://netdna.webdesignerdepot.com/uploads/2008/11/nextgen.png" alt=""  /></a></p><h1>10. iLastFM</h1><p><a
rel="nofollow" href="http://wordpress.org/extend/plugins/ilastfm/" target="_blank">iLastFM</a> is an awesome little plugin that will <strong>connect your Last.FM account with your blog</strong>, in a customizable, easily-configurable interface that creates a little sidebar widget. It can display CD covers with artists for a visual interface that offers a audible delight to your site, while sharing new music with your friends or fans.</p><p><a
href="http://netdna.webdesignerdepot.com/uploads/2008/11/ilastfm.gif"><img
class="alignnone size-full wp-image-314" title="ilastfm" src="http://netdna.webdesignerdepot.com/uploads/2008/11/ilastfm.gif" alt="" width="279" height="250" /></a><br/><br
/><table
width="100%" style="border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;" height="20"><tr><td
valign="center"> <a
href="http://www.mightydeals.com/deal/wpbusinessbundle.html?ref=inwidget"><font
face="Arial" size="3" color="#e64f32"><b>Never Ending WordPress Business Bundle &#8211; only $14!</b></font></a></td><td
width="90"> <a
href="http://www.mightydeals.com/?ref=inwidget"><br
/> <img
src="http://mightydeals.com/web/images/widget-logo.png" height="40" width="90" border="0"  /><br
/> </a></td></tr></table><p><br/></p> <a
href="http://www.webdesignerdepot.com/2008/11/10-essential-wordpress-plugins-to-start-your-blog-and-why/">Source</a><style type="text/css">
 p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
</style>]]></content:encoded> <wfw:commentRss>http://www.webdesignerdepot.com/2008/11/10-essential-wordpress-plugins-to-start-your-blog-and-why/feed/</wfw:commentRss> <slash:comments>47</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (User agent is rejected)
Database Caching 6/35 queries in 0.012 seconds using disk
Object Caching 819/876 objects using disk

Served from: www.webdesignerdepot.com @ 2012-02-10 14:40:49 -->
