Archive for April, 2009

Twitter? PHP? Yes!

Wednesday, April 29th, 2009

I’ve heard from a lot of people that twitter shortens URLs, apparently if they’re more than 30 characters. This means that something like http://www.yoursite.com/images/ would take the full 30, even without an image. I’ve taken a look into what you can do to shorten the URLs you use for your own images:

  1. Top-level domains: If you use http://yoursite.com instead of http://www.yoursite.com, you can slash four characters
  2. Root image folder: If you place a folder for your twitter images in your root, you can point to that folder, such as http://yoursite.com/i or http://yoursite.com/img
  3. Invisible PHP: If you have a index.php in your folder, you can go to http://yoursite.com/i/ and the server will find the index for you. Send it parameters, such as i for image name, and either g, p, or j for .gif, .png, or .jpg, respectively: http://yoursite.com/i/?i=pp1&p

In that final example, the URL is exactly thirty characters long.

For those who want to the PHP script, I have it below:

list($key, $value) = each($_GET);
if(isset($key) && $key != 'p' && $key != 's' && $key != 'm' && $key != 'cat')
{ //wordpress uses 'p', 's', 'm', and 'cat' for posts

$pretension = "<img src='img/twitter/";
$extension = ".bmp' />";
$flag=1;
if(isset($_GET['g']))
$extension = ".gif' />";
elseif(isset($_GET['p']))
$extension = ".png' />";
elseif(isset($_GET['j']))
$extension = ".jpg' />";
elseif(isset($_GET['h']))
$flag=2;

if($flag==2)
header("Location: http://www.".$key.".com/");
else
echo $pretension . $key . $extension;

}else{/*do regular index stuff */}

In this snippet, I paste it before the stuff of my wordpress index. certain GET keys are taken by WordPress, so those can never be my first key. As long as it isn’t, it’ll accept it as a short url, and you can use ‘p’ or ‘cat’ or such as the second or later key. Go to http://icosidodecahedron.com/?s2a&p to try it out. I’ve set it up so that ‘s’ means the sites I’ve made (I’ve made two, so 1 and 2), followed by a design revision (I only have one recorded on s1, but I have four revisions on s2). So try changing that from s2a to s2b, s2c, or s2d. The ‘p’ at the end denotes a .png file. If you put ‘h’, it’ll take it as an HTML page and redirect you.

If you’re the intensive type, you could set up an array on that page which will match the $key to a list of longer filenames in an associative array, which would let you not rename everything. If you’re referring to other sites, you’ll have to do this.

The way I see it, the shortest you could go is to put www.site.ca/?x
in which you have a maximum of 62 links ($key, from the above PHP example, would be a-z, 0-9, or A-Z), all of a pre-determined type. You could get a four-letter domain-name and something like .ca to shorten it further. Overkill? Yes; but I’m just saying, thirteen characters are possible.

So here’s the challenge: make yourselves or your clients a page where you upload an image, that image is placed in a ‘twitter’ folder in the images directory, the filename is added to the array, the user is given a link to paste, and the there’s some $_GET code in the index.php file that takes a visitor to the content described by the link. I’ll have to throw my own implementation up, though it would be completely useless for twitter while I have such a name as icosidodecahedron (seventeen characters).
I’ll try importing html files, too.

Color from Images

Tuesday, April 28th, 2009

I spent a large part of today trying to wrap my head around colours and design. If you aren’t using IE<8, you can see it here.

A number of days ago, I was playing around with Paint Shop Pro, and I found a great way to make pop art. Just use a median cut a few times, reduce to 256 colours, scale it down to something like 800 pixels wide, do a bunch more median cuts, and try dithering with different modes of 8-bit reduction. Eventually, you can push the image to where the best sixteen colours are, and you’re left with a poignant picture with a certain style and look.

