</code>, <code><meta></code>, <code><h1></code> and <code><h2></code> tags on the front-end, as well as solid link and directory structure organization on the back-end. </p> <p>The best resources I’ve found for learning SEO are the <a href="http://www.seomoz.org/article/beginners-guide-to-search-engine-optimization">Beginner’s Guide to Search Engine Optimization</a> and <a href="http://www.seomoz.org/article/search-ranking-factors">Search Engine Ranking Factors v2</a>, both from SEOmoz.</p> <p><a name="js-library"></a></p> <h2>3. A good Javascript library</h2> <p><img src="http://jonraasch.com/img/blog/jquery-logo.gif" alt="jQuery javascript library" class="leftImg"></p> <p>Even if you don’t write much Javascript, knowing a good Javascript language can make that little bit so much easier. Whether it’s <a href="http://jquery.com/">jQuery</a> (my personal favorite), <a href="http://mootools.net/">Mootools</a>, or whatever, learning a Javascript library will cut your Javascript dev time in half. First, these libraries take the cross-browser guess-work out of Javascript programming so you can stop feature checking and start animating. Additionally, they provide a ton of easy animation options and make selecting nodes in the DOM a piece of cake.</p> <p>More adventurous Javascripters might even want to tackle a Javascript UI language. There are plugins for the libraries above, but I’d recommend <a href="http://www.dojotoolkit.org/">Dojo with Dijit</a>.</p> <p><a name="cross-browser"></a></p> <h2>4. Cross-browser debugging</h2> <p><img src="http://jonraasch.com/img/blog/cross-browser.png" alt="cross-browser" class="leftImg"></p> <p>In order to reach as many viewers as possible, your websites need to work in all the major browsers (IE6, IE7, IE8, FF2, FF3, Safari 4, Opera 9). Everyone hates cross-browser debugging, but the better you get the less you’ll have to do it.</p> <p>The best cross-browser debugging is preventative, starting with valid HTML and a good reset stylesheet. For my reset CSS, I just use <code>* { margin: 0; padding: 0 }</code> but you can also use <a href="http://meyerweb.com/eric/tools/css/reset/">a more robust option</a>. </p> <p>Beyond this it helps to understand the various <a href="http://www.quirksmode.org/compatibility.html">quirks specific to certain browsers</a>. Top of this list is usually Internet Explorer, and in particular IE6 (yes, still). And while most IE issues boil down to the infamous <a href="http://www.satzansatz.de/cssd/onhavinglayout.html">haslayout bug</a>, you shouldn’t rely on something heavy-handed like <code>* { zoom: 1 }</code> to solve these.</p> <p><a name="images"></a></p> <h2>5. Image processing and optimization</h2> <p><img src="http://jonraasch.com/img/blog/photoshop-cs4.png" alt="photoshop" class="leftImg"></p> <p>Although most developers rely on professional designers for design assets, it is just as important for devs to know their way around Photoshop. A strong knowledge of image processing not only allows you to make quick changes to comps without bouncing them back to the designer, it also helps you to understand what is possible when asking for design changes.</p> <p>One Photoshop skill that is particularly important for webdevs is image optimization. Image file sizes are probably the largest threat to bandwidth and optimizing images can make or break a site’s load time. Photoshop and Illustrator’s “Save for Web” option makes image optimization a lot easier: simply press Ctrl-Alt-Shift-S on PC or Command-Alt-Shift-S on Mac to access this wizard.</p> <p><a name="valid-html"></a></p> <h2>6. Building layouts with valid HTML/CSS (and no tables)</h2> <p><img src="http://jonraasch.com/img/blog/box-model.gif" alt="CSS box model" title="The CSS box model"></p> <p>Let’s face it: it’s not 1996 and even back-end developers need to know how to write good front-end code, meaning valid HTML and CSS—not a bunch of tables. The markup should be clean and validate according to it’s doctype and the CSS should be separated from the HTML, which means no inline styles and especially no <font> tags.</p> <p>For starters learn the <a href="https://developer.mozilla.org/en/CSS_Reference">various CSS tags</a> and the <a href="http://jessey.net/simon/articles/003.html">CSS box model</a>. From there you should learn W3C specifications on how to write valid code.</p> <p>Whenever you write HTML it should naturally be valid xHTML; meaning properly nested nodes, closed image tags with specified alt attributes and other basics. Then you can go on to learn which nodes can be nested within which, and other more complex validation issues. In the end you’ll find that the <a href="http://validator.w3.org/">w3c’s HTML validator</a> hardly ever throws an error, which is a really good feeling.</p> <p><a name="law"></a></p> <h2>7. Copyright / cyber law basics</h2> <p><img src="http://jonraasch.com/img/blog/justice-illustration.png" alt="law" class="leftImg"></p> <p>You don’t need a law degree, but it’s best for all developers to have at least a basic knowledge of copyright and cyber law wherever they do business.</p> <p>Since websites are essentially publications, copyright issues tend to be the most common legal issue for sites. From user generated content with stolen Flickr photos to quoting paragraphs from the New York Times, it’s important to know when you’ll get sued, when you’ll get an angry letter and when you’re okay. It’s also good to know when to sue and when to send an angry letter <img src="http://jonraasch.com/blog/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> .</p> <p>Beyond copyright laws it’s good to understand privacy and <a href="http://www.coppa.org/comply.htm">COPPA</a> regulations as well as read carefully through any agreements you have with registrars / hosting companies (and clients!).</p> <p><a name="rewrites"></a></p> <h2>8. Apache rewrites</h2> <p><img src="http://jonraasch.com/img/blog/apache-logo.jpg" alt="apache http" class="leftImg"></p> <p>Apache rewrites make it easy to take messy URLs and make them clean and easy to type (if you know <a href="http://jonraasch.com/blog/10-things-every-web-developer-should-know-2#regex">regular expressions</a>). You can take something ugly like <code>index.php?section=about&page=bio</code> and rewrite it to the much prettier: <code>about/bio</code>.</p> <p>But beyond simply cleaning URL’s, Apache’s mod_rewrite can be used to quickly turn a simple page into a complete app with a directory structure. Simply rewrite the various query string variables to be directories, and you’re all set. </p> <p>However be careful: Apache rewrite issues are notoriously hard to debug. The rewrites can’t provide any debugging info themselves and will often skip over info you include through other methods. So be aware, rewrites can cause a nightmare that you can’t track down.</p> <p><a name="debugger"></a></p> <h2>9. Debugging Software</h2> <p><img src="http://jonraasch.com/img/blog/firebug.jpg" alt="firebug debugger" class="leftImg"></p> <p>A good debugger will make your web programming go so much quicker. </p> <p>When it comes to the front-end, I like <a href="http://getfirebug.com/">Firebug</a>, which allows you to click elements on the page and analyze which styles are being applied and from which stylesheet. You can additionally add or remove styles on the fly, as well as edit the page markup. </p> <p>Firebug also helps with Javascript debugging, providing a better analysis of Javascript errors, as well as a console for running Javascript on the fly and displaying output from <code>console.log()</code>. Finally it provides NET info, showing you the loading time of various front-end assets as well as anything that is 404′ing or otherwise not loading.</p> <p>I don’t use a back-end debugger but I hear <a href="http://xdebug.org/">xDebug</a> is good for PHP.</p> <p><a name="version-control"></a></p> <h2>10. Version control</h2> <p><img src="http://jonraasch.com/img/blog/mercurial.gif" alt="Mercurial VC" class="leftImg"></p> <p>Last but definitely not least, every good developer should know and use version control. Version control not only is the best way to backup files as you work on them, it is really the only way to effectively collaborate with other developers. </p> <p>Version control works by keeping a record of the changes in a directory’s contents. As you work you can commit any changes to this record, or roll back to any previous version.</p> <p>I personally like <a href="http://blog.ianbicking.org/distributed-vs-centralized-scm.html">distributed as opposed to centralized</a> version control, since it provides two levels of VC: you can commit changes to your local repository and then push these changesets to a centralized server. This allows you to make a number of small or potentially unstable changes locally, then push a set of final changes to your team.</p> <p>When it comes to distributed VC I like <a href="http://mercurial.selenic.com/wiki/">Mercurial</a>, and for centralized I like <a href="http://subversion.tigris.org/">Subversion</a>.</p><p> </p><h2>Now what do you think?</h2> <p>Did I leave anything off the checklist above? What do you think of the items on there? They aren’t in any order, but is any item more or less important? Please post any thoughts in the comments below.</p><p> </p></DIV>

