CSS is Evil: Input Decorations

A while ago, I stuck my foot into this awesome collection of CSS and Javascript called Bootstrap [http://getbootstrap.com/]. I generally enjoyed the experience: Bootstrap makes sites look awesome without much work on the developer’s side.

One thing I noticed about Bootstrap was its ability to do something that I’ve always been absolutely confounded by. I’m not exactly sure how to put this concept into words, so I’ll demonstrate it with (gasp) a picture:

Responsive max-width input box with decorations

Believe it or not, putting a responsive-width input box between a pair of decorations like that is pretty hard. I’ve tried to do it in the past, but I’ve never actually been hard-pressed into a situation where it was absolutely necessary.

For the sake of not depending on a massive piece of awesomeness that is totally incomprehensible to someone who doesn’t own a physical copy of the CSS specification, I decided to create a new blob of CSS for Grue that imitates the parts of Bootstrap that I really enjoy.

Decorated inputs, of course, are part of what I enjoy.

Interestingly enough, inputs do not properly handle being displayed as blocks. Layout-wise, blocks are full-width containers that displace their surrounding text. div elements, for instance, are blocks. What this means is that, when asked to automatically choose a width, an input will define its width by its HTML size property. Setting an input’s width to 100% works wonderfully, but it is impossible to put a decoration next to a 100%-width input field.

There is a relatively uncommon family of display types called table. Essentially, these displays cause elements to align themselves in a manner resembling standard tables. A parent element is given the table display property, and its children elements are given table-row and table-cell properties. In a stroke of bloat-reducing luck, table-row elements are only required when more than one row exists, so table and table-cell are the only display properties needed for this particular challenge.

The parent element in this tree is a wrapper. The wrapper is used for its automatic width, as well as the shared border and margin. The table-displayed div is placed within the wrapper. This div’s width must be defined as 100%, or it will shrink to match the combined size of its children. The table’s children are now the decoration and the input box itself. The decoration must have a size of 1px, and the input box must have a width of 100%. This idea, stolen from Bootstrap, threw me for a loop. When the decoration is given an impossibly-small non-zero width, the browser’s table rendering engine seemingly widens the decoration for the sake of legibility, and adjusts the input box’s width accordingly.

Since that last paragraph was a load of gibberish, here’s code!

div.ib {
border:solid 1px #000000;
}

div.ib > div.wl {
display:table;
width:100%;
}

div.ib > div.wl > div.l {
border-right:solid 1px #000000;
}

div.wl > div.r {
border-left:solid 1px #000000;
}

div.wl > div.l, div.wl > div.r {
display:table-cell;
width:1px;
padding:5px;
line-height:18px;
padding-bottom:6px;
}

div.ib input {
line-height:18px;
border:none;
padding:5px;
width:100%;
}

div.ib > div.wl input {
display:table-cell;
}

<html>
<head>
<link rel="stylesheet" href="forms.css">
<form action="#" method="post">
<div><div>
<div>Lefty</div>
<input name="test">
<div>Righty</div>
</div></div>

As not-pretty as it is, this mess of code generates this bordered box, with a full-length input in the middle:

Non-Bootstrap responsive max-width input box with decorations

Remembering My Grandfather

A few years ago, I wrote a very short bit called “Yankee Carpenter” in a larger essay about gender. I had the feeling that, when this day came around, it would be the piece I would offer to remember my grandfather by.

While I didn’t read the original piece at the memorial service, I did read a version written only a few minutes before the service.

Because the piece was written on notebook paper, and my chances of keeping a dislodged piece of notebook paper are slim, I’m publishing the memorial version of “Yankee Carpenter” here.

My grandfather was a Yankee carpenter. I should point out that the word “carpenter” is heavily modified by the word “Yankee”. Whereas a carpenter is someone who builds things, a Yankee carpenter is someone who finds a tree, chops it down with his bare hands, uses his fingernails to whittle it down to a two-by-four, puts it next to a similarly-crafted board, and holds the two together through the power of will alone.

Everything my grandfather ever did was, if not perfect, pretty darn close.

Every time I sit down to work on anything, I try to take the same combination of planning and adaptability that he showed me on the countless jobs I helped him with.

Though my father is a banker and I am a computer technician, because of Gramps, we were also Yankee carpenters.

Along with the new version of “Yankee Carpenter”, I have uploaded a presentation in tribute to him at http://plex.saranhold.com/gshow/.

How am I online right now?

As you may be able to guess by the title of this post, I’m enjoying my set of very specific, useful skills right now. Why is my being online a miracle, though? Isn’t everybody practically always online?

No. Sometimes, things go wrong. For no apparent reason, my ISP doesn’t want to talk to my modem. This is beyond my control. Fortunately, though, I’m in a place where 4G is abundant.

Am I marveling at my ability to utilize my phone’s network access on my computer? Yes I am, but achieving this wasn’t as simple as downloading an app. I used to have an app, of course, but then it stopped working when I installed an over-the-air update. Sad story short, my phone was (up until today) unable to share its network connection (for free).

Fortunately for me, my phone is rooted. I’ve got the Android SDK on my laptop, so I fired up an adb shell and had a poke around. I quickly learned that my phone had an inbuilt USB tethering driver, and that I could load that driver up by turning on the OEM tether option. Of course, I would only be switching the USB mode this way: I wouldn’t actually be using their tethering system (which costs money). I quickly threw a MASQUERADE rule into the POSTROUTING table, statically allowed my laptop’s IP to forward packets (FILTER:FORWARD chain), and successfully ssh’d into saranhold.com.

Unfortunately, my poor office computer was still offline. I connected my laptop to my switch via ethernet, brought its ethernet interface up, and established another NAT forwarding scheme for my office machine (which has another NAT to allow a shitty Cisco SIP phone to connect to the Internet), then reconfigured the routing table on the office machine.

TL;STETRTTL;DR (Too long; skipped to the end to read the tl;dr):
Everything is beautiful when you have rudimentary knowledge of kernel-level packet filtering mechanisms.

Food.

Friday the Thirteenth: Guard Duty

Despite the fact that I spend the majority of my time being awake at odd hours in the morning, this is one occasion that is markedly different. Rather than sitting alone in my office, I’m chaperoning a group of students in my brother’s class. This has placed me in the middle of a festival ground, which is definitely an odd place for a madman to be.

I was, thankfully, tasked with getting everyone to shut up. As the group that showed up was exponentially larger than what we expected to see (two or three guys), the amount of work needed to keep the peace was quite a bit higher than normal. I’ve guarded this particular festival ground in several previous iterations, but this is the first time I’ve not done it with a highly disciplined organization.

Now that I’ve put a television screen, powered by a Raspberry Pi, out in front of their eyeballs, they’ve quieted down enough for me to finger-ramble. Admittedly, The Secret Life of Walter Mitty has been a good enough movie for me to be kept from this highly unusual forum of personal expression.

When I actually opened WordPress’s administrative panel, I found that, over the last two weeks, I’d accumulated over a thousand new comments. That’s bullshit, so I opened up my mysql client (the official command line client) and ran a query that looked something like:

update wp_comments set comment_approved = “spam” where comment_approved = “0″;

So that took care of that.

The stuff that high-school kids can come up with is insane. Even though I have only been outside of that environment for a short time, I can’t recall that I (or the rest of my class) was crazy enough to pull a car into a covered stage area. If the light was appropriate, I would be able to take a picture of said car parked under the said covered stage area. However, the insanity of that concept is lower than that of my television’s current position: sitting atop a microwave.

At some point earlier in the night, someone put a Pepsi into the microwave, supposedly to keep mosquitoes from entering it. When we went to move the microwave to act as the base for the TV, we were surprised by the outpouring of cola. I feel sorry for whoever’s microwave it is, because they’re going to have to clean the poor thing.

If you haven’t noticed by now–and it’s entirely possible that you haven’t, since I can’t remember what kinds of articles have survived on this site–I anthropomorphize technology on a regular basis. I’m not sure why, but I’m almost positive that it’s simply due to my own personal collection of oddities.

Well, I think I’m going to wrap this blathering up by saying “Hi there, I’m back.”

Hi there, I’m back.

Lab Write-Up: Fruit Flies

In this lab, we sought to produce a pure-breeding strain of white-eyed, ebony, vestigial-winged fruit flies. The challenge was designed to demonstrate the properties and principles of genetic inheritance. Prior to beginning work on the flies, a clear plan needed to be decided upon. After a few hours worth of researching the genetics of fruit flies, the plan was finalized. Following is a list of our desired traits:

Fly Trait Dominant/Recessive Extra Notes
Vestigial Wings Recessive
Ebony Body Recessive
White-Apricot Eyes Recessive X-Linked

Very early in the challenge, we decided that we would have two separate strains of flies running simultaneously to both increase the speed of the experiment and decrease the number of generations the experiment would take. We decided that the most useful beginning crosses would be White-Eyed Female x Ebony Male and Ebony Female x Vestigial Male.

White-Eyed Female x Ebony Male’s cross produced, as expected, apricot-eyed males with grey bodies, and normal-eyed females with grey bodies. White-eyes, being X-linked and recessive, are guaranteed to be passed on to any male children of a white-eyed female. Because the female flies had both the recessive white-apricot gene, as well as the recessive ebony-body gene, they were chosen for the third cross.

The Ebony Female x Vestigial Male cross produced grey, non-vestigial flies. Both traits being recessive, and neither being X-linked, neither was able to express itself. However, the genes were present. Mating the males with their white-eyed counterparts would bring all of the needed genes into one group of flies.

The third cross, Apricot-Ebony x Vestigial-Ebony, produced a few different types of flies. The ones we were interested in keeping were the ones containing the apricot, ebony, and vestigial genes. We transferred the females without ebony bodies, as well as the males without ebony bodies and apricot eyes, to a holding tube. What remained was a collection of males with apricot eyes and ebony bodies, and females with ebony bodies, which we put into yet another new tube. There was a slight risk involved in making this move: there was no way to guarantee that the vestigial genes were still in the pool. However, the chances of that were low, and we’d be able to tell in the next generation.

The fourth cross, produced by inbreeding a selection of the third cross, contained a lot more variety than the third. This time, there were uniform ebony bodies, but there were very few flies who had both apricot eyes and vestigial wings. It took a few days to gather enough of these to begin the final cross.

Unfortunately, at the time of writing, the final cross has not yet begun to emerge, so it is impossible to say whether the venture was a success. There shouldn’t be, however, much (if any) variation in the flies, since their parents all exhibited recessive traits.

Flies have a very simple genetic code. Controlling their phenotypes through selective breeding alone is, in itself, a huge hassle. If the genes weren’t on different chromosomes, it would’ve been nearly impossible to finish this assignment due to the complexity of the task. Fortunately, drosophila melanogaster is a great critter for this specific topic.

Playing with Pi

I recently picked up a Raspberry Pi from Adafruit Industries (http://adafruit.com/). While the Pi itself ran for less than $40, I couldn’t help but buy a few thousand accessories to complement it. The final order came out to around $110, but it’s proven its worth.

At the moment, I’m doing nothing but experiments with it. Recently, I’ve been contemplating the possibility of building a miniature cluster of Pi servers. Pis, which are relatively cheap, as far as electricity goes, could easily do the job of my web server (a very low-traffic system) for a much lower cost. While building a Pi cluster could easily cause enough heat to be generated to require ventilation, the single Pi that I’m currently working with barely generates enough heat to be noticeable, unless it’s doing a resource-intensive task, such as compiling the webserver package that I use for all my web hosting needs.

All in all, power consumption is low. I’m able to power my Pi using either a wall socket, or my computer’s USB port (which provides enough power, despite USB specifications saying it shouldn’t be able to). As with all but two of my computers (my laptop and main desktop), I operate the Pi headlessly. While it’s perfectly equipped for TV-out, I already have a machine that’s perfectly capable of supporting the same feature. Possibly the most useful TV-out that it has is a natively-supported HDMI-out, which is something my already-existing machine doesn’t support, while my main desktop and laptop do, but, due to software errors, are incapable of utilizing.

I’ve thought up many different devices to build with the Pi, but I won’t be able to implement many of them without further planning and resources. The Pi is, without a doubt, an awesome tool, toy, platform, and computational resource. Despite its awesome capabilities, however, it is not able to do anything about Taco Bell’s inability to produce food that doesn’t make me ill. ¡No te puedes matarme!

Adsense Sucks

The title says it all. I’m removing the advertisement from my webpage. I’ll keep my adsense account active, though, in case I decide to add it to a later project. Hopefully that’s okay with Google’s guidelines. If not, I’ll use another advertising group.

Horizon

Thoughtless, I sit looking out upon an empty horizon.
Waves crash at the rocks below my feet.
An empty horizon is a lonely thing.
Over the horizon, a lone ship fights to meet my eyes.
Its burning sail steals my attention.
The Warpath overpowers the way of peace, and is darkened by it.
Restoration of ancient ways will not provide ancient innocence.
What was lost cannot be found.
All logical assertions depend upon mutual truth.
The enkindled ship announces future events, but not resolutions.
An empty horizon is a lonely thing, but this is something else.
This is the Warpath.

I have no idea what this means. This is partially because it was written while I was purposely trying to waste time, but also because I was trying to write it from the standpoint of a figure who only exists in my personal mythology.