Design Clipboard

Are You Suffering from Charset=UTF-8 Blindness?

Jacob Lett — Sat, 23 Apr 2011 12:59:02 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

There are a many roads that can lead to becoming a web designer. Some start off as programmers and then see the need to "design" graphics for the sites they are building. While others start out learning about color, kerning, and strong visual layouts before learning how to "code" — this is me. Whichever direction you follow you're bound to learn something new along the way. Something which seems common knowledge to other designers or programmers, you simply overlook. I will explain an example of this below.

My Character Set UTF-8 Blindness

I must have built hundreds of webpages with the following meta tag inserted in the head of the page ...

HTML

...

I knew I needed it there but I never wondered why it needed to be there.

I just went along building pages with charset blindness. I often would copy and paste international text from Microsoft Word documents and then paste them into my HTML page, refresh the browser and then see a bunch of missing symbol characters everywhere (?). Well that is no good, so I would search Google for a table of HTML special characters, find the ones I was missing, copy and paste. Done.

It Turns Out, I Was Doing It Wrong

Someone on Reddit suggested I read an article written by Joel Spolsky titled, "The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)". I would go a step further and say everyone using the internet should read this, or at least understand Unicode.

Joel explains in the early days of computers there was no continuity between countries and languages. A computer sold in the USA would focus on English characters and have little or no support for languages such as Hebrew or Chinese. Wikipedia defines ASCII as a character-encoding scheme based on the ordering of the English alphabet. So it is basically an English-centric character encoding. This reminds me of how the US hasn't adopted the metric measurement system or how atlas's have the USA in the left corner of the map.

Each language would have english at its core and fill empty character slots with whatever they wished. The inconsistency of what was included in the free spaces caused a global communication problem.

Other countries used this space to add the characters they needed, while the USA filled these spots with graphics to create text-based borders on the screen.

The Internet Set the Stage for Unicode

Before the internet, a computer in China and a computer in the USA could live happy lives. But as soon as they started talking, a clear message quickly turned into gargley gook.

But of course, as soon as the Internet happened, it became quite commonplace to move strings from one computer to another, and the whole mess came tumbling down. Luckily, Unicode had been invented.
Joel Spolsky

Unicode goes a step further then ASCII by creating an all encompassing character set for all of the languages. Each letter is given a unicode reference such as U+0041. The "U" stands for Unicode and the numbers are a Hexadecimal value, similar to what is used in referencing colors in CSS.

How to Find and Add Unicode to Your Document?

The best way I have found to add the Unicode characters is to use the character map included on your computer. Locate the character, and either copy and paste or drag and drop. I have noticed I only need to do this when I am copying text from word documents or webpages encoded in anything but Unicode.

So, if you ever notice a missing character symbol on your page, first check the encoding in your HEAD and then replace it with a Unicode encoded character from your OS's character map palette.

— Adiós

Are You Suffering from Charset=UTF-8 Blindness? Design Clipboard

Centering a div Horizontally and Vertically

Jacob Lett — Thu, 24 Mar 2011 17:53:38 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

Centering a div horizontally

HTML

CSS

.outerDiv { overflow:hidden;}
.innerDiv { margin:0 auto;
			width: 50%; /* adjust width to suit your needs */
			}

Centering a div vertically

HTML

CSS

.outerDiv { position:relative;
			height:300px; /* Set fixed height value */
			width:300px; /* Set fixed width value */
			border:1px solid red;
			}
.innerDiv { position:absolute; top:50%;
			height:100px; /* Set fixed height value */
			margin-top:-50px; /* Top margin is half the height */
			border:1px solid green;
			}

Source: http://phrogz.net/css/vertical-align/index.html

Centering a div Horizontally and Vertically Design Clipboard

Create a Contact Sheet of an iStockphoto Lightbox

Jacob Lett — Tue, 15 Mar 2011 12:17:40 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

This video will show you how to download a lightbox of images from inside iStockhphoto to quickly create a contact sheet.

Recently I created a lightbox in iStockphoto and I was looking for a way to quickly download the images.

I was trying to put together a contact sheet PDF so that I could discuss image options with a client.

Surprisingly this feature does not exist and so I had to open and save each image individually. The more images you have the more time you lose.

So I then searched the iStockphoto forums for possible solutions and found a script written by Sean Locke that eliminates the repetitive steps.

Before You Start You Will Need

A lightbox saved inside iStockphoto
Firefox browser installed
Firebug plugin installed
Contact Sheet Script Script written by Sean Locke (also provided at the end of this post)

When Ready Follow These Steps