Showing posts with label Education. Show all posts

Friday, November 18, 2011

10 Javascript Resources – From Noob to Pro

When I started developing I was fortunate enough to have an experienced friend who pointed me to all the right articles, websites, etc. The right tools make all the difference and this educational jumpstart was exactly what I needed to hit the ground running.
Now that I’ve gathered a good deal of Javascript knowledge and used a wide variety of Javascript resources, I’d like to share these so that others can experience the same benefit I did. And don’t stop reading if you already know Javascript inside and out: there’s resources here for all skill levels, from noob to pro.

1. Mozilla Developer Center

Skill Level: Noob to pro
Format: Website
The Mozilla Development Center should be your starting point for all things Javascript.
Beginners should start with the Core Javascript Guide. Javascript can be a really confusing language at first and going through each of these pages will make you comfortable with Javascript’s peculiar syntax and methods. (It’s way better than w3schools.com)
For seasoned pros, the Core Javascript Reference section provides the best resource on the web for quick Javascript info on functions and syntax. Most devs write several languages and it’s easy to mix things up, so bookmark this must-have reference and save time.

2. Advanced DOM Scripting

Skill level: Pro to guru
Format: Book
Written by Jeffrey Sambells and Aaron Gustafson of A List Apart fame, this is by far the best advanced level Javascript resource I have come across. Teaching you everything about best practices, this book covers important topics such as rewriting the DOM core, advanced event management and graceful degradation through feature checking. After giving you a superb footing in Javascript, Advanced DOM Scripting ends with an upper level discussion of AJAX and a few Javascript libraries.
Not for the faint of heart, make sure you have a good deal of Javascript knowledge before starting this book, or it will be very slow going.
Buy it here cheap

