teppo

flamingruby.com - personal site, blog etc.

Recommended Posts

It's my first post in this area and this barely validates as a "showcase case", but: I've finally managed to update my own Web presence, resulting in flamingruby.com. It's primarily a blog, but some of my projects are on display there too.
 
This site has actually been up for months already -- wasn't going to post it here, but thought it'd be nice to prove that I've actually built something with PW after all..  :)
 
Being responsive is fairly standard stuff these days. In this case no frameworks were involved, though; it's all hand-made, built from mobile first perspective and based on content alone, instead of predefined breakpoints. Some details I'm still not happy about, so it'll probably get tweaked every now and then, but at the moment things are pretty much in a stable state.
 
Since it's a personal project, I've been slowly adding small tricks here and there, none of which really count as anything "special." One addition made just today, mostly as a proof-of-concept, is a combination of a simple module and new subdomain (static.flamingruby.com) to automatically serve assets from (at least in theory) cookie-free location. This is described in more detail here.
 
For home page I built an importer module (with AngularJS GUI, which was actually quite fun) that periodically pulls content from various feeds.. a bit like what Nico did with his social timeline, but nowhere as cool as that. At the moment content is being pulled from GitHub (for which I had to put together MarkupLoadAtom) and Twitter (which kindly killed it's RSS support just in time, so I'm using rssitfor.me instead.. although that site interestingly spits out Atom and not RSS like one would expect.)
 
That's just about it.

  • Like 16

Share this post


Link to post
Share on other sites

I passionately hate the logo, but I commend you on the font selection, especially of the blog articles, reads very well, even when it's in non-native language and I'm quite tired.

Good work.

Also notes regarding layout: I'm not sure masonry sits well with your homepage, not to mentioned the small github/twitter badges flying all over the place.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks, Adam!

Typography was very much a result of trial and error, so I'm glad at least part of it works as intended. I'm a big fan of readability myself and really wanted this site to be more about readability (and usability) than eye candy.

Home page started out very different and especially those over-the-place badges are a remnant of a very different style. I'll think about what to do with them, you're quite right about them being a bit off.

Masonry I quite like, though you're again right in that it doesn't really make that much sense here.. admittedly it's partly there just because it was fun, but also because it makes things feel "more alive" :)

Share this post


Link to post
Share on other sites

I have to agree with Adam concerning the logo as the kerning doesn't work at all. If the font doesn't have a good kerning by default, the best thing is to build the logo on a vector software, and use an image. Or if you feel like, just envolve each letter in a span and have fun http://letteringjs.com/, http://kerningjs.com/

and practice a lot http://type.method.ac/ ;)

  • Like 1

Share this post


Link to post
Share on other sites

Looks and reads great on mobile! Also - is this first blog with more than one pw related posts? Great posts Teppo, enjoyed reading them!

  • Like 2

Share this post


Link to post
Share on other sites

I'm revisiting the site on my mobile and it feels great! I like particularly the summary on the posts pages :)

I'm also loving the posts. Next on my list is the one about caching.

  • Like 1

Share this post


Link to post
Share on other sites

Just read your post about Fieldtypes/Inputfields. Thanks! Very useful informations! :)

Keep it up ^-^

  • Like 1

Share this post


Link to post
Share on other sites

I like it! I personally prefer single-column layouts or maybe 1+sidebar for this sort of information, because my lazy brain tries to gain a sense of hierarchy really fast. But I think the color scheme is great and you're on the right track for a fun personal site-type logo. :-)

 Also - is this first blog with more than one pw related posts?

*ahem* I have at least three. I would write more but I'm afraid you'll realize I'm stealing all your secrets you'll steal all my secrets.

  • Like 2

Share this post


Link to post
Share on other sites

Very nice website and extremely useful information. Keep up the great work.

Share this post


Link to post
Share on other sites

 (with AngularJS GUI, which was actually quite fun) 

^ Completely agree. I just started learning AngularJS two or three days ago and I cannot believe what I've already been able to whip up. It's such a blast!!

Also, nice site! Love how clean it is.

The one thing for me there's a bit too much pink and red and it seems to clash with the dark purple, but that's probably because I don't see this color scheme often.

Like others said, I think the responsive part is really awesome. Love how the posts transition as you adjust screen width, and especially how the logo responds as well.

  • Like 1

Share this post


Link to post
Share on other sites

Hi Teppo.

Very good site with good and usefull articles!

I like that it is clean and has good readability. Also it seems to have some nice parts that needs further study. :)

I also like how you advertise PW!

Keep up with it  ^-^

-----

Does the Logo display correctly in Firefox (22.0)? (see screenshot)

In http://www.flamingruby.com/blog/ready-set-launch/ is a show/hide TOC, but the links have no anchors in the doc (at least in my FF)?

post-1041-0-56228200-1374917512_thumb.jp

  • Like 1

Share this post


Link to post
Share on other sites

Masonry I quite like, though you're again right in that it doesn't really make that much sense here.. admittedly it's partly there just because it was fun, but also because it makes things feel "more alive" :)

More alive… Well. I don't know, whether it's because of the icons, or because the are no boxes/lines/backgrounds that would reinforce the masonry grid, but it feels that articles all over the place, without any sense of order. I think your homepage would benefit from more strict grid, or if you really want something unusual, come up with it manually. In any case, I'd force a bit of order on the items.

On the other hand (to offset this at least a little), the spacing between items is just perfect on mobile.

Other small things I noticed: on the Projects page, the images are little decoupled from their respective items. I understand this is a result of some internal "no item backgrounds" rule, but it's weird. Maybe adding a 'no-screenshot' thumbnail to all items would help a little. Also, on iPhone, the header as something like doubled right margin then left margin. :)

