Phanet

Quoit is a small, lightweight PHP-based quotes database. Install is slightly less user-friendly than normal, but it’s nothing terribly drastic–just edit config.php to point to your database and access http://yoursite.com/quoit/setup.php to set up the tables. Once you’ve installed, you’ll need to delete or rename setup.php since users can potentially alter your database tables and create alternative admin accounts by running setup again. I tried to minimize the risk there, but nothing is foolproof.

There’s very little UI-based control over Quoit from an administration standpoint. There’s a link to delete a quote of your choosing (visible only to admins, of course) and that’s about it. If you want to make another user an admin, change the “level” field in their row in your database to 4. (To be honest there are only two user levels, represented by 1 and 4, but I wanted to keep my options open.)

There’s also no easy way to change your password. This will be coming in a future release, once I’m not sick of the sight of opening and closing processing instructions.

Enjoy! Download is here.

Check out Quoit live here.

Minn is back, and it’s better than ever. With a new, original (I think) three-column layout that uses floats instead of absolute positioning, Minn will fill any browser window to the fullest and maximize your reading experience!

Tested in modern browsers. &c &c.

I had loads of fun with this one. One of the prettiest mockups I’ve ever created nearly ruined by the fact that it’s completely un-layout-able. I was able to get around that, though! (Except not for IE6. Cue heart attack.) And now it’s finished in all its glory, ready and waiting to burnish the face of your website to a mirror shine.

XHTML 1.0 and CSS3 valid.

Tested in IE8, Firefox 3.5, Opera 9/10, and Safari 4.

A Time to Speak is a literary magazine staffed by students from Providence Extension Program, a homeschool program in southern Ohio. I, a former student, was contracted to design the website for the ATTS people (these people include my sister).

It’s a very simple blog design, since all they needed was essentially an easy announcement system and periodic large updates, which is exactly the kind of thing WordPress is good at.

Tested in IE8, Firefox 3.5, Opera 9/10, and Safari 4.

TUMIZA is a red and brown corporate site theme designed for GuruMarco.com. It started out as a web design mockup that I cleaned up and now-ized, but with varying requests from the guys at GuruMarco it eventually evolved into a more 90s-ish, compact, darker theme.

Tested in IE8, Firefox 3.5, Opera 9/10, and Safari 4.

ESL is a black and green, minimal theme. It’s left-aligned and has two sidebars, as well as an integrated search form.

XHTML 1.1 and CSS3 valid.

Tested in IE8, Firefox 3.5, Opera 9/10, and Safari 4.

Part of the theme trio for Chemistry Communications.
Tested in Safari, Firefox, and Opera.

Part of the theme trio for Chemistry Communications.

Tested in Safari, Firefox, and Opera.

Part of the theme trio for Chemistry Communications.
Tested in Safari, Firefox, and Opera.

From now on, I’ll be moving all my projects over to my new dev subdomain. These are as beta as you can get without being on my computer, because that’s basically what it is–a mirror of my /Applications/MAMP/htdocs folder, updated nightly with unison and launchd (tutorial on that coming up!).

Yeah, so you’ll end up getting stuff like “error: undefined function” on the Crappy Code Detector and COMPLETELY inscrutable Wordpress theme drafts, but they’ll flesh themselves out eventually.

All of it is free, of course. Or will be, once I finish it. Most stuff will be shoved into a new git repo at the last minute, just for the sake of free file hosting. Until then, enjoy.

http://www.rainymood.com/rainymood30.mp3 — recommended artists: radiohead, coldplay, ratatat

You can’t. Sorry.

Quoit is a small, lightweight PHP-based quotes database. Install is slightly less user-friendly than normal, but it’s nothing terribly drastic–just edit config.php to point to your database and access http://yoursite.com/quoit/setup.php to set up the tables. Once you’ve installed, you’ll need to delete or rename setup.php since users can potentially alter your database tables and create alternative admin accounts by running setup again. I tried to minimize the risk there, but nothing is foolproof.

