A year or two ago, I got an external Seagate disk drive. After giving it a day or so to settle in, my friend asked me if I was having fun with it: “are you gamboling in the gigaswathes:)?” she asked. The metaphor was apt.

There is a topography to our experience of the Internet, and indeed myriad landscapes to traverse, the deeper we delve into the technology. Gamboling might have been a rather frisky way of describing what I was doing with/to/in my hard drive, but I was, at the very least, skipping and humming along. Directory structures (’folders’) are paths that have to be walked, programmatically as well as through mouseclicks: we navigate. There are planes and edges to data, information, and the Internet. There is a front-line, and the front-line is in a line of code. The topography of information—and of the Internet—is being written in real-time. I was gamboling in the gigaswathes.

The metaphor of landscape to describe the experience of creating and of using networked information captures a defining feature of the Internet, which is the fact that its topography—the structure of its links; what links to what—takes on semantic significance, and therefore ideological implication. A group of links has an ulterior motive. If you liken a garden to a website, then the rosebushes, or the koi pond, or the Japanese bridge, or any other arrangement of elements—their design, form and function would mean something, and point somewhere.

Grouping links—creating a web page, or web site—requires certain technological shenanigans, and until recently this presented a barrier to the creation of web pages by ‘lay people’. The forum, and then the blog, were breakthroughs that allowed anyone anywhere to group links and provide multimedia commentary, thus collecting and presenting a point of view, and, in a post-Althusserian world, therefore an ideology. This kind of self-publishing is crucial to freedom on the Internet.

There was a train of thought here. It will pull into the station in part two, I hope.

The city of brotherly love finally opened its arms and embraced me, a few days ago. After harboring me—a New York refugee—on ambivalent terms for almost five years, Philadelphia held my head in her hands and punched it a few times.

I was mugged by three kids on July 3rd, 2007, around 9pm, on Farragut St, just south of the 46th/Market Street stop. I think it may have been on Farragut and Ludlow, but I am not sure. The 46th Street subway stop on the Market-Frankford line was closed that evening, and I decided to walk down to the 40th Street stop. I turned into a side street—I think it was Ludlow—with the new Nine Inch Nails blasting on the headphones. Out of nowhere, somebody struck me on the left side of my face. My glasses were knocked off.

I was disoriented, and to ensure that I stayed that way, a few more punches were landed. I managed to stay on my feet, and started to talk to the two boys—they can’t have been more than 16.
—Guys, guys, relax, take it easy.

Another punch. They were directed mainly at the face. A third kid joined the other two entrepreneurs, and was bobbing and angling, looking for ingress. What do you want?, I asked stupidly.
—Gimme everything you got.

The third kid found an opening, and split my lip. He was about 14.
—Relax, relax. I have $40.

I don’t know why I kept telling them to relax. I must not have taken them very seriously. Or I thought I might talk my way out of the situation.

I reached into my pocket. They took a step back. I pulled out a $20 bill, and handed it to the chief entrepreneur. As soon as he took the bill, I broke through their ranks (the three of them ranged about me, and I had my back to the bushes from whence the first fellow had surprised me). I ran. I had sneakers on, having just played tennis. I also had my freak on. I ran towards the light, which, contrary to what the books and movies will have you believe, was sodium yellow (and on Farragut). The boys followed me for about two paces, then stopped. I like to think it was my fleetness of foot that discouraged them, but it was probably the light. Besides, they got $20 for their trouble. As I was running, a car turned onto the boys’ street, and I waved and yelled Turn. Around. The car backed away.

After ten to fifteen minutes of stumbling around, I found myself at the 40th/Market subway stop, and went into a fast food store. By some strange coincidence, the two women who had been in the car that I waved away were there, and recognized me (I did not recognize them). They asked me what happened, and I told them. The store owner gave me free lemonade. I got into the subway, iced my face, and went home, where I got more ice, then took some photographs of my face.