Once I had done that, I realized I had a pretty good palette, and decided to use that for a site.
Tonight, then, I spent a few hours trying to give different things different colours, based on that source image. Eventually, I decided a few things:

  1. It’s very hard to use dark colours on a site, and most images yield a palette of darker colours.
  2. When reducing colours in that way, most programs will introduce a lot of greys. Grey is very neutral, which would mean several similarly-unsaturated hues could be replaced by one shade of grey. Greys aren’t really something you want to use a lot of, when you’ve got lots of colour.
  3. Whites are most usually cut out, unless most of the original image is white. Highlights are very important, in web design, so having all the bright points cut out doesn’t help.
  4. I find myself lacking all sorts of colours. Sometimes, a complementary colour works best as a highlight for something, but the palette might not contain any complementary colours.
  5. Often, you’ll get groups of similar colour scattered around the image. In the palette, though, these are all grouped together (and I have them ranked by brightness). This is only handy if you have two or more completely different areas on your page (a set of colours for the header, for example, and one for the body. Maybe another for the sidebar).

It’s something I’ll be experimenting with, but I don’t think it’ll prove itself to be fruitful, in the long run; I can’t imagine anyone with experience in design (and especially painting) relying on something like this.

I do recommend it, though, as an exercise into exploring the different colours in nature. Take some pictures, give the colours an Optimized Median Cut, and see what’s most common.

Site Update

Monday, April 27th, 2009

I’ve started on the overhaul. The first to go were the tabs, which just didn’t really fit the site. I’ve actually found that tabs make it very hard to create any-width sites, because they have a tendency to wrap is really bad ways.

I decided that icons really resonated with me, and so I made up a little set. I’m not proud of them, but a couple turned out good. I’ll improve them later, and maybe eventually add some scripting to help with the dynamism.

Some might also notice that the icosidodecahedron in the background becomes rippled when it goes behind the content. A better example is here, where I found the concept. I’m going to have to search around for the technique he used to get that rippled-glass effect. I’m sure I’ll eventually learn that he used rippled glass to get that rippled-glass effect.
Maybe I should try a dirty-window effect (I don’t really have any rippled glass around). You could play with the concept, of course, and maybe have a person in the background who’s face changes depending on which element is floating over it.
There’s a lot of fun stuff out there.

So far, the layout was my top priority. Tomorrow, I might start on the wording.

Windows 7 RC to be Released

Sunday, April 26th, 2009

“The eagerly-awaited Windows 7 Release Candidate 1 will be… made generally available on May 5…”
Who would have guessed we’d be hearing such an odd phrase? I’ll bet you anything that’s why they made Vista suck so bad: So people really NEED the next version, and follow the news of it until it comes out.
I was hesitant to buy a computer until Windows 7 came out, because I wanted to completely skip over Vista. As it turns out, I may be able to do just that!

They’re still clinging to a 2010 release date, apparently, but we could see it by September, or perhaps in a month.
So… anywhere from now to a year. Kind of a big range.

In other news, I think I’m falling in love with Google. From little things, like adding a little 3D button in Chrome as a joke, to organizing the YouTube Symphony Orchestra.
The whole aesthetic of the company is refreshing and beautiful, and they’re not afraid to do something wacky and non-mainstream. Take, for example, the fact that they’d change their google homepage logo (as they often do) for obscure days that no-one’s heard about, even though those sometimes cause controversy in the media.

Integrated Blog

Saturday, April 25th, 2009

I’ve changed the default theme to match my site, and switched the navigation links to point here instead of that other page.
Oh, I should put those couple entries into this blog.

I was looking around, and I noticed how disgusting this site is. I hadn’t even started on server-side includes, when I did up the pages; as a result, I have to use replace-all to change the navigation links. Also, the stylesheet is laying about with the other pages, which looks odd. I don’t know why I didn’t put it in a styles folder right off the bat.

I’ve got to rethink my colour scheme, look at what other people are doing with link colours, fix up some layout issues that I just didn’t do right, maybe rethink the layout completely, add a rippled-glass effect for the icosidodecahedron (when it goes behind the semi-transparent body), fix up some terrible wording, and add more content.

I was poking around at Visual Lizard, today, because I’ve sort of adopted them as my rivals. Forget that they’re at least four classes ahead of me, with ten years and as many employees under their belt.
If I’m ambitious, though, I could catch up with them. It seems a lot of them have overlapping technical skills, and the fact that their site seems rarely updated means they don’t get absolutely everything done now.
Anyway, what I found was that they had a page where they make a great case for you to hire them. If you’ve seen my landing page, you’d know that I’m missing the point completely. I’ve got to make lists of things I can do, and then a list of what potential clients would want, and then make the lists match up. At the moment, I sound like a desperate schoolboy, which isn’t really what I am (though I’ll be at least one of those things, in a couple months).

