beTech :: Evolve Already

ITCWeb consists of thousands of pages that include common snippets of code for headers, footers and such via Apache’s Server Side Includes (SSI). It’s a fairly typical practice for creating templates since you just need to change a single file (the include) to immediately affect all the pages that include it. To maintain a consistent appearance across HTTP and HTTPS (SSL) protocols, our setup also connects the include files behind the scenes on the nonsecure and secure servers with symlinks. The practice worked flawlessly until we added the JavaScript for Google Analytics. The resolution required a little more SSI magic in the form of conditional expressions.

Read the rest of this entry »

Partly as a follow up to Steve’s recent post on Snap, and partly because ’tis the season for receiving as well as giving (;-), I recommend checking out Widgetbox. It’s the best round-up on the web of all the neat little widgets, like Snap, available for use in your website. Interestingly, Snap doesn’t seem to be listed there yet.

A sample of some of the most impressive goodies to be found at Widgetbox includes:

• Grazr — A free publishing tool for feeds. Quickly and easily display RSS, RDF, Atom, and OPML files on any Web page so they can be viewed by any visitor to the site.
• Meebo Me! — A chat client that you can embed directly in your page.
• Mapsack map — Allows you to embed an interactive google map on your blog.

Oh, and for those hoping Santa will bring them a cute furry companion this year, there’s always the CuteOverload Cutetracker if the big guy doesn’t deliver.

Last year we posted a baker’s dozen of essential Firefox extensions for web developers. One of our favorites, Chris Pederick’s Web Developer Extension, continues to improve with age—adding live HTML edit and Display Ruler since we ran our article. It remains a must-have tool for web designers and developers. Another useful extension, IEView, gained a couple of companions in the alternate browser view arena with IE Tab and OperaView now joining the fray.

But what’s new (or, at least, new to us)? Let’s take a look at what’s come along since last year (in alphabetical order):

Read the rest of this entry »

Whether for promotional or portfolio pieces, sometimes it’s nice to have a CD of your web work for browsing offline. The good news is that if you don’t require server-side scripting (e.g., Perl, PHP, SSI, Ajax) the process is relatively straightforward and easy—just burn a self-contained web directory to a CD. All the HTML, CSS, and JavaScripts will work just as well as they do online.

Here are some key tips and considerations:

• Make sure all local links are relative. That is, use images/pic.gif or ../images/pic.gif rather than /images/pic.gif. (Note also that external links won’t work if the browser is offline.)
• If you have images in your CSS, remember that the links are relative to the CSS file.
• Provide a logical starting point for users. In addition to an index.html file, consider a readme.txt file with instructions on how to get rolling or even a duplicate file index named start_here.html.

• Even better for Windows users: to automatically open the site when the CD is inserted, save a text file named autorun.inf in the CD root directory with the following code:

  [autorun]
  ShellExecute=index.html
  icon=favicon.ico

  The ShellExecute command opens the index.html file with the default browser and the optional icon line provides Windows with one of your lovely site icons to identify the CD.

• Taking into account all these ideas, the CD’s root directory will look something like this:

  autorun.inf
  favicon.ico
  folder1/
  folder2/
  images/
  index.html
  readme.txt
  screen.css

Pretty simple, huh? If you have other tips or caveats to add, please let us know. Otherwise, happy burning!

By now we’re all pretty familiar with stylesheets for print, right? They allow us to print-format pages so just the stuff worth printing shows up with none of the superfluous fluffery like layout, navigation, online-only content, etc. Print stylesheets are also mighty handy for displaying supplemental information such as footnoteLinks or more explicit copyright/privacy verbiage on our printed page. But what if wanted to print a version of what we’re seeing on the screen in addition to the default print-formatted version?

Well, we have a few options. One, we can capture the screen, paste it to an image file, and then print that image file. Two, we can use a Firefox extension such as Pearl Crescent Page Saver to create an image file (capture the browser window or the whole document length—way cool!), then, once again, print the image. Or, we can do it the CSS way. Guess which way we prefer?

Read the rest of this entry »

Experienced keyboard jockies are probably already well aware of Firefox’s sweet keyboard shortcuts, but some bear highlighting:

• Find

  • Find As You Type Text: Think Ctrl+F is cool? Hah! The hip kids strike the slash key (/) when they need a quick text search (as an added plus, the find panel disappears on its own after a few seconds of inactivity).
  • Find As You Type Link: Type ′ (the single quote character) and find text in the links of a page.
  • Find Again: Find the next match with the F3 key or Alt+n (find previous matches with Alt+Shift+n).

• Navigation

  • Select Location Bar: Ctrl+L highlights the location bar.
  • Select Search Bar: Ctrl+K highlights the search bar.
  • Back: Backspace takes you back a page (Shift+Backspace takes you forward). Alternatively, you can use Alt+← to jump back or Alt+→ to jump ahead.

• Tabs

  • New Tab: Open a new tab with a click of Ctrl+t
  • Next Tab: Jump to the next tab by clicking Ctrl+Tab (and Ctrl+Shift+Tab to jump to the previous tab).
  • Select Tab [1-9]: Jump to a specific tab by clicking Ctrl+[1 to 9].

• Text Size

  • Increase Text Size: Click Ctrl++ to increase text size and Ctrl+- to decrease it.
  • Restore Text Size: Click Ctrl+0 to reset text sizes to normal.

Sorry, this isn’t about trendy desktop fish. The Museum of Modern Betas (MoMB) is too busy to bother with fishies—its mission is to collect and sort links to all the Web 2.0 applications existent. In alpha itself, MoMB offers several different views of its lists mashed up with del.icio.us stats. Think of it as a Billboard Top 100 for web geeks. It’s cool stuff and it reveals a lot of gems that might slip by (check out TypeTester and gliffy).