Category: Geekery

I was making a web site and there is a set of steps you have to go through. I thought it would be a good idea to have one of those bars across the top that shows you the steps you’ve done and what you have to do. You can see them when you’re checking out on Amazon, and when you’re ordering pizza on the Dominos site, among many others. The first problem I had was that nobody seems to know what to call these damn things, so it’s hard to google for them. If you google for “progress meter” or “progress bar”, you mostly find those ones like you see when you’re downloading files, where it says “20 minutes to go” and then 2 minutes later it says “10 minutes to go” and then 3 hours later it says “5 minutes to go”. If you google for “breadcrumb” you get the navigation type where you click on the items to navigate. So that was my first problem.

I eventually found one that I liked the look of, but it had one minor problem and one major problem. The minor problem was that you had to put in the number of elements at the top, which was a little tacky. The major problem was that when when I shrunk the screen down (ie. when I displayed it on an iPhone) things got all wonky and the lines and dots didn’t line up correctly. So I was thinking maybe I could do it using a table with a border along the bottom, but while I was playing around with that option, I discovered this answer in StackOverflow that would allow the divs to act like tables.

So I threw the two ideas into a blender and came up with the following CSS:
div.progtrckr-table {
width: 100%;
display: table;
table-layout: fixed;
margin-bottom: 20px;
}
div.progtrckr-table div {
display: table-cell;
width: 2%;
text-align: center;
padding-bottom: 0.5em;
vertical-align: bottom;
}
div.progtrckr-table div.progtrckr-done,
div.progtrckr-table div.progtrckr-doing {
color: black;
border-bottom: 4px solid yellowgreen;
}
div.progtrckr-table div.progtrckr-todo {
color: silver;
border-bottom: 4px solid silver;
}
div.progtrckr-table div:after {
content: "\00a0\00a0";
}
div.progtrckr-table div:after {
position: relative;
float: left;
left: 50%;
bottom: -1.3em;
line-height: 1.2em;
}
div.progtrckr-table div.progtrckr-done:after {
content: "\2713";
color: white;
background-color: yellowgreen;
height: 1.2em;
width: 1.2em;
border: none;
border-radius: 1.2em;
}
div.progtrckr-table div.progtrckr-doing:after {
content: "\039F";
color: yellowgreen;
background-color: white;
font-size: 1.5em;
bottom: -1.1em;
}
div.progtrckr-table div.progtrckr-todo:after {
content: "\039F";
color: silver;
background-color: white;
font-size: 1.5em;
bottom: -1.1em;
}

You can use it just by making a div of divs, like so:
<div class="progtrckr-table">
<div class="progtrckr-done">Pickup/Delivery Options</div>
<div class="progtrckr-done">Check Availability</div>
<div class="progtrckr-doing">Reserve Boards</div>
<div class="progtrckr-todo">Checkout</div>
</div>

When I first tried it, I still had a bit of a problem where the dots weren’t lining up correctly on a small screen. That’s when I discovered that there was something in the inherited CSS that was changing the line-height. I added a line-height: normal; to the div.progtrckr-table block, and all was well. I’m pretty happy with the results.

If you want to play with it, click the “Edit in JSFiddle” in the below:
[dciframe]http://jsfiddle.net/ptomblin/y26Xp/embedded/result/,100%,300,0,auto,border:1px solid blue;align:left;[/dciframe]

A little while ago, an epic rant from the co-founder of Liberty Bottle Works went viral. You can see stories about it here and here. Now, I like a company that puts their employees family time above the “Me Generation”‘s whiny entitlement, and I thought I could use a new water bottle, so I ordered one.

It arrived a few days ago, and it’s really nice bottle. But the valve that lets air into the bottle when you suck on it makes a funny little squeaking sound. So I wrote to the company, making it clear that I wasn’t complaining, just asking if they had any strategies to mitigate the noise. The response I got has a formatting change in the middle that makes me think this is a semi-canned response, but it’s still pretty awesome:

First off thank you for your support, it really means a lot to us.

