Muddled Ramblings and Half-Baked Ideas » geek

Google Calculator

Jerry — Tue, 01 Jun 2010 19:05:17 +0000

Here’s a little trick I discovered by accident a while back: Go to Google, and put 250-(tan(4pi/6))^2 into the search field. Hey presto! It does the math. This came in handy yesterday as I was evaluating things like

E.x = Origin.x + sqrt(1/((r_v²/r_h⁴)(tan²θ) + 1/r_v²)

To find the point on an ellipse where the tangent is at a given angle. My little calculator widget was not remotely up to the task.

Cascading Style Sheets (CSS) and PHP

Jerry — Sun, 30 May 2010 20:07:21 +0000

Often when dealing with Cascading Style sheets, or CSS, I find myself wishing that the CSS mechanism included variables. This is especially true when dealing with colors, since you want the same color applied to lots of different things. It can be a real pain to go back through an old style sheet and find the code for the color you want. I was quietly surprised that no one making up how CSS worked had addressed something like this.

Then, a while back I was giving a buddy of mine a few exercises to introduce him to the exciting world of Web programming, touching on CSS, HTML, PHP and MySQL. I gave him pretty much no guidance; I just thought up plans that would introduce him to the concepts and gave him a list of my favorite references. (I’ll be posting those exercises here in the nearish future.)

Anyway, without me to tell him how to do things, he went and dug around and one of the first style sheets he sent me for evaluation had a .php extension rather than .css.

Bingo! Once you see it in action, it’s obvious. PHP can be used to generate CSS files just as easily as it can be used to generate HTML files. Now my style sheets can change based on external conditions or can simply define a set of colors that all the style definitions share. Why did it take me so long to figure this out? It seems like this technique should be a lot more common than it is.

Here’s a quick code snippet for those who want to try it for themselves:


	header('Content-Type: text/css');
 
	$header_back_color = '#dddddd';
?>
 
#corner_table th {
	background-color: echo $header_back_color ?>;
	text-align: center;
}

A couple of notes: the

In the of the html file, you call the style sheet just like normal, but of course the file you fetch will have a php extension:

That’s all there is to it. Why have I not done this with every css file?

New Features here at MR&HBI!

Jerry — Tue, 30 Mar 2010 16:54:31 +0000

First, allow me to call your attention to the episode immediately before this one. You might notice the little icon is a camera. “huh,” you might be saying to yourself, “I don’t remember seeing that one before.” Very observant, Buckaroo! It’s for a new category, Photography, that I added. “But,” the even more observant amongst you might say, “There are already a handful of episodes in that category.” Right again, Wisenstein! I recategorized a couple episodes that were under The Great Adventure and found a couple in Idle Chit-Chat that were better filed under the new category. I expect there are plenty more; the trick is finding them.

The icon is actually my camera sitting on an opened unabridged dictionary. That may seem staged, but that’s actually where we keep the camera these days. Yes, we have an unabridged dictionary open on a stand at all times. No, that does not make us geeks.

Second, way down at the bottom of the sidebar, there’s a section called Other Muddled Stats (or something like that). That’s a wordpress widget I made that counts all the words in all the episodes, and keeps a tally of how many comments there have been as well. I plan to add other stats as well next time I have the hood open. Perhaps the number of times I’ve said “You don’t have to thank me,” or the number of times I’ve blamed the Chinese for things. (Hm… haven’t done that in a while…) Anything you’d like to know? The number of letters typed? Words in comments? Most prolific commenters? If it’s on these pages, I can count it.

The WordPress plugin itself is hand-crafted by yours truly. I started by downloading a different word-counting plugin, but it counted the words on every page load and didn’t have a sidebar widget. All it was was a database query and a loop. My version only counts when the relevant value changes – it only counts words when a new episode is posted, for instance. Once I tidy it up I’ll be adding it to the WordPress repository, so others can also gather useless stats about their blogs. It’s all about sharing the love.

Lost in Translation?

Jerry — Fri, 05 Mar 2010 23:25:33 +0000

Even if you’re not a programmer, take a look at the following lines of code:

public function sendCommunication($oCommunication)
{
    if (self::emailMode != EMAIL_TEST_MODE_NONE) {
        if (self::emailMode == EMAIL_TEST_MODE_LOGGED_IN_ONLY) {
            // DO NOT COMMENT OUT THE FOLLOWING LINES
            // EVER
            // FOR ANY REASON
            // INSTEAD CHECK THE TEST MODE AND SET THE ADDRESS FIELDS ACCORDINGLY
            $oCommunication->to = $oCommunication->from;
            $oCommunication->cc = '';
        }

Now, I ask you, even if you’re not a programmer, you know there’s one thing you would never, ever, do to the above code. Right? Now let’s say you are a programmer, a professional, being paid because of your ability to find solutions to problems and express them in an abstract language.

Now further imagine that changing the above code can lead to the customers of the people paying for this work getting spammed with confusing emails with our client’s name on them.

Yeah, you guessed it.

In with the Old

Jerry — Fri, 05 Feb 2010 09:27:56 +0000

I got a message today that Haloscan is closing down. That is the service that provided refreshingly spam-free comments on my old blog. A year ago I finally abandoned iBlog for WordPress, and I’m glad I did. At the time, however, I didn’t want to tackle moving the old comments over into the new system. In my conversion I embedded a link into each of the old episodes to the legacy comment system, and left it at that.

It is fortunate I found out about Haloscan when I did. Another week and 8500 comments would have been lost forever. That’s a big part of the underlayer of this blog, the part people sink gradually into as they hang around more, and they realize that this isn’t just about me. There are some pretty interesting conversations, observations, poems, and even stories in those comments. With the timer running I set to work to get the comments out of Haloscan and into WordPress.

The move turned out to be pretty straightforward. (Simpler, perhaps, than it had been to put the links into the posts.) I’ll go into the technical details in an episode tomorrow, but for now, why don’t you pop into the archives for 2004 or so and find an old episode with good comments? Maybe you’ll find something interesting someone said once. Maybe you’ll see the name of someone you haven’t thought of in a while. Maybe you’ll see something you want to comment on, even.

MacPorts and GIMP

Jerry — Sat, 09 Jan 2010 23:15:33 +0000

Setting up a new computer can be a tedious task; there are all kinds of settings and programs and files and whatnot that need to be passed from old to new. When you work with Web development things can get even more cumbersome, as one finds oneself descending deep into the world of IT. There are programs to install that all have to talk to each other, and configuration files to be tweaked. Many of the applications that are required have no user interface of their own, they simply run in the background and answer requests from other applications.

I found myself facing (for the third time in three months) the need to install the latest Apache (and set up virtual hosts), PHP, Pear, MySQL server, PHP email addons, Propel, and on and on. For many of these items, the instructions for installations go something like:

1) Download the source code
2) Configure the build
3) Compile the application

And the instructions go on from there. For most of the above there are shortcuts, and probably-recent-enough versions of some things come built-in with the Mac OS, but when you install it yourself you can get everything where you want it and avoid conflicts. Still, this can be a long, tedious, pain in the butt to get going. And when you install something and it doesn’t play well with the others, finding that one line in the secret config file that’s causing the problem can be a real pain.

Enter MacPorts. MacPorts is a project that has developed a system that does all the steps of the installation for you, and puts everything in standard places so everything else installed with MacPorts can find it and talk to it. There’s still some configuration to do (tell PHP where the database server’s socket is, and set passwords for instance), but overall things are much simpler, and there are very good instructions out there for tweaking and troubleshooting MacPort installs. Since the person writing the instructions knows where all the files are in the standard install, instructions can be much more specific.

With MacPorts installing php 5.3.1 was a simple matter of typing “sudo port install php5″ and letting the MacPort system do the rest. Hooray! Setting up a server is suddenly much simpler.

As an aside, MySQL didn’t work when I used MacPorts to install it on a previous machine. Don’t know why. Ran the install, followed the instructions, nothing. After a few hours banging my head against it, I went and got the excellent binary installer. It worked without a hitch. This time around I didn’t bother with the MacPorts version at all.

Anyway, thanks to MacPorts, I was able to get a complete development system up with nary a hitch, in a fraction of the time. Knowing where all the config files were this time around helped as well. I found several useful links on the Web, particularly from HiveLogic and my new buddy Danilo Stern-Sapad who took a little grammar rant from me with grace.

On that note, I read the phrase “How to setup…” so many times in so many places it’s amazing I still have teeth.

Last night I realized I hadn’t installed GIMP on this computer yet. GIMP is an open-source graphics program that wishes it rivaled Photoshop but it doesn’t really. It’s free, however, and when you consider the incredible amount of work that went into it, you have to be impressed. I don’t do a whole lot with graphics, so GIMP is usually adequate for my needs.

