Technobrief #11

Summary: Recent findings of software, articles, and more.

CSS

• CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)
  Two useful cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property.
• Less.js Will Obsolete CSS
  Dmitry Fadeyev explains how to improve CSS using the LESS preprocessor.
• Modern CSS Layouts: The Essential Characteristics
  Focuses on the broad underlying concepts that you need to know to create successful CSS layouts using the latest techniques (see also Modern CSS Layouts, Part 2: The Essential Techniques).
• The Principles Of Cross-Browser CSS Coding
  Louis Lazaris describes what he believes are some of the most important CSS principles and tips that can help both new and experienced front-end developers achieve as close to a consistent cross-browser experience as possible, with as little CSS code as possible.
• The State of CSS3 in Email Templates
  Ros Hodgekiss goes through two CSS3 properties you can use in your email templates, alongside some practical examples.

Design

• Typographic Design Patterns and Best Practices
  Identifies best practices for working with type, such as choosing serif vs. sans-serif fonts, picking font face, light or dark background, font sizes (headlines, body), etc.

Fun

• Cloth Simulation
  Andrew Hoyer simulates effects of gravity on a hanging cloth in JavaScript (beautiful!).
  
• Spider 3D
  Interactive tarantula by Tomas Eriksson (freaky!).
  

Graphics

• iconFinder
  Collection of free icon sets (see also Free icons!).
  
• morgueFile
  Public image archive.

Internet

• Google Experts Answer your SEO Questions
  Transcript of an interview with the Google search quality team: John Mueller (Webmaster Trends Analyst, Google Zurich), Matt Cutts (Webspam Engineer, Google California), Zareen Kazim (Strategist, Google India), Koteswara Ivaturi (Project Manager, Google Hyderabad) and Kaspar Szymanski (Strategist, Google Dublin).
• Non-Latin TLDs Spotted in the Wild
  Don't be surprised when you see URLs containing Russian and Arabic characters (e.g. http://وزارة-الأتصالات.مصر/).

JavaScript

• l10n.js: JS localization library
  Dion Almaer describes Eli Grey's JavaScript library that enables localization through the native JavaScript method intended for it (and gracefully degrading if the library is not present).
• JavaScript sprintf
  JavaScript implementation of C-like sprintf function.

Jobs

• 10 Questions to Ask Your New Manager
  Jurgen Appelo suggests 10 questions that you may want to ask your hiring manager.
• Why Engineers Hop Jobs
  Ted Dziuba (humorously) explains why.

jQuery

• A jQuery UI Growl/Ubuntu-like Notification Widget
  Eric Hynds demonstrates the use of a small, yet effective, jQuery notification widget.
• jQuery 1.4.2 Visual Cheat Sheet
  A very useful reference for the jQuery API and usage.
• jQuery Globalization Plugin from Microsoft
  Scott Guthrie describes the prototype of a new jQuery Globalization Plugin that enables you to add globalization support to your JavaScript applications.
• jQuery Templates and Data Linking (and Microsoft contributing to jQuery)
  Scott Guthrie shows a prototype of client-side templates based on jQuery.
• My 7 jQuery Articles on Script Junkie
  Collection of excellent articles by Elijah Manor that covers topics such as jQuery debugging, history and back button support, writing plugins, and more (you can start with Six Things Every jQuery Developer Should Know).
• Uniform
  Masks your standard form controls with custom themed controls to make the look similar across various web browsers. It works in sync with your real form elements to ensure accessibility and compatibility.

Podcasts

• Boagworld
  A weekly podcast by Paul Boag and Marcus Lillington on building and running websites.

Programming

• Fixing Internationalization in ASP.NET
  Jason Kester introduces a simmple way to add internationalization (i18n) support to your ASP.NET-based web site.
• Solution Setup, Part Deux
  Hüseyin Tüfekçilerli covers such topics as versioning attributes, resource attributes, project naming convention, web project code and UI separation, and build output (see also part one).

Software (free)

