Tag: b2evolution

Web Design Got Complicated

2015-09-23, 1:46 pm
Categories: Stream of Consciousness, Tech

It's probably not surprising that rebuilding my website has gotten me thinking about web development.

The first six years I ran this site, I did it all by hand -- my own HTML, my own CSS, no scripting languages. I thought that CMS software was for pussies.

But ultimately, plain old HTML just doesn't scale. I conceded that when I started using b2evolution for my blog back in '06, and it's truer now than it was then.

You can poke around some of the old sections of the site a bit, the ones that haven't been updated significantly since the turn of the century -- KateStory's a good one, or the Features page (though I'd like to get at least the Features page up to date sooner than later, and maybe the KateStory one too, so maybe there'll be people reading this post well after those pages shed their 1990's style) -- and they get the job done. Breadcrumb navigation at the bottom of every section, leading you back to either the parent page or the main index.

But Jesus, you can only manually copy and paste "Back to Features / Back to Index" so many times.

And maintaining a years-long blog archive without a CMS to automate it for you? It gets old.

So, you want some automation? You're going to need a scripting language. That usually means PHP for server-side, and JavaScript for client-side.

I got to thinking the other day -- man, it's weird that you need extra toolsets to perform such common tasks as, say, reusing a navigation bar. It's weird that there's not some way just to write up a navigation bar and then write code, in HTML, no scripting required, to embed that common HTML block on the current page.

I thought this was a pretty smart observation.

For about three seconds.

At which point I realized I had just described fucking frames.

Course, the biggest problem with frames is that they weren't exactly what I'm describing. I'm talking about just an HTML snippet in some secondary file that you call from a primary file -- like an include in PHP.

That's not what frames were. Frames were complete fucking HTML pages -- <html>, <head>, <body> (or, more likely, <HTML>, <HEAD>, <BODY>, because in the old days we wrote HTML tags in all-caps) -- which is, most times, downright stupid and wasteful, and was much moreso in the days of 14.4 dialup. Even worse than the load time was the logistics -- if you used frames to build a website with a header, a footer, and a sidebar, you'd have a total of five separate web pages -- a content area, the three other sections, and some kind of main page that all of them were embedded into. This was a fucking nightmare for linking, both for the developer (who had to remember to set the target attribute on every single link, lest the page load in the navigation bar instead of the content area) and the end user (because the URL in the location bar would be the container page that called all the other pages, not the content page the user was currently looking at).

In a way, it's kinda weird that nobody's gone back to that well and tried to do it again, but do it right this time. Update the HTML spec to allow an HTML file to call a reusable snippet of HTML from another file, one that isn't a complete page.

Given all the concessions HTML5 has made to the modern Web, it's surprising that hasn't happened, even given how slowly it takes for a spec to be approved. We've got a <nav> tag, which is nice and all, but who the hell uses a <nav> tag without calling some kind of scripting language that automates code reuse? There really aren't that damn many reasons to use the <nav> tag for code that isn't going to be reused on multiple pages throughout a site.

And I dunno, I'm sure somebody's brought this up, maybe it's on the itinerary as a consideration for HTML6.

Which is another thing, really: the people making the decisions on the specs do not want the same things I want.

I liked XHTML. (In fact, lest this whole thing come off as a curmudgeonly damn-kids-get-off-my-lawn diatribe against new technologies and standards, I'd like to note that I was using XHTML Strict back when you pretty much had to be using a beta version of Phoenix -- before it was Firebird, before it was Firefox -- for it to render correctly.) I thought it was the future. I wish XHTML2 had taken off. HTML5 feels ugly and inconsistent by comparison, and, as legitimately goddamn useful as it is to be able to put something like data-reveal aria-hidden="true" in the middle of a tag's attributes, it always feels dirty somehow.

But I digress.

Point is, in 2006, I switched the blog from just plain old HTML and CSS, and added two more elements: a MySQL database to actually store all the shit, and a PHP CMS (originally b2evolution, later switched to WordPress).

And then came smartphones.

We live in a world now where every website has to be designed for multiple layouts at multiple resolutions. You wanna try doing that without using an existing library as a base? Try it for a few days. I guarantee you will no longer want that.

I think my resistance to picking up new libraries is that every time you do it, you cede a measure of control for the sake of convenience. I don't like ceding control. I like my website to do what the fuck I tell it to, not what some piece of software thinks I want it to.

I've spent the last decade arguing with blogging software to get it to quit doing stupid shit like turn my straight quotes into "smart" quotes and my double-hyphens into dashes. Just the other day, I built a page in WordPress and discovered that it replaced all my HTML comments with fucking empty paragraphs. Why would I want that? Why would anyone want that?! And that's after I put all the remove_filter code in my functions.php.

And that's the thing: WordPress isn't built for guys like me. Guys like me use it, extensively (it is the world's most popular CMS), because it automates a bunch of shit that we'd rather not have to deal with ourselves and because when we're done we can hand it off to end users so they can update their own site.

But I still write these posts in HTML. I want to define my own paragraph breaks, my own code tags, the difference between an <em> and a <cite> even though they look the same to an end user.

(And okay, I still use <em> and <strong> over <i> and <b>; there's really no explaining that except as a ridiculous affectation. I recently learned Markdown and used it to write a short story -- I'll come back to that at a later date -- and I could see switching to that. HTML really is too damn verbose.)

...and that was another lengthy digression.

So. Mobile design.

Bootstrap is the most commonly used toolkit for responsive websites. I've used it, it works well, but it's not my favorite idiom, and I've decided I prefer Zurb Foundation. So that's what I used to build the new site layout.

Except, of course, then you've got to get two dueling design kits to play nice to each other. Square the circle between WordPress and Foundation.

I started to build the new theme from scratch, and I'm glad I was only a few hours into that project when I discovered JointsWP, because that would have been one hell of a project.

JointsWP is poorly documented but has proven pretty easy to pick up anyway.

So. I've gone from HTML and CSS to HTML, CSS, and WordPress (HTML/CSS/PHP/MySQL), to HTML, CSS, WordPress, Foundation (HTML/SCSS/JavaScript, importing libraries including jQuery), and JointsWP (ditto plus PHP). And on top of that I'm using Git for version tracking, Gulp to process the SCSS, and Bower to download all the other scripts and toolkits I need and keep them updated.

So, going with Foundation (or Bootstrap, or whatever) as a standard toolkit, you get somebody else's codebase to start from. That comes with some elements that are a necessary evil (I hate fucking CSS resets, and think writing p { margin: 0; } is an abomination in the sight of God and Nature -- but if it means I can assume my site will look more or less correct in Mobile Safari without having to go out and buy an iPhone, then I guess I'll take it), and others that are actually pretty great -- I find SCSS to be really exciting, a huge saver of time and tedium, and it's hard to go back to vanilla CSS now that I've used it.

Course, with increasing complexity, you still hit those things that don't quite work right. One example I've found is that Foundation sets your placeholder text (the gray letters that appear in an "empty" input field) too light to be legible, and does not have a simple definition in _settings.scss to let you adjust it to darker. I've found a mixin that allows you to create such a definition pretty simply, but for some reason JointsWP doesn't like it (or maybe Gulp doesn't). So until I get around to finding a fix, the text stays light, and I'll just have to trust that you the user will be able to determine that the input field under the phrase "Search for:" and to the left of the big blue button that says "Search" is a search box.

I've also got loads of optimization still to do; part of that's going to mean figuring out what parts of Foundation's CSS and JS I'm not actually using and cutting them out of the calls, and part of it's probably going to mean minification.

Minification is one of those things I resisted for awhile but have come around on. It can be a real hassle for debugging, not being able to view a stylesheet or script in full, and it may not be practical just to save a few kilobytes (or a few dozen, rarely a few hundred) -- but on the other hand, well, it's not so different from compiling source code to binary; the end result is still that you take something human-readable and turn it into something much less human-readable.

And of course now that I'm using a preprocessor, my CSS file isn't my real source code anyway; it's already the result of taking my code, feeding it through an interpreter, and outputting something that is not my code. If you want to look at the stylesheet for this site, you want to look at the SCSS file anyway (it's on Github), not the CSS file. And if I'm already telling people "Look at the SCSS file, not the CSS file," then what's the harm in minifying the CSS file and making it harder for people to read?

For now -- prior to removing unnecessary code calls and minifying everything -- I feel like the site design's a lot more bloated than it needs to be. And even once I slim it down, there are going to be some compromises that go against my sensibilities -- for example, when you loaded this page, you loaded two separate navigation systems, the desktop version (top navigation and sidebar) and the mobile version (just a sidebar, which contains many of the same elements as the topnav and sidebar from the desktop version but is not exactly the same), even though you can only see one of them. That redundancy makes me wince a little bit, but ultimately I think it's the best and simplest way of doing it. Sometimes, good design does require some redundancy.

All that to say -- man, there have been a lot of changes to web design in the last twenty years. And while there are trends I really don't like (if I never have to build another slideshow it'll be too soon; gradients are usually dumb and pointless; and the trend of making visited links the same color as unvisited ones feels like a step backward into 1995), there are also a lot that I've eventually warmed up to, or at least accepted as something I've gotta deal with.

Anyway. Welcome to the new corporate-sellout.com.

And one more thing about the site before I go: it's probably worth noting that this site is different from the other sites I build, because it's mine. Its primary audience is me. I like having an audience, but frankly I'm always a little (pleasantly) surprised whenever anyone actually tells me they enjoyed something I put on this site.

Because this site isn't one of my professional sites. I didn't build it for a client. It's not my portfolio site, which I built to attract clients. This one? It's for me. As should be clear from this rambling, 2200-word stream-of-consciousness post about the technical ins and outs of web design, as it applies specifically to me and to this site.

Frankly I'm always surprised when anyone actually reads anything like this.

WordPress

2008-01-20, 1:27 am
Categories: Books, Games, Status Updates, Stream of Consciousness, Tech

You've probably noticed the site looks different.

Or, if you haven't because you're reading this via RSS, you've probably noticed you just got ten duplicate entries in your reader.

That's because I just migrated my backend over to WordPress.

As I alluded in a recent post (and yes, I update so seldom that three months ago qualifies as "recent"), b2evolution reached a point where it made even the simplest tasks a chore. A quick rundown:

  • As noted before, it refused "id" and "name" attributes in <a> tags. In other words, it would not allow me to use anchor tags as anchors.
  • Its error messages were hideous. "Invalid URL" may be useful information in a post that has as many as three links in it, but when you have fifty, it's the coding equivalent of punching me in the gut and then pointing and laughing. And for those of you who have not yet taken a 100-level programming course, it bears noting here that telling me which URL was causing a problem would take maybe twenty characters of additional code.
  • Not only wouldn't it tell me which URL was a problem, it wouldn't tell me why. I had to poke through a gigantic list of blocked URLs before I discovered that b2evolution had for some reason automatically blacklisted all mac.com sites.
  • Okay, this is the best one. You think blocking mac.com is bad? Check this out. In the same post, I linked to a rather lengthy driver URL -- go ahead and mouse over that link and see what I mean -- and b2evolution rejected it.
    See anything wrong with it? No? Neither did I. It took me about an hour to figure out what was happening. Here's the problem:
    The link contains the string "&ProductID". See where I'm going yet? No, you probably don't; even if you know that the HTML code for an ampersand is "&amp;" it probably hasn't hit you what happened there.
    So okay, here's what happened: b2evolution saw the "&Product" in that link, expanded it to "&amp;Product", and then, on a second pass, turned the ;P into a smiley.
    Hang on, it gets better: there is no way to disable smileys in the b2evolution admin control panel; you have to hack the PHP manually.
    Hang on, it gets even better: there actually is a checkbox in the control panel to allow you to disable smileys...and it is grayed out by default. Someone went to the trouble of actually coding up an easy fix...just to make it impossible to use.

In short, b2evolution was like everything my old web host ever gave me: at first, it was a generous gift and gave me an outlet to share my thoughts with the world, but over a period of years it became less and less bearable up until it reached a point where I simply couldn't go about my daily business anymore without it making my life unpleasant.

Actually, catty remarks about Internet drama aside, this is a coincidence -- I started this overhaul several days before Sharkey decided to pull up stakes. However, it's a happy coincidence, and it's nice to see him carve us out an alternative to Crazytown.

Anyway, on to the technical side, for anyone else who has WordPress questions. On the whole, I think WP is better so far. I absolutely despise "smart" quotes, and it parses text inside <code> tags just as poorly as b2evolution, if not even worse, but fortunately I found two plugins called Unfancy Quote and Preserve Code Formatting which take care of those two problems right out the gate.

I think I've done a pretty good job with the new theme, taking the old look and making a few modest changes to it. (I've finally retired that silly-ass old digits.com counter. It is the end of an era.) The CSS is my own, but the PHP code is largely adapted from Sandbox. As such, it's GPL'ed code, so once I'm finished tweaking it I'll put a zip file up just in case anyone wants to eyeball my source.

If there's anyone else trying to migrate old-ass b2evolution (0.9 series) to WordPress, there are a couple different ways to do it. You can convert to Movable Type and import natively (tutorial at Insert Witty Title), which preserves categories but hoses custom slugs, or you can use a conversion PHP script (tutorial at ibrian, though there are a few different versions of the script), which preserves custom slugs but hoses categories. I opted for the latter since it's less of a pain to recreate categories than slugs, but YMMV; if you never used custom slugs and just stuck with the default post titles, I'd say try the former. (There is something in there about how b2evo replaces spaces with underscores and WP replaces them with dashes, but there should be a tool to correct that too.)

Anyway. New blog, new forum. Let me know what you think. Maybe one of these days I'll get up the courage to dust the cobwebs off my Links page.

Playing: Super Mario Galaxy.

Reading: Just finishing Dune.

Thad's Tech Tips

2007-06-19, 2:04 pm
Categories: Tech

Hello, random Googler. This one is for you.

Today's post is about some issues I've been having at work with an old Web server running Fedora Core 2. For various reasons, I have been attempting to update the packages on this old piece of junk to the latest available versions. (That is, the latest available for FC2; I'm not going to try the Herculean task of updating to 7.) For those of you who are not interested in technical details on server administration, this post is not for you; it is for the random Googler who found this page by searching for some of the keywords in the below explanation. Keywords like 4f2a6fd2, 6cdf2cc1, yum, GPG, and zlib.

The reason that I am posting this is that I have spent several days figuring this shit out for myself, with only minimal aid provided by Google searches; there seems to be no information anywhere detailing this set of problems, and I'd like to make life a little easier for the next poor bastard caught in this situation.

Problem #1 is finding a yum repository. The Fedora Legacy Project has shut down. There are still a goodly number of mirrors operational as of this writing, but my copy of yum rejected a number of them based on errors like the following:

Gathering header information file(s) from server(s)
Server: Fedora Core 2 - via Fedora Legacy Project
retrygrab() failed for:
http://[...]/fedora/2/os/i386/headers/header.info
Executing failover method
failover: out of servers to try
Error getting file http://[...]/fedora/2/os/i386/headers/header.info
[Errno 4] IOError: HTTP Error 404: Not Found

A couple of URLs I've found that do have the header.info file are:

http://www.blagblagblag.org/pub/mirrors/fedoralegacy/fedora/$releasever/updates/$basearch/
http://fedoralegacy.mirrors.redwire.net/fedora/$releasever/updates/$basearch/

and the latter, conveniently, is even the top option in the default /etc/yum.conf . So just comment out the Main Fedora Updates section and uncomment the pertinent lines under Fedora Legacy Project.

(Aside gripe: b2evo apparently automatically turns URLs into links, even if they are obviously bullshit URLs. Update 2008-01-17: Switching to WordPress took care of this problem.)

Then comes my next problem:

warning: rpmts_HdrFromFdno: V3 DSA signature: NOKEY, key ID 4f2a6fd2
Error: Could not find the GPG Key necessary to validate pkg /var/cache/yum/updates-released/packages/pango-1.4.1-1.i386.rpm
Error: You may want to run yum clean or remove the file:
/var/cache/yum/updates-released/packages/pango-1.4.1-1.i386.rpm
Error: You may also check that you have the correct GPG keys installed


It turns out that key is actually located on the default install. Just do:

rpm --import /usr/share/doc/fedora-release-2/RPM-GPG-KEY-fedora

You'll probably also want to import http://www.fedoralegacy.org/FEDORA-LEGACY-GPG-KEY.

You'd think that would be the end of my GPG problems. But you'd be wrong.

warning: rpmts_HdrFromFdno: V3 DSA signature: NOKEY, key ID 6cdf2cc1
Error: Could not find the GPG Key necessary to validate pkg /var/cache/yum/crash-hat/packages/zlib-1.2.2.2-0.i386.rpm
Error: You may want to run yum clean or remove the file:
/var/cache/yum/crash-hat/packages/zlib-1.2.2.2-0.i386.rpm
Error: You may also check that you have the correct GPG keys installed

Now this one turned out to be a bit tricky. All my Google searches for "6cdf2cc1" turned up people trying to install a certain open-source anti-virus program (I'm omitting its name because if you're like me, you'll see page after page of results mentioning that program and then attempt a Google search which removes that search term). Very few mentioned zlib, and none told me where I could find the appropriate GPG key.

After some further banging my head against the wall, it occurred to me to ask myself what set zlib apart from all the other packages, since they hadn't given me any errors.

As it turns out, zlib was the only package hanging out in the /var/cache/yum/crash-hat/packages directory. It was, in fact, from a different repository, not the Fedora Legacy repos listed above.

So I Googled crash-hat and the very first match was titled CrashHat YUM Repository. It linked the appropriate GPG-KEY and that was all I needed; at last I could update my server. Now it is merely ancient, not decrepit.

With any luck, this may help fix some of the other issues the server's been having. Perhaps more on those at a later date.

The Contest, Again/Still

2006-04-18, 7:03 pm
Categories: Announcements, Games

Looks like I made the winners' circle in the BioWare contest. #3 in the community votes.

Thanks to everyone who voted, and anybody who's found my site through the contest, welcome, and I hope you enjoy my ranting about MapQuest. (Incidentally, dexonline.com has not actually fixed its Mapquest system, and still routinely directs me to Kansas.)

Updated Features to put my mod at the top, and to add my current Pyoko avatar.

(...Ack, damn daylight savings time. We don't do that crap in Arizona. Am I really going to have to change my blog settings twice a year? Laaaaaaaame.)

(I sure hope nobody's got an RSS reader open right now. I've edited this entry about a half-dozen times in ten minutes. And I personally hate when people do that shit.)

Vote for My Mod

2006-01-31, 1:47 pm
Categories: Announcements, Games

The contest is closed, and my mod, A Hero's Death, is now available for download and voting in the NWN vault.

If you have NWN and the expansions, please download it and give it a play. With any luck, you'll love it and give it a glowing evaluation.

But play fair -- don't vote until and unless you've played it.

Please feel free to leave feedback on either of the following threads:

(I'm going to copy this entry to the top of the page and leave it there until the contest ends, but at the moment I'm at lunch and for some reason b2evo thinks I don't have write privileges for my PHP files. I'd complain about the amount of irritation involved in switching to blogging software, but of course if I were still doing this by hand it would be 3.5 cubic bitches for me to update away from home in the first place.)

b2evolution

2006-01-14, 12:32 am
Categories: Announcements

Have finally bitten the bullet and decided to switch over to blogging software. Site now runs on b2evolution. Ideally this should mean I update more often because now I don't have to worry about all that tedious mucking about in the archives. In practice? Well, we'll see.

All the old features should still be up, though at one point in the install I nuked my entire directory and had to restore, so please let me know if there are any missing pages, pictures, etc. which I've overlooked.

Also, while I cut my teeth on HTML, I'm new to this whole PHP thing, so, while I think the site looks pretty good, there are a lot of things I'd like to refine -- most notably, I'd like each month's archive page to have a different intro, like the old archive pages I made myself with my own two hands. So there's plenty of work to do yet.

Keep watching this space.