I went to the Web site for GIMP there were a couple of options for installation, including MacPorts. Just type “sudo port install gimp” into the terminal and that’s that. Pretty sweet.

One thing about a program like GIMP: it’s really a collection of a bazillion smaller parts. Many of those parts require other bits to work. When you run a traditional installer, all the parts are already there and they’re already tied together in a neat bundle. MacPorts does things a little differently; each part knows what parts it depends on to work, so when you say “install gimp” it first looks at the parts gimp needs, then at the parts those parts depend on, and so forth. You get to watch (if you choose to pay attention) the parade of all the little pieces as they’re installed, each the product of an individual or small group of people who have allowed their work to be exploited for free.

For GIMP, the list of dependencies goes very deep. I watched as X11 was installed. X11 is already on my computer, but ok, this is MacPorts and they keep their own realm and that way they can update parts without worrying about how that will affect non-MacPort installations. It’s redundant, but that’s why God made big hard drives.

Then I saw Python 2.6 install. Later, Python 2.5 went by. One of the little pieces seems to depend on an earlier version of Python. This probably means the person in charge of that bit just hasn’t updated it recently. On the installation went. After a while the Gnu Compiler Collection came down the pipe. gcc is a collection of compilers for building programs, and I watched as gcc was built… using the gcc already installed on my machine. Hm. And what’s this? Fortran! Yep, somewhere in the great tree of dependencies (maybe ‘root system’ would be a better term), someone decided that a Fortran compiler was necessary to run GIMP.

Actually, that’s not quite fair; the piece that loaded the Fortran compiler might need it for other tasks not related to GIMP. Just because GIMP uses a library doesn’t mean that’s the only use for it. Still, I ended up with a lot of stuff I don’t need. It’s all invisible and I’d never know it was there if I hadn’t watched the install (which took hours), so it’s not a disaster or anything. And next time I need Fortran I’m ahead of the curve!

Time slipped past, the install continued. I went to bed. When I got up this morning to check if the build was finished, I discovered there had been an error. Yep, the MacPort version of gimp-app doesn’t currently compile on 64-bit operating systems. All that other stuff that was installed? Python 2.6 and Python 2.5, the Gnu Compiler Collection (including Fortran), libgnome and libbonoboui and tkl and tk and gd2 and dozens of other things I don’t know what are, they’re still there, waiting to be useful in some way.

Need More Computing Power

Jerry — Tue, 17 Nov 2009 01:45:18 +0000

I’m working with several products from Adobe corporation right now. That means several things: first, getting used to various ‘quirks’ in the user interface that no other company does the same way. I occasionally say, “There’s the Mac way, the Windows way, and the Adobe way.” The Adobe way doesn’t necessarily mean the same thing in different Adobe products, alas.

Second, running multiple products from Adobe, along with their infamous memory leaks, means that my little Mac Mini is severely challenged. Adobe makes big products, and seems much more worried about features than performance. I have an income (made in part from using Adobe products), and can justify upgrading hardware at some point, but then what happens to the old machine? There’s still plenty of computing left in the little guy. It’s actually pretty fast.

Then it occurred to me that the perfect answer would be a second mini just like the first, that I could connect in such a way that they could share the workload. Suddenly my upgrade gets a lot cheaper and I’m not getting rid of a perfectly good computer.

I know that there is a supercomputer built from a bazillion macs all hooked together and sharing the load, so why can’t I get some of that action? What would it take to get two macs hooked together to become a single computer? It seems just too damn obviously a good thing to not exist.

I’m filing this under Get-Poor-Quick Schemes, since it’s probably one of those ideas that looks good on paper but is in fact a major PITA. Still, what a great OS feature that would be.

Filling a Need

Jerry — Tue, 27 Oct 2009 05:47:27 +0000

I dragged my sorry butt out of bed just before 7 a.m. Big meeting. I put on my fuzzy bathrobe and plunked down in front of the computer while my sweetie made me tea. Then she went back to bed. We stayed up way too late last night.

Skype lit up and away we went. The meeting was more about my employer and the evolution of their corporate character than about technology, deadlines, or the transient issues of the day. How do you make a company run smoothly when you span from San Jose to Moscow? How do you make sure everyone is having a good time while you’re at it?

