Unintuitve effect of overflow:hidden

I found myself having to fit a textarea into a space which had user-provided CSS (“skins”) applied to it. This worked surprisingly well, but someone found a skin which had a right-floated sidebar which was playing hell with the textarea, since the textarea needed a fixed width and textareas refuse to overlap floats. So the textare got pushed way down, which looked terrible.

(To make things easier to see, the textarea will be background:transparent throughout.)

I looked into absolute positioning to solve my woes, and put the textarea in a position:relative div with an appropriate height, and set the textarea to be position:absolute in the top-left of that div. This got me closer.

After this I just started fiddling with it. It occurred to me to try overflow:hidden on the textarea’s container, which had an effect I did not expect.

So. Overflow:hidden + absolute positioning + floats = floats not interfering with content. I’m sure this follows rationally from the CSS spec, but I totally didn’t expect the effect.

Further experimentation did reveal that it’s not specific to textareas. Any absolutely positioned content will have this effect if its relative container has overflow:hidden.

Identical effect in: FF3, Chrome, and IE8. Not tested elsewhere yet.

You can see all the CSS involved on this demo page.

(@cheald says that it looks like a variant on Pup’s Box Flow Hack. I’m just happy to have independently stumbled onto something that weird.)

Change your surroundings

I work from home. I like it. However, it’s easy to get distracted and slack off.

I find that the longer I spend with my workplace set up in one location at home, the less productive I get. I seem to come to associate that spot with being distracted, instead of working.

So I move regularly. Spend a few days/weeks with one workplace, then move to another in my home. Or spend a week going out to a coffee shop every day to work there. It breaks the association and lets me get things done.

Works for me, anyway.

My experience working in offices indicates that the peer pressure of other people being around working balances out the accumulated slacking habits of a single desk. Still, given the choice I’d rather work at home and have to move around.

Simplecomic

Another new-ish release, this time a PHP webcomic content management system called simplecomic.

Features:

  • Multiple comics per day
  • Schedule posting of comics in advance
  • Masking of comic filenames so scheduled comics can’t be easily found
  • Comic descriptions, alt text, and transcripts
  • Optional chapter divisions for comics
  • “Rants” as a lightweight blog, with scheduled posting
  • Theme system
  • Static pages
  • Support for the frontpage showing the first comic from the most recent day with comics, to allow posting of “issues”

I wrote it for a friend who wanted to start her own webcomic and wasn’t happy with the existing options in the field of webcomic CMSes.

You can see an example here. It’s a dead webcomic that I happen to be hosting for sentimental reasons. Ignore the Comic Sans… it’s also there for sentimental reasons. :P

Get it on github.

maphilight 1.2

I finally got around to officially releasing maphilight 1.2.

This mostly just updates the official jquery.com release to the HEAD of the github project.

I’d been putting it off because I spent quite a while without easy access to a Windows machine with IE8 to test the fixes that people provided. But I switched back to Windows as my main desktop recently (mainly to play games), so that was resolved.

There’s not much in the way of changes:

  • IE8 works now
  • New “neverOn” option for use with metadata by Zach Dennis, which stops individual areas from ever being hilighted
  • Handles being called on the same area twice differently; now rebuilds the hilighted regions
  • …and I added an example of triggering the hilight from another element, since it’s one of the most commonly asked questions

Hopefully I’ll be able to post here a bit more now that I have some of that guilt for not updating off my shoulders. :P

A jQuery 1.3 quirk that bit me

deviantART just upgraded to jQuery 1.3, and we found an undocumented jQuery change that broke some things.

The behavior of the :enabled selector changed. Before it selected all enabled form elements, now it selects all enabled and non-hidden form elements. This bit us, because we were using jQuery to assemble some form elements to submit over xmlhttprequest… and now some hidden fields weren’t getting included.

This means that if you were using :enabled, you now need to use :not(:disabled) to get the old behavior.

A bit of googling turned up that this is a deliberate change, to match the behavior of querySelectorAll in browsers that have implemented it. I’d disagree with the phrasing John Resig used, “more standards compliant”, since “enabled” has a specific meaning in the standards.

This should really have been in the release notes

Smart Home in TextMate

I really like “smart home” behavior in text editors. That is, I like it when pressing the “home” key first moves the cursor to the start of the indented text on that line, and then to the very beginning of the line on a second press.

I go out of my way to enable this behavior, where possible. For instance, I wrote a gedit plugin to get it working properly in gedit, the Gnome text editor.

Unfortunately, TextMate is a harder nut to crack. I worked out the following as a TextMate command, and bound it to command-left:

#!/usr/bin/ruby

current_line = ENV['TM_LINE_NUMBER']
current_column  = ENV['TM_LINE_INDEX'].to_i
whitespace_column = /^(\s*)/.match(ENV['TM_CURRENT_LINE'])[1].length + 1

column = if current_column == 0 or current_column > whitespace_column
           whitespace_column
         else
           0
         end

`open "txmt://open?line=#{current_line}&column=#{column}"`

It works, but is far too slow to be usable for me. There’s a perceptible lag of probably around 100-200ms between hitting the shortcut and the cursor moving.

I think this is an unavoidable limitation of TextMate’s approach to letting commands navigate within the file. It has to spawn a process to run the command, and the command then spawns a process to run the OSX command open which handles a txmt:// protocol that TextMate has registered with the OS. There’s some inherent inefficiency there.

(Writing a command with pure shell scripting doesn’t help, incidentally. It’s slightly faster, but still not enough to be worth it.)