3. Quirksmode

Skill level: Dev to guru
Format: Website
Although the site’s organization can be confusing, I’ve found some of the most interesting front end articles and resources at Quirksmode.
Quirksmode’s claim-to-fame is its incredibly useful cross browser compatibility tables. Not only an excellent resource for Javascript, these tables cover CSS, HTML and DOM support across all browsers, and are essential for all front end devs. They are my go-to resource whenever I have a cross-browser issue I don’t understand.

4. Ajaxian

Skill level: Semi-noob to guru
Format: Blog
Founded in 2005 by Dion Almaer and Ben Galbraith, Ajaxian is arguably the authority on front end development. Don’t let the name fool you, this site handles Javascript of all types: AJAX, various libraries and plain old Javascript. It has a variety of front-end and some back-end articles as well. Reading this blog will keep pros up to date and get noobs up to speed. However you should have at least a tiny bit of JS experience before starting with Ajaxian.

5. Secrets of the Javascript Ninja

Skill level: Pro to guru
Format: E-book and book
Only available as an E-book right now and scheduled for printing in June ’09, Secrets of the Javascript Ninja by John Resig should prove to be the next great Javascript book. From what I’ve read of the e-book prerelease, it is at only a slightly lower level than Advanced DOM Scripting, so it should be an excellent resource for pros and gurus alike. Pick this one up in June to solidify your knowledge of best practices and learn new techniques.
Pre-order it here

6. blog.nihilogic.dk

Skill level: Dev to guru
Format: Blog
Jacob Seidelin’s blog is an excellent place to learn about new, ground-breaking Javascript, especially anything to do with Canvas. Jacob covers a variety of topics, from current Javascript trends to techniques used in his personal projects. These include some of the best and most interesting Javascript that is being written today, such as the super cool Pixastic Javascript photo editor.
And you just have to play Javascript Mario Kart.

7. jQuery Docs

Skill level: Noob to pro
Format: Website
I know this post is about Javascript resources, but who doesn’t write jQuery these days? In my experience, jQuery is the best light-weight Javascript library; very easy to use and also extensible for pros, it really has everything. And the jQuery docs are the definitive resource for quick jQuery lookups as well as beginner education, much like the Mozilla Dev Center is for Javascript.
And yes, John Resig is my nerdy hero (Super-Hiro!).

8. www.learningjquery.com

Skill level: Noob to dev
Format: Blog
Additionally, Learning jQuery is an excellent resource for doing exactly what the domain says. The tutorials and posts on this site will bring you up to speed quickly, and are probably a better starting point that the jQuery docs for total beginners.
While these tutorials are at a more basic level, they are of course useful to Javascript pros who are first learning jQuery.

9. DOM Scripting

Skill Level: Semi-noob to dev
Format: Book
Also published by Friends of ED, DOM Scripting is the prequel to Advanced DOM Scripting. Written by Jeremy Keith, this book will lay a firm foundation for your Javascript programming. It is a must-read for anyone who has already knows the Javascript basics and wants to take their skills to the next level.
Buy it cheap here

10. Interactive Volcano

