Vanderbrew

I’ve been doing some HTML/CSS/JS work for various clients at work recently and I’ve come across some very useful articles/tips for doing stuff. I’m sure none of this is new but if I only encountered it recently, maybe others haven’t yet.

Selfclearing Elements - Don’t you hate it when you float an element and the container doesn’t get the height correctly. Then, maybe you float the container, but that causes problems with other things. Then you try adding an element just to hang a clear on to fix it and now you’re cluttering up your pristine markup with garbage… There is a solution and it’s even elegant.

z-index/stacking - So, if you want something to appear above something else on a page, you just give it a higher z-index, right? That’s what I’ve always thought but I was never really satisfied with that because it didn’t always work the way I expected it to. I didn’t totally understand it so, when I had to fix something with z-indexes, I tended to just try different values in different places until I found something that works. No more. I found Overlapping and Z index and now it all makes sense.

JavaScript the JSON way - It’s pretty amazing how far the JavaScript language has come in the last few years. One of the coolest things I’ve seen recently is the technique for organizing your code with JSON to prevent function name collision and make things generally cleaner. Dustin Diaz has a great introduction to the method that will get you rolling with the JSON goodness.

I’ve been doing JavaScript programming off and on for a number of years and I feel pretty competent. I know I don’t have a super deep grasp of the fundamentals but I understand how AJAX works, the benefits of sandboxing your code with JSON and some of how libraries such as jQuery and prototype work. I knew that there were gaps and that I didn’t have the real grounding necessary to totally understand how everything works but I never thought much about how to go about filling in the blanks.

Then I came across this blog post yesterday. I’ve watched parts 1 and 2 and I’m really impressed by how Douglas Crockford clearly and succinctly presents very basic info on the language and is laying the groundwork for a much better understanding of it. I know feel like I’ve got a really good grasp on concepts that before I sort of understood.

The lectures are very watchable and I really encourage anyone who’s interested in learning JavaScript or getting a better understanding of the fundamentals to watch them.

We’re going to build a house. Correction - we’re going to design and build a house.

We’re not going to buy a house that’s already built. We’re not going to pay someone to build it (though I’m sure we’ll hire out some aspects of it). We’re likely not going to buy plans and implement them.

I think that we’ll build a Post and Beam style house. I really like the way they look and we want a pretty open floor plan. I’ve always liked the look of P&B houses and since this is (likely) the one and only house we’ll build, I want to really do it “right”.

I’m struggling with what kind of base to build on. I’d like to do a slab for the thermal benefits and cost-savings, but I’m worried about getting a flat enough spot to pour one. We may end up with a perimeter foundation - we’ll have to see.

I really want to incorporate as many passive solar features as possible.

At this point, we’re really in the think and plan and research phase. We’ve got numerous books out from the library and we’re just trying to figure out what it really is that we want and how best to acheive it.

I’m working on a Rails app using RJS and Prototype Window Class. I needed to be able to return an anonymous JavaScript function in my RJS template but when passing it in a string to page.call it kept getting quoted and didn’t work right (as you would expect).

I solved it by creating a JavaScriptFunction class and helpers so that it’s easily usable in an RJS template. Browse the plugin or install it:

# With subversion
./script/plugin install -x http://svn.vanderbrew.com/svn/repos/plugins/javascript_function/

# Without subversion
./script/plugin install http://svn.vanderbrew.com/svn/repos/plugins/javascript_function/

To use it, just do:

page.call 'Dialog.confirm', "New Thing - do you want to add it?",
            { :windowParameters => { :width => 300 },
              :sokLabel => 'Yes',
              :cancelLabel => 'No',
              :buttonClass => 'myButtonClass',
              :id => 'myDialogId',
              :cancel => anonymous_javascript_function(:parameters => ["win"],
                         :body => "$('#{@element_id}').innerHTML = '#{escape_javascript @thing.name}'"),
              :sok => anonymous_javascript_function(:parameters => ["win"],
                         :body => "return true;")
            }

It’s my first plugin so I’m open to any feedback you have about it. Please use the Contact form to reach me.

