erindotio at May 4th, 2015 01:15 — #1
Lately I've been working on my personal site and really want a way to be able to smoothly transition say from homepage to individual project page, similar to this site.
I know the podcast theme template provided uses (i think?) ajaxify, but it appears as if that library is mostly defunct now, and I've noticed a lot of weird behavior on the podcast theme template as well after using the forward and back browser controls a few times. Mainly with the audio player getting screwy.
Has anyone tried integrating pjax or something similar into their webhook projects? I found this article which explains setting it up with Middleman (a ruby based static site generator) but this involves some server-side tweaks...
I would love a way to load pages via js and hook into the page-load events so I can run animations (with something like velocity) to smoothly replace content on the page. I know this is likely possible with webhook but I'm feeling a bit overwhelmed on where to start.
Thanks in advance!
budparr at May 4th, 2015 10:17 — #2
This is something I've thought about myself. Seems to me that using AJAX and going to the server defeats part of the purpose of going static because it's going to be slower, no? But page transitions don't need the server and maybe that's what your after more than necessarily using AJAX?
I find static sites in particular have abrupt page loads, and because I load all my scripts asynchronously you can see the HTML then other things coming in. I also think that there's more need to make sites "feel" like apps, and that means transitions.
There are approaches that use pre-fetching and scripts to animate. Yet, I've not found a single way of doing this that seems fluid in practice, and foolproof, particularly in terms of progressive enhancement.
Here's one that looks interesting. http://miguel-perez.github.io/smoothState.js/ I've looked at Velocity and haven't had much luck with it either. I'd love to hear what others have done too.
budparr at May 4th, 2015 10:44 — #3
And this is interesting. It's a static site (roots.cx) built very much like an SPA:
budparr at May 4th, 2015 11:13 — #4
Now you've sent me down the rabbit hole, @erindotio!
Did you see this post on the site you mention? http://minimalmonkey.com/what-libraries-are-used-on-this-site/
He's using pre-fetching. Looks interesting and low-tech enough to be a solid solution.
erindotio at May 4th, 2015 18:46 — #5
Haha down the rabbit hole we go
I didn't see that post but I'll read it over shortly, thanks!
Last night after posting this I did get somewhere with the basic ajaxify plugin I mentioned, where I've just gone in and started editing (and replacing with velocity.js) their default state change animations with conditional if statements depending on which links are being clicked.
Here's a little demo where going from the homepage to the post page runs some scaling animations on the triggered anchor link before loading in the post page contents (which has the same background color as the clicked square from the homepage).
This works because ajaxify simply grabs the whole static page, then extracts what it needs (contents of the
#content div) and replaces what was there before. No messing with response headers etc.
EDIT: Wow smoothState looks like it might be the answer. Gonna play with this in the next day or two and report back!
erindotio at May 4th, 2015 18:49 — #6
p.s. @budparr velocity.js is really pretty incredible. I recommend taking some time to figure it out if you have any interest in running any complex (e.g. anything beyond hover/active states) animations and you want them to perform at the highest possible framerates. It's also a drop-in replacement for all of jquery's
budparr at May 4th, 2015 21:28 — #7
Smoothstate does look like it's pretty solid as long as you're following progressive enhancement best practices, and I still say beware the AJAX. It's a false god.
So the original site you mention is using pre-fetching as well as the history API. Prefetching is all well and good (a webhook example using the prev/next function with prefetch here ), but it's not going to get you the transitions you want. The History API is all good and well, but it seems complicated beyond the simple use-case of a blog as it's used on that site. It fails gracefully though, and that's where most js solutions, well, fail.
erindotio at May 4th, 2015 21:34 — #8
Right, I appreciate that it falls back to a regular full page load. Very important.
Thanks for the prefetching example as well. Will def come in handy in the future!
exceptionlab at May 5th, 2015 17:06 — #9
This is a topic I'm really interested in, though hardly an expert at. So, that out of the way...
But I suspect Webhook can take you where you want to go, as long as you're willing to decouple your site (hosted wherever) from your data (deployed via Webhook). What I think you'd do is use Webhook to publish JSON, and then load that JSON into the front-end of your site on initial page load.
Here's an example of a site that's built in React and appears to load all the data as soon as you hit a page (e.g. you can disconnect from the internet and continue using the site): https://www.atlassian.com/git/
If anyone knows better how this might be achieved, I'm eager to learn.
erindotio at May 5th, 2015 18:46 — #10
@exceptionlab I was actually thinking of something similar to this idea, e.g. using the (excellent) Webhook CMS to build the JSON data and feed firebase, then having a completely separate, custom front-end app using something like angular/react/meteor.
This is definitely beyond my capabilities at this point, but it's something I plan to discuss with a few more seasoned developer friends of mine for future potential projects that might require a bit more sparkle on the front-end.
budparr at May 5th, 2015 18:48 — #11
I think @dkenzik has been doing that sort of work with Webhook.
dkenzik at May 5th, 2015 19:26 — #12
@budparr is correct. I'm working on a project that is using Webhook just for the CMS/storage side. The front-end is an SPA using AngularJS.
I'm using my down-and-dirty (and very simplistic) webhook-simple-api to facilitate retrieval of data from Firebase.
It's working well for this project specifically, but I do have plans to expand the API to work more generically as it pertains to resolving dynamic dependencies, etc. (right now I only have project-specific endpoints for the related types I know I need to couple.)
While I've passively followed this thread, I was reminded of smoothState.js. I agree that it looks like a solid solution. In fact, I'm working on my "personal" site (full Webhook, not just data) and plan to try it out there.
erindotio at May 5th, 2015 20:01 — #13
@dkenzik Awesome thanks for chiming in. Looking forward to seeing what you do with your personal site.
I've been looking for more excuses to dig into react/meteor/similar. Maybe having an easy CMS/backend solution with Webhook will give me that extra push.
exceptionlab at May 5th, 2015 20:15 — #14
@dkenzik That sounds really cool, I hope you'll share your results! I see from other discussions you might also be looking at posting & triggering Webhook builds outside of the CMS, which is very interesting as well.
Now to check out
dkenzik at May 5th, 2015 20:25 — #15
@exceptionlab - No problem!
Related to integrating content to an SPA, a CMS only solution is Contentful. There are libraries out there for AngularJS, etc. which give you easy access to your content. I've used them since beta, and they have exhaustive APIs which are very easy to work with. Unfortunately though, it gets costly for small shops, if you want an encompassing solution.
erindotio at May 5th, 2015 20:31 — #16
Funny, the first project I launched with Webhook (here) actually started out on Contentful + Rails. Unfortunately all of the necessary caching (using redis, etc) became a pain and I was spending too much time trying to reinvent the wheel and having to hire someone else to help me with the back-end work.
Webhook's CMS is also way more versatile and pleasant to use than Contentful's IMO.
Another "cloud" CMS that I had considered trying (before discovering Webhook) was prismic.io.
dkenzik at May 5th, 2015 20:45 — #17
@erindotio - I totally understand. I dug Contentful, but for me it was purely a cost issue, since most of my projects have been SPAs. Check out the recent blog post from Contentful. Carrot uses it and Roots with some other tools to create and host static sites. A great concept, not dissimilar to Webhook, actually.
budparr at May 5th, 2015 20:51 — #18
Yessir, I agree. Conceptually.
erindotio at May 5th, 2015 21:38 — #19
Nice. Your first link is broken though, can you repost?
dkenzik at May 5th, 2015 21:46 — #20
My bad. It's fixed in the original.