Hacker News Reader

Comment by rkuykendall-com | Hacker News Reader

This was a bit of an obsession of mine ever since I saw Coding Horror a few years ago. I had seen a lot of extremely minimalist designs, but they were all doing things to accomplish that minimalism. As a developer though, you have a nagging feeling in the back of your brain saying "that's a lie, it's not simple, it's very complicated, it just looks simple." Coding Horror is complex, but it was plain enough for me to imagine it with even less structure.

I decided to stick as close to plain HTML for my personal website as possible. The problem is, plain HTML is ugly. So instead, I tried to imagine what the default style of HTML would be if it was created today.

I've am still far from that ideal, but it is a work in progress: http://rkuykendall.com/

View on HN

Your site looks great. I especially like your logo.

The logo is nice, but the aliased angled lines really kill it for me. I think a vector (or better anti-aliased) logo would really make a positive difference in the feel of the site.

it looks as if the colour is just a background-color attribute in CSS, which changes on mouseover. If so, it should be white->transparent anti-aliased in the RK image, which is looks like it's trying to be.

Vector, e.g. drawn with Canvas, would be better (e.g. with a fallback to a single colour png.)

It was trying to be, and failing. I am currently serving up a ( antialiasing fixed ) png, and @2x png for hdpi displays. Do you think a canvas logo would provide any additional benefit above these two?

If there was an error in the original anti aliasing that's now fixed, that should be fine - I was speculating how to get a vector version up and running (I am sure there are vector image formats, but all the web-friendly ones I've found turn out to be bitmap underneath.)

(just checked, after refreshing my cache a few times, and it looks much better now, nice one.)

What do you mean by "bitmap unterneath"?

uhh, I have been wrong about many things when it comes to web images - this is going back a long way. First, I always used JPG. Then, I discovered PNG, which I thought was vector (because I created Bezier curves in my editor, and when I exported them the quality was retained exactly). I can't remember what other formats I've tried in between (EPS and PS were involved somewhere, but they're not web friendly). I've never succeeded in creating a vector image that I can use on the web with a normal editor - although I have heard of SVG before. Maybe I'll look up how to export to it next time I need to solve this problem.

Why would you draw the vector manually with canvas when the browser can do it (SVG)?

I suggested canvas because that's how I've generated programmatic images from my own "vector" formats (scientific datafiles,) and rendered them at arbitrary zoom.

Generating the relevant shapes and lines for a simple logo would be easy this way, although probably would require a larger download vs. a vector image, since the canvas method would need to load extra javascript to duplicate the SVG support built in to the browser.

I'm not saying it is necessarily a better idea, just that I've had more success with canvas drawing methods than trying to actually make a vector image.

Making a vector image is piece of cake. The SVG syntax is a bit concise, but that's about it. See http://blogs.sitepointstatic.com/examples/tech/svg-curves/cu... . Regarding arbitrary zoom, it's just a matter of changing the viewbox: http://www.justinmccandless.com/blog/Making+Sense+of+SVG+vie... (it's no madness though) And you don't even have to redraw (that's the benefit of SVG, it has a scene graph unlike canvas). Remember, a vector image doesn't need to have any inherit width or height! In fact, if you don't specify it, the browser will resize the image so that the viewbox fills the browser viewport!

Another advantage is that you can handle generated images as images, not as code, without converting them to raster bitmaps (which I guess you'd be forced to when when dumping the canvas).

The antialiasing on the logo was awful, and I've uploaded a new version. I think a vector version would be great. I am already serving up an @2x version which looks great.

I vectorized it for you: http://pastehtml.com/view/d6liy8ipy.html

All browsers have SVG support now, webpages need only consist of text, vector graphics and photographs.

Thank you! I spent years without any kind of visual identification, but one day this summer I was playing around in photoshop and came up with that. It works quite well with a number of letter combinations and colors. If anyone reading this has trouble with personal designs, playing in an image editor whenever you have a stray thought will produce many terrible designs not worth saving, but pays off in the end.

Sadly you chose a font that only works when it's gauss-blurred.

https://dl.dropboxusercontent.com/u/10190786/bad_font.png

I chose Source Sans Pro, probably the most fully developed, supported and profesional open typeface available.

What OS/Browser are you using that destroys type like that?

The OS/Browser don't matter. I disabled font smoothing and anyone who has that on on any software/hardware combination will be subjected to output like in my screenshot.

To explain this a tiny bit further: Fully developed and professional fonts will have had attention put into them to ensure that they will look perfect in pixel-exact representation at any font size. The font you chose had that kind of work only put in for up to font size 8 or thereabouts and thus looks terrible.

IMO: The logo mouseover is the one giant blaring loud thing on a page that's generally softer, more muted. I'd suggest you make the transition a bit more subtle, from dark grey to grayish blue rather than solid black to solid blue.

Thank you for the feedback. I plan on doing some more work on the site soon, and I will keep that in mind.

FYI - You didn't spell starting correctly in the sentence about your graduate studies.

That's what I get for trying to make a quick edit after my acceptance. Thanks.

Reply on news.ycombinator.com