Hacker Newsnew | past | comments | ask | show | jobs | submit | ruemic's commentslogin

http://www.staticgen.com is a great tool to help you find one to fit your needs. It does a daily poll of github stats on the most popular static site generators (72 on last count!) and lets you sort by programming language and popularity.

That being said, I'm been using gulp to hack together a system when the site isn't something conventional like a blog, marketing page or docs that many of these generators excel at.


We're offering another flavor in this same "value add static hosting" paradigm with BitBalloon.

https://www.bitballoon.com

So far we don't deal with the authoring abstraction layer. Our focus is on solving deployment by automating performance optimization like asset bundling, caching & CDN integration.

The big vision is to provide static hosting for the programmable web. We make HTML forms work and provide an API for sending the input wherever you want. This OAuth2 based API also handles deploying sites, injecting code snippets, and updating individual files.

The real moonshot here is developing a standard similar to JSON Patch for updating HTML via PATCH requests. If Harp, or anyone reading this is interested in this idea, we'd love to collaborate on developing a spec.


To help people evaluate alternatives for creating static sites, I built this live dashboard comparing the Github activity of the leading static site generators.

http://www.staticgen.com


Hey thanks for the pointer. It's definitely a lot smoother using translate.

But I'm running into a hiccup on the implementation. The trick is there are actually two Norths, they are identical and one is on each end of the background. Once you hit North-2 on the right end, and you want to keep turning to the right, it needs to instantly "skip" you back to North-1. And vice versa.

The thing I haven't figured out how to do in a smooth way is to disable the transition, for that split second to allow for the jump.

What I've done so far is give each direction a class with the corresponding translate. eg. "go-0, go-1, go-2, go-3, go-4"

I've also created two extra classes "go-0-instant" and "go-4-instant" which, set transition duration to 0 and to skips back to North 1 & 2 instantly.

But the problem is that i needs to happen quickly, and once I remove the "go-0-instant" class and add the class with enacts the normal rotation, the css gets overridden and the instant translate basically gets overridden.

I guess what I'm after is a clean way to do a callback once you know the DOM has picked up on a css class change.

I've run into this issue a couple of times before, I would be stoked to learn of the best way to do this!

Here's the CoffeeScript file that controls the navigation: https://github.com/webpop/css-pirate-ship/blob/translate3d/p...

and the Scss for the cardinal directions: https://github.com/webpop/css-pirate-ship/blob/translate3d/p...


Hi,

I think the best way to solve for that is with CSS keyframe animations. lets say your on the right side of the background and need to cross over - instantly skip to the left side of the background, and keep moving to the resting spot on the left.

@include keyframes(right-left) { from { @include transform( translate3d(-800px, 0px, 0px) ); } 50% { @include transform( translate3d(-1000px, 0px, 0px) ); } 51% { @include transform( translate3d(0px, 0px, 0px) ); } to { @include transform( translate3d(-200px, 0px, 0px) ); } }

@include keyframes(left-right) { from { @include transform( translate3d(200px, 0px, 0px) ); } 50% { @include transform( translate3d(0px, 0px, 0px) ); } 51% { @include transform( translate3d(-1000px, 0px, 0px) ); } to { @include transform( translate3d(-800px, 0px, 0px) ); } }

Basically whats happening is you animation smoothly for the first half, and then right in the middle you 'reposition' so the second half of the animation starts on the other side.

Im not sure if you can do 50, 50.1% but 1% over 1-2s should not be noticeable.

If your still getting jitters even with this technique, you could have two copies of the background side by side and put them in a wrapper div, call it .slider. then apply the translate on the .slider to cross over the seam, and when the animation is done instead of letting it rest on the second background you would set it to rest on the first background but in the same spot, you would apply this in the 99%, to portion of the keyframe animation.

Basically you can use 50% 51%, 99%,100% technique to shift where the animation is happening and have it look seamless even though you may be adjusting the position significantly.

does that make sense ?


Hey, thanks for the feedback, had a couple of other mention this me as well, saying they kept trying to drag it. I've added a line of directions as you suggested.

Maybe version 2 will be touch enabled and let you control the wheel to turn to any degree, not just the cardinal directions :)


My first instinct, after figuring out how to turn, was to try to ram the other ship.

I was very sad when I realized I couldn't even point myself at it.


Sorry to cause you this great sorrow. And thank you for the ridiculously awesome suggestion. I've been thinking cannon balls... but keep an eye out for ramming in V3! I smell a massively multiplayer CSS based naval title on the horizon ;)

Pull requests welcome, the code is on github https://github.com/webpop/css-pirate-ship


Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: