Today I upgraded from WordPress 2.3.3 to 2.6.1. I’m such a late adopter sometimes.
I had to go through and repeat a few hacks. For example, 2.3.x didn’t allow you to do get_sidebar($name), so I’d hacked the “get_sidebar()” function. And I replaced the still-broken Atom feed reading widget with James Wilson’s Google Reader Widget.
Then I finally got fed up with the default “Search” widget, which doesn’t look like the other widgets at all (no title), so I started hacking into that one. Then I realized “why hack, when I can extend?”
So, here it is, Better Search Widget.
All it does is add a search widget with a customizable title, submit button, and field size. Quick-and-useful. You can see the results in the sidebar.
If you decide to use it, leave a comment and I’ll check out your blog.
A short post for a busy week.
I just downloaded the Spore Creature Creator, and this file showed up on my desktop: 792248d6ad421d577132c2b648bbed45_scc_trial_na.exe.
Why not “Spore Creature Creator Trial Install.exe”, or, if spaces aren’t your thing, “SporeCreatureCreatorTrialInstall.exe”? Either would be infinitely more meaningful than an MD5 hash followed by an acronym and a region code.
While the developers may have had a reason (though I can’t imagine it’s a good enough reason) to use this file name, the web team has no excuse.
There’s a lesson here: be nice to users. Whether it’s just a file name or helpful error messages or designing a user interface/experience, don’t treat your users like machines that parse your (bizarre) internal formats.
And Will Wright, if you’re listening, ask someone to rename that file.
Looking at WordPress themes usually makes me cringe. It’s as if there was a memo on semantic markup and the community of WP developers didn’t get it.
Some themes waste kilobytes of HTML source on something that could be achieved with 75% less markup. Some use blatantly non-compliant code. Almost none use semantic names.
But what really irks me—I’ll cop to using meaningless code to make it look good—is the style of CSS that seems to be spreading: breaking up definitions into a half-dozen chunks, no line breaks, lack of organization. I think their heart is in the right place (a section for colors, so don’t have to worry about layout; a section for typography, so the precious padding is protected) but the result is a horrid mess.
I blame Michael Heilemann, the designer behind the bland and semantic-free default WordPress theme. I imagine theme developers, many just starting with HTML and CSS, started by looking at his code, and thought that was the way to do it. Then it spread like a virus.
Here’s an example from “Autumn Concept 1.0″:
#topbar {background-color: #4b7c44;}
#footer {background-color: #4b7c44;}
#mainpicinner {height: 250px; background: «
url(images/mainpic01.jpg) top left «
no-repeat #fff; border: 1px solid #fff;}
/* typography */
#logo a {color: #3a4032;}
.textbkg {border-left: 4px solid #ebf0cf;}
(« is an inserted linebreak.)
Wow. Line breaks? Readability? Was this passed through a bad version of JSMin?
This is from the “Color Scheme” section, but the first directive for #mainpicinner is height. It also has a border, not just border-color but the whole thing. What’s the point of having sections if you proceed to ignore them immediately?
The rest is filled with classes like cols01 and box01 (while there are other cols##, there is no box02).
But that isn’t my real problem. My real problem is about 20 lines further down:
body {position: relative; background: #1f1f1f; «
font: 70% Verdana, Arial, Helvetica, «
sans-serif; text-align: center; letter-spacing: 0;}
#container {float: left; display: block; width: 100%;}
#topbar {float: left; display: block; width: «
100%; background-image: url(images/topbar.png); «
background-position: top; background-repeat: «
repeat-x; text-align: left; padding: 13px 0 6px 0;}
#topbar div {padding-bottom: 0;}
#container is back. (As are backgrounds. Pick a spot, already!)
This kind of CSS is hard to read, hard to maintain, and hard to customize. Even if the initial version is perfect—which doesn’t exist—things will start to break as soon as someone opens the file. Even in this published style sheet, the author couldn’t decide if background images and borders belonged in “Color Scheme” or “General Styles.” What chance does a maintainer have?
I am, admittedly, obsessively strict with my style sheets. I like to make very sure that every style affects only what I intend it to affect. But I never let the styles for one element single get broken into two places. Instead, what I try to do is keep similar styles in a similar order inside those blocks:
blockquote.dropquote {
float: right; font-family: Arial, «
Helvetica, sans-serif;
font-size: 130%;
color: #662020;
background-color: #ddd;
}
div.login {
position: absolute;
top: 0;
left: 0;
font-size: 80%;
color: #fff;
}
Get the idea? Within each selector, I try to keep things in the same order. I almost always keep positioning styles first and then do either typography or color. To me, this is much more readable and maintainable. If my header div is 3 pixels too wide, I don’t have to comb through all the #header sections. I go to one place and fix it.
I like to extract the CSS order from the document order. This doesn’t necessarily stay complete or strict, especially when you have classes that can be used anywhere or you’re controlling tags directly. The header styles do come before the content styles, though, which come before the footer styles. That just makes sense.
Am I the only one who can’t stand this “style” of CSS? Do you use it? Why?
I’ve been reading Eran Hammer-Lahav’s intelligent posts on microblog scalability, and now I’m concerned about my own “microblog” site, Picofiction.
Similar to social networks, social updates, social messaging, social… Like many social web sites—amongst our weaponry…—Picofiction lets you “follow” your favorite authors, displaying all their posts along with yours.
I handle this very naïvely: everything is offloaded to the database. There are three tables involved here, one of users, one of posts, and one of follower/followee bindings.
Here’s the basic structure of this query:
SELECT post_id, post_body, post_date, post_type, user_name AS author_name, user_id AS author_id FROM posts LEFT JOIN users ON posts.author_id = users.user_id WHERE author_id = 'CURRENT_USER' OR author_id IN ( (SELECT followed_id FROM followers WHERE following_id = 'CURRENT_USER') ) ORDER BY post_date DESC LIMIT PAGE_START,20;
Here’s where I need help: this works great on a single database, but it does not scale horizontally.
Since this horizontal scalability is such a hot topic right now, I’m asking for ideas. I’d like to put in the infrastructure before there is a need for it.
Eran points out that caching is not as simple a solution as we’d like to think. What do you cache? How do you keep caches in sync?
Does anyone have experience with MySQL Cluster Servers? It seems like the best way of scaling is to make the process as parallelizable as possible. The database then handles the parallelization, so the less I can do in the program the better, right?
A debate has cropped up over “designed by” links, those (hopefully) little links a designer puts on a page to take credit and get themselves some traffic and customers.
On the one side, Pat Dryburgh argues word-of-mouth is superior to self-advertising: “If the design is good enough, they will ask my clients, and if they like me enough, then they will tell people about me.”
In rebuttal, Sophia Lucero at wisdump.com claims your “designed by” link should be like a Louis Vuitton logo: “Your brand should never hurt your creations, it should enhance them”.
To me, there is an issue of “ownership” to consider. If I put my name on something, I take responsibility for it as much as credit. My name means “I did this, I’m proud of it, and I want to be associated with it.” I think we’ve all done work we’ve left our names off, because we were rushed or a client demanded changes in spite of our best advice or… well, you get the idea: we weren’t proud of it.
So what do you do? Are you a “designed by” designer? Do you stick to code comments? What if you’re a back-end developer?
Edit: I should link Chris Brogan’s series on personal branding. It definitely applies to this question.
Follow Me