I am sorry for the noise you are getting from the straw, here are a few tips to try and help that:
Regarding the cap. We have found that a few caps (when fresh off the line) may make a signature “Liberty” noise. There has been some debate as to which spirit animal this noise is indicative of. Some folks believe it to be the illusive “purr” of the Sasquatch, however for more practical reasons we believe it to be more closely related to the majestic dolphin (who knows what sound a Tuna makes). Albeit, as cute as it is, I agree that the call of the majestic dolphin should be reserved for the ocean as it can be a little disruptive in class, at the office, the gym, or during ones morning Yoga. FYI, Sasquatches are really into Yoga.

Although the most likely cause of this unique audible phenomenon is rare and unintended, it is however by design. The noise may be due to our precision molding along with the strategic placement of the umbrella “flutter” valve as well as the assembly process of our sport caps, each individually built by hand. On the underside of your cap, you’ll see a flat rubber upside down “umbrella” that is about 1cm wide. When using the bottle in “sippa” mode via the spout, air must go through the umbrella valve into the bottle to replace the volume of water leaving the otherwise sealed container. The passage of air through the umbrella valve in association with the inherent back pressure of fluid may cause the tightly placed (hand installed) umbrella valve to flutter and vibrate thus creating the majestic acoustic sounds of the dolphin.

> How can I make it stop?
So, what can be done? First I would try opening the cap and running warm water (please be careful) directly onto both sides of the umbrella valve. Then, while the rubber is softened, use your finger on the top of the opened cap to push the little rubber “bead” (that holds the umbrella valve in place) down through the cap. What we are trying to do is create just the slightest amount of space between the underside of the molded cap and the rubber umbrella valve. That should do the trick. Replace the cap and test to see if we’ve set the dolphin free.

In most of these cases the sound will also go away once the valve relaxes with normal use. However, if your dolphin is stubborn and refuses to swim off into the ocean blue, I’ll be happy to send you a replacement cap of your choice at no charge. After all, we stand behind or products 100%.

Thank you for your support and for the opportunity to provide you with a better product, made by friends right here in Washington State.

If there are any other questions I can answer please let me know!

Thanks,

Denise Fischer
Customer Service Manager

I must say, I love these guys. If you’re in the market for a metal water bottle, you could do a lot worse.

So a few years ago I was kind of despairing that all the new languages and frameworks came with utterly huge learning curves. It used to be easy to learn a new language – you’d sit down with the manual, read it over a weekend, and by Tuesday at the latest you’d be an expert. At least that’s how it was for me when a language manual was the size of K&R – 228 pages. These days a language manual is more like this one – 1632 pages, and that doesn’t even get into the web development frameworks, the IDEs, the debuggers, the various Object Relation Models, the continuous integration stuff, the virtual environments, etc etc etc. It’s very daunting. And because of that, I was beginning to think I was going to be stuck in a rut called “Java” until I retired. I believe I used the phrase “I’m too old for this shit” more than once.

But that’s changed now. In the last 3 or 4 years I’ve

• Become moderately proficient at XSLT
• Become really proficient at DOM manipulation and AJAX code using Javascript and jQuery (and lately with Coffeescript) – haven’t felt the need to learn much about object oriented prototype based stuff yet.
• Learned Perl::Mason and made a website using it which makes extensive use of AJAX
• Learned Python and Django and made a website using them which make extensive use of AJAX
• Used the Bootstrap Framework to make the front end of the Django website.
• This week I started a side project where I’m writing a plugin for WordPress using PHP, another language I’ve never used before.

The difference is that these days I don’t let the enormity of the task get me down. Instead of trying to absorb the whole thing in one weekend, I go incrementally. I cargo-cult some code, write some more, google up the pieces I’m missing, and keep writing code. I don’t have to learn new IDEs because gvim still rocks, and I know how to use print statements to debug the way I’ve been doing for 30 odd years, so why get bogged down learning a million new things? Learn a few as you need them, and worry about the other stuff when you have time. Which, come to think of it, is pretty much how I became proficient at Unix, C, C++, Java, etc.

As an aside, I find it scary that StackOverflow’s SEO is so much better than everybody else’s so if you ask Google “set timezone in PHP” the first couple of results will be StackOverflow, and you have to look further down the page to find the official documentation. Especially since the StackOverflow hits will all have been closed as duplicates of each other. Much as I love StackOverflow as a resource, it’s usually better to find the official references if you can.