The Lisbon Correspondent (blog, experimental)

[tiagoroldao]

More and more, processwire has become my personal haven... I do almost no commercial work with it (I work as a dev, and for payed side-projects I suffer the dread of joomla droppings  ) 

Made this "thing": - http://www.lisboncorrespondent.com/

This is a blog (of sorts) for my father, with make-pretend postcards sent from Portugal. It is essentially a way for me to experiment with and learn a few techs/tools:

• css 3d transforms (and respective headaches, cross-browser issues, etc)
• The wonderful angularJS framework
• Yeoman (build system for js apps, with grunt + bower)
• Processwire, of course

Processwire is amazing for every crazy thing I may ever think up, and using it as a simple RESTy service provider is incredibly simple.

Gotchas:

• This will most likely be a perma-beta site - it is for trying stuff
• No history back/forward or direct urls - angularJS makes it easy, but it wasn't really my concern. Will have to happen someday, though
• No SEO whatsoever - I'm perfectly aware that a "blog" in a one page app is a no-no, but again, just toying around
• Tested with Chrome, Firefox and IE 10, OSX and Win - further compatibility (and mobile) to come

Hope you enjoy. And thank you, Ryan, for the wonderful gift of processwire 

[diogo]

Very nice Tiago!!

Two suggestions:

1. You could show how many postcards are in the July tab by simply counting them (count()) and rendering their top (no need to load the text), because now it seems that it's empty.

2. When I turn the postcard I can see for a moment the paper in white because the image starts loading only then. I would start loading it as soon as you show the front.

[tiagoroldao]

Thanks!

Regarding 1) I already have the count loaded with each tab, but haven't figured out how to show the tops (the border color, for instance, is loaded after opening, so it only shows upon opening). As for 2) I have a timeout that starts on open and cancels on close (so as to not load all the pictures for the postcards you just browse through, via the arrows). It is currently 3 seconds long, and I've noticed that it is too much...

[Godfrey]

That is an awesome, beautiful, and very artistic piece of work! Love how the box is a box but can grow and shrink when you click the folders, so it is not just imitating the boring old real-world but taking advantage of the digital realm.  

[nfil]

Congratulations on a great/unusual  website UI, looks really good and navigation is still intuitive. I like the second paragraph too.

My two cents: on the top of the site, I would try to decrease the paragraphs line-height or on the #main-intro class css do a simple closed accordion or reduce the padding-top, If the user has a small height resolution device, it will have to scroll down every time he visits the website to see the updated and mostly the archived postcards.

Parabéns, Lisboa é linda.

[tiagoroldao]

Thanks, @nfil!

You are right - the content starts too far down. This is a requirement, as it stands, as the postcards go up when clicked (it simplifies the animations and positioning (divs get higher and higher z-indexes further down, and going up is a sure-fire way to have it stand on top. Ideally, they would open to their original position (something like going up and then back down, on top of everything else). This is one of the top items of a very, very optimistic list

Although I have chosen to completely ignore caching/SEO problems (it is a completely js-driven website), one thing the website needs (or will need, soon enough, with a growing number of posts) is urls patters mapped to folders and/or postcards, so they can be shared and accessed.

[diogo]

Tiago, maybe you could rethink your only JS approach. I know this is an experimental website, but it would give so much more flexibility to do it in  be a different way. You could for instance create all the postcards as divs (or articles in html5) and have them, already styles, in a normal posts structure. Then, with JS you would have only to pick them and put them inside the box.

[tiagoroldao]

This website is a very intentional misuse of technologies and tools. You are right that it could be done differently, in a easier and more effective manner..

By the way, for websites like this, I generally use isolated templates that create the html snippets for a postcard/blog post div, etc, and call them both within the "main views" (from the backend) and from AJAX calls, so you get a populated page when you land, using the same templates that serve AJAX requests.

The thing is, this is an excuse to work with angularJS, which I use on a daily basis for what it is intended - full blown web apps. This way, I can tryout things like animation management (that are in beta testing stage), or different scaffolding schemes... All things that in my main projects, have little or no space.

As an added "perk" I have these terrible issues of using it for things it was not meant to. Sure, in this specific instance, it is just plain dumb  but they are issues that may arise in contexts where angJS is a requirement, and have to be resolved somehow. Things like SEO, navigation, url mapping, that would make me immediately choose a different strategy, are unfortunately things that on other contexts, can't be avoided.

FYI, typical things I do with angularJS:

• GUI for a teacher performance evaluation app, where teachers can present their performance data (subjects given, papers written, etc)
• A line management UI (where you pick a numbered ticket and wait for your turn) - specifically the "frontend", with animations, a video box, and RSS feeds
• A form editor UI for the faculty to use (as there were a number of functions lacking in the available, commercial or open source solutions, such as a complex field dependency sistem (field or field group C appears if field B is x and/or field A is between x and y....)

[nfil]

By the way, for websites like this, I generally use isolated templates that create the html snippets for a postcard/blog post div, etc, and call them both within the "main views" (from the backend) and from AJAX calls, so you get a populated page when you land, using the same templates that serve AJAX requests.

Yes I agree thats a good route to control every taylor fit elements of the website have like a site lab. For a experimental site with misuse of technologies I think the navigation and usability are pretty good. The links for the seo, with did some stuff with deep links and changing the browser title with flash sites some years ago and Google was ~happy with that, clients wanted lots of stuff jumping around and for animation, 4 or 5 years ago flash was one of the best tools to run animations, apart from heavy ones CPU/intensive and the plugin mandatory/proprietary/adobe download.

So like you explained you used the best tools to accomplish the task, in the right or or not, well its a experimental site, I would still use flash as a projector/exe if a client asked me to do a presentation full of stuff jumping around. Also I really like these guys' work, they are really good with js and they don't even use deep links on their website http://www.doubleyou.com

[diogo]

This website is a very intentional misuse of technologies and tools. You are right that it could be done differently, in a easier and more effective manner..

Understood

[DV-JF]

This is a blog (of sorts) for my father, with make-pretend postcards sent from Portugal. It is essentially a way for me to experiment with and learn a few techs/tools:

• css 3d transforms (and respective headaches, cross-browser issues, etc)
• The wonderful angularJS framework
• Yeoman (build system for js apps, with grunt + bower)
• Processwire, of course

Hey tiagoroldao,

your the only one who mentioned yeoman in the forum here yet. So here's my question to you:

How's your workflow with yeoman and Processwire? I would like to hear how you deal with it.

Many greets!

[tiagoroldao]

Well, yeoman is a pure client-side stack, meaning it isn't made for backend programming at all. It is pure JS.

What I did was set up two distinct projects for the frontend and the backend, respectively:

• I set up my PW templates as RESTish services
  • single php file with GET based logic for simple items
  • php file + same name folder of related assets if it is something more complex
• And my UI as a yeoman project, that exports to templates/ui

Then linking the two is just a matter of calling it in home.php:

<?php include("./ui/index.html");?>

Remember, yeoman is strictly frontend, and in general only caters to single-page-app type projects. But for that scenario, it is amazing!