• Daniusoft Video Converter Free
  Somewhat limited version of the video converter that also allows you to crop and trim videos, merge two or more video clips, adjust video effects, etc.
  
• Format Factory
  Multifunctional media converter that supports conversion of all media formats to compatible
  MP4/3GP/MPG/AVI/WMV/FLV/SWF (video), MP3/WMA/AMR/OGG/AAC/WAV (audio), and JPG/BMP/PNG/TIF/ICO/GIF/TGA (image). It can also rip video DVDs and music CDs to video and audio files. MP4 file support covers iPod/iPhone/PSP/BlackBerry format. (Note: This is my favorite free media conversion tool so far.)
• HxD Hex Editor
  Very fast hex editor which can handle files of any size.
• Komodo Edit
  Text/code editor that supports PHP, Python, Ruby, Perl Tcl, JavaScript, CSS, HTML and template languages like RHTML, Template-Toolkit, HTML-Smarty and Django (somewhat slow to start, but otherwise quite capable).
• PicPick
  Screen capture tool that also comes with image editor, color picker, color palette, pixel ruler, protractor, crosshair and whiteboard.
• SmillaEnlarger
  Small graphical tool for resizing, and especially magnifying bitmaps in high quality.

Tips and tricks

• How to Fix your Slow Internet Connection
  Amit Agarwal explains how to troubleshoot slow internet connections.
• Skip the DVD Trailers & Go Straight to the Movie
  Amit Agarwal suggests several methods of skipping trailers when watching DVDs on DVD players, as well as computers.

Web development

• 2010: Web Fonts Are Here and Ready to Use
  Brad Neuberg explains how to incorporate recently released open source fonts from the Google Font Directory in your web site.
• ASMX and JSON – Common mistakes and misconceptions
  Dave Ward explores a list of common misconceptions and potential pitfalls when it comes to using ASMX services for AJAX callbacks.
• Conditional-CSS
  Web-based utility allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.
• Online Regular Expression Tester
  Allows you to test JavaScript-based regular expressions.

Web tools

• Rebate Reminder
  Lets you keep track of your mail-in rebates.
• Milo
  Lets you search for product availability at local stores.
• NolaPro Free Accounting
  Free web-based accounting site (the tool is also available as a free Windows application).
• Phonebooth Free
  Web-based inbound phone system that offers a local business phone number and sophisticated call routing, auto attendant, extensions, voicemail, and more. Free service allows 200 minutes of inbound calling per month (6 cents per minute thereafter).
• Paper Rater
  Checks grammar, proof-reads, detects plagiarism, and does more.
• SpeedTest
  Tests the speed of your Internet connection.
• Terms of Service Generator
  Construct a sample Terms of Service based on your answers to the questionnaire.

How to encrypt a USB flash drive

Summary: Recommendations for protecting sensitive data on a USB drive.

I recently lost my primary USB flash drive (the key chain broke), so I had to go over the exercise of setting up a new one using my favorite drive encryption software: TrueCrypt. I don't do this very often, and every time it takes me some time to recall the correct procedure and reconstruct my basic USB flash drive setup, so I thought I'd outline these step here. Hope it will help someone else.

1. Download and run TrueCrypt on your computer
   TrueCrypt can run in (semi-)portable mode, so you have an option of either installing it on your computer or simply downloading and executing the program.