There’s very little UI-based control over Quoit from an administration standpoint. There’s a link to delete a quote of your choosing (visible only to admins, of course) and that’s about it. If you want to make another user an admin, change the “level” field in their row in your database to 4. (To be honest there are only two user levels, represented by 1 and 4, but I wanted to keep my options open.)

There’s also no easy way to change your password. This will be coming in a future release, once I’m not sick of the sight of opening and closing processing instructions.

Enjoy! Download is here.

Check out Quoit live here.

It’s a project I’m working on with Flavio Premoli and Bryen Yunashko. Phanet is basically a feed aggregator that needs a revamp (which is what I’m here for). You can check it out–figuratively or literally–on github.

Also, Phanet appears to add posts only when its sources are updated, so this post serves debug purposes as well.

occurred (briefly) earlier today when I accidentally deleted my entire Wordpress database. Fortunately bluehost keeps biweekly backups.

Minn is back, and it’s better than ever. With a new, original (I think) three-column layout that uses floats instead of absolute positioning, Minn will fill any browser window to the fullest and maximize your reading experience!

Tested in modern browsers. &c &c.

I had loads of fun with this one. One of the prettiest mockups I’ve ever created nearly ruined by the fact that it’s completely un-layout-able. I was able to get around that, though! (Except not for IE6. Cue heart attack.) And now it’s finished in all its glory, ready and waiting to burnish the face of your website to a mirror shine.

XHTML 1.0 and CSS3 valid.

Tested in IE8, Firefox 3.5, Opera 9/10, and Safari 4.

has added such things as better file organization, prettier permalinks with mod_rewrite, and a registration/login system that doesn’t suck.

A Time to Speak is a literary magazine staffed by students from Providence Extension Program, a homeschool program in southern Ohio. I, a former student, was contracted to design the website for the ATTS people (these people include my sister).

It’s a very simple blog design, since all they needed was essentially an easy announcement system and periodic large updates, which is exactly the kind of thing Wordpress is good at.

Tested in IE8, Firefox 3.5, Opera 9/10, and Safari 4.

We’ve all seen it before. Arrange a careful row of boxes–whether they be links, snippets of text, or something else–and as soon as you resize your window and it gets too narrow, the rightmost link drops to the next line.

It’s annoying. It’s widespread. And it’s easily solvable!

Now, normally the code for a list item (let’s call him LI, or li for short) would be something like this:

li {
float: left;
padding: 5px;
}

Pretty simple stuff. You have to of course set overflow: hidden on the parent element to make sure it contains the lis, but that’s a problem for another time.

With the above behavior, which is one of the most popular methods of displaying links in a row, you get the annoying linebreaking behavior. How can we solve this problem? The answer lies on not floating the box. Floated elements should (and indeed do) float to the next line when there’s not enough space for them, but you don’t always want them doing that.

Take out the float, and display the li as an inline block instead.

li {
display: inline-block;
padding: 5px;
}

Well, great. Now it’s exactly like it was before, but the code’s a bit longer. Fortunately, however, inline elements actually act as inline elements, which means the handy white-space: nowrap will affect them. white-space: nowrap, believe it or not, prevents the text from wrapping to the next line. Indeed it’s on by default in

 elements in most browsers, which means the 
 will stretch to the right as far as the text goes. Add the declaration to our parent element:

ul {
white-space: nowrap
}
And there you have it! A nice list that will stay in a line and behave itself. Of course, we’re not quite finished. IE6–insert heart attack from surprise–doesn’t do inline-block correctly. It treats inline-block elements like block elements, in fact. Thus we need a hack, and this one is easy. Curiously, IE6 will display inline elements properly but allow them to be styled like block elements when hasLayout is on. So all we need is
* html li {
display: inline;
zoom: 1; /* triggers hasLayout */
}
Thanks to skyjumper of #css on Freenode for helping me out with this. I hope you all enjoyed the tutorial as much as I did making it!