Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/tangible/public_html/textpattern/lib/txplib_db.php on line 14
Tangible: Page 2
Aug 20 2007

Hey, I'm in CPAN...

....and I didn’t even know it!

A few weeks ago I helped Gozer with some CSS to style some error_log output in a web page in a not-completely-ugly sort of way.

Well! He’s gone and released the module on CPAN and given me credit for the artwork.

Thanks Gozer!

Aug 13 2007

Presenting: XULApps.Net

After reading David Boswell’s post on Finding XUL Applications in which he laments the lack of a central repository for links to XUL applications, I decided to jump in and create XULApps.Net

I put in a bunch of XUL applications, but I know that there are more out there.

If you have created or know of an XUL application, reference site, or blog that isn’t in the directory, you’re welcome to visit the site and add it to the appropriate category.

XULApps.Net

Aug 08 2007

Get a div to expand around floated content

Floated elements are a common element of many pages, and dealing with them can be a bit tricky.

The Problem

When your parent div contains a floated element that has a height greater than that of the non-floated elements in the parent div, the floated element will expand past the border of the parent div.

Here’s a simple page with this problem

Here’s the source code:

<html>
    <head>
        <title>
            CSS Demo: 
            Expanding divs to surround their floated contents
        </title>
        <style>
            div {
                padding: 1em;
            }
            #container {
                border:   1px solid black;
                background-color: #ccc;
                padding:  1em;
                margin: 1em;
            }
            #floated_div {
                float:  left;
                width:  200px;
                border: 1px solid red;
            }
            #content_div {
                width:  150px;
                margin-left: 250px;
                border: 1px solid blue;
            }
        </style>
    <head>
    <body>
        <div id="container">
            I am the container div.
            <div id="floated_div">
                <p>
                    I've got a lot of stuff in me, and will 
                    overflow the boundaries of the container div.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer 
                    adipiscing elit. 
                    Suspendisse eleifend lorem id sapien. 
                    Nam eget odio. In 
                    diam. In quis massa non lorem sollicitudin 
                    pretium. 
                    Praesent enim purus, nonummy in, varius 
                    ut, consequat a, 
                    nisi. Etiam at turpis. Praesent porttitor eleifend 
                    magna. 
                    Aliquam erat volutpat. Fusce porta blandit dui. 
                    Suspendisse 
                    rutrum est in urna. Nullam condimentum arcu a 
                    nulla. Mauris 
                    suscipit accumsan urna.
                </p>
                <p>
                    Nunc erat lacus, euismod quis, malesuada quis, 
                    ultricies 
                    at, tortor. Vestibulum placerat scelerisque arcu. Ut 
                    ultrices mi ac augue. Mauris condimentum molestie 
                    enim. 
                    Integer sem. Lorem ipsum dolor sit amet, 
                    consectetuer 
                    adipiscing elit. Nulla facilisi. Integer ac sem. Sed 
                    ipsum 
                    purus, mattis eget, sodales et, semper ac, sapien. 
                    Morbi 
                    ipsum neque, pretium at, placerat nec, sodales non, 
                    orci. 
                    Cras magna risus, lacinia eget, sagittis sit amet, 
                    egestas 
                    id, quam. Cras quis diam. Cras varius metus et est. 
                    Aliquam 
                    ullamcorper, massa a rutrum porttitor, tellus nibh 
                    elementum
                    tortor, vitae pulvinar nulla ante eu magna. Lorem 
                    ipsum dolor 
                    sit amet, consectetuer adipiscing elit. Curabitur 
                    laoreet 
                    elit at est. Duis at libero id lorem ultricies accumsan. 
                    Sed 
                    gravida volutpat nibh.
                </p>
                <p>
                    Proin hendrerit accumsan arcu. Maecenas aliquam, 
                    urna eget 
                    ornare facilisis, justo felis ultrices enim, vel porttitor 
                    tellus lorem a metus. Class aptent taciti sociosqu ad 
                    litora 
                    torquent per conubia nostra, per inceptos 
                    hymenaeos. Nulla 
                    ante. Suspendisse potenti. Sed feugiat imperdiet 
                    arcu. In 
                    tellus eros, pretium at, ultrices sed, fermentum eu, 
                    enim. 
                    Donec nisl mi, egestas et, malesuada at, varius quis, 
                    nibh. 
                    Proin dignissim mattis libero. Sed tellus quam, 
                    dapibus eget, 
                    mollis quis, vehicula a, massa.
                </p>
            </div>
            <div id="content_div">
                I'm an unfloated content div.  
                <br />
                My parent div will expand to fit around me.
            </div>
        </div>
    </body>