Skill level: Noob to dev
Format: Blog
Interactive Volcano provides a variety of front end and interactive tutorials with a Javascript focus. Although there are currently very few tutorials, this blog started a few months ago and the list is growing.

10 Things Every Good Web Developer Should Know (A Checklist)

My favorite thing about web development is the wide variety of skills it uses. Being a good developer means staying on your toes and always learning, because there are so many important skills and these are constantly changing.
Here’s a checklist of 10 skills that are some of the most important for good web developers to have. These focus a bit on front-end skills, but they apply to all developers:

1. Regular expressions

Regular expressions are used to parse strings, basically to find and replace bits of text. While this may seem trivial, the versatility of regex makes it quite powerful. There are a wide variety of methods for optimizing a regex string, which can mean huge performance differences for your app.
Regular expressions can be used with just about any language, they work great with Javascript’s replace() and PHP’s preg_replace() to name a few. They are also great for Apache rewrites.
It’s surprising how few web devs use regex considering how useful it is. So if you haven’t already, make sure to learn regular expressions.

2. Basic SEO

A knowledge of basic SEO is essential for any good web developer. While you can leave keyword research to your clients, a developer should have sound strategies for targeting those keywords on the page. This means clean markup and good use of

</code>, <code><meta></code>, <code><h1></code> and <code><h2></code> tags on the front-end, as well as solid link and directory structure organization on the back-end.  </p> <p>The best resources I’ve found for learning SEO are the <a href="http://www.seomoz.org/article/beginners-guide-to-search-engine-optimization">Beginner’s Guide to Search Engine Optimization</a> and <a href="http://www.seomoz.org/article/search-ranking-factors">Search Engine Ranking Factors v2</a>, both from SEOmoz.</p> <p><a name="js-library"></a></p> <h2>3. A good Javascript library</h2> <p><img src="http://jonraasch.com/img/blog/jquery-logo.gif" alt="jQuery javascript library" class="leftImg"></p> <p>Even if you don’t write much Javascript, knowing a good Javascript  language can make that little bit so much easier.  Whether it’s <a href="http://jquery.com/">jQuery</a> (my personal favorite), <a href="http://mootools.net/">Mootools</a>,  or whatever, learning a Javascript library will cut your Javascript dev  time in half.  First, these libraries take the cross-browser guess-work  out of Javascript programming so you can stop feature checking and  start animating.  Additionally, they provide a ton of easy animation  options and make selecting nodes in the DOM a piece of cake.</p> <p>More adventurous Javascripters might even want to tackle a Javascript  UI language.  There are plugins for the libraries above, but I’d  recommend <a href="http://www.dojotoolkit.org/">Dojo with Dijit</a>.</p> <p><a name="cross-browser"></a></p> <h2>4. Cross-browser debugging</h2> <p><img src="http://jonraasch.com/img/blog/cross-browser.png" alt="cross-browser" class="leftImg"></p> <p>In order to reach as many viewers as possible, your websites need to  work in all the major browsers (IE6, IE7, IE8, FF2, FF3, Safari 4, Opera  9).  Everyone hates cross-browser debugging, but the better you get the  less you’ll have to do it.</p> <p>The best cross-browser debugging is preventative, starting with valid  HTML and a good reset stylesheet.  For my reset CSS, I just use <code>* { margin: 0; padding: 0 }</code> but you can also use <a href="http://meyerweb.com/eric/tools/css/reset/">a more robust option</a>.   </p> <p>Beyond this it helps to understand the various <a href="http://www.quirksmode.org/compatibility.html">quirks specific to certain browsers</a>.   Top of this list is usually Internet Explorer, and in particular IE6  (yes, still).  And while most IE issues boil down to the infamous <a href="http://www.satzansatz.de/cssd/onhavinglayout.html">haslayout bug</a>, you shouldn’t rely on something heavy-handed like <code>* { zoom: 1 }</code> to solve these.</p> <p><a name="images"></a></p> <h2>5. Image processing and optimization</h2> <p><img src="http://jonraasch.com/img/blog/photoshop-cs4.png" alt="photoshop" class="leftImg"></p> <p>Although most developers rely on professional designers for design  assets, it is just as important for devs to know their way around  Photoshop.  A strong knowledge of image processing not only allows you  to make quick changes to comps without bouncing them back to the  designer, it also helps you to understand what is possible when asking  for design changes.</p> <p>One Photoshop skill that is particularly important for webdevs is  image optimization.  Image file sizes are probably the largest threat to  bandwidth and optimizing images can make or break a site’s load time.   Photoshop and Illustrator’s “Save for Web” option makes image  optimization a lot easier: simply press Ctrl-Alt-Shift-S on PC or  Command-Alt-Shift-S on Mac to access this wizard.</p> <p><a name="valid-html"></a></p> <h2>6. Building layouts with valid HTML/CSS (and no tables)</h2> <p><img src="http://jonraasch.com/img/blog/box-model.gif" alt="CSS box model" title="The CSS box model"></p> <p>Let’s face it: it’s not 1996 and even back-end developers need to  know how to write good front-end code, meaning valid HTML and CSS—not a  bunch of tables.  The markup should be clean and validate according to  it’s doctype and the CSS should be separated from the HTML, which means  no inline styles and especially no <font> tags.</p> <p>For starters learn the <a href="https://developer.mozilla.org/en/CSS_Reference">various CSS tags</a> and the <a href="http://jessey.net/simon/articles/003.html">CSS box model</a>.  From there you should learn W3C specifications on how to write valid code.</p> <p>Whenever you write HTML it should naturally be valid xHTML; meaning  properly nested nodes, closed image tags with specified alt attributes  and other basics.  Then you can go on to learn which nodes can be nested  within which, and other more complex validation issues.  In the end  you’ll find that the <a href="http://validator.w3.org/">w3c’s HTML validator</a> hardly ever throws an error, which is a really good feeling.</p> <p><a name="law"></a></p> <h2>7. Copyright / cyber law basics</h2> <p><img src="http://jonraasch.com/img/blog/justice-illustration.png" alt="law" class="leftImg"></p> <p>You don’t need a law degree, but it’s best for all developers to have  at least a basic knowledge of copyright and cyber law wherever they do  business.</p> <p>Since websites are essentially publications, copyright issues tend to  be the most common legal issue for sites.  From user generated content  with stolen Flickr photos to quoting paragraphs from the New York Times,  it’s important to know when you’ll get sued, when you’ll get an angry  letter and when you’re okay.   It’s also good to know when to sue and  when to send an angry letter <img src="http://jonraasch.com/blog/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> .</p> <p>Beyond copyright laws it’s good to understand privacy and <a href="http://www.coppa.org/comply.htm">COPPA</a> regulations as well as read carefully through any agreements you have with registrars / hosting companies (and clients!).</p> <p><a name="rewrites"></a></p> <h2>8. Apache rewrites</h2> <p><img src="http://jonraasch.com/img/blog/apache-logo.jpg" alt="apache http" class="leftImg"></p> <p>Apache rewrites make it easy to take messy URLs and make them clean and easy to type (if you know <a href="http://jonraasch.com/blog/10-things-every-web-developer-should-know-2#regex">regular expressions</a>).  You can take something ugly like <code>index.php?section=about&page=bio</code> and rewrite it to the much prettier: <code>about/bio</code>.</p> <p>But beyond simply cleaning URL’s, Apache’s mod_rewrite can be used to  quickly turn a simple page into a complete app with a directory  structure.  Simply rewrite the various query string variables to be  directories, and you’re all set.  </p> <p>However be careful: Apache rewrite issues are notoriously hard to  debug.  The rewrites can’t provide any debugging info themselves and  will often skip over info you include through other methods.  So be  aware, rewrites can cause a nightmare that you can’t track down.</p> <p><a name="debugger"></a></p> <h2>9. Debugging Software</h2> <p><img src="http://jonraasch.com/img/blog/firebug.jpg" alt="firebug debugger" class="leftImg"></p> <p>A good debugger will make your web programming go so much quicker.  </p> <p>When it comes to the front-end, I like <a href="http://getfirebug.com/">Firebug</a>,  which allows you to click elements on the page and analyze which styles  are being applied and from which stylesheet.  You can additionally add  or remove styles on the fly, as well as edit the page markup.  </p> <p>Firebug also helps with Javascript debugging, providing a better  analysis of Javascript errors, as well as a console for running  Javascript on the fly and displaying output from <code>console.log()</code>.   Finally it provides NET info, showing you the loading time of various  front-end assets as well as anything that is 404′ing or otherwise not  loading.</p> <p>I don’t use a back-end debugger but I hear <a href="http://xdebug.org/">xDebug</a> is good for PHP.</p> <p><a name="version-control"></a></p> <h2>10. Version control</h2> <p><img src="http://jonraasch.com/img/blog/mercurial.gif" alt="Mercurial VC" class="leftImg"></p> <p>Last but definitely not least, every good developer should know and  use version control.  Version control not only is the best way to backup  files as you work on them, it is really the only way to effectively  collaborate with other developers.  </p> <p>Version control works by keeping a record of the changes in a  directory’s contents.  As you work you can commit any changes to this  record, or roll back to any previous version.</p> <p>I personally like <a href="http://blog.ianbicking.org/distributed-vs-centralized-scm.html">distributed as opposed to centralized</a>  version control, since it provides two levels of VC: you can commit  changes to your local repository and then push these changesets to a  centralized server.  This allows you to make a number of small or  potentially unstable changes locally, then push a set of final changes  to your team.</p> <p>When it comes to distributed VC I like <a href="http://mercurial.selenic.com/wiki/">Mercurial</a>, and for centralized I like <a href="http://subversion.tigris.org/">Subversion</a>.</p><p> </p><h2>Now what do you think?</h2> <p>Did I leave anything off the checklist above?  What do you think of  the items on there?  They aren’t in any order, but is any item more or  less important?  Please post any thoughts in the comments below.</p><p> </p></DIV>