I spent the 4th of July, 2007, in bed for the most part, pondering violence and masculinity and whether or not I should go to the police. I still have not decided on the police, but I heard today that another friend ‘nearly’ got mugged near Baltimore Avenue. I will have to talk to that friend, and eventually decide on whether or not to go to the police. (Apparently he did go to the police, and they drove him around asking if he recognized anyone).

Best case scenario, the police patrols around 46th and Market increase in visibility (if they exist at all), and muggers wise up. Worst case scenario, the police catch the kids, and throw them into juvie, and they become statistics, and another family or two (or three) perpetuates the vicious cycle of urban violence. Most likely scenario: nothing happens. I suppose the onus is on me to go to the police. Instead, I write blog pieces and post them into the cybervacuum.

I am healing nicely, two days after the mugging. And I have nice new glasses.

West Philadelphia:

Northeast Philadelphia:

Photos taken with a 1.3MP Samsung Blackjack.

The Skype team recently released a 1.4 Beta for Linux. I downloaded and installed the Ubuntu .deb, but when I tried to install and run it, got the following error:

algebraist@orogeny:$ sudo dpkg --force-architecture -i skype-1.4.0.74.deb
dpkg - warning, overriding problem because --force enabled:
 package architecture (i386) does not match system (amd64)
(Reading database ... 191043 files and directories currently installed.)
Preparing to replace skype 1.3.0.53-1 (using skype-1.4.0.74.deb) ...
Unpacking replacement skype ...
Setting up skype (1.4.0.74-1) ...
Installing new version of config file /etc/dbus-1/system.d/skype.conf ...
algebraist@orogeny:$ skype
skype: error while loading shared libraries: libQtDBus.so.4: cannot open shared
object file: No such file or directory

After looking around, I found an excellent solution: getlibs. It’s a shell script for Debian-based distros that finds and installs shared dependencies for 32-bit binaries running on 64-bit systems. I downloaded and installed the script, and for the new Skype binary, I did the following:

algebraist@orogeny:$ getlibs /usr/bin/skype
Matched library libQtDBus.so.4 to /feisty/libs/libqt4-core
Matched library libQtGui.so.4 to /feisty/libs/libqt4-gui
Matched library libQtNetwork.so.4 to /feisty/libs/libqt4-core
Matched library libQtCore.so.4 to /feisty/libs/libqt4-core
Matched library libsigc-2.0.so.0 to /feisty/libs/libsigc++-2.0-0c2a
The following i386 libraries will be installed:
libQtAssistantClient.so.4 libQtAssistantClient.so.4.2
libQtAssistantClient.so.4.2.3 libQtCore.so.4 libQtCore.so.4.2
libQtCore.so.4.2.3 libQtDBus.so.4 libQtDBus.so.4.2
libQtDBus.so.4.2.3 libQtDesignerComponents.so.4
libQtDesignerComponents.so.4.2 libQtDesignerComponents.so.4.2.3
libQtDesigner.so.4 libQtDesigner.so.4.2 libQtDesigner.so.4.2.3
libQtGui.so.4 libQtGui.so.4.2 libQtGui.so.4.2.3 libQtNetwork.so.4
libQtNetwork.so.4.2 libQtNetwork.so.4.2.3 libQtOpenGL.so.4
libQtOpenGL.so.4.2 libQtOpenGL.so.4.2.3 libQtSvg.so.4
libQtSvg.so.4.2 libQtSvg.so.4.2.3 libQtTest.so.4 libQtTest.so.4.2
libQtTest.so.4.2.3 libQtXml.so.4 libQtXml.so.4.2 libQtXml.so.4.2.3
libsigc-2.0.so.0 libsigc-2.0.so.0.0.0 qt4
Continue? (y/n)
y
Libraries have been installed.
algebraist@orogeny:$ skype
skype: error while loading shared libraries: libdbus-1.so.3: cannot open
shared object file: No such file or directory
algebraist@orogeny:$ getlibs /usr/bin/skype
Matched library libdbus-1.so.3 to /feisty/libs/libdbus-1-3
The following i386 libraries will be installed:
libdbus-1.so.3 libdbus-1.so.3.2.0
Continue? (y/n)
y
Libraries have been installed.
algebraist@orogeny:$ skype

