5 ms·

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

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/ http://rkuykendall.com/

jaykru 13y ago
Your site looks great. I especially like your logo.
- chas 13y ago
  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.
  - tehwalrus 13y ago
    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.)
    - rkuykendall-com 13y ago
      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?
      - tehwalrus 13y ago
        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.)
        iso8859-1 13y ago
        What do you mean by "bitmap unterneath"?
        tehwalrus 13y ago
        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.
    - iso8859-1 13y ago
      Why would you draw the vector manually with canvas when the browser can do it (SVG)?
      - tehwalrus 13y ago
        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.
        iso8859-1 13y ago
        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/cubic-curve.html 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+viewBox's+Madness 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).
  - rkuykendall-com 13y ago
    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.
    - iso8859-1 13y ago
      I vectorized it for you: http://pastehtml.com/view/d6liy8ipy.html http://pastehtml.com/view/d6liy8ipy.html All browsers have SVG support now, webpages need only consist of text, vector graphics and photographs.
- rkuykendall-com 13y ago
  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.
jorts 13y ago
FYI - You didn't spell starting correctly in the sentence about your graduate studies.
- rkuykendall-com 13y ago
  That's what I get for trying to make a quick edit after my acceptance. Thanks.
Mithaldu 13y ago
Sadly you chose a font that only works when it's gauss-blurred. https://dl.dropboxusercontent.com/u/10190786/bad_font.png https://dl.dropboxusercontent.com/u/10190786/bad_font.png
- rkuykendall-com 13y ago
  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?
  - Mithaldu 13y ago
    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.
lmm 13y ago
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.
- rkuykendall-com 13y ago
  Thank you for the feedback. I plan on doing some more work on the site soon, and I will keep that in mind.

jaykru 13y ago

Your site looks great. I especially like your logo.

chas 13y ago
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.
- tehwalrus 13y ago
  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.)
  - rkuykendall-com 13y ago
    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?
    - tehwalrus 13y ago
      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.)
      - iso8859-1 13y ago
        What do you mean by "bitmap unterneath"?
        tehwalrus 13y ago
        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.
  - iso8859-1 13y ago
    Why would you draw the vector manually with canvas when the browser can do it (SVG)?
    - tehwalrus 13y ago
      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.
      - iso8859-1 13y ago
        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/cubic-curve.html 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+viewBox's+Madness 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).
- rkuykendall-com 13y ago
  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.
  - iso8859-1 13y ago
    I vectorized it for you: http://pastehtml.com/view/d6liy8ipy.html http://pastehtml.com/view/d6liy8ipy.html All browsers have SVG support now, webpages need only consist of text, vector graphics and photographs.
rkuykendall-com 13y ago
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.

jorts 13y ago

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

rkuykendall-com 13y ago
That's what I get for trying to make a quick edit after my acceptance. Thanks.

Mithaldu 13y ago

Sadly you chose a font that only works when it's gauss-blurred. https://dl.dropboxusercontent.com/u/10190786/bad_font.png https://dl.dropboxusercontent.com/u/10190786/bad_font.png

rkuykendall-com 13y ago
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?
- Mithaldu 13y ago
  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.

lmm 13y ago

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.

rkuykendall-com 13y ago
Thank you for the feedback. I plan on doing some more work on the site soon, and I will keep that in mind.