Geocities!?

Friday, April 24th, 2009

http://news.cnet.com/8301-17939_109-10226255-2.html

“Yahoo is closing its GeoCities personal home page service, and with it will go an era of self-expression on the Web that’s largely been replaced by social networks and blogs.”

Wow, and I only cancelled mine a couple months ago!
I had first gotten a Geocities account in college, when I wanted to put up some random applets, which are now found on the programming tab of my site. I also uploaded my resume.
All in all, it wasn’t a great site. It also wasn’t designed nearly so grotesquely as most of the others.

I remember Geocities as it says in that article: It was a backwater. Any time I was Googling something and found myself on a Geocities page, I considered just pressing the back button before reading anything. After all, what good could come of such information?
At any rate, it’s an ambivalent moment: One more old piece of the web, hailing back from the darkest ages, is fading away; but it was a wonderful piece of history. At the very least, historians must write about it.
What other monstrosities from the past are haunting us? Besides IE6.

On another note, I may have mentioned how slow this blog is.
I’m using a mobile internet connection, which has an impressive bandwidth of about 7.2Mbps (which actually works out to a still-reasonable 6.2Mbps), about 80KB/s throughput (If I get the full 800KB/s, it’s because I’m downloading ten things at once), and a rather slow latency.
In fact, WordPress seems to load thirty-three (!) different scripts, which altogether takes about a minute. After that, it has the forty-four images, which is another minute. Somewhere during the images, though, I can at least start writing.
I’d read from certain places (Dave Shea at messoblue had posted on this topic not too long ago) about CSS sprites, where every image is collated into one big file, which is used with hidden overflows and positioning to get the proper image showing out of it. The end result is something a bit smaller, but that one image only needs one server request. I’m sure anyone with a satellite uplink appreciates it when someone uses an sprite sheet.
In my case, I’m sure it would shave off a whole minute of waiting, for every single page. I imagine the browser needs to communicate with the server before it can decide to use its cached version?
Another thing I want to know is if I can condense the JS files into just a few. They look to be modular so that I can switch them with custom versions, or update them easier. As it is, I might go without certain features of extensibility, if it means I don’t have to wait a minute or more before writing.

I think my server is partly at fault. It loads in a quarter the time on localhost. (That’s a bit sarcastic; I’d expect localhost to be near-instant, as it’s located directly on my machine.)

(Oh, there are eleven different CSS files, too.)

New Blog

Wednesday, April 22nd, 2009

I’ve gotten my new WordPress up! I was sort of working through Livejournal, before, which means I had my personal stuff mixed in with my industry blog (or the other way ’round, rather).
Instead, I wanted a blog on my site specifically for computer/design/web topics.

I copy-pasted all my old stuff in here, which took forever. I’m not sure if it’s because of my internet connection (which seems to have outrageous latency).
So now I’ll try to keep this current.

While I’m blogging, I’ll talk a bit about my site:
As it is now, the site is a second-fiddle affair. I’ve spent a tremendous portion of my time, these last few months, working on The Embroidery House, as it was imperative that we roll out a working version before I took a break.
Because of this, my personal website is still using style and tricks from back when my designing was all red and beige. I stole those tabs straight from an A List Apart article (the sliding doors of CSS, by Doug Bowman), which brings me a shameful pang every time it crosses my mind. I just haven’t had the time to make a replacement, as of yet. All I could manage was to make the site somewhat presentable.

My next goal, then, is to bring my site up to speed. My main page is useless, and my blog could go there. I might divide my site up in a more logical way than is having a smattering of tabs with different content behind each. I need to completely redo my style, and try to make my domain original to me. At the moment, it’s something of a placeholder.
Furthermore, I need to create a brand for myself. There’s no way I could expect people to hire someone from a site called icosidodecahedron.com. The site is hosted on a small, cheap server not meant for business.
Ideally, I’ll find a short, memorable domain and shape myself to it; I tend to work better when I have some base on which to apply my inspiration and creativity. Once I’ve got the basic brand laid out, I’ll get proper hosting. Once I have enough clients to keep myself running steady, I have my eye on Media Temple, which seem to host everyone and everything I respect. jQuery, Mootools, Doug Bowman, Shaun Inman, and so many others. It’s really caught my eye.