Note - the keys :sokLabel and :sok shouldn’t have an ’s’ in the front for real implementation with the JS library - I did that to prevent an emoticon from appearing thanks to WordPress.

So, as you probably noticed, my creative writing on the site has fallen off quite a bit lately. It seems that I can focus on creative writing or I can focus on coding, but I’m not so good at doing both at the same time.

I’m going to be focusing on coding for the foreseeable future because that’s where I want to allocate my time right now. I’ve got a big unfinished project in that arena and it’s time to make some progress on it, hopefully contributing back to the community as I go.

I hope to return to more consistent writing in the future and I’m sure that I’ll have the occasional line here and there but I don’t think that there will be very many for a few months. I’ve created a Creativity feed and if you’re just visiting for the writing I encourage you to simply track that with your feed aggregator.

So, I’ve thought a bit more about this since my previous post and the comments it brought on.

I don’t think I need to do anything about my email right now. Everything there is actionable as necessary and I can easily shove individual messages around. Also, I don’t get a lot of mail that I need to go back to and treat like a bit of reference and when I do, I have several different contexts:

• Date
• Subject
• Sender

Each of which make it easier to find what I’m looking for. So, I’m gonna let the sleeping dog snooze a bit longer.

Now, when I talk about keeping track of electronic data, I really mean web pages. I consume web pages in two ways:

• Web Browser - just finding them as I go
• RSS Feed Aggregator

A web browser is easy, I can just use a bookmarklet to add the web page to a bookmark aggregation system and tag it with the relevant info so that it’s easy to find again later. In an RSS reader it’s a bit more complicated…

I’ve been using Shrook for a couple years now and, on the whole, I’m pretty happy with it. I’ve been feeling like making a change, but I think it’s a desire for change just for the sake of change - just to shake things up a bit. I tend to “flag” articles that look interesting so that I can go back to them if I need/want to - only, I never do. It’s just a whole bunch of articles that are flagged and have no really useful associated info. I can’t tag them in any way…

I know! I’ll look for an RSS aggregator that supports tags on articles/stories!

Well, as far as I can tell, it doesn’t exist. At first this seemed odd - but as I thought about it for a bit I came around to a different view of the situation. An RSS aggregator is a delivery mechanism. It just acts as a big funnel for you to direct specific information right to you. That’s all it is. I’m not sure that an aggregator should even have the ability to flag articles. So, if you don’t tag/track articles in an aggregator, what do you use?

After some further thought I came to a startling relevation - these articles are just web pages (duh). I’ve already discovered a tool for keeping track of web pages. I just need to get interesting web pages out of the aggregator and into the bookmark organizer. Eventually, I’d like to be able to do it from within the aggregator, probably via Applescript. Initially, I think I’ll just open each link I want to save in Safari and use the bookmarklet to save it. Doing it in Applescript means giving up Shrook because it doesn’t appear to support any Applescript but I’m trying out Vienna and so far it looks promising.

Ok, so I’ve got the outline of a solution - I just need to find a bookmark managing solution. As I said before, I’ve been using Yahoo! but I don’t think it’s ever been more than adequate. I started using it when I ran across it somehow and realized it would be useful. Then, I went through a period when I wasn’t using it and lately I’ve gone back to using it - but it never really felt right. I’m not sure why.

I know that the dominant player is de.licio.us but I don’t really like how their UI looks. The only other one I’ve seen is Ma.gnolia and it seems really nice:

• It’s got a pleasant UI
• I’ve seen blog posts about it
• It’s a Rails app (which shouldn’t matter, but it does)
• Ma.gnolia’s product manager actually commented on my last post - Thanks, Todd, it was a nice touch
• I want to go with a smaller, more personal-feeling company

So, I’m signed up and diving right in. I’ve imported all my bookmarks from Yahoo! and I’m working on copying the tags over since they weren’t in the export. While I was working on this, I noticed something interesting - I can get RSS feeds for bookmarks with specific tags assigned to them!