2. Create encrypted container on the USB drive
   This container is just a file with space allocated for the encrypted volume. TrueCrypt will use this file as a virtual drive (volume) that you can map as a regular drive letter. Follow these steps:
   
   • In the main TrueCrypt application window, click the Create Volume button:
     
     
   • In the TrueCrypt Volume Creation Wizard, select the Create an encrypted file container option, and click Next:
     
     
   • In the Volume Type dialog box, select the Standard TrueCrypt volume option:
     
     
   • In the Volume Location dialog box, use the Select File button and navigate to the drive mapped to your USB drive; then enter the name of the file you want to create (you can give any name and extension to this file):
     
     
   • In the Encryption Options dialog box, select AES for encryption algorithm and SHA-512 for hash algorithm (if you wish, you can use another combination of options):
     
     
   • In the Volume Size dialog box, specify the size of file that you will allocate for the encrypted volume. Make sure that you leave some space for regular (unencrypted) storage. You will need this space to store the TrueCrypt binaries and possibly other files (more on these later). If you are not sure how much space you need to allocate, just use ~75% for encrypted storage, i.e. for a 4 GB USB drive, use 3 GB for encrypted storage (75% of 4 GB = 3 GB):
     
     
   • In the Volume Password dialog box, enter the password that you will use to access the encrypted volume (make sure you can remember this password):
     
     
   • In the Volume Format dialog box, select the file system type (I prefer NTFS, but you can use another), and click Format:
     
     
   • Confirm the operation and wait until TrueCrypt creates and formats the encrypted container (file). When done, click the Exit button to close TrueCrypt Volume Creation Wizard.

3. Install TrueCrypt software on the USB drive
   If you expect to use your encrypted drive on a system where TrueCrypt is not installed, you need to keep the necessary TrueCrypt files along with your encrypted container. Do the following:
   
   • Switch back to the main TrueCrypt application window and select the Tools-Traveler Disk Setup... menu option.
   • In the Traveler Disk Setup dialog box, specify the root location of the USB drive and uncheck the Include TrueCrypt Volume Creation Wizard option (since you have already created one). Select the Auto-mount TrueCrypt volume option and specify the encrypted container file you created in the previous step. You can adjust these and other options to your liking:
     
     
     
   • Click the Create button and once the operation completes, close the Traveler Disk Setup dialog box.
   • You can close the main TrueCrypt program window.

At this point your USB drive will have an encrypted container that you can mount as a drive, as well as all necessary TrueCrypt components (for use on systems where TrueCrypt is not installed).

Here are additional changes that improve my experience with TrueCrypt and your USB drive:

• Autorun.inf file
  The default autorun.inf file created by TrueCrypt is fine, but I normally make a couple of changes. E.g. I like all TrueCrypt's Windows shell context menu items to be grouped together, so I rename them. Here is the contents of my autorun.inf file (if you decide to use it, make sure that you reference the correct location of the TrueCrypt.exe file, as well as the container file):
  
  autorun.inf

  [autorun]
  label=Cruser2GB
  icon=TrueCrypt\TrueCrypt.exe
  action=TrueCrypt: Auto-mount volume
  open=TrueCrypt\TrueCrypt.exe /q background /e /m rm /v "volume.tc"
  
  shell\start=TrueCrypt: Run from USB
  shell\start\command=TrueCrypt\TrueCrypt.exe
  
  shell\dismount=TrueCrypt: Dismount all volumes
  shell\dismount\command=TrueCrypt\TrueCrypt.exe /q /d
  
  shell\mount=TrueCrypt: Mount volume
  shell\mount\command=TrueCrypt\TrueCrypt.exe /q background /e /m rm /v "volume.tc"

• Helper batch scripts
  The autorun.inf file works great on older versions of Windows, but unfortunately Windows 7 (and I expect later versions) only recognizes the label and icon settings. So, if you plug the USB drive into a USB port on a system running Windows 7, it will neither auto-mount the drive, nor will it show the TrueCrypt's shell context menu options. To make it easier to mount and unmount the volumes, I use the following batch scripts (I put them in the root folder of the USB drive):
  
  mount.bat

  @echo off
  start %~dp0\TrueCrypt\TrueCrypt.exe /q background /e /m rm /v "volume.tc"

  Notes: The start command hides the command-line window (without it, you will need to close the window manually). When using this script, make sure that it references the correct location of the TrueCrypt.exe file and your volume container.
  
  unmount.bat

  @echo off
  %~dp0\TrueCrypt\TrueCrypt.exe /q /d