</html>

The parent div has a background that I’d like to have extend behind the floated content, but the way it is right now, it won’t work.

The Solution

The solution is surprisingly simple. If you add a div with clear:both as it’s style just before the parent div closes, the parent div will expand to fit the floated div.

See the solution

Why does it work?

When you specify clear:both as the style on an element, that element will clear all divs above it to the left and the right. This forces the clear:both div below the floating div’s lower boundary.

Since the clear:both div isn’t floated, it forces it’s parent div to expand to fit.

Comment [18]
Jul 30 2007

A Google Search Feature I'd Like to See

1 US pint = 2 US cups

Currently, Google will do certain calculations, conversions and information look-ups when you type them into the search box.

For instance, you can ask it to convert pints into cups, or miles to kilometers.

There are similar features for getting the population of cities, the current weather, movie listings and word definitions.

I’d like to see Google do some date math so that I can ask it things like “today + 14 weeks” and it would give me information about that day.

Perhaps there’s another search engine or tool out there that does this already? If you know of one, please post about it in the comments.

Comment [1]
Jul 19 2007

Apps - Process Explorer

When a file is in use by another program wouldn’t it be nice to know what program it is instead of randomly shutting down applications until you find the right one?

Well, today’s your lucky day.

Download the Windows SysInternals Process Explorer program and save it somewhere sensible like C:\ProcessExplorer\ There’s no installer, so where you save it is where you’ll be running it from.

Run the application, then go to Find -> Find Handle or DLL… and then type in the filename for the file that’s being used by another program.

Click search, and you’ll get a list of applications that are accessing the file.

Now you know which application you need to close to make changes to your file.

Comment [2]
Jul 10 2007

New RSS Feed

Tangible is now using Feedburner for it’s RSS feed.

For now, the old feed will still work, but in a month I’m going to turn it off, so now is a good time to switch your subscription over to Feedburner.

Just click on the RSS icon to the right and add the new feed to your reader!

May 08 2007

Shaking off Tiredness

Maybe you had a bad night’s sleep, or you’ve just been stressed out for a while. For whatever reason, you’re not feeling very alert and it’s making for a very long day of newbie mistakes and clock watching.

A lot of people use coffee, red bull or other caffeine-rich drinks to deal with this feeling. I find it leaves me feeling shaky and occasionally nauseated.

Whenever I feel like I’m danger of performing a keyboard face plant at my desk, I have sushi for lunch…but not just any sushi: salmon & avocado sushi made with brown rice, and goma-ae (a cooked spinach salad with miso-sesame dressing) on the side.

Why? It’s a highly nutritious meal and provides a good dose of healthy fats, protein and complex carbohydrates. The brown rice contains B vitamins, which help to increase energy levels.

After a meal like this, I feel a more alert, less physically tired and able to take on the rest of my daily tasks without drifting off into the middle distance too often.

How do you take care of yourself on days like this?

Comment [4]
May 03 2007

Testing the Unknown

One of the guidelines to follow when writing functional tests is to use real-world data in your tests.

So, how do you write real-world tests for an inherited application that deals with a subject matter on which you have insufficient knowledge?

You don’t. Really!

Selenium IDE to the rescue!

The Selenium IDE is a fantastic Firefox plugin that lets you record everything you do in your browser and then lets you replay, step through or edit the recording.

When faced with functional testing an application in an obscure-to-you field, you can have someone who knows what the application should do run through a bunch of activities with Selenium IDE recording every move they make.

Then you can go back through the recorded test and start building up a test suite.

Hurray!

May 01 2007

xkcd Takes on Regular Expressions

Some of you may have seen this already, but hey, I just found out about it today, so I’m posting it. Click for the full-sized version.


Regular Expression Heroics

May 01 2007

A New Design!

I’ve renovated the site with a slick new design.

I was inspired by by the layouts on Alessandro Fulciniti’s Nifty Corners Cube web site. In fact, I used his handy javascripts to make all these nice round corners without any images.

Hope you like the new design!

Previous Next