Blogs about web-design from Pew Pew Laser Blog

The Paranoid Web Developer.

I may well have a reputation for being security-conscious to the point of paranoia. I say that you can't be too paranoid; nobody writes articles extolling the virtues of web sites that haven't been hacked. Check out these articles about the devious and clever Cross-Site Request Forgery technique.

• Scripting Attacks Plague Even the Web's Largest Sites
• Cross-Site Request Forgeries

Plenty to worry about, huh, web devs? Remember: just because you're paranoid, doesn't mean they aren't out to get you.

For most regular web-surfers, I think that here's little to worry about here. Users can protect themselves by logging into accounts only when needed, and logging out when done.

Appending an External JavaScript File.

This basic bit of JavaScript will allow you to dynamically append an external JavaScript file to an HTML document.

var theScript = document.createElement('script'); theScript.type = 'text/javascript'; theScript.src = "da_script.js"; document.getElementsByTagName('head')[0].appendChild(theScript);

First, we prepare a new object using createElement(). Then, we append the new object to the end of the first (and, hopefully, only) head element in the document.

Photoshop - Seamless Background Photos.

I used my own photograph of Dale Chihuly's glass installation at ceiling of the Bellagio as the base for this seamless background. The number of objects and variety of color in this photograph made it quite an ambitious choice, but the transparency inherent in the glass artwork mitigated some of the odder blends.

I created this background in Photoshop. Here is a summary of the steps I used:

1. Leaving a wide margin, copy a new image from original. This margin will give you extra source data for the blending the seams, so make it a little wider than the objects in the original photograph.
2. Use the Offset Filter (Filter > Other > Offset) to shift the image 50% of its total dimensions both horizontally and vertically.
3. Save your .PSD.
4. Create a new layer.
5. Use the clone tool to paint a large area into the new layer from the original layer.
6. Align the new layer directly on top of the original layer. Set the layer blending mode to "difference" and nudging with the arrow keys will help.
7. Add a layer mask to the new layer.
8. With a soft brush, edit the new layer to blend nicely into the original layer. Paint black to "erase" the new layer and white to paint it back in.
9. Go back to step 3 and repeat until the seams are gone.

Some notes:

• To check your work, first Save your .PSD, then flatten flatten all the layers and repeat the offset filter.
• If you'll be shrinking the image to a smaller pixel size in it's final form, work on the full-size image first, then re-size to the smaller size.

Here's a more thorough tutorial of turning photographs into seamless backgrounds.

Pixels versus Ems.

In CSS, pixels are an easy-to-understand unit of measurement. A pixel is the smallest possible display unit on an electronic device. The most common computer screens are 1280 pixels wide, and 1024 pixels high. Both the iPhone and Pre have a 480 by 320 pixel screen. Pixels are best used when precise positioning of elements is required - such as with images.

Let's take a moment to consider the full implications of a common practice: using pixels to specify text size on a web page. As manufacturers continue to develop monitors with more pixels, the physical screen dimensions tend to stay the same. Therefore, it appears that pixels (or font sizes declared in pixels) are getting smaller, and more difficult to read.

EMs are a little trickier to grok. Ems are relative to the current text size. To quote Robert Bringhurst:

The em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.

Ems are best when specifying text size and spacing where you want the user to have the ability to read your content with the text size that's best for them. Font sizes specified with ems will respect operating system or browser changes to default font size that the user has made.

You should avoid using ems when slight variances in size would cause layout problems - such as if a floated item were bumped out of place. Small text size differences may exist even between two computers with the exact same browser and operating system.

Print Style Sheets.

Today, I'll talk about creating tweaking the way that your website will print using print style sheets.

Let's start with the standard disclaimer that electronic screens and paper are different, and that perfect screen to print matching is nigh impossible. The immutable inherent differences between screens and paper: dynamic and interactive abilities, color gamut, author and browser control conspire against perfect matching.

Now on to the good stuff. Here are a couple tips for developing a print style sheet.

• Consider how a visitor would use a printed version of your web page. It's probably best to hide elements will never be useful in the printed version - such as on-line-call sign-up forms or Flash movies. Better yet, use the print style-sheet to replace them with versions suitable for offline use - such a phone number to call for more information, or a textual transcript of the movie. (You should probably have these elements present on the page anyway for SEO.)
• If you have elements that need to appear only in the print version, simply include them in the HTML along with all the regular elements, and hide them in the screen style sheet.
• Any JavaScript (including libraries like jQuery) will override the screen style sheet. You can override these JavaScript style declarations by adding !important to the print style sheet's declaration.