• Auto-runner
  As an alternative to the batch scripts I mentioned above, you may want to try the AutoRunner.exe program attached to the Windows 7 - Autorun on USB drives post on SevenForums. When you launch this program, it will auto-mount the TrueCrypt volume and create the shell context menus defined in the autorun.inf file on Windows 7. The main problem with this program is that once launched, it will continue running until you kill it in the TaskManager (there seems to be no other interactive way to close the program). And you will need to kill it when you need to remove the USB drive. If you want to use this program, copy the executable to the root folder of the USB drive.

• Safely remove drive helper
  The built-in Windows' Safely Remove Hardware feature has been and still is (even in Windows 7) one of the most user-unfriendly interfaces. As an alternative, you can try Uwe Sieber's Remove Drive program. When you run this program from a USB drive, it will keep trying to safely remove the drive until it succeeds or you cancel it. The program will give you a chance to close all open files and perform other cleanup that you may need to do before unplugging the drive. Note: Even though you launch the program from the USB drive, it will actually clone itself in a temporary folder and run from there (sweet! I wish AutoRunner.exe were as smart). Assuming that you extract the Remove Drive files in RemoveDrive folder under the root of your USB drive, you can use the following batch script to launch it with appropriate command-line parameters (place this batch file in the root folder of the USB drive):
  
  saferemove.bat

  @echo off
  if defined ProgramFiles(x86) (
  %~dp0\RemoveDrive\x64\RemoveDrive.exe %~d0 -L -i -b
  ) else (
  %~dp0\RemoveDrive\Win32\RemoveDrive.exe %~d0 -L -i -b
  )

As the very last thing, I add a readme.txt file to the root folder with my phone number in case I lose it next time. I don't actually count that a person who finds it will return the drive to me, but you never know: there are some good people out there.

Introduction to jQuery

Summary: My latest jQuery presentation.

Here is my latest jQuery presentation:

Introduction to jQuery from Alek Davis

I hope you find the links helpful.

You can download the demo projects from the ASP.NET AJAX and jQuery Presentation post.

See also:
Great Ways to Learn jQuery (nice collection of tutorials, presentations, books, and resources)
Debugging Tools by Remi Sharp

Convert APE audio to MP3 files

Summary: So you got an APE file. Now, how do you convert it to MP3s?

I recently downloaded (legally!) a .APE file holding a collection of old Russian/Soviet songs. First thing that came to my mind was: What in the world is APE file and how do I play it? Second: How do I convert the .APE file to a more acceptable MP3 format?

What is APE audio?
APE is audio encoding used by Monkey's Audio. Unlike MP3 and other popular audio formats, Monkey's Audio encoding reduces the size of uncompressed audio without losing sound quality. Which is a good thing. Unfortunately, decoding APE-encoded audio requires more processor power, so few music players (either software- or hardware-based) can play .APE files.

What is a .CUE file?
If a .APE file contains several audio tracks (e.g. a full CD album), it may be accompanied with a .CUE file. The .CUE file is often referred to as a cue file or cue sheet. It contains the information describing individual tracks in the album file (which can be in APE or other format), such as track ID, start time, end time, etc. The cue file allows audio players to see multiple tracks in a single audio file. It also lets audio converters split a single audio file into multiple tracks automatically. Without the cue file, you can still split an audio file into multiple tracks using such programs as MP3DirectCut or Audacity (both are free), but you would need to manually find the split points, which is more hassle.

How to convert an APE-encoded album into individual MP3 files?
Assuming that your .APE file comes with the corresponding .CUE file, you can easily convert it to individual MP3 tracks (or other audio encoding formats) using the free converter and recorder tools that come with the excellent AIMP2 audio player. [Note: AIMP2 is my favorite audio player, which I highly recommend.] You can get the main AIMP2 program and the converter and recorder tools from the program's downloads page. Once you download and install AIMP2 and AIMP2 Tools, do the following:

1. Launch AIMP2 Audio Converter.
2. In AIMP2 Audio Converter, select the Load files from playlist option, and open the CUE file. If there are no problems with the CUE file, AIMP2 Audio Converter will detect and load the contents of the corresponding APE file.
   
   If the converter fails to load the CUE file, chances are it's corrupted. One of the common problems is wrong encoding of the file data. You can open the CUE file in a text editor (such as Notepad) and verify the contents. Here is an example of the file with wrong encoding:
   

   REM GENRE "Âîåííàÿ ïåñíÿ"
   REM DATE 2005
   REM DISCID 45113F16
   REM COMMENT "ExactAudioCopy v0.99pb5"
   PERFORMER "Various"
   TITLE "Äåíü Ïîáåäû - ñáîðíèê ïåñåí î âîéíå è ïîáåäå"
   FILE "Äåíü Ïîáåäû - ñáîðíèê ïåñåí î âîéíå è ïîáåäå.ape" WAVE
     TRACK 01 AUDIO
       TITLE "Track01"
       PERFORMER "Track01"
       INDEX 01 00:00:00
     TRACK 02 ...

   The most critical part of the file is the FILE field. Make sure that it contains a valid file name that corresponds to the APE file (both the CUE and APE files must be in the same folder). To correct text encoding in the CUE file, follow the process I outlined in the How to fix movie subtitle (and other text) encoding issues post. This is how a corrected file may look like:
   

   REM GENRE "Военная песня"
   REM DATE 2005
   REM DISCID 45113F16
   REM COMMENT "ExactAudioCopy v0.99pb5"
   PERFORMER "Various"
   TITLE "Песни победы"
   FILE "Soviet War Songs2.ape" WAVE
     TRACK 01 AUDIO
       TITLE "Track01"
       PERFORMER "Artist01"
       INDEX 01 00:00:00
     TRACK 02...

3. Once the CUE file successfully loads, AIMP2 Audio Converter will show the tracks in the list:
   
   
   
4. Select the encoding parameters including Encoder (set it to MP3, or whatever your favorite audio format is), output file format, output directory, and MP3 settings (I prefer VBR [Joint Stereo] and high quality MP3 encoding, but you may want to adjust them for your liking). While at it, you may want to go over each track and set appropriate tags (album, title, artist, genre), but you can change the tags later on the MP3 files directly.
5. Click the Start button.

Enjoy.

See also:
How to convert .ape files to .mp3 using Windows by Ross McKillop
Convert APE to MP3

ASP.NET AJAX and jQuery Presentation

Summary: Follow-up to my ASP.NET AJAX and jQuery presentation in Reno, NV.

Many thanks to all who attended my ASP.NET AJAX and jQuery presentation at Northern Nevada Software Developers Group last week. Here are the slides:

Building intranet applications with ASP.NET AJAX and jQuery from Alek Davis

You can download the following demo Visual Studio 2008 projects:

• ASP.NET AJAX and jQuery Demo
  
  • Illustrates how to use ASP.NET AJAX (ScriptManager, UpdatePanel, UpdateProgress controls) with data-bound controls (Repeater) and jQuery.
  • Uses a local copy of an older version of jQuery (1.3.2).
• User Search Demo
• Illustrates how to use the jQuery Autocomplete (by Jörn Zaefferer) and Watermark (by Todd Northrop) plugins.
• Uses the Google-hosted version of jQuery (1.4.2).
• Performs user search by name, employee ID, login ID, or e-mail address.
• Code auto-detects the type of search to perform based on user input (or tries the best guess).
• The autocomplete (drop-down) box is customized to show text along with image.
• Data comes from an XML file and retrieved using LINQ-to-XML.
• Backend user search logic is implemented as a generic HTTP handler.
• Data returned from HTTP handler to the Autocomplete plugin is serialized with the help of JSON.NET library (by James Newton-King).
• .NET user objects are automatically converted to JavaScript objects.

If you have questions, feel free to post comments.

See also:
Introduction to jQuery (my newer post focusing purely on jQuery)
ASP.NET AJAX and jQuery (my older post on the same topic that contains a few additional references)
jQuery for the ASP.NET Developer (Dave Ward summarizes various options of incorporating jQuery into an ASP.NET project)