This opens up a whole new way of looking at my bookmarks. I’ve used ‘toread’ in the past to mark articles that I don’t have time to read now, but would like to in the future. However, I generally forget to look for that tag and it just gets lost amidst all the other ones and I never actually go back to it. I spend a lot of time in my RSS reader and it’s really good at indicating when you haven’t read something so all I have to do is subscribe to my ‘toread’ tag feed and I have an automatic means of keeping track of the things I wanted to read without them getting lost in the shuffle.

But, it doesn’t have to end there. I’m planning on using a few other tags in similar ways:

• toread - web pages that I want to read but don’t have time for now
• followup - an interesting idea that deserves following up on - not just reading but maybe installing and/or messing with code
• toblog - a web page to blog about at some point in the future
• linkroll - links to show up on a link roll

So, I think that this will work well. I feel like I’ve got a plan, I’ll be using tools in a more appropriate way and life will be better. I’ll keep you posted.

So, I’m reading Getting Things Done and I’m enjoying it. I think that there’s a lot of good info in it and it will be very useful. However, I’ve run across one snag…

The author, David Allen, is really big on having a good general knowledge filing system. He seems to think it’s the cornerstone of keeping your life in check, but the filing system described in his book is entirely paper based. He even talks about printing out emails you want to save so that you can file them.

I “live my life online”. I work on a computer all day. I telecommute. I deal with email, IM, PDF, HTML, etc. Almost all of the data that I would want to index and search on is electronic. To make things worse, I’ve got a work computer and a personal computer which are two different OS’s.

How does one keep all of his (or her) electronic bits in order and organized so that you can find what you want when you want it? I’ve got Google Desktop on my work machine and Spotlight on my personal machine but I’ve had less than stellar success with each of them. I do use Yahoo!’s MyWeb to tag and aggregate bookmarks that I care about but it’s an effort to go there because the system isn’t integrated with my desktop, it’s separate and online. I’ve heard about del.icio.us and ma.gnolia and they’re in a very similar vein to Yahoo!’s tool, but they all feel like they’re intended more for discovery and sharing, not storage and organizing.

Also, this completely ignores emails. I can use the above-mentioned tools to tag URLs and this provides a rather sophisticated, if simple, tool for organization, but I don’t have a similar means for email (that I know of). At work I use Outlook and at home I use Mail. I’d consider a different mail client at home if it was stable and did everything I needed but I don’t know of anything out there that meets my needs (IMAP is a big one).

Anyway, I don’t have a solution, nor do I expect to find the perfect one anytime soon. I’d be interested in hearing about how others are solving this problem and I’ll definitely let you know if I figure out a better way.

I purchased a copy of Chad Fowler’s excellent Rails Recipes recently. He’s got a few recipes dealing with edit in place and one about building local autocomplete. I pulled these recipes together into a single solution that gives me an edit in place with local autocomplete functionality.

Rails Helper
I created a couple Rails helper functions to encapsulate the functionality so I can call it with one function in my view. View the source, with syntax highlighting.

JavaScript
I had to extend the existing Scriptaculous code to support my specific functionality. View the source, with syntax highlighting.

Implementation
Now, you just include the JS in your page and use the new helper to build the UI component.

<%= in_place_editor_field_with_local_autocomplete :recipe,
                                                  :cookbook_title,
                                                  {},
                                                  {},
                                                  {
                                                    :catalog => ‘cookbooks’,
                                                    :fullSearch => true,
                                                    :frequency => 0,
                                                    :minChars => 2
                                                  }
%>

Update
Ola Bini has developed an InPlaceEditor with Autocomplete plugin for Rails. Definitely worth a look.

So, I’m working on a new design for the site.

Here’s what I’ve got so far. Any thoughts?

Well, I finally got the pictures posted for the trip that Adam and I took back in April. I wanted to move to a different solution for hosting the pictures and it took me a while to figure out what I wanted and then to do it.

I’m pretty pleased with the result. I’m using gullery from Geoffrey Grosenbach. I’ve got some grand plans for integrating my blog and photos and I needed a more dynamic platform for the photos to move it along.

Please let me know if you’ve got any suggestions about the gallery software or comments on the pics!