I’ve always been the type to do things for myself. In art, especially — because of our human tendency to get a feel for a person based on their looks, — I feel that I need to draw and design all of my own stuff. The logo must be mine, the design must be mine, and all those little background images must be mine. ALA’s recent paper talked about design and how we viewed beautiful sites, and I was suddenly reminded of a pairing of Penny Arcade comics in which Tycho and Gabe had a falling out and decided they would each do their own strip. In the writer’s strip, there were a bunch of badly-drawn stick-figures waxing poetic about philosophy. In the artist’s strip, the characters looked exactly like they usually did, though the language was crude and badly-spelled. I realized that the artist was who I looked to for my perception of that world and its characters.
And so I’ve toyed around with the idea of pairing up with some sort of graphics specialist, but something deep in my mind cringes at the thought. I think what I want more is to closely examine the technique of a true artist.

That’s about it for now. I’m still trying to decide on a final price for my services. I flit from $100/month to $200/month, and wonder if one might be too low or another too high, but when we get right down to it, I’d say I’m an acceptable web designer, now, such that I could be payed $200/month for continual development and improvement of a site. Once the infrastructure is down, I might even decrease it to $100/month.

I’ll leave you with that.

Programmer Moments

Friday, April 17th, 2009

I’ve just had one of THOSE moments. You know, those programmer moments.
My client called me tonight, and told me that the page that loads all the different clothing was blank. It works in Chrome, so I didn’t actually notice it (I didn’t do anything to the page, really, so I didn’t think to test it in IE). I was tossing everything around, tearing apart a copy of my site, and eventually had it nearly identical to an old version of the site that worked. It still threw the error.
Eventually, I started replacing everything that wasn’t necessary. and found that it was coming from my XML document. I had a good long search through there before I managed to find that it was something in each of the last two XML entries, so I went down through the long list of elements until I found something that looked a bit like an 8, but with the top chopped off. I deleted the character, and it loaded up fine.
I was using a pixel font (I KNOW; I’M SO CRAZY), so what I thought was an 8 was actually ‘½’. It was for a hat that has a 3 ½” crown. Now I know: Internet Explorer can’t handle special characters in XML, while Chrome (and probably others; I didn’t test) can.

The golden rule is to test everything after every change. Ideally, I think you’re supposed to test before and after. You can think of these tests as save points. If something goes wrong, you know it’s something that was working last time you saw it working, so the question becomes, “What did I do since I saw it working?” If the list is long, you’ll be at it for hours. I did a great deal of stuff in the last few days, and I hadn’t tested much. I was worrying that it was something acting up with the server-side includes, which shouldn’t pose a problem but did act up on me when I had CSS disabled. For some reason, it added the commented-out HTML as plain text. On CSS Naked Day, I ended up just deleting those comments so the page didn’t look stupid.

In retrospect, that page is the oldest one on the site. I think it was the first thing I made, unless I threw up a quick “home” and “about” and whatever beforehand. It’s using old Ajax XML stuff with plain javascript, from the end of January. It’s crazy thinking back two months ago and seeing that everything is trash. I’ll leave you with an image from that era:

Horrible Example

Thursday, April 16th, 2009

I’ve realized that a bit of this was ‘milking it’ and just general hateful ranting, so I’ve removed those bits. It was wrong of me to do that.
Also, they have recently taken the site offline for a redesign. It was apparently created in an hour or two, so it’ll be interesting to see what it eventually looks like. It wasn’t so much a bad design (besides other issues all over) as it was an unfinished design.

Site link removed. He’s changing it, so there’s nothing to see there right now.
Wow, that’s probably about the worst web design site I’ve ever seen.
I’ll step you through it:

  1. The links are completely ordinary. No color, no font, no shape or size difference. It makes me feel like walking into a house where they’re still painting and the living room is full of boxes.
  2. Tables. Okay, so that’s not all that bad, in certain times, if you’re lazy. However:
  3. Tables. And tables. They actually have a table containing their footer in another table containing everything else. It’s like they imagine they should be using not just cells, but whole tables for every element.
  4. No styles. The bullet lists are plain, the background is white, with no splash of colour anywhere. I mentioned someplace that hadn’t finished painting. Instead, it’s more like the walls were gyprock without drywall.
  5. No stylesheet styles. The CSS stylesheet has a single rule in it, and all the other styles (some padding around the links) are all inline, which goes against most of what CSS stands for.
  6. On their Contact Us page, they mention three cities and then put a Google Maps picture of those cities below. Each of those pictures is a whopping 650 pixels wide, at over 300KB for the lot, and are then constrained to be 30% their size. You never see over two thirds of the picture, but you’re still downloading it.
  7. After all this, they ask $35/$50 per hour.

