teppo Posted July 26, 2013 Share Posted July 26, 2013 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. 16 Link to comment Share on other sites More sharing options...
Adam Kiss Posted July 26, 2013 Share Posted July 26, 2013 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. 1 Link to comment Share on other sites More sharing options...
teppo Posted July 26, 2013 Author Share Posted July 26, 2013 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" Link to comment Share on other sites More sharing options...
diogo Posted July 26, 2013 Share Posted July 26, 2013 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/ 1 Link to comment Share on other sites More sharing options...
apeisa Posted July 26, 2013 Share Posted July 26, 2013 Looks and reads great on mobile! Also - is this first blog with more than one pw related posts? Great posts Teppo, enjoyed reading them! 2 Link to comment Share on other sites More sharing options...
diogo Posted July 26, 2013 Share Posted July 26, 2013 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. 1 Link to comment Share on other sites More sharing options...
Wanze Posted July 26, 2013 Share Posted July 26, 2013 Just read your post about Fieldtypes/Inputfields. Thanks! Very useful informations! Keep it up 1 Link to comment Share on other sites More sharing options...
MarcC Posted July 26, 2013 Share Posted July 26, 2013 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. 2 Link to comment Share on other sites More sharing options...
cstevensjr Posted July 26, 2013 Share Posted July 26, 2013 Very nice website and extremely useful information. Keep up the great work. Link to comment Share on other sites More sharing options...
Godfrey Posted July 27, 2013 Share Posted July 27, 2013 (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. 1 Link to comment Share on other sites More sharing options...
horst Posted July 27, 2013 Share Posted July 27, 2013 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)? 1 Link to comment Share on other sites More sharing options...
Adam Kiss Posted July 27, 2013 Share Posted July 27, 2013 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. 1 Link to comment Share on other sites More sharing options...
MatthewSchenker Posted July 27, 2013 Share Posted July 27, 2013 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 1 Link to comment Share on other sites More sharing options...
OrganizedFellow Posted July 27, 2013 Share Posted July 27, 2013 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? 1 Link to comment Share on other sites More sharing options...
teppo Posted July 29, 2013 Author Share Posted July 29, 2013 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. 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 Link to comment Share on other sites More sharing options...
totoff Posted July 29, 2013 Share Posted July 29, 2013 the post about caching was the piece of information i was looking for. thanks teppo! Link to comment Share on other sites More sharing options...
SiNNuT Posted August 8, 2013 Share Posted August 8, 2013 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." 1 Link to comment Share on other sites More sharing options...
arjen Posted August 8, 2013 Share Posted August 8, 2013 Great post! Commenting doesn't work here too. Link to comment Share on other sites More sharing options...
teppo Posted August 8, 2013 Author Share Posted August 8, 2013 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) Link to comment Share on other sites More sharing options...
ryan Posted August 9, 2013 Share Posted August 9, 2013 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. 3 Link to comment Share on other sites More sharing options...
teppo Posted August 9, 2013 Author Share Posted August 9, 2013 @ryan: I'm afraid that's quite an overstatement, but thank you very much 1 Link to comment Share on other sites More sharing options...
arjen Posted December 16, 2013 Share Posted December 16, 2013 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. Link to comment Share on other sites More sharing options...
teppo Posted December 16, 2013 Author Share Posted December 16, 2013 (edited) @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 December 16, 2013 by teppo Link to comment Share on other sites More sharing options...
arjen Posted December 16, 2013 Share Posted December 16, 2013 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. Link to comment Share on other sites More sharing options...
apeisa Posted December 16, 2013 Share Posted December 16, 2013 I use feedbin.me (I love it, much better than google reader was). It actually didn't recognize somas feed at all, but that seems to be a network issue: https://github.com/feedbin/support/issues/413 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now