Sunday, November 13, 2011

Time-Saving and Educational Resources for Web Designers

Useful Resources for Web Designers

Fonts in Use
This site presents a catalogue for real-world typography samples and innovations in branding, advertising, signage and publishing. The regularly updated collection of trends and case studies is commented on by typography experts and gurus from around the world. The sharp, interesting comments and discussions will keep you engaged, all backed up by real examples.

Note and Point: Keynote and PowerPoint Gallery
Note and Point highlights the most beautiful Keynote, PDF and PowerPoint work on the Web, which happens to be mostly Web design-related, although various topics are covered. No doubt these presentations — which really do look that much better — might surprise you by the attention given to color, illustrations and typography.

Free High-Quality HTML Email Templates
The page presents 38 free HTML email templates (including PSD and HTML files), created by talented professional designers. Every template has been tested in more that 20 popular email clients, including Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. All of the Photoshop documents are layered and ready to be tweaked. You can download all of the templates for free (320 MB) and use them for any private or commercial project. In case you use Campaign Monitor to send out newsletters, you’ll also get Campaign Monitor’s templates as an extra goodie. Mailchimp users can choose from the professional templates for Mailchimp.

The Grammar Cheat Sheet
Never mix up your dashes again, learn how to set quotations marks and remind yourself to keep paragraphs short and topical. Overall, this article is a nice little overview of suggestions that would help you improve the quailty of your copy. For a closer examination of what else might go wrong, check out “The Trouble With EM ‘n EN (and Other Shady Characters)” by Peter K Sheerin.

