node.js ko
Lectio
Lectio
by Shambolic
Lectio makes reading beautiful again. Don’t mind the screenshot. We’ve got content. ALL the content.
EDIT: If you’re using Chrome 15, this will not work. We only tested against Chrome 13 (stable). If you don’t want to switch to Safari 5.1 or FF6, please check this screencast instead
Judging Instructions
First and foremost, Lectio has been tested on Firefox/Safari/Chrome latest. Given its reliance on localStorage and CSS3 transforms, and optionally the HTML5 Offline APIs, it’s unlikely it will work on any current and popular version of IE.
On the left hand side sits the news stream. This gets updated in realtime as updates arrive on the server. Hovering over with the mouse reveals a star icon, which when clicked, saves a news item to your offline list for reading later. Clicking the item itself allows you to read it immediately.
The reading list is where articles are kept “indefinitely”, or until localStorage gets cleared. Closing/opening the browser and heading to the reading list area will show the same articles persist. At the bottom, you’ll see a thin white bar, that being the menu for this part of the application. It also keeps track of the current article’s name, and how many articles are saved in the reading list area.
Lectio works offline as well as online. When offline, the stream area becomes inaccessible. However, the reading list remains accessible. One easy way to test that is by using Firefox: while browsing the stream, select “File –> Work Offline”. Lectio will identify this change, inform you that you’re offline, and present you with the option to access your offline reading list.
We did our very best to support the iPad, though because of native scrolling issues with IOS4, and libraries such as Scrollability being decent but far from perfect, as it stands, iPad support is considered to be in Beta.
Please enjoy!
P.S.: Run the app in Full Screen (On Chrome and Safari, “View –> Enter Full Screen”. On Firefox, “View –> Full Screen”) for added awesome!
Who
lachlanhardy — Sydney
juliocesar — Sydney, Australia
dgoodlad — Melbourne, VIC, Australia
How
Here are just some of the delicious & excellent tools that made our hacking this weekend a delight:
- Backbone
- CoffeeScript
- connect-assetmanager
- connect-gzip
- Express
- jQuery
- JSDOM
- Modernizer
- mongoose
- NodePie
- node-readability
- Pretty Date
- request
- Scrollability
- Tipsy
- Zappa
Votes
Your Vote
Voting is now closed.
Other Votes
(67)
mayumiconjudgenathos
contestantAt the time of testing, I couldn’t get the app to load any articles (latest Safari or Chrome).
Featureset seems a bit slim for the space.
brianarnjudgeIt looks beautiful and it obviously is loading the content somewhere – but I can’t actually get any of it to be readable. This holds true in both Firefox 6 and Chrome 13 (Stable). Love the idea though.
slaskis
contestantReally nice offline integration. An RSS reader might not be the most innovative idea but it’s well done.
erniehacksjudgeThis is a challenging user experience design – it’s not clear how this is better than existing solutions in this space, whether a personal feed reader, Flipboard, or Instapaper. If the app offered controls over the data stream then it would become far more useful.
The experience on Mac / Chrome was a bit buggy – the right pane sometimes loaded slowly or not at all, and there didn’t seem to be any error handling for those cases.
This is a cool concept and the visual design is well done. With a bit more work and consideration it could easily cross the line from slick dev experiment to useful app.
- contestant
Thanks, Chris!
We’re definitely still working on the app. You can visit [lectioapp.com)(http://lectioapp.com) after the contest finishes to see our improvements.
We’ve some known issues (well, known now other people have looked at it!) that sound like what you’ve mentioned. Hopefully those will all be fixed soon.
- erniehacksjudge
I’m glad to hear it! Looking forward to seeing the next iterations.
trycatcherjudgeGreat work
- contestant
Thanks, Danny! We’re very proud of it and will continue to work on it at lectioapp.com
therazorbladejudgeThis is a cool idea but you need to take it further in terms of usability and functionality to make it interesting. The reading list can’t just be a queue of items you need to iterate through, it needs an index. Bookmarks are critical. Printing options will be useful. Sync across devices is a must have too.
- contestant
Thanks, Eran! We’re definitely taking it further.
Are you able to elucidate at all on what you mean by bookmarks and the index?
We already have device sync and printing options on our list.
- therazorbladejudge
If you read half an article, there should be a way to mark where you stopped for next time. In the saved articles area, you should add an index of the saved articles to that people won’t need to navigate thought all of them.
- contestant
Excellent ideas, thanks!
steadicatjudgeWhile it looks promising, I’m not convinced that it is a significant improvement over other readers. It promises a smoother experience, but given that it doesn’t work right now it’s tough to evaluate that bold claim.
- contestant
Sorry about that. We only testing against stable versions of modern browsers. Turns out lots of our judges are using Chrome 15 (who’d have thought, eh?).
Should work fine in Chrome 13, Safari 5.1, Firefox 6.0.1.
- steadicatjudge
Still doesn’t work in Safari 5.1 or Firefox 5.0.1 for me. Right-hand side contents don’t load, and the reading area is always empty.
- steadicatjudge
FYI, the error is “Uncaught TypeError: Cannot call method ‘navigate’ of undefined” in Chrome, “Lectio.Router is undefined” in Firefox, and “ReferenceError: Can’t find variable: date” in Safari.
- contestant
http://twitpic.com/6frkyu
Firefox 5, not sure. Probably the same reason why your Safari 5.1 isn’t seeing it. Should work, but as Lachlan said, it was tested against Firefox 6.
- contestant
Ok, that helps, thanks. We did quite a bit of work on it since the end of the competition. I’d appreciate if you checked it out again after the 6th, when we’ll be able to deploy our fixes.
- steadicatjudge
Firefox 6: http://twitpic.com/6frp1w/full
- contestant
Yup.
Check http://twitpic.com/6frqep
- steadicatjudge
My advice for next time a user kindly reports bugs to you: just acknowledge the issues and promise to fix them.
- steadicatjudge
In other words: I don’t care that it works for you. It just feels like you’re trying to prove me wrong.
- contestant
Not sure how I offended your sensibilities, but I’m illustrating the fact that the browsers you pointed out as non-functional are, in fact working. and I’m not denying there are issues with the app either. It’s something else, and we’re working on every issue that has been brought to our attention in here.
And you’re welcome not to report if taking a comment back is enough to offend you. Works for me.
- steadicatjudge
“I’m illustrating the fact that the browsers you pointed out as non-functional are, in fact working”
This is what irks me: the implication that I’m wrong and you’re right. That I must be doing something wrong because, “in fact”, it works.
You are free to mention that it works for you, but accept the fact that it doesn’t work for others. Your job as the app developer to figure out why, and fix it (unless you choose to ignore it). No need to prove that it works for you.
- contestant
So you’re just creating a needless argument in here because you chose to believe I’m out to antagonise you?
I’m bearing in mind that other people are reading this. Hence why I posted the screenshots. No one’s denying there are problems. I in fact thanked you earlier when you posted more details about the errors.
I don’t even know you dude. Proving you wrong doesn’t really mean much to me, I have to say.
janljudgeNice.
- contestant
Thanks, Jan!
travhimself
contestantGreat typography, and great minimal design. I love the subtle scroll bars. Reminds me of Reeder, which is one of the best-looking apps out there, in my opinion.
Had trouble getting an item to show up in the reading area, but I did check out the screencast and it looks cool. I’ll definitely check back on this one post-Knockout.
- contestant
Thanks, Trav!
I’m guessing you’re using Chrome 15.
Sorry about that. We only testing against stable versions of modern browsers. Should work fine in Chrome 13, Safari 5.1, Firefox 6.0.1.
- contestant
Don’t tell me the judges are seriously expecting apps should just work on an unstable version of a browser… I figured that was one user or two.
- contestant
Nah, I’m guessing it’s pretty much everybody who had an issue, actually.
rmurpheyjudgeI couldn’t get this to work in Safari or Chrome — clicking on a star did not add an item to my reading area, and though clicking on an item did change the URL, no content appeared on the right-hand side. There was also no indication that I’d marked a story for reading later, unless I moused over the star and read the tooltip.
- contestant
I’m surprised you’ve had issues in Safari. I’ve been unable to replicate those. Hard refresh?
Chrome 15, however, has known issues. We simply didn’t think to test against an unstable browser. Chrome 13 should work fine. Same with FF6.
ragavanjudgeAs someone who’s on the lookout for better reading experiences on the web, I was really looking forward to trying out Lectio. However, I couldn’t get it to work reliably for me. Adding articles to my read it later list didn’t work, for example.
The video was nicely done and it looks like a fair bit of work went into the app. If the reliability problems are fixed (even outside of the competition), I’d give it a try for sure.
- contestant
Sorry about that. We only testing against stable versions of modern browsers. Turns out lots of our judges are using Chrome 15 (who’d have thought, eh?).
Should work fine in Chrome 13, Safari 5.1, Firefox 6.0.1.
If you’re not using Chrome 15, we’d love to know more about your browser and environment.
Thanks for voting!
mendelcjudge
chrismatthieujudgemschneider
contestantWould love to use it with my own feeds :)
hongymagic
contestantI could definitely replace my Google Reader with this app. I love the simplicity of use and uncluttered interface.
I would love to see a different font on the main reading pane, I personally think text-shadow is over-used a little ;)
Great work guys.
nelsonkchengjudgeBeautiful and fantastic design. Well thought out and executed. I love the offline component. Not sure how to add new news feeds. You guys implemented a lot of small details too which makes a big difference. Great job.
mikealjudgeclicking on the left items isn’t populating the content area on the right. it appears to be broken.
- contestant
I’ve never seen that happen, so I suggest a hard refresh. But there have been some reliability problems, so you can see it as it should be at http://vimeo.com/28287031
ncb000gt
contestantThe reading pane never worked for me. I tried but nothing. The design was decent but without seeing it I can’t say how useful or innovative it was.
I tried it in both Chrome and FF.
- contestant
Yeah, apologies. Check it out (as we’re seeing it) here –> http://vimeo.com/28287031
mustardamus
contestant
b00giZmjudgeA decent looking “Reeder” clone for the browser. Nothing I would call innovative, but I give it an extra point for the offline capability.
It would have been cool, if you could use your own RSS feeds or use your Google Reader account for synchronization. That should have been possible to implement for a 48 hours project. It’s also lacking an Instapaper and/or Readability integration.
But to give you credit, the UI looks very sleek, the animation is smooth and the design is pure eye candy.
dezmozz
contestantberb
contestantSmooth, clean and useful.
DamonOehlman
contestantGreat implementation guys and gorgeous design :)
ricardrobin
contestantReally neat !
raoulmillais
contestant
I really like this concept and can see it being extremely useful. The design was simple although i’d want more options (but obviously more time is needed to develop those). I did have a lot of problems using the app in Chrome and couldn’t actually get it to work fully.