Code Archives

Hack’d

Posted at 9:43 AM

I spent yesterday cleaning up some awful link spam that littered several of the domains I own. Some crafty fellow had stuffed hidden links to illegal MP3 sites in the footer of as many index files as they could find. I thought it’d be a good idea to document it in case anyone else runs into the same dilemma. Plus, hey, an excuse to write a multi-paragraph entry. Go me.

I’m not exactly sure how the account was compromised, and I’d hate to point fingers without knowing. Could’ve been either of the two popular blogging software applications that are installed. Or it could’ve been a hack to the server in general. After some digging and some Googling, it turned out someone else had the exact same problem. A hidden directory was including a PHP file that was in turn including a .txt file filled with SEO spam and inserting it by IP address to most of my domains. I quickly deleted these files, but the links were still there.

The baffling part was that when opening any of the compromised files, the links weren’t in the source. Grepp’ing for the spam had it showing up in multiple files, but opening the file to edit showed nothing, leaving me to believe that the links were being dynamically inserted somehow. It took a helpful tech support agent to show me I’d fallen for one of the oldest tricks in the book: the huge block of spam links was just indented a ridiculous amount. I hadn’t noticed the horizontal scrollbar at the bottom of the text editor, and sure enough scrolling over approximately 10,367 pixels to the right, there the spam was.

So after cleaning up 20 or so index files, changing passwords and updating software, all seems well again. If you run into link spam, and the usual fixes don’t help, check your logs for suspicious .txt includes, and beware of the “massive indent”.

25 Comments

Gridlasticness

Posted at 11:31 AM

After a brief period of unstyledness, we’re back with a realign and overhaul of simplebits.com. Aesthetically, it’s not much of a departure from the previous design — but under the hood is new markup, new stylesheets and a strict grid layout based on ems. After moving into new physical digs last month (more on this later), it only seemed appropriate to spruce up the virtual ones as well.

As usual, the overhaul started innocently enough, with a little tinkering here and there that snowballed into tearing the old CSS out, while the site embarrassingly stood naked for a week. But the challenge of creating a em-based grid was too tantalizing (the second time I’ve used that word in as many days).

A few notes when trying to create a grid layout using ems:

• Using the 62.5% method for sizing text has the advantage of setting gutters, borders, etc. at values of ten (e.g. 1em = 10px).
• Remember to avoid specifying widths and font-size on the same element (or at least be consistent about it).
• Realize that when adjusting text size in Safari, the grid will only stay perfect on a random bump. Firefox seems to stay intact at all times. I assume this is due to a rounding discrepancy.
• Understand that when building an already-wide layout, it’ll get really wide, really fast. That’s OK. Wide is the new drop shadow.
• Have plenty of coffee at hand.

A large motivation for this tinkering had to do with the Notebook entry styling. I’ve tweaked the MovableType templates to enable posting of quotes and photos as well as long entries and QuickBits (links). A “tumblelog” as the kids would call it. That doesn’t mean there’ll be 100 posts a day — but it does mean (I hope) more posting in general.

Now if you’ll excuse me, there are several dusty corners to clean up around here.

Way #24

Posted at 9:23 AM

For the second year in-a-row, Drew McLellan has put together another excellent 24 Ways — an advent calendar of helpful web articles written by fine folks from all over the web.

To cap off this year’s set, I’ve contributed Gravity-Defying Page Corners, a simple little trick for adding dimension to a plain ol’ box. It also might the first (and after reading you’ll probably be thinking “hopefully last”) web tutorial written in verse. It’s corny for sure, but fun to write and hopefully read. Many thanks to Drew for wrapping up 48 presents to us all.

London(e)

Posted at 9:47 PM

About an hour into the flight to London from Boston, I spilled a full glass of cranberry juice in my lap. There are several reasons why this was unpleasant, and they all include the words “embarrassed”, “sticky” and “no, I didn’t just pee my pants”.

I’ve now returned from @media on Father’s Day. It was a great trip despite the soggy flight out, and it’s really good to be back home with the family.

Many thanks to Patrick for inviting me to speak. I think it went just fine, and I especially enjoyed the questions at the end of the talk. We watched England win the World Cup match the previous night, so I knew there’d at least be smiling faces in the audience. For those that attended the session, I’ve posted the presentation slides (20MB PDF). Warning: they won’t be of much use without the commentary.

It’s always fun meeting new faces for the first time at these conferences, and @media was no exception. It’s the genuine friendliness of the people in this community that never seems to wear out. Fun times are a given. Wish I had the time/energy to list them all here, but it’s late. I also wish I had taken more photos, but what I did take are now up on Flickr.

Update: I forgot to mention, I successfully spent the torn note at a hotel pub after the @media party. Either my taping job was superb, or it was dark enough to go unnoticeable. Whew.

Arkanoid Edition

Posted at 6:05 PM