FPO: For Print Only
For Print Only is a blog that is dedicated to everything related to print design. FPO celebrates that print is not dead by showcasing the most compelling printed projects. Print is alive and well as witnessed by this well organized and inspirational resource.

Graphic Atlas: History of Printing
The site is a virtual study collection that showcases printing processes from early woodcuts to modern digital print. The print-identification tool guides you through a number of explorations that replicate the experience of identifying prints using common tools. Among other things, you’ll learn about such printing techniques as relief, letterpress, gravure, silver-dye bleach, dye sublimation and direct thermal. The object explorer allows you to view two images side by side to compare traits across processes. Characteristics such as size, format, color, texture, sheen and layer structure are explained as well.

Smarthistory
Smarthistory.org is a free and open, not-for-profit art history textbook. The website covers a wide variety of the artwork usually found in art history classes, ranging from ancient cultures to post-colonialism. In addition to the audio and video, Smarthistory contains articles and images organized by style and chronology. As a bonus, the user interface itself is worth looking at. The appealing design and intuitive navigation (which allows you to browse by era, style, artist and theme) makes this experience not only educational but enjoyable. A comprehensive overview of the seeds that helped sew the graphic design field.

The Photoshop Etiquette Manifesto for Web Designers
This site lays out a number of guidelines for creating Photoshop files and workflows that are conducive to productivity and team collaboration. By following these guidelines, you make it easier for others to work with your files, and more likely that your project will go smoothly. Some of the things included are common-sense (proofread before exporting), but others aren’t necessarily something you’d think of if you’re not used to collaborating or working on big projects (use folders, keep logos as vector smart objects). It also includes helpful illustrations for each example, so there’s no confusion.

Desks Near Me
This site features places all over the world that designers and developers might like to work in, be they offices or cafés. The website provides detailed information, including hours of operation and reviews. Some places charge a small fee for use, and many throw in a few goodies like food, drink and access to equipment.