At one point in the conversation I was asked for bio data for my employer to put up on their Web site. I thought I would throw them a link to the bio page here here first, as a joke and also to let them learn a little more about who I am (or who I want to be, at least). I popped over here and saw… that this site had been suspended by my Web host. I checked my email. No notice. I checked my account on MMHosting’s site. Suspended, no reason given.

Some Mondays are Mondayer than others.

I sent off an urgent help request and spent the rest of the day bouncing between databases, php server code, and Flex client code, generally trying to be smart enough to deserve what they are paying me. Eventually I got a message back from MMHosting.

First, they said they had in fact sent an email. I searched everywhere I know how to search, and I couldn’t find it. No matter; they also turned the site back on. The guy said that some of my php files (code that runs on the server and builds these pages) was loading bazillions of times and slowing down the server. Uh, oh! Looks like some plugin I’m using ran amok. The people sharing the server with me probably weren’t happy.

That’s what I thought until I started looking at the numbers, anyway. Runaway software? Not at all! It turns out this table I wasted way too much time on got mentioned in a prominent place, and twitter and digg took care of the rest. When you look at the graph, remember that the site was down for much of the time during that traffic spike. Holy Schnikies!

Traffic for the last month. The bulge at the beginning is from Cyberspace Open traffic. Things have been slow since I started working - until today!

I really did put a lot of work into that dang table, so I’m glad people are picking up on it. Maybe there are other CSS3 features I could tote up – transform and shadow come to mind.

Boy, I sure wish I had a killer episode at the top of the blog to hook some of these visitors. Oh, well.

None of Your Cheese Wax

Jerry — Tue, 20 Oct 2009 05:44:25 +0000

I’ve been pretty busy for the last week, coming up to speed on the project, fixing bugs, and generally stressing over the fact that I failed to provide instant lift. I always provide instant lift. Not this time. While I was familiar with all the tools used in this project, putting them all together at once was a lot to assimilate. So I’ve been sitting in this chair, typing on this keyboard, but not doing much to advance the Media Empire.

I have busy fingers, however, and I will always find something on my desk to fiddle with while I’m thinking. On day one of this project my sweetie brought me lunch at my desk, gave me some words of encouragement, and left me to mutter at the screen. One of the items in my lunch was a little round of soft cheese, wrapped in red wax. I love those things.

My meal finished, I started to play with the leftover wax, and I made a little sphere. The next day, another cheese, another shape, this time a cube. A tradition was born. Each day I would start to fiddle with the wax, never sure what I’d end up with. Here is the result of my first week on the job:

Cheese Wax Figures

The dumbbell-shaped one was the most recent; I’m breaking out of the simple geometric mold. What will be next?

Rounded Corners and CSS3

Jerry — Wed, 23 Sep 2009 11:27:56 +0000

NOTE — June 7, 2010:
This page is a little out of date; the main Webkit browsers now work better with NO prefix on the styles. It’s time to say goodbye to -webkit-. In the following discussion, using the standard syntax will work with Chrome, Safari, and Opera as well. The table referenced below has been updated to reflect the newer browsers.

If you poke around this site you will see boxes with rounded corners. If you use Safari or Firefox, you will see even more.

Rounded corners are implemented here in two different ways. The main boxes with the drop shadows are done the old-fashioned way, the way that works on most browsers. Each corner is a graphic with an alpha-channel shadow, and the edges are yet more graphics, repeated as needed to span the distance between the corners. The boxes expand and contract infinitely in both directions. It’s not bad. It’s also a pain in the butt.

Yet, I like rounded corners. They seem friendlier. I have broken down, therefore, and in a few places I have added browser-specific style information to create a softer-feeling blog. Since the rounded corners are purely cosmetic — everything still works just fine in browsers that don’t support border-radius — I’m not too worried about it.

However, while I was looking into the border-radius CSS property, I discovered several sources that didn’t get it right.

Here’s the deal. The CSS3 standards draft includes a property called border-radius. Exactly how that property is going to work has not been finalized, but it’s not likely to undergo any more major revision. Meanwhile, Firefox and Safari have already worked out their own border-radius implementations, called -moz-border-radius and -webkit-border-radius respectively. Other browsers see the -moz and the -webkit prefixes and ignore the property.

Unfortunately, neither implementation matches how the proposed border-radius property will act. Oh, dear. When the browsers are updated to match the standard, those -vendor-border-radius properties may break. A lot of Web designers out there don’t seem to realize that.

NOTE: probably at this point you should open up this handy table to follow along.