Another year, another realignment. What started out as a long-term desire to take better advantage of the footer (putting content chunks that were previously in the sidebar down near the bottom) quickly turned into more of a CSS refresh. This version is dubbed “Arkanoid Edition” (coined by Ethan and will make sense to anyone that spent their afternoons at the arcade in the 80s).

There are too many dusty corners to clean up, and so there very well might be some areas that still need attention. But somehow this feels more comfortable right now. The colors are toned down a bit, columns feel a bit more readable, etc. Surely not everyone will be a fan, but such is the life of a web site. Change is good. But it can also be disorienting.

Boxy, but Nice

One of the struggles with the SimpleBits logo is that it’s not a logo at all. It’s an icon. And works terribly in print unless it’s enlarged properly. I’ve debated changing the logo, always settling on maintaining the brand, and instead embracing its pixellated charm. Hence the square, blocky treatments that will likely warm the hearts of 8-bit fans and yet turn away the warm-and-fuzzy brigade.

Fluidity

I’m no longer straddling the fixed/fluid fence! Previous versions of this site featured a little toggle up in the top right corner enabling you to switch between a fixed or fluid width by means of a little Javasript and an alternate stylesheet. How diplomatic. With this new design, I thought I’d try a centered, fluid layout, using left and right padding on the body using a percentage value. That coupled with a conservative max-width set at 900px makes for a wider-but-not-too-wide solution. If only max-width (and min-width) worked in IE (aside from the Javascript fixes that exist).

Hiding from IE/Mac

I’ve also decided to intentionally hide all CSS from IE/Mac this time around. It’s not that it would be impossible (or even that difficult) to get this particular design working. It’s just that, for this site, it’s time to move on and have one less set of hacks to worry about.

What’s great, is that it’s dead simple to hide CSS from IE/Mac using the commented backslash hack just before importing your styles. Here’s my main stylesheet, screen.css, which imports the master styles as well patches for IE/Win.

/* import stylesheets and hide from ie/mac \*/
@import url("master.css");
@import url("ie.css");
/* end import/hide */

IE/Mac won’t get any of it because of that backslash at the end of the opening comment. And this is certainly OK for SimpleBits. Your site’s statistics may vary.

Posterity

Archived for posterity, and a comparison for those arriving here today for the first time, is a screenshot of the previous design.

CSS Patches

Posted at 10:47 PM

The term “hack” implies that a legitimate solution to the problem exists. Yet, in order to save time, or perhaps due to lack of knowledge, a sloppy fix is applied to just get the job done. “Let’s hack at it, ‘till it works”. But is this the case in terms of CSS hacks? Sure, we call them “hacks”, when in reality they’re really patches. Patches that fix known, documented problems in certain browsers.

I know it’s really just a term, but the problem is this: by using “hack” to describe often necessary code, a negative connotation can be attached, even if what we’re really doing is compensating for a browser’s shortcomings. When you hear someone say: “I avoid all hacks”, you’ve witnessed this negative connotation. Heck, we’d all love to avoid hacks — but we’re also realistic, living in the real world, and designing in 2005.

Now think about the term “patch”. It brings to mind, mending something that’s broken. It’s rip or tear is clearly visible — we know it’s broken, and we know what we need to do to make it look better. We’re not cutting corners, we’re applying a fix.

Perhaps from now on, I’ll refer to fixes for gems like the double float margin bug, or the three-pixel text jog as, well… patches.

55 Comments

Bulletproof Logos

Posted at 10:38 AM

There are a few browsers (Firefox, Opera) that treat image alt text as if it were normal text on the page, when the image isn’t present. If the reader turns images off to save bandwidth, we can still visually treat the images by styling the alt text, and this could be especially handy in regards to site logos.

48 Comments

Exceptionally Negative

Posted at 10:39 AM

There are situations when using negative margins on an element can be the easiest way to “nudge” it out from the rest, treating the exception to the rule in order to simplifiy code.

34 Comments

Author Highlighting in MT

Posted at 6:32 PM

I’ve finally implemented author highlighting for the comments here at SimpleBits. Any comment that I add myself gets a slightly different style treatment to set it apart from the rest. I first noticed Dave doing this quite awhile back. Many others followed — and I’ve found it pretty darn useful when I read other sites, being able to quickly scan for the site owner’s remarks.

How is it done? Depending on the system you’re using, there are approximately 34,760 ways to make this happen, and I came up empty when searching for a writeup on how people handle the swap. Here’s how I tackled it.

I started by downloading the Switch plugin for MT. This allows for conditional statements within Movable Type’s templates. I’m sure there are other methods — and feel free to leave your own tips in the comments.

Once the plugin was installed, I just needed a way to insert a class to the <dt> and <dd> elements that I use to structure the author and text for each comment. This class would only exist if the comment was authored by me.

Using the Switch plugin’s syntax I added this to the entry template:

<dt<MTSwitch value="[MTCommentAuthor]">
  <MTSwCase value="Dan Cederholm"> class="dan"</MTSwCase>
</MTSwitch>>

So here, I’m testing for when the author’s value is “Dan Cederholm”. If it is, then it’ll add whatever’s between the <MTSwCase> tags — in this case: class="dan". Notice the space before class — this is important, as for every other case but “Dan Cederholm”, we’ll just have a normal <dt> (or <dd>) element, without extra spaces.

With a class now inserted for my own comments, I could just add specific styles for dt.dan and dd.dan to make them unique.

While I’m using the value of MTCommentAuthor, the plugin will accept any MT tag to match against. You could use an email address, URL, etc. — or I suppose get even more fancy with IP address or other more secure methods. I do realize that, now that I’ve documented this, I’m making it easy for people to pretend to be Dan Cederholm (I’m not sure why one would want to do that), but simplicity is bliss.

27 Comments

Bulletproof Slants

Posted at 10:27 AM

While working on the navigation for a project recently, I had the want/need to do something like this:

Nothing ground-breaking or cutting edge here (and certainly not meant to solicit ooohs and ahhhs from the gallery), yet when faced with a little challenge such as the design above, I do my best to make things as bulletproof as possible.

Humor me, while I elaborate.

SimpleCode

Posted at 5:27 PM

If you’re like me, than you’re starting to get tired of turning XHTML into entity-encoded markup, suitable for <code> examples. Today I thought I’d whip up a quick Perl script that will take ordinary markup, process it and do all of the turning of < to &lt; and > to &gt; — for you.

It will also recognize double spaces (to nicely format nesting) and turn those into “&#160;&#160;” (it will do the same for four spaces and six spaces as well).

SimpleCode intends to make my life easier. It’s essentially in beta and took only an hour to put together — in fact I’ll bet there’s something out there that already exists and I just didn’t think to look earlier. I’m sure it’s missing some features, and that’s where you come in. It’ll come in handy for the SimpleQuiz examples — and I’d venture to say it would help for those commenting as well.

Feel free to use it — and grab the source code to put on your own server. It’s a single, self-contained file that just needs to be dropped in your cgi-bin. Set permissions to 755 and you’re good to go.

Update: Jesper has created a neat and tidy JavaScript version, and also helped me simplify a bit of the Perl source as well. v02 (and v03) already!

33 Comments

SimpleViewer

Posted at 2:24 PM

I’ve had quite a few requests for the slideshow and image viewer Perl script that I wrote for this site, so I finally cleaned it up a bit, gave it a great name (SimpleViewer, of course) and posted the file to the software page for anyone that’s interested.

There are certainly other scripts out there that do way more than this one and are written far better, but it’s done the trick for me for a long time and it was fun to build. Hopefully it’s pretty straightforward to set up and those that were asking can make good use of it.

CSS Photo Zoom

Posted at 6:58 PM

After reading Pixy’s clever Fast rollovers, no preload needed method for using a single background image for multiple hover states, it got me thinking. What if the concept was used to offer a zoomed view of a thumbnail image, right inline on the page, again using a single image?

Here’s the example, where I’ve created a single JPG image that contains both the thumbnail and zoomed photo below it. I then use Pixy’s idea of changing the background-position as well as the width and height for the :hover state to hide the thumbnail, but reveal the larger zoomed photo.

I’m not entirely sure that this is even a practical application of the concept — but it seems like it could work pretty well in certain circumstances, so I thought I’d throw the idea out there.

What to do with un-styled viewers? I thought that making a “View image” link that points directly to the thumbnail/zoomed photo would be acceptable, then hiding the link text with recently discovered text-indent: -1000em; trick. I’m sure there are other, more elegant things to do with a non-styled view, but this seemed the easiest, without creating an additional separate image.

I’ve only tested this on Mac: Camino, IE5.2 and Safari.

59 Comments

Mini-Tab Shapes

Posted at 10:53 PM

And you thought that there was nothing more to be said about CSS tabs… In exploring navigation ideas for a new project, I wanted a mini-tab effect, but something different than the default, border-bottom that the method utilizes.

The nice thing about the original mini-tabs is that the border will always be the exact width of the text above it — but you are stuck with a square tab. I started thinking of ways that I could simplistically style the tab portion differently. So I came up with Mini-Tab Shapes. Each style uses a single, small GIF for hovering and active tabs. The answer to my width dillemma (the fact that the width would change depending on the length of the word) was to make the tab image small enough and then center it using:

background: url(tab_rounded.gif) no-repeat bottom center;

Now, if your navigation only contains a few items, you could easily create the tab graphics to fit the entire width of the word — however if you’d like the text to be resizable, the effect would break. The possibilities for shapes go far beyond the four examples, and I’m sure would work well in a vertical list as well. Update: They do.

Tested in Mac: Safari, Camino, IE5; PC: IE5.0, IE5.5, IE6, Opera7

54 Comments