Dark Design Patterns
Dark Design Patterns aims to expose these black-hat designs whose sole aim is to misdirect and deceive visitors. Anti-usability design patterns that are currently identified on the website include the “Roach Motel,” “Bait and Switch,” “Privacy Zuckering” and “Forced Information Disclosure,” among others. Examples of each are included, and visitors can add their own in the comments on each page. It’s a great website to show clients when they ask you to implement a questionable “feature” on their website.

The Anatomy of a Perfect Landing Page
Formstack explains how design translates to users and ten key landing page features that draw them in. A useful breakdown of elements to include in your designs and things to keep in mind during your design-work.

100 Principles for Designing Logos and Building Brands
Inspiration can come from anywhere, but sometimes the simpler the better. From Brand Identity Essentials, here are some principals for designing logos and building brands. These cover example shapes, consistency, voice, meaning and flexibility.

Design Is History
A wonderful reference site for all designers and provides brief overviews of a wide range of topics — for us, designers, it is improtant to understand where design originates from.

NounProject
NounProject provides a huge collection of highly recognizable symbols, available for free download and use. The designers are committed to quality in what they do, and so the icons are indeed designed very well.

Ethics for Web Designers
Robot Regime is dedicated to ethics and Web design, and it discusses what our ethical obligations are — to ourselves, our colleagues and our clients. The site already features some nice pieces, including posts about fair pricing, misrepresenting yourself as a designer and giving clients what they want.

Politely Decline Speculative Work
“I won’t do free design work to win your business — here’s why” is a Web page that offers a stock letter you can send to clients explaining why spec work is bad for everyone involved. It’s concise and professional, and it presents clear arguments against spec work, with links to additional information. Plus, you can personalize the letter by adding the recipient’s name to the end of the URL.

Type Tips
A nice short overview of quick useful tips on all things related to Web typography by Harry Roberts from CSS Wizardry.

Type Tips — short, quick tips on all things web typography from Harry Roberts of CSS Wizardry

OnTwik
The website brings together lectures, screencasts and conferences from around the world. Both expert and novice developers and designers should be able to find topics of interest, whether it’s CSS and HTML5 or start-ups and creativity. Ontwik is free, and anyone can suggest content for the website; you can even submit your own lectures.

Design Moo
“Join together and share valuable free Web design resources.” This could be the slogan of this design community, created and curated by front-end developer Chris Wallace. The project is a network of designers and a high-quality collection of free design resources: fonts, icons, illustrations, patterns, textures and Web layouts. All goodies are tagged for easy navigation, and you can follow new releases on Twitter. You might want to check Boxtuffs and Premium Pixels as well, another websites featuring free high-quality resources.

Design Kindle: Free High-Quality Design Files
This site offers a ton of free high-quality design files that you might actually want to use, all without restrictions on personal or commercial use. Everything from design elements to images to full themes is included. Design Kindle doesn’t have a big library of files just yet, but more are sure to be added soon.

365psd: A Free PSD Every Day
Every day, this site offers a free PSD file for you to download. These files are almost all design elements that you can use in Web and application designs, including buttons, progress bars, navigation elements and more, and they are well designed. Currently, there are more than 300 days worth of freebies, all tagged, browsable and searchable.

Guidelines for Mobile Web App Design
This article presents a comprehensive list of links to official user interface and user experience guidelines from various manufacturers. The guidelines include samples, tips and descriptions of common weaknesses for mobile platforms such as iPhone, iPad, Android, BlackBerry, Symbian, webOS and Mee Go. Many of the guidelines focus on native application development, but they can be applied to design of mobile applications in general, too.

List of Freely Available Programming Books
Here is a list of programming books on programming languages or about computers in general with open-source licenses and others. If you’ve been searching for some freely available programming books on the Internet, this list will surely give you some good tips.

Secure Password Generator
The tool lets you enter parameters, including the length of the password, whether to include uppercase and/or lowercase letters or numbers or punctuation and whether to eliminate characters that resemble each other (such as i and l, 1 and I, and o and 0). Then, just select the number of passwords to generate, and it returns a list. It even includes phonetics for each password to make it easier to read out loud (in case you’re giving a password to someone over the phone, for example).

Keyonary
This tool is a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 300 Photoshop shortcuts are available. Simply type the name of application in the search box, and it spits out a long shortcut list.