It runs. (Sound, however, is a separate issue. Skype has started to offer some help on sound for Linux users, here.)

getlibs could be a boon for 64-bit Linuxers. Good job ‘Cappy’, and thanks for the script!

Finally got around to writing a WordPress template from scratch. The new theme is optimized for readability, specifically of code, and of text i.e. paragraph after paragraph of text.

The old template for Moqa::Blog, which was based on BlackPhoto and used an image from the White Stripes’ De Stijl album cover, looked like this:

After months of service, I retired it, in favour of the new theme (as yet unnamed, so going by ‘Blog-Simple’ for the moment):

Text Readability

I wanted to style a font so that the ‘Writing’ posts on this blog (pieces of alleged fiction) would approximate the fonts found in novels etc. Given the small number of web-accessible fonts, this is pretty hard to do — and, in fact, I settled on “Trebuchet MS”, and threw in the following (reference):

.entrybody p {
    text-indent: 20px;
    margin: 0;
    padding: 0;
}
.entrybody p:first-letter {
    font-weight: normal;
}
span.firstletter{
    font-size:450%;
    float:left;
    line-height:.85em;
    color:#D4D4C7;
    text-indent: 0;
}

The result seems to hold up fairly well.

Code Readability

I finally implemented a feature I have seen on many developers’ sites, and had often wondered about: syntax highlighting of code, speficially HTML and CSS. I shamelessly stole two scripts from here. They’re very clever. Basically, you enclose your code in:

<code class="html">

and

<code class="css">

tags,

and the JavaScripts automatically highlight them for you. (The JS is called in a <body onload=""> function.)

The scripts determine the selector, declaration, properties and values of the HTML and CSS, and color them according to some inline CSS:

code.html span.tag {
    color: blue;
}
code.html span.attribute {
    color: red;
}
code.html span.value {
    color: green;
}
code.css,
code.html {
	font-weight: bold;
}
code.css span.idselector {
    color: red;
}
code.css span.classselector {
    color: green;
}
code.css span.property {
    color: blue;
}
code.css span.value {
    color: orange;
}

I also did some <pre> and <code> styling:

code {
	font-size: 11px;
	font-family: mono;
	font-weight: normal;
	color: #111;
}
.entrybody pre {
	font-family: mono;
	background: #eee;
	margin: 10px 20px 10px 35px;
	padding: 10px;
	border: solid 1px #999;
	letter-spacing: -1px;
	line-height: 20px;
}

Put it together, and you see the indented, bordered, grey-backgrounded sections of code that this theme supports.

MoqaBilling, my web application for hourly invoicing, is coming along nicely. Below are some screenshots (client and personal details have been blotted out for obvious reasons). They show the “Orange Kiwi” template in use. I intend to make the application completely skinnable using only external .css files.

Created With The Gimp, using fonts Guanine and Crapola.

Transparent .png

Transparent .gif

Transparent Interlaced .gif

Kioku played at the Noguchi Museum last Sunday to a varied crowd. Below are a couple of pics (taken with a Samsung Blackjack).

Much has already been written (Billboard, Wikipedia) about Nine Inch Nails’ viral marketing campaign for Year Zero (2007), their most recent album. The marketing campaign consisted of clues, a bit like The DaVinci Code: things like USB drives left in NIN concert bathrooms; coded messages on T-shirts that yielded URLs; ‘fake’ forums, etc. In essence, various media were used to direct the curious and the fanatic to peculiar websites, such as

• http://iamtryingtobelieve.com/, and
• http://anotherversionofthetruth.com/

Even more striking, as a media/marketing effect, was ‘embedding’ an image in the static at the end of the song “The Warning”. This shape, like an elongated arm, is known as The Presence, and is featured on the album cover. (You might speculate that the spectrograph was what it was, and the hand-like pattern got noticed and then the album-cover was conceived. But that would make you an unbeliever.)

Other sources (1, 2) claim the image is in the song “My Violent Heart”, but I have not seen it there. I have only seen it in “The Warning” (see the detail from my spectrograph, created with Audacity).

