Sexy, Highlight Search Terms on Delicious
23-Apr, 2009
The social bookmarking site, del.icio.us has a gorgeous and intuitive interface, which makes interacting with your hundreds of thousands of bookmarks and tags a breeze. The page, however, is dominated by blues and greys. Your search term is highlighted in bold, blue text on the results page by default and is difficult to pick out in the sea of blue text.
CSS to the rescue! With a little CSS code (valid for Mozilla and Webkit-based browsers: Firefox, Safari, Camino, Flock, etc.), you can turn the mundane search terms into something that you can easily recognize on the results page much more sexy! Click on the thumbnail image (top-right) to see the full size screenshots.
Here’s the code:
a.taggedlink b {
background-color: #EE6;
color:#000;
padding: 0px 4px 0px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #993;
line-height: 22px;
}
Where do I stick this code, you ask? Check out how to create and enable custom CSS files by reading userContent.css: Block Ads and Customize Web Sites. Floppymoose.com provides the full, custom CSS file paths for a variety of browsers. Firefox users may also add the CSS above into a site-specific entry using the Stylish add-on. Sex it up!
Web Page Screenshots: Software for the Mac
25-Apr, 2008
Anyone who dabbles in the art/business of web design needs an easy and efficient way of taking screenshots of a web page. This isn’t a big deal if you have a 30″ monitor running at 2560 x 1600 pixels, but if you’re using a smallish laptop or the web page is 4 feet long, you’ll probably need something more sophisticated and convenient than taking successive screenshots after each mouse scroll and pasting the images together. Lame. There are all kinds of programs that can perform this task, but I’m only going to highlight a few.
The Basics
If you have a ginormous screen (or the web page is small), many web pages may already fit within the viewport (viewable dimensions) of your web browser. If that’s the case, you can probably get away with using Apple’s built-in screenshot tools and keyboard shortcuts. These include Cmd+Shift+3, Cmd+Shift+4, and the Grab application. Although quite slick, these built-in, keyboard methods of grabbing screenshots are somewhat limiting; you can’t capture the cursor and you can’t time the shot. Grab, which lives in Applications > Utilities, takes care of said issues.
On the Web
I’m sure there are a thousand web sites that offer a web-based, screenshot service, but one that I think stands out is Browsershots.org. This free service, run by an army of volunteers, allows you to download screenshots of any on-line web page using as many as 60 different web browsers (e.g. Safari, Firefox, Opera, SeaMonkey, IE4-8, and Flock) running Mac OS, Linux, BSD, and Windows. IE4…G.M. Chrysler! The site provides very useful “shortcut links” to select All, None, Linux, Windows, Mac OS, BSD, Gecko, KHTML/WebKit from the impressive list of browsers and operating systems. You can even choose to monkey with other settings, like screen size, color depth, Javascript, Java, and Flash, if that’s your thing.
The service can be a little slow, depending on the amount of bandwidth you have, the location of the server (volunteer’s computer) relative to you, and the number of screenshots you “order from the menu.” The main disadvantage of this service is that the web page must be online; meaning you cannot upload a page you may be working on offline. Also, you have no control over the size of the text displayed in the web page.
Although it might not be an issue for some, the screenshots I downloaded included the web browser in the screenshot and may have menu items in another language. Regardless, Browsershots.org allows you to search and view previously requested screenshots, view the current queue, and pay for priority processing. It was kind of fun to see Internet Explorer 4 again. No, not really.
Paparazzi
Paparazzi is a stand-alone, Mac-only program, based on webkit2png that takes screenshots of any online or offline web page. You can type in the URL or simply drag the URL from your web browser into the simple interface. Some of Paparazzi’s cool features include applying custom style sheets, adjusting the screenshot size, cropping, screenshot delay, thumbnails, and adding date/time/host/URL attributes as a suffix or prefix to the file name. 
The program can also import your bookmarks (Safari and Camino) so you don’t have to even open your web browser.
Like Browsershots.org (see above), the application doesn’t recognize the size of the text in the web page, despite adjusting the text size in Safari prior to taking the screenshot. You could, however, adjust the text size to your liking in a custom style sheet…”Giddy up!” The application can save screenshots to a PDF, allowing you to search the text in your favorite PDF reader. All-in-all, this free program is a nice addition to any web developer’s toolbox. Donations are welcome.
Web Snapper
Web Snapper, by TastyApps.com, is no doubt the powerhouse of the group. Like Paparazzi, it provides a simple, clean interface to acquire screenshots of any online or offline web page. It offers a slew of unique features, however, that definitely justify the meager, $15 purchase. Like Paparazzi, one such feature is saving the screenshot as a vectorized PDF; meaning all links, images and text are preserved, making the document searchable in any PDF reader. Other notable features include support for saving the entire screenshot queue to a multi-page PDF document, “Auto Save To…,” reordering of the screenshot queue (helpful when making multi-page PDFs), and generating screenshots of web pages containing Adobe’s Flash content…nice!
Two of the biggest selling points for me, is Web Snapper’s integration with Safari/Webkit and the application’s recognition of the page’s text size when taking a screenshot. You can enable a Web Snapper toolbar button for Safari that allows you to save a screenshot of the current page with a single click, assuming you have set up the “Auto Save To…” feature.
The Verdict
If you have $15 to spare and make web page screenshots on a regular basis, I highly recommend Web Snapper. The multi-page, vectorized PDF feature is really slick and its ease-of-use in Safari and text-size recognition sets this application apart from the competition. The logo is cute, too…I mean, look at that little guy! I’ll call him Cecil. If you’re designing a web page and want to see how it looks to the three people still running IE4, take Browsershots.org for a spin. Alternatively, if you fancy Firefox on the Mac, there’s always the Screengrab! add-on. If you find this post helpful or have another slick method of making web page screenshots, feel free to post a comment!