Open Firefox
Open Contact Sheet Script by Sean Locke
Login to iStockphoto and navigate to the lightbox you would like to download
Open Firebug and make sure the console tab is selected
Select the entire Sean Locke script and copy to your clipboard
Return to the lightbox page and paste the script in the console tab in Firebug
Click run
You should then see a gray button above your lightbox that says "Create tab of only images", Click it
Save the page that opens as a complete web page to your computer
You now have a folder of all the images inside your lightbox

JavaScript

// ==UserScript==
// @name           IS_search_imageOnlyPage
// @namespace      sjlocke
// @include        http://www.istockphoto.com/search*
// ==/UserScript==
// upon visiting a lightbox search page, a button will show.
// clicking it will open a new tab with all the images from that page

function showImagesOnly() {

	var html = "\n";

	// Show royalties for your files on this page
	var nodeList = document.getElementsByTagName("div");
	// Find divs like srItem_15084285
	patternMatch = /srItem/gi;
	var numInRow = 0;
	for (i=0;i\ncontent id: "+imageNumber +"\n");
			// find the meta data area div under the content
			var textDataDiv = nodeList[i].childNodes[1];
			if (textDataDiv) {
				for (j=0;jcontent title: " + textDataDiv.childNodes[j].innerHTML + "\n");
					if ((textDataDiv.childNodes[j].className == "srContributor trnct") && (textDataDiv.childNodes[j].style.display != "none"))
						html += ("
content author: " + textDataDiv.childNodes[j].childNodes[0].innerHTML + "\n");
					if ((textDataDiv.childNodes[j].className == "srDownload") && (textDataDiv.childNodes[j].style.display != "none"))
						html += ("
content downloads: " + textDataDiv.childNodes[j].innerHTML + "\n");
				}	
			}
			html += "\n";
			numInRow++;
			if (numInRow == 2) {
				numInRow = 0;
				html += "\n";
			}
			//i = nodeList.length
		}
	}
	if (numInRow == 1) {
		html += "\n";
	}
	html += "";
	var newTab = window.open('','_newtab');
	newTab.document.write();
	newTab.document.close();
	element = newTab.document.createElement("div");
	newTab.document.body.appendChild(element);
	element.innerHTML = html;

	// doesn't work in chrome
	//newTab.document.write(html);
	//newTab.document.close();
}

// Create the button and place it
// Find the div at the top

searchTitle = document.getElementById("searchTitle");

var div;
tmp = document.getElementById("searchReturnInterface_div");
if(!tmp){

	element = document.createElement("div");
	element.setAttribute("id", "searchReturnInterface_div");
	element.style.padding = "6px";
	element.style.backgroundColor = "#DDDDFF";
	searchTitle.appendChild(element);
	div = element;
} else
	div = tmp;

element = document.createElement("input");
element.setAttribute("type", "button");
element.setAttribute("value", "Create Tab of only images");
element.setAttribute("name", "showImagesOnly_btn");
element.style.width="300px";
element.style.margin="2px";
element.addEventListener("click",showImagesOnly,true);
// get the parent of the div and add the button
div.appendChild(element);

Create a Contact Sheet of an iStockphoto Lightbox Design Clipboard

CSS 3 Columns

Jacob Lett — Sat, 05 Mar 2011 10:33:46 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

Divide your page with the CSS 3 columns code below.

First add the following code to your CSS file…

CSS

.threeCol {margin-bottom:1em;overflow:hidden;}
.threeCol .leftCol, .threeCol .centerCol, .threeCol .rightCol {width:32.5%;float:left;overflow:hidden;}

and insert the following HTML code anywhere you would like to divide the content area in thirds. In case you're wondering what the overflow:hidden property does, it clears any floats it contains. Float clearing can be a gotcha in IE and Firefox and this simple property tells the the browser to do its job and wrap the contents inside of it. Otherwise it just chops it off. For more detail on this bug read this.

HTML

CSS 3 Columns Design Clipboard

CSS 2 Columns

Jacob Lett — Sat, 05 Mar 2011 10:30:57 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

Divide your page with the CSS 2 columns code below.

First add the following code to your CSS file…

CSS

.twoCol {margin-bottom:1em;overflow:hidden;}
.leftCol, .rightCol {width:49%;overflow:hidden;}
.leftCol {float:left;}
.rightCol {float:right;}

and insert the following HTML code anywhere you would like to divide the content area in half. Common uses would be to have pictures on the right and text on left or dividing a really long bullet list in half. In case you're wondering what the overflow:hidden property does, it clears any floats it contains. Float clearing can be a gotcha in IE and Firefox and this simple property tells the the browser to do its job and wrap the contents inside of it. Otherwise it just chops it off. For more detail on this bug read this.

HTML

CSS 2 Columns Design Clipboard

If Condition Is Met, Show Content

Jacob Lett — Thu, 03 Mar 2011 10:36:47 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

PHP

Show content only when a condition is met. This can be teamed up with other conditions to include one sidebar.php file with all of your secondary navigation, and then show the proper navigation on a certain page. The code above also makes it easier to add HTML between PHP without the need for echo ' '

Source: http://php.net/manual/en/control-structures.elseif.php

If Condition Is Met, Show Content Design Clipboard

Display Content on Certain Page & Set Link Active

Jacob Lett — Thu, 03 Mar 2011 01:36:46 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

PHP




Link to Page 1
Link to Page 2

JavaScript

Let’s say you have a sidebar included on every page. The php code above displays the sidebar nav only if your browser is pointed to that page. The JavaScript underneath will then set the current page active by adding a class name to it, which you can then apply your styling in CSS.

Display Content on Certain Page & Set Link Active Design Clipboard

Finding the Right Symbol Code for the Right Symbol

Jacob Lett — Tue, 22 Feb 2011 13:02:08 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

When building websites for clients you will often receive word documents full of special characters. Without the proper HTML character code, your symbol could display improperly. Common symbols I look for are registered trademark, copyright, quote marks, em and en spaces, and left and right symbols.

I would generally type in the name of the symbol inside Google to find the proper code. But most sites made it difficult to find the right symbol I was looking for because they were small and hard to see. I created a page of symbols with the ones most commonly used towards the top. I hope this helps you in your everyday search for the right symbol code for your projects.

Click here to see entire table of codes for html symbols. Now finding the right symbol is a little easier.

Finding the Right Symbol Code for the Right Symbol Design Clipboard

Web Font Stacks

Jacob Lett — Sun, 06 Feb 2011 14:49:11 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

CSS

/*
Web Font Stacks
BALANCED FOR PARAGRAPHS
*/
font-family: Baskerville, "Times New Roman", Times, serif;?
font-family: Garamond, "Hoefler Text", Times New Roman, Times, serif;
font-family: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;?
font-family: Georgia, Palatino," Palatino Linotype", Times, "Times New Roman", serif;?
font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif;?
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-family: Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;?
font-family: Tahoma, Geneva, Verdana;?
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande"," Lucida Sans", Arial, sans-serif;?
font-family: Verdana, Geneva, Tahoma, sans-serif;?

/*
BALANCED FOR TITLES;
*/
font-family: Baskerville, Times, "Times New Roman", serif;
font-family: Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
font-family: Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-family: Georgia, Times, "Times New Roman", serif;
font-family: "Gill Sans", "Trebuchet MS", Calibri, sans-serif;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
font-family: Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif;
font-family: Tahoma, Verdana, Geneva;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
font-family: Verdana, Tahoma, Geneva, sans-serif;

/*
BALANCED FOR BOTH TITLES & PARAGRAHS
*/

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-family: Cambria, Georgia, Times, "Times New Roman", serif;
font-family: "Century Gothic", "Apple Gothic", sans-serif;
font-family: Consolas, "Lucida Console", Monaco, monospace;
font-family: "Copperplate Light", "Copperplate Gothic Light", serif;
font-family: "Courier New", Courier, monospace;
font-family: "Franklin Gothic Medium", "Arial Narrow Bold", Arial, sans-serif;
font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-family: Times, "Times New Roman", Georgia, serif;

Web Font Stacks Design Clipboard

Rename File Names Quickly and Easily on a Mac

Jacob Lett — Tue, 07 Sep 2010 10:20:10 +0000

Design Clipboard - Design Clipboard was created to make a web designers job easier by offering code, tools, and resources to help you work more efficiently.

Do you have a folder of images that you would like to rename into a sequential order?

The OSX finder is somewhat limited in the file renaming department… Which is why I love this tool called NameChanger. I often have a folder of a bunch of images that I need to link up in a photo gallery.

My workflow is usually something like this.

Collect images in a folder
Rename all images inside the folder to be in sequential order using NameChanger (imageGallery-1.jpg, imageGallery-2.jpg, imageGallery-3.jpg, and so on.)
Then I open the folder in Fireworks and do a batch resize and save the originals as a backup.
I also add “-thumb” to the image names with Fireworks
Upload the images and link to them inside the HTML document. Each link will be the same except for its number. This sure beats having to change the src, alt, href, and title for each image.

Not only is it free and easy to use, but it works.

You can watch a demo on how it works here.

Rename File Names Quickly and Easily on a Mac Design Clipboard