Let’s Swap
A place where artists and designers can swap art for free. The site is an experiment: if you are an artist or designer, you probably have something hanging around and you’ll be willing to swap it for something else. The site gives you the opportunity to do exactly that; just put out an open invitation and see what happens. Very interesting idea.

Starting with Git: Cheat Sheet
After freshening up her git skills, Loma Jane Mitchell shares her ‘cheat sheet’ — the commands that she uses on a day-to-day basis when working with git. Also note that GUI tools and IDE plugins are available for Git, so it is worth taking a look at what is available for the development environment you use.

Rails 3 Cheat Sheets
The site provides Rails 3 Cheat Sheets for Activemodel, Actionmailer and Actioncontroller, XSS protection and UJS, Activerelation, Bundler and Routing API.

Bounce Rate Demystified
If you are doing business on the web and have Google Analytics set up for your website, it’s very likely that you know the bounce rate for your website. But, do you know anything about how it’s calculated, what your industry’s average bounce rate is or even what factors affect your bounce rate? Inspired by common questions, KissMetrics created this infographic to give you answers and some tips to help you improve your bounce rate.

InspireUX
User Experience quotes and articles to inspire and connect the UX community.

Defecting by Accident - A Flaw Common to Analytical People

Quotes on Design
A growing collection of useful quotes by designers for designers and developers.

IA TV
Information Architecture Television features a collection of videos from around the Web that all focus on information architecture. Hundreds of videos dating back to 2008 offer a great wealth of information on everything from design thinking to usability.

The Bazaar
On this site you can create galleries, upload your artworks and specify your products which you would like to sell. Once the buyer has checked out and has made the payment, your artwork is printed, wrapped and delivered.

The Bazaar is a marketplace to buy and sell creative objects.

A Collection of Materials Related to Interaction Design
This IxD library provides you with an ultimate collection of posts, articles, PDFs as well as videos related to interaction design for you to read and gain more knowledge and inspiration.

Pinterest — Catalog the Things You Love
Pinterest is a social catalog service. Think of it as a virtual pinboard — a place where you can post collections of things you love, and “follow” collections created by people with great taste.

WordPress Snippets
WP-Snippets can come in handy when you’re designing a WordPress theme. Rather than start from scratch when building some functionality or another, why not grab a snippet of code that has already been tested? The website includes many useful snippets, from highlighting author comments to listing random posts to filtering the loop. Make sure to read the comments for each snippet because they could contain helpful information on whether the code works in certain WordPress versions.

CSS Terms and Definitions
This article discusses the consistency in the use of terms with reagrds to CSS.

CSS Vocabulary
“I realized quite late that to say something meaningful about CSS, I would have to know exactly what the terms used means. Often, I have asked for help in forums, and have got stuck wondering how exactly to describe my problem. So I thought it would be a good idea to describe all the common terms of CSS.” A nice overview of common CSS terms and definitions and a good addition to the article “CSS Terms and Definitions” described above..

Bagcheck
BagCheck lets you share your personal collections and also lets you browse through other ‘bags’ to find out common hobbies or activities that helps you connect with people and their interests.

Bagcheck | What are you using for your favorite activities?

ManyBooks: Repository of Free E-Books
This site offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats. You can download classics such as Pride and Prejudice, as well as newer books such as The Gospel of the Knife, in formats such as ePub, Mobi, PDB and even PDF and plain text. Books are also browsable by genre, author and title. And of course, there is a search function.

Last Click

Should I Work for Free?
Who’s ready to stop working for free? Hopefully you are! If you have any doubts, consult this handy chart below. Start in the middle and work your way to your answer.

Email Etiquette for the Super-Busy
In a recent blog post, venture capitalist Fred Wilson talked about his ongoing struggle with email management and the various solutions he’s tried, concluding: “Every time I make a productivity gain, the volume eventually overwhelms me.” It’s a familiar problem. We’re all extremely busy, and we all get too much email. So what to do?

The Future of Advertising
An article on advertising; stating that advertising is on the cusp of its first creative revolution since the 1960s brings us to a new prespective. This involves the ad industry that just might get left behind. Click here to read and find out more. Very interesting read.

Why Your Form Buttons Should Never Say ‘Submit’
When you see a ‘Submit’-button on a form, what comes to your mind? One could easily reason that clicking the button submits the user’s information into the system for processing. A ‘Submit’-button describes what the system does well, but it doesn’t describe what the user does at all. The article suggests to stop using the wording ‘Submit’ on buttons and provide more meaningful, task-specific names instead.