Linux Commands
I have one set of styles that I use for all of my sites. Rather than have dozens of copies that get out of synch, I use a symbolic link to the styles folder. To create a symbolic link to a folder use the ln command with the -s option. First CD to the directory where you want the new folder. The location of the folder you want to link to is first and the new folder that you are creating comes last.
ln -s /www/Styles/ Styles
For files, leave out the trailing slash.
ln -s /www/Styles/s_gray.css s_gray.css
tar
The following will tar and compress up the entire www tree and
put the archive file in your home directory (on the server).
cd /; tar -czvf ~/www.tgz www
Explanation:
cd / – change to root directory of the machine
; – separator for multiple commands on the same line
tar – tape archiver—the name is archaic, it’s the utility that compresses the data
-c – create new archive, write supplied files to it
-v – verbose – print out names of files as they are added to archive
-z – compress archive using gzip (gnutar only, as used on OS X)
-f ~/www.tgz – write output to file www.tgz in home directory
www – the file (or directory) to include in the archive, in this example www is in the root
To extract it again:
cd /where/you/want/it; tar -xzvf /path/to/www.tgz
will unarchive the www tree under the directory /where/you/want/it
Here’s how I tar up a MySql backup.
sudo tar -czvf mysql-backup.tar mysql-backup.sql
Making URLs compliant
If you encode your pages as UTF-8, no BOM and include this
<meta charset="utf-8">line in your header to tell the browser how to interpret the text, you shouldn’t have any problems with displaying characters. However, if you read text from a database or have special characters in URLs then you may need to convert them. I use these two sites to look up the HTML codes for special characters.
Fixed Size Browser Window
We’re doing screen shots of sites we’ve designed and wanted to make each window the same size. A simple javascript bookmarklet lets us do that.
javascript:self.moveTo(0,0);self.resizeTo(1000,800); self.location="http://slipintoview.com/";
Constrain image to div
To keep an image from overflowing its box, constrain the width.
div#flow img {
float: left;
padding-right: 1em;
padding-bottom: .5em;
max-width: 100%;
}
Turning Off Google Analytics Site Overlay
When you first enter the site overlay you’ll notice that your URL has #gaso and a bunch of letters and numbers appended.
http://www.learningfundamentals.com/#gaso=z2mqTCUBAAlak123jdnkSSSG
The only way to turn off the overlay is to open Preferences and search for the gaso cookie. Delete it and you’re good to go.
Avoiding ISP redirects when a site is not found
I frequently mis-type a site name and instead of getting a browser error and quickly correcting my typing, I get a redirect to my ISPs spam page. Using Google for DNS lookup avoids that. Link.
Comparison Operators
PHP has a comparison operator that checks to see if the values being compared are of the same type. The operator is
$a === $b Identical TRUE if $a is equal to $b, and they are of the same type.
For example, I have a bunch of pages from the NACO Airport/Facility Directory (A/FD). They are saved as AFD_1.inc, AFD2.inc, etc. I want to check whether the $page variable contains AFD, and if it does then display the correct page. If no page is given, then display a spash page, and if a page is requested using the old style format (State abbreviatons), then indicate that they need to use the new format. If the page starts with AFD one of the string functions I can use to determing that is strpos. It returns the position of the first occurrence of the string and FALSE if it is not present. Now FALSE and 0 are the same value, but different types. So if I use the == comparison operator, it returns TRUE if the $page starts with AFD and returns TRUE if $page doesn’t start with AFD. However, if I use === then it works as expected since 0 and FALSE are different types.
This is what my code looks like: (WordPress has trouble with this so it’s commented.)
// if(strpos($page, 'AFD') === 0) {
// include("./AFD_17DEC2009/$page.inc");
// } else if ($page == '') {
// } else {
// include("./Missing.inc");
// }
Browser Size
Determining the appropriate display size for websites is fairly difficult. You don’t have any control over how users set up their browser windows so you have to guess how your site looks to visitors. I just found this tool from Google that lets you see you site is probably viewed. Google Labs. Type your site address into the text box at the top and you can see what percentage of visitors can see your site without scrolling, with vertical scrolling, and how many need to scroll horizontally.
Hiding Photoshop
When OSX started using Command-H to hide applications and Command-Tab to switch between open applications, I was ecstatic. However, Photoshop never adapted to the new behavior so typing Command-H does something else—I’m not sure what. It’s been a real annoyance for years. I looked all over the Photoshop Preferences and couldn’t find a way to change the behavior. I was reading a blog post today and found out that Adobe puts Keyboard Shortcuts in the ‘Edit’ menu. Select it and look for the Hide Photoshop section. In the shortcut field, hold down the Command Key and hit the H.
Turn off inline viewing of PDFs in Safari
I usually prefer to view PDFs in Preview rather than the Safari browser so I copied this command to the terminal. Sometimes, you need to view the PDF in Safari so you can submit it online. Change YES to NO and it turns the view feature back on. For some sites, you may also need to turn Adobe Acrobat back on.
defaults write com.apple.Safari WebKitOmitPDFSupport -bool YES
Embedded Fonts
MooModernizr
This tool seems like it will come in handy. MooModernizr 1.1 tests the browser’s CSS3 and HTML5 capabilities. This by extending MooTools’ Browser. Features object with a variety of CSS3 and HTML5 features. It is a MooTools 1.2 port of Modernizr 1.1.
Clean up CSS for HTML Mail
24 Ways
Lots of posts on web crafting. I reference a few frequently.
Rock Solid HTML Emails
Going Nuts with CSS Transitions
Working With RGBA Colour
Forms
Choose a random row from the MySQL database.
ORDER BY rand() LIMIT 1";