Thoughtsa blog about… I'll have to get back to you on that one

A quick way to keep your accounts from getting hi-jacked or otherwise vulnerable to security risks is to take care of passwords in cleartext in e-mails.

What do I mean by that? Well, often when you reset your password on a website, they’ll send you an e-mail back with a one-time-use link for resetting your password via the website itself. However, some poorly-written websites will just send you your username and password in a normal e-mail that could be sniffed by a hacker as it’s being sent.

Frankly, the website shouldn’t even have your password in a non-encrypted form. The proper way they should have their site set-up is to store your password in an encrypted form, then when you type it in to log in, they encrypt and check the password entered against your encrypted password in their database

To fix this:

1. Go into your e-mail and do a full-text search for each of the passwords you normally use (yes, everyone does it). This is fairly easy to do and only takes a few seconds in most mail applications and web apps (i.e. Apple Mail and GMail), though some mail programs could take hours (i.e. Outlook).
2. Then note the companies that sent your password in cleartext.
3. Lastly, delete the offending e-mails (make sure to go into the trash and delete them again to fully get rid of them).

Then, I would boycott the site(s) that violated your password privacy. If you really must use a particular site, you could give it a completely unique password and write it down somewhere safe (I suggest an online note-taking tool so that you have access to it wherever you have Internet access).

That’s it! repeat every once in a while, or just watch for new e-mails with passwords in them. Some services will send your password monthly (i.e. the MailMan mailing list server), so those are ones that should definitely be unique.

Until next time… good luck!

In my recent exploration of jQuery, I came across the need to walk the DOM tree, depth-first.

Ad-Hoc

After playing around in FireBug, I came up with an ad-hoc soltution that involves:

• initially: setting the starting node
• then: toggling between:
  • displaying information about it (I was doing a .offset() to figure out where my element positions were going fractional)
  • walking to the first child if it exists; if not, then walking to the next sibling if it exists; if not, then walking to the first ancestor which is not the last sibling

The initial code I entered into FireBug for it looked like this:

// sets the first node
var node = $('body');
// walks to the next element and spits it and it's offset out;
// repeat as many times as you want (until the node is "[]" and the offset is "0, 0")
[
        node = (node.children(':first')[0]) ?
                node.children(':first') :
                ( (node.next()[0]) ?
                        node.next() :
                        node.closest(':not(:last-child)').next()
        ),
        node.offset()
];

And it worked! From my tests, it walks each node, as expected.

jQuery-ized

Then I got to thinking. This would be useful all over. I could… make it a jQuery-ized function! So I tried this:

jQuery.fn.walk = function() {
        var firstChild = this.children(':first');
        if (firstChild[0]) {
                return firstChild;
        } else {
                var nextSibling = this.next()
                if (nextSibling[0])
                        return nextSibling;
                else
                        return this.closest(':not(:last-child)').next();
        }
}

Then you just walk from the initial element node like this:

node = node.walk();

Super jQuery-ized

Once I had this working, I thought, “I can do better still”. After poking around on John Resig’s blog a bit, and playing with different ways of allowing an expression for an argument, I realized that this is either going to be really slow (by grabbing all the elements in the document and finding the next logical one) or really really slow (by using recursion in a fashion similarto above). It might be plausible with full XPath, but I just don’t know enough about Sizzle to make it work efficiently.

Perhaps someday, though! For now, it’s pretty easy to just put the walk in a loop until you get the element type you’re looking for. Best of luck and be sure to correct me if I’m doing this “the hard way”!

I’ve often longed for a way to render something or redirect_to somewhere and finish the action’s execution at that point. Often, I resort to something messy like this:

if cant_move
  render :nothing => true 
  return
end

While playing with Rails today, I realized that there’s no reason (in the world of Ruby) that this shouldn’t work instead:

return render :nothing => true if cant_move

And it does work! I don’t know what it returns (if anything), but it doesn’t matter, since Rails doesn’t do anything with it. It looks a little funny at first with the return ren... in there, and although many Rubyists aren’t a huge fans of using the return keyword, it’s necessary for an “early-out” situation like this.

Now I need to go refactor a bunch of my code…

I’ve recently made the jump to using tests in Rails (2.3 as of this writing); coming from a background in game development, I’ve long stuck to the principle of “build it now, have QA test it later”. However, there comes a time in every programmer’s life when they feel the need to “code smarter, not harder”.

In the process of getting tests into one of my in-development apps, I came across one particular blunder. When trying to run rake test:units for the first time, I received this lovely output:

(in /Users/slippyd/Sites/orgclut2)
/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby -I"lib:test" "/Library/Ruby/Gems/1.8/gems/rake-0.8.7/lib/rake/rake_test_loader.rb" "test/unit/specific_thing_test.rb" "test/unit/helpers/nodes_helper_test.rb" "test/unit/invite_test.rb" "test/unit/mailer_test.rb" "test/unit/node_test.rb" "test/unit/cool_thing_test.rb" "test/unit/pile_test.rb" "test/unit/nifty_thing_test.rb" "test/unit/thing_test.rb" "test/unit/rad_thing_test.rb" "test/unit/better_thing_test.rb" "test/unit/awesome_thing_test.rb" "test/unit/user_test.rb" 
Loaded suite /Library/Ruby/Gems/1.8/gems/rake-0.8.7/lib/rake/rake_test_loader
Started
EEEEEEEEEEEEEEEEEEEEEEEE
Finished in 0.204718 seconds.

  1) Error:
test_the_truth(SpecificThingTest):
ActiveRecord::StatementInvalid: Mysql::Error: Table 'orgclut2_test.things' doesn't exist: DELETE FROM `things`

...

 24) Error:
test_should_unset_remember_token(UserTest):
ActiveRecord::StatementInvalid: Mysql::Error: Table 'orgclut2_test.things' doesn't exist: DELETE FROM `things`


24 tests, 0 assertions, 0 failures, 24 errors
rake aborted!
Command failed with status (1): [/System/Library/Frameworks/Ruby.framework/...]

Immediately, I knew the cause of the problem, my abstract parent class, “Thing”:

class Thing < ActiveRecord::Base
  self.abstract_class = true
  def self::class_from_type(type)
    if type.instance_of?(Class) && type.superclass == Thing
      type
    else
      type = type.to_s.classify
      type << 'Thing' unless type.match(/Thing$/)
      type = type.constantize
    end
  end

  # ...

end

After Googling for a bit and only finding some hints as to the solution (apparently, there aren’t as many people using abstract_class as there are using STI), I tried deleting my Thing fixture (test/fixtures/things.yml).

Voila! All is well again in Test-Land. I hope this helps any future Rubyists who come across this some problem.

Problem

You want your website’s liquid/flexible-width or more-narrow-than-normal fixed-width layout to use a smaller width on mobile platforms with zoomable bowsers (i.e. iPhone OS, Android, WebOS).

Typical Solution

Check the user-agent string (server-side or with JavaScript) for one of the pre-existing zoomable browsers and enforce the width.

Flaws

It will break for any browser (past, present, or future) that you didn’t account for. It will probably break if a future device has a screen sizeIt may break if somehow, the user-agent check matches a non-zoomable browser.

Better Solution

Check if the rendered page’s width is larger than the browser window’s width. Also check if the browser’s screen width is less than the minimum width that your site needs in order to render correctly. If both of these are true, insert the necessary <meta name="viewport" .../> tag.

Implementation

Include this snippet in a JavaScript file that’s referenced between the <head> tags:

// Platform-Independent Zoomable Screen Detection
// Copyright 2009 Slippy Douglas.
// No rights reserved other than making sure this is free to use, modify, redistribute, whatever for forever and ever.
// set the minimum width your site needs to render properly here
var kPageMinWidth = 320;

function writePageMinWidthAdjustment() {
        // if the screen's width is smaller than the page's width
        // (i.e. a zoomable mobile device like the iPhone)
        if (window.screen.width < window.innerWidth) {
                // set the meta-data to the larger of the device's width or the minimum the site needs
                newWidth = Math.max(kPageMinWidth, window.screen.width);
                
                // will write the meta tag right into the <head/>
                document.write('<meta name="viewport" content="width=' + newWidth + '"/>');
        }
}

writePageMinWidthAdjustment();

And voila! Mobile browsers use the correct width. Enjoy.

Note: I’ve decided to publish this post before it’s finished, so that anyone interested can see how far I am (I likely won’t finish today, anyway). Therefore, you may refresh at-will to see the latest updates (you’ll know I’m done when this message goes away).

I’ve been meaning for a while to write up a list of my essential software installs and setup procedures for a new Mac. Now that I finally have my new Mac Pro Quad Xeon Nehalem, I plan on sharing every significant step after start-up that I’ve taking, for future reference. Here we go!