Leaving aside the cleverness of the campaign, this article takes a closer look at one of the campaign sites, http://iamtryingtobelieve.com/ , in order to learn some of the CSS/HTML techniques used. http://iamtryingtobelieve.com/ was created by 42 Entertainment. Below is a screenshot.

Typographic Distortion Effects

Below is a screenshot detail from the “How Does Parepin Affect You?” page, http://iamtryingtobelieve.com/howdoes.htm. As you can see, there are a couple of typographic effects—larger font sizes and the weird unfocus/distortion effect (’administration approved’)

These effects are, in fact, not created graphically in an editor, but through CSS/HTML rendering in the browser. Thus, all the text is in fact live text, and easily digested by search engines.

Code

Here is another screenshot detail:

The code looks like this (reformatted for readibility):

<span style="color:Red; font-family:Georgia;
font-size:30px; font-weight:bold;">
    HOW DOES PAREPIN AFFECT
    <br />
    YOU?
</span>
<p style="width:520px; padding-left:20px;
position:absolute; top:234px;">
    We’ve all heard a lot about how Parepin isn’t addictive, and
    h<span class="one">ow its side effec</span><!--ts are rare-->
    <br />
    an<span class="left">d mos</span>tly mild. I can attest that
    <span class="bigWhite">Parepin isn’t addictive</span>, at least
    in my
    <br />
    case, because
    <span class="bigWhite">
        I eli
        <span class="leftUp">
            minated it
        </span>
    from my system about two
    <br />
    months ago and had n<span class="left">o adver</span>se
    affects.</span>
</p> 

<p style="width:520px; padding-left:20px;
position:absolute; top:234px;">
    We’ve all heard a lot about how Parepin isn’t addictive, and
    how its side effects are rare
    <br />
    and mostly mild. I can attest that <span class="bigWhite">
    Parepin isn’t addictive</span>, at least in my
    <br />
    case, because <span class="bigWhite">I eliminated it from my
    system about two
    <br />
    months ago and had no adverse affects.</span>
</p>

That is not a typo. The same content is entered twice, in two separate <p> tags, which overlap each other exactly, thanks to the position:absolute in-line CSS in the code, <p style="width:520px; padding-left:20px; position:absolute; top:234px;">. Thus, certain distortion effects will occur when the text does not overlap perfectly.

The first of these is employed using the tag. The CSS for this is:

.one {
    letter-spacing:-1px;
    text-transform:uppercase;
}

This is self-explanatory—it converts the text to uppercase, and changes the letter-spacing to -1px.

Let’s take a look at the two effects separately:

• Text-transform:

  E pluribus unum

  (<p>E pluribus unum<p>)

  E pluribus unum

  (<p style="text-transform:uppercase">E pluribus unum<p>)

• Letter-spacing:

  E pluribus unum

  (<p>E pluribus unum<p>)

  E pluribus unum

  (<p style="letter-spacing: -1px">E pluribus unum<p>)

Combining the two:

E pluribus unum

Overlaying this on top of “E pluribus unum” would mimic the first distortion effect we see in the “How Does Parepin Affect You?” snippet above.

A second class, <span class="left">, is used for the text “and mostly mild”. Its mechanism is to print “d mos” 2px to the left the first time, and overlay a normal copy of “and mostly mild” on top of it:

.left {
    left: 2px;
    position: relative;
}

.one {
    letter-spacing:-1px;
    text-transform:uppercase;
}

.left {
    left: 2px;
    position: relative;
}

.bigWhite {
    font-weight:bold;
    font-size:18px;
    font-family:Georgia;
}

.leftUp {
    left: 3px;
    top: 1px;
    position: relative;
}

1 comment

I’ve been working on a custom billing system. It serves two purposes—to replace my current ’system’, and to serve as a first application with which to learn CodeIgniter.

Here are some screenshots, after two days’ work. The template was inspired by various gelatos at Capogiro, including kiwi and orange cardamom:

Automatically generated .pdf invoice (rough!)