I decided randomly to check out my competition in Winnipeg. One site is amazing, and I was thinking of how I’d have done what he did with jQuery, but then I realized he was using flash. Also, music came on unexpectedly, and I had to search through my tabs to find out what was doing it.
There was another, http://www.designedconsulting.ca/
I’m linking because it’s actually very beautiful. They use Mootools to transition between their main page elements, and there’s not a single table in the whole place. The design looks to be a bit cumbersome, with strange divs everywhere (according to the comments, to fix IE float bugs). Their layout is just a bit stacked, because it seems like they have three different pages on top of one-another. It reminds me of the first web-page I did, where it was a series of boxes and you’d just scroll down to get to the next ‘page’.
Even through that, though, they have some amazing sample designs.

You know what? I feel a difference in the animation between mootools and jQuery. Mootools uses something much more even and gradual, while jQuery seems to follow an acceleration curve.
Joomla is on my next-to-learn list, because I’ve seen it around a few places. I still don’t know what a Content Management System is, so I’m looking at that right now.

Legacy Browsers

Wednesday, April 15th, 2009

As a developer, I — and most other developers out there — am often confronted with a raging dichotomy: The newest technology, or the ten-year-old tag-along that doesn’t understand half of what you give it?
There will always be someone clinging to the old, and that’s usually okay. Most old appliances seem to work better than the newer ones, and I’ve heard stories of car crashes where people should have died but survived because of their sturdy old box of steel.
At this moment, though, Internet Explorer 6 is on everyone’s to-hate list. It doesn’t work better, it’s missing a great deal of features and support, and it’s actually more prone to attacks than the newer versions. The two main reasons it’s still around is that those really big companies have been using it for nearly ten years, and it would cost too much to replace, and that there are a number of people who just have no idea it’s replaceable. It’s seen as a basic part of their system.

That first reason, in particular, means that it’s impossible to quit support for IE6. To do so would be like Stopping someone from coming into your home because they’re wearing a uniform. They probably wish they weren’t wearing one, but their employer demands it.
But that’s an imperfect example. If your house was eight stories tall and had no stairs or elevators, and everyone got around because their suits had jetpacks, then you might turn away the guy wearing an old company uniform, because he couldn’t get anywhere but the first floor. Maybe some wise engineer would have installed an old rope ladder in a place or two to let the poor guy climb up a floor or two, slowly.

On the other hand, there are a certain number of things we just can’t do with IE6. CSS3 is still relatively unknown, but that specification will explode into the marketplace before the end of the year, as there are four major browser betas nearing completion (Opera 10, Safari 4, FireFox 3.1, and Chrome 2), all of which should be completely Acid3 compliant.
In fact, IE8 is only just on the level of the current browsers. They remind me of Sega, which released it’s Dreamcast (which was on the level of Playstation or N64) just as Sony and Nintendo put forth their newest generation. Sega was forced to drop out of the console market completely. Will Microsoft be forced out of the browser market?
No, because there’s no money at stake. At any rate, they’ve been losing market share for the past couple of years, and Firefox is quickly rising. In fact, people seem to be streaming to any browser, to get away from IE.

I don’t think I’ve had a problem, yet, with IE8 (except the obvious lack of CSS3 support, of course). It renders things just about where it should render them. I think this means IE is realizing that people don’t care where Microsoft’s vision is heading, they want compliant browsers. If Microsoft wants to add extra functionality to their browsers, like their Filter styles, that’s perfectly acceptable. But they’re cutting their users off from the latest specifications, which seems to be just as bad as if we cut them off from the newer websites. Frankly, it takes two to tango, and more people are realizing that.
Microsoft will start developing a better browser, because it must know, by now, that it has so much to lose, and it’s already losing it.

The only thing we can do is hope that it follows along, as we twist our pages to fit their old standards.

On a side note, take a look at this:

It appears they took auditions across YouTube, and then came together today to perform at Carnegie Hall. Truly amazing.