But also, the fonts look even more fabulous on teh mobile. I commend you on that selection again, I really like the general typography.

  • Like 1

Share this post


Link to post
Share on other sites

Greetings Teppo,

I have spent time looking at this, mostly on mobile (iPad, Safari/Chrome). I really like the typography and the bright color theme. Each individual article has a nice eay-to-read presentation. It's great that you focus on content, which is what matters most of all for a site like this. And speaking of content -- you wrote lots of excellent arrticles! Keep that going!

I agree with others regarding the logo, although it looks better on mobile. My only other comment is on the layout of blog articles. The uneven vertical space of articles makes the layout a bit confusing (although, even here, navigating to a title is not too bad).

There seems to be an issue displaying the "project" pages (on mobile). They display initially, then the content disappaears:

http://www.flamingruby.com/projects/process-login-history/

http://www.flamingruby.com/projects/page-render-ip-restriction/

http://www.flamingruby.com/projects/version-control-for-text-fields/

http://www.flamingruby.com/projects/process-changelog/

I have this book arked and will definitely watch your posts.

Thanks,

Matthew

  • Like 1

Share this post


Link to post
Share on other sites

I really like the way you advertise ProcessWire with the sticky logo. Very cool!

On projects page, 3 of 4 posts contain screenshots. It kind of breaks the visual rhythm.

I like the idea of the Table of Contents in each post. It makes reading long posts easy. Maybe bookmarkable URLs for tutorials or super long posts?

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for all the feedback folks.. your comments (and helpful tips) are very much appreciated!

Does the Logo display correctly in Firefox (22.0)? (see screenshot)
In http://www.flamingruby.com/blog/ready-set-launch/ is a show/hide TOC, but the links have no anchors in the doc (at least in my FF)?

 
Yes, logo looks just about right there :)
 
Thanks for spotting the ToC issue. Headers are given IDs on the fly with JavaScript, which is probably why they didn't show up (if you viewed via page source), but there was a very real issue here:
 
While in other browsers (well, at least in Chrome..) you scroll the document <body> to certain point, in Firefox that scroll needs to be pointed at <html>. No idea which implementation is correct (if there even is such a thing), but changing $('body').animate(...) to $('body, html').animate(...) seems to fix it for FF.


 

More alive… Well. I don't know, whether it's because of the icons, or because the are no boxes/lines/backgrounds that would reinforce the masonry grid, but it feels that articles all over the place, without any sense of order. I think your homepage would benefit from more strict grid, or if you really want something unusual, come up with it manually. In any case, I'd force a bit of order on the items.

Those boxes used to have borders and badge positioning worked better back then (see screenshot below -- this is a bit off though, especially padding looks weird as I've just temporarily enabled the borders.) Anyway, I'm starting to really agree with you here. Will have to experiment a bit with these.

post-175-0-31819300-1375087528_thumb.png

 
 

Other small things I noticed: on the Projects page, the images are little decoupled from their respective items. I understand this is a result of some internal "no item backgrounds" rule, but it's weird. Maybe adding a 'no-screenshot' thumbnail to all items would help a little. Also, on iPhone, the header as something like doubled right margin then left margin. :)

 
Thanks for the idea of no-screenshot thumbnail, this sounds like a valid solution.. or I could just try to come up with a thumbnail for all of them, even though in some cases it makes little sense. Also thanks for the iPhone feedback.. I've only got Android phones on me and haven't had a chance to test properly with any iProducts :)

 

There seems to be an issue displaying the "project" pages (on mobile). They display initially, then the content disappaears

Looks like the GitHub plugin got kind of messed up there. Thanks for spotting this :)

post-175-0-31819300-1375087528_thumb.png

Share this post


Link to post
Share on other sites

the post about caching was the piece of information i was looking for. thanks teppo!

Share this post


Link to post
Share on other sites

Awesome post on textformatter modules teppo! Was gonna leave a comment on your blog but somehow it doesn't work. Tried a couple of times and no luck; after submitting the form just goes blank, no errors or others forms of feedback.

"Good, useful content and nicely written! I also like that, next to PW specific stuff, you also provide some general (php) programming info and links."

  • Like 1

Share this post


Link to post
Share on other sites

Great post! Commenting doesn't work here too.

Share this post


Link to post
Share on other sites

Thanks, guys -- and thanks for the heads-up, looks like cache was preventing non-logged-in users from posting comments! Mysteriously some comments still got through, must've had perfect timing there (freshly expired cache) :)

Share this post


Link to post
Share on other sites

I'm really enjoying your posts too. You've got a gift with words – I find your writing really easy to follow and digest. All the right things explained in an accessible and succinct manner.

  • Like 3

Share this post


Link to post
Share on other sites

@ryan: I'm afraid that's quite an overstatement, but thank you very much :)

  • Like 1

Share this post


Link to post
Share on other sites

Hi Teppo, any change you could add a rss feed? Just made a folder in my reader app with some ProcessWire blogs (since soma started one) but I can't seem to add your blog/website.

Share this post


Link to post
Share on other sites

@arjen: feed should exist already, see http://www.flamingruby.com/blog/?view=rss :)

Edit: there's also an "alternate" meta tag at /blog/ pointing to that URL, so it should usually be enough to provide the blog URL (not sure how different readers behave regarding these, though.)

Edited by teppo

Share this post


Link to post
Share on other sites

Digg Reader didn't seem to pick it up. Added it manually and it seems not to pick up any posts. Strange, but Digg is sometimes strange. Still looking for a Google Reader alternative.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.