It’s not all doom and gloom, however. As long as people using the vendor-specific border-radius properties keep things really simple, there won’t be a problem. Here’s the skinny:

All four corners with 15px radius

will put a nice rounded corners on any block element of class roundedBox. Safari 4 and Firefox 3.5 (the browsers I have to test on) will work today, and when the formal border-radius is adopted and the other browsers support it, everyone will be happy. (Remember, of course, that in the meantime a large part of your audience will still see squared-off corners.)

The tricky part comes when one wants to specify elliptical corners, or specify different radii of curvature on different corners. When you start getting fancy, things get a little messed up. Let’s tackle the second one first, because it’s possible to find a way to specify the different corners that makes everyone happy. It’s just long-winded.

border-radius is really shorthand for four properties: border-top-left-radius, border-top-right-radius, and so forth. Therefore it’s perfectly safe to specify each corner independently, and all the browsers will act the same way:

top-left and bottom-right 20px radius, others 10px

Note that the names of the four corner properties are different for Mozilla. Aargh. All the more reason to hope the spec is finalized soon. I put the four properties in the order the software considers them when parsing the shorthand notation, just to get into the habit.

All those lines of CSS can be a pain in the butt, but it’s bulletproof and will work on into the future. But wouldn’t it be nice if you could use shorthand for the border radius the same way you do for margins and padding? The boys at Mozilla thought so, and the CSS3 standards team thought so, too. Webkit (Safari) seems content to only support the long-winded method for now (at least support it properly – more on that later).

Before talking about the differences between the browsers and the CSS3 spec, let’s take a quick look at the theory. As with properties like border, the border-radius property is just a shorthand so you don’t have to specify each corner individually. If you use one number, like border-radius: 10px; the style will be applied to all the corners. If you supply four values, the four corners each get their radius set, starting with the upper left and working clockwise. So far, so good, but there’s trouble ahead.

[The following has been edited since it was first published. I first said that Mozilla was doing the following drawing wrong, but it looks like they have it right and Safari is wrong. Sorry for any confusion. To make up for it I added box-shadow here and there for browsers that support it. They're sweet!]

The difference is elliptical corners. CSS3 calls for them, but the draft isn’t very well-written. The mystery lies in what should happen when two values are specified: border-radius: 20px 10px. When you are specifying a single corner, the result will be an elliptical curve. When using the shorthand, however, Safari draws all four corners with the same ellipse, but Firefox (and the CSS3 spec) draw round corners that turn out just like the example above.

According to the spec (by my reading), when using shorthand if you don’t use slashes you don’t get ellipses.

All four corners with elliptical curvature

NOTE: The most recent builds from webkit.org match the spec. I don’t know when those changes will reach Safari, but sites using the two-value shorthand may have to deal with some inconsistencies between browser versions. Not sure, but I would avoid using that syntax just in case.

What about if four values are specified?

All corners different

Once again Webkit-based browsers like Safari and Chrome fall short. The Webkit team seems content to get the longhand method of specifying corners right, but not the shorthand. Mozilla, in the meantime, has worked out the most complex and versatile form of the shorthand, but disagrees with the spec fundamentals.

To use shorthand to specify four different elliptical corners, you would use something like:

-moz-border-radius: 20px 10px 20px 5px / 5px 10px;

where you specify up to four horizontal radii and then up to four vertical radii. The numbers before the slash are the horizontal radii, starting from the top left. If only two numbers are given, they alternate. Three numbers means top-right and bottom-left share. The y-radius values are the numbers after the slash, and are distributed the same way. Clear? Good.

I have read that if the text rendering is vertical, the horizontal and vertical parts are reversed, but I see nothing about that in the proposed specification.

This will make a lot more sense if you study the twoblue-shaded lines of the table.

While we’re looking at the table, note that Safari is perfectly capable of displaying the most complex borders, but they have not implemented the shorthand notation (except for the bit they did wrong). They’ve done the hard part, but left out the one-day coding job of parsing the shorthand strings into the properties for each corner. Odd. The rules are really very simple for a machine.

So what does this all mean?

In conclusion, while it’s possible to write different sets of -vendor-border-radius CSS properties and get what you want, things start to get quite messy. It’s a lot of effort for aesthetic touches that half your audience won’t see for the next couple of years. I’d advise just staying away from elliptical corners for now, and specifying round corners individually if any are different. It’s a bit more typing, but it’s a lot safer. Stay away from -webkit-border-radius: with two values.