1. System Preferences » Keyboard & Mouse » turned on right-click and set the ball button and side buttons to just be buttons 3 and 4. So annoying.
2. Dragged Macintosh HD, Applications, and my home folder to the Dock. Display as: Folder; View content as: List. So amazingly better.
3. Dock » Position on Screen: Left (to avoid wasting real estate). I would turn hiding on, but I think I’ll just snap it to a smaller size by holding option and dragging left a bit and the “landing strip”. We’ll see how it goes with 1920×1080 × 2 monitors of space.
4. Boot Camp Assistant » 32 GB should be enough for Vista or Windows 7, right? Hmmm… maybe I should research this…
5. Software Update. Might as well get that going. Requires restart. Fine; okay then…
   • Time for round 2 of Software Update. This time, Safari 4.0. Good.
   • After a second restart, I’m GTG.
6. More default config annoyances.
   • System Preferences » Sound » Play alerts through: Internal Speakers; Sound Output Device: Line Out
   • Appearance » Place scroll arrows: At top and bottom. Up is up and down is down, NextStep is ancient and I have stuff to do.
   • Desktop & Screen Saver » Start: Never. Sorry, unnecessarily burning up my processors in not my thing. I may have to consider SETI@Home and/or Folding@home, though…
   • Exposé & Spaces » Spaces tab » Enable Spaces; Show in menu bar; 4 should be fine for now. Activate with F1; my ASUS monitors don’t respond to the brightness keys. Switch between and switch directly with ^? Arrow/Number Keys. I find control-option doesn’t conflict with most things and is easy to hit 1-4 with.
     • I usually keep most stuff in space #1; keep #2 clean for Desktop/filesystem access; #3 is reserved for special projects; and #4 is for long-running background tasks.
   • Exposé & Spaces » Exposé tab » All windows: F3, to match the icon on the key; Application windows: ? F3 for easy access; I never use Show Desktop, so it can be ?? F3; Dashboard: F4 again, to match the key graphic.
   • International » Input Menu » Show that mofo in the menu bar! Character Palette and Keyboard Viewer are essentials.
   • Security: Require password to wake from sleep: Absolutely! Disable automatic login? Absolutely!
   • CDs & DVDs » picture CD: Ignore. Annoying…
   • Displays » Absolutely show in menu bar.
   • Energy Saver: Sleep: Never; Display sleep: yeah, 10 min is fine. Everything else looks fine.
   • Keyboard: Use all F1, F2 keys as standard function keys!!! Otherwise, I can’t customize which does what! Keyboard Shortcuts » Ugg. I’ll set these up as I need to change things.
   • Network » Ethernet 1: DHCP with manual address so I can find my computer by local network IP. I think 192.168.0.7 is appropriate. Connecting to my local network; then disabling Wi-Fi. Just in case I need to use it…
     • Saved it all as “Home – Ethernet Static IP w/ DHCP”. I’ll set up more as I need them.
   • Sharing » Hmmm… need to think of a good name for this beast. File Sharing, Screen Sharing, and Remote Login: On. The 1st is temporary; the 2nd two are permanent (for now).
   • Accounts » change my icon to my standard avatar. Login Options » Enable fast user switching (and fast screen locking!)
   • Date & Time » Set automatically: Yes, please! Time Zone: Seattle, not Cupertino!!! Clock: with seconds, flash time separators (so I can watch my life tick away…)
   • Software Update: Check Daily; why not?
   • Time Machine » in menu bar? No thank you, I’m happy with Mozy remote backup.
   • Universal Access » status in the menu bar: why not.
   • Whew. That was a lot of work. Time for a break (at least from writing, mostly).
7. Activity Monitor
8. Glims
9. ~/Downloads/Installers folder
10. Safari/Glims set-up
11. Bitstream Vera Sans Mono
12. Quicksilver and Login Window shortcut: ??L
13. AppleScript Utility: Show Script in menu bar; Enable GUI Scripting
14. Fast User Switching Color Profile Fix
15. Unity 2.5 Game Engine. I’ve been waiting a long time for this…
16. View Options
    • Icon View: Icon size: 128×128; Grid spacing: all the way down; Text size: 10 pt; Show item info; Arrange by: Name; Use as Defaults
    • Desktop Icon View: Icon size: 96×96; Grid spacing: all the way down; Text size: 10 pt; Label position: Right; Show item info; Arrange by: Kind
    • List View: Text size: 10 pt; drag Date Modified column to the right; Use as Defaults
    • Columns View: Text size: 11 pt
17. TextMate
    • MissingDrawer
18. Adium
19. Growl
20. SynergyKM
21. Little Snitch
22. OnyX & Xupport
23. put swap on it’s own partition
    • chflags hidden /Volumes/swap/
24. Quicktime » Preferences
25. Xupport » settings
26. the latest Firefox beta (3.5 as of now)
    • FireBug
27. Stuffit Expander Their marketing is annoying, but Expander is mighty essential.
28. Screen Lock via Keychain Access
29. SIMBL
30. Git
    • Git for OS X
    • Installing GIT on Mac OS X 10.5 Leopard
    • GitX
31. Xcode & Developer Tools
32. Windows Media® Components for QuickTime
33. VLC media player
34. Microsoft Remote Desktop Connection Client 2
35. Audio Hijack Pro

I was walking home the other day, poking at my iPhone (as usual), and for the eleven billionth time frustration arose over my disorganized Delicious tag library. It's not that I don't have tag naming standards or that I've been neglectful. It's just hard to remember whether the tag I tend to use is idea or ideas or whether it makes more sense to tag something as PalmPre or two tags: Palm and Pre.

So why haven't the folks at Delicious added much-needed features¹ like tag aliasing, parenting, and contextual categorization to their service? Why was their last major release merely a performance improvement with no real new features? (Okay, they added new features, just nothing too exciting.)

Then it hit me: Delicious is simply a basic yet open-ended social network for bookmarking; much like Twitter is for micro-blogging. However, unlike Twitter, I've seen very few attempts² to add functionality to Delicious through it's tagging system; only tools that aggregate existing Delicious content.

1. Clean up existing bookmarks through user-specified rules (i.e. de-pluralization).
2. Provide additional features and actions triggered by a special tag syntax.
3. Organize bookmarks through parenting rules specified with a special tag syntax.

Here's my first shot at an agreed syntax to help achieve these goals (so all our tools work together), based on conventions in use and non-conflicting characters:

• A simple way to specify the context of a tag. This is for situations when the tag doesn't really describe the bookmarked site, but rather some side information about the product or reason for bookmarking.
• example: on:iPhone could be used instead of just iPhone to help differentiate that the site isn't really about the iPhone itself, it just describes a product that runs only on the iPhone.
• example: idea:webdesign or idea:SuperSecretProject could be used to signify that the site is not directly about web design or your code-named SuperSecretProject; it's just a cool idea in the realm of web design or inspiration for SuperSecretProject.
• Search/viewing tools could have options to count the prefix and the suffix as a whole tag (like normal) or as pieces (so that on:iPhone would come up when you do a tag lookup for iphone).

• An extension of the context:… syntax; this invokes an action or connection to another system (much like the built-in for:username syntax). These actions could happen the first time a new bookmark with the chosen prefix is noticed or could be tied to the existence of any and all bookmarks with the prefix.
• example: todo:… could be hooked up to automatically turn the bookmark into a task in a personal organization system. When task is completed, the tag(s) on the bookmark could be changed from todo:read to done:read.

• Used to categorize classification hierarchy in the oh-so-common situation where the name itself isn't specific enough or isn't normally used alone.
• This would also allow one to build a search/viewing tool that filters by just categories, just categorized tags, normal and categorized tags, or otherwise.
• example: Google>Wave could be used to clarify that the site is about Google's upcoming Wave service, not the surf wave report for the San Francisco bay area.
• example: Puget<Sound could be used to tag resources on Puget Sound, while not confusing them with resources on sound (audio) and allowing you to find all your Sound (body of water) resources with a search for “<Sound”.

I tried to think of any use-cases that wouldn't fit into these constructs and the only situation I found was if you didn't want to rely on 3rd-party search/viewing tools. In that case, Apple>iPhone>3GS could be expanded by a tool into the additional tags Apple, iPhone, 3GS, and Apple>iPhone, iPhone>3GS; but that's just unnecessary messiness and complexity (such as matching pieces of those hierarchies to each other).

I also wanted to stay away from floating categorization tags (i.e. just OperatingSystems> or work:), since I believe that tying a category to a particular tag promotes better tag use and cleans up situations like bookmarking a site for multiple purposes. Plus, this is what tag bundles were built for (although a tool could automatically populate bundles…). There may still be a need for a tool that sweeps your bookmarks and fixes capitalization or pluralization, but that's probably best handled off-site and not tied to the tagging systems (don't get me started on the horrors of inventing tags like settings:depluralize:true).

So that's it; I'm going to start converting my tags over to these new syntaxes in preparation for new tools that view my bookmarks based on these formats; for the time being, I think I'll code up a portion of this site to show context:… tags of my choice as a proof-of-concept.

Fellow Delicious-ers, you may commence your opinion-penning below.

To all who will someday dig through the archives of this blog and find this post (since I know no one is currently reading my previous sham of a blog): Welcome!

I’m (once again) relaunching my personal website/blog in the hopes that I can maintain it and keep it up-to-date, unlike my previous attempts. The difference this time Radiant CMS, which is a fairly open-ended CMS with plenty of extensions to add this or that feature (i.e., a typical blog requires enabling or installing the Archive, Blog, Comments, Paperclipped, and Tags extensions), most of which work seamlessly together. It’s also fairly easy to add custom Ruby/Rails code without having to “hack the source”, as I’ve had to do with every CMS I’ve used in the past. Overall, I’m liking it.

For the record, here’s a rundown of the major revisions of my personal website(s), what I used for each, and what worked and didn’t work:

6bitt.com personal blog | 2003-2005

• For the most part, short articles linking to interesting stuff I found on the Internet (afterall, it was pre-Delicious, Facebook, Twitter,…).
• engine: PMachine blogging engine
• pro: Got me up and running in 2003.
• con: Had to hack the source. Pretty primitive by today’s standards.

slippyd.com 1.0 website/resume | 2007

• An intro page and my resume. Built to get a job after college.
• engine: hand-built PHP pages
• con: Spent way too long on coding HTML & CSS for flexible-width cross-browser layout awesomeness.
• pro: I’ve used variations of that HTML & CSS for everthing since.

slippyd.com 2.0 website/resume | 2007-2008

• Added additional content for my various projects and aggregations of social network sites.
• engine: PHP front-end fed by Drupal back-end
• pro: Coded some awesome time-of-day color-shifting AJAX.
• con: Have now deprecated that code with the latest version, due to unnecessary complexity. Had to write Drupal “plug-ins” (hacks) to get it all to work.

slippyd.com 3.0 website/resume/blog | 2008-2009

• An attempt to create my own CMS in Rails and finally start a new blog.
• engine: hand-built Rails app
• pro: Took a remarkably short time to get mostly everything ported over and the basis of the CMS up and running. Much faster than Drupal.
• con: Still took longer than what I wanted to take. Didn’t get to writing much content.

slippyd.com 4.0 website/resume/blog | 2009-now

• A second attempt to start an interesting blog and get stuff I’ve worked on or am working on up on the web.
• engine: Radiant CMS (on Rails), with bits and pieces of custom Ruby code
• pro: Up & running, faster than ever, with modern blogging/CMS features.
• con: Finding time to write up meaningful content isn’t easy.

So there it was and here we are; thanks for reading and hopefully there will be many more wonderful posts ahead. Arevaderche!

It has recently come up that I've written a few utilities that would be useful to others. Since many could benefit from these simple scripts, I'm sharing them in their beta state for any and all.

Basically, they all relate to modifying and removing color profiles from PNGs and JPEGs, primarily so that images match other graphics and CSS hexadecimal colors on web pages and look consistent across all browsers and platforms, whether they support color profiling or not.

All of the tools are simple "droplet" apps, just drop image file(s) on them and they churn out new, fixed images replacing the old ones.

They are free to use and feel free to contact me if you have any problems or have found a bug. Inside, they're really just interfacing with other scripts, but there may still be something I can do about it.

Download AdobePNG Cleaner and ICC Color Profile Suite in the "Play" section (for now).

I've gotten in the habit of locking my work computer whenever I walk away from it. It's a great added layer of security and it takes just a split second to lock and a moment (or two) to unlock. Not that I have much to hide, but it's just good to know that someone won't see something and take it the wrong way or muck with my settings as a practical joke. Unfortunately, it's not as easy as "Meta"-L on a Mac.

Enter Butler. A tremendously useful customization tool to some; a light-weight background task to satiate my need for a simple, but missing feature on the Mac. I've simply set it up to respond to Command-Shift-L by pulling up the Login Window, which is essentially the same effect as Windows' screen lock.

Set-up (once Butler is installed) is simple:

1. Go into System Preferences' Accounts pane, click Login Options, and turn on "Enable fast user switching".
2. Open up Butler's Customize/Configuration window and create a new "Smart Item > Fast user switching".
3. Click the Hot Key field and type in your hot key combo of choice.
4. Optional: If you're like me, you won't want all the other stuff Butler provides initially, so you can drag it all to the Hidden group to retain it for future use.

Again, I have nothing against using Butler to its fullest; I just have my bookmarks in my Delicious tab that's always open or nearby, web search in the corner of my browser window, dictionary search in the same place or on my Dashboard, quick Volume/HD/App/Home access in my Docs, you get the point. Regardless, I couldn't find a tool that does what I need better.

Get it at <http://www.manytricks.com/butler/>