57 comments

[ 2.6 ms ] story [ 53.6 ms ] thread
This interesting look at the darker side of what is happening in Inner Mongolia (environmental effect of rare earth mining) was posted on HN two days ago:

http://www.bbc.com/future/story/20150402-the-worst-place-on-...

quoting..

>>Technology companies continually urge us to upgrade; to buy the newest tablet or phone. But I cannot forget that it all begins in a place like Bautou, and a terrible toxic lake that stretches to the horizon.

Some great imagery in there Jack, I particularly liked the timelapses and the presentation. I live in Yunnan, where we have our own ghost cities! My favourite northern dish is 老虎菜 (laohucai). Also, don't they have alcoholic horse milk up there? That would be great to try.
The layout is completely buggy on firefox, I have to move and find the right position for the picture to load.
Same. The videos take forever to load because they're loaded in a lazy fashion so they don't begin being downloaded until you are looking at empty space. Also it seems like each one is several megabytes in size.
what aspect ratio, and on pc or mobile? It currently just shows the slide that covers the majority of the screen, which could be a bad assumption in certain cases.

The videos are large by design, I just wanted them to look a bit better than youtube videos. The 4k versions are up to 20Mb, but I was hoping preloading the next two slides would help with that.

what tech is behind the website? real cool
What tool was used to build this? I've tried Aesop a while ago, but the integration with Wordpress on a selfhosted site wasn't for what I had hoped.
(comment deleted)
Looks like it's a static site served up by S3
the backend is just a bash script I wrote (github above) that compiles to a static site. It really needs a lot more work before I'd want to release it though.
I'm on the tail end of a year of traveling through Asia, and this really resonated with me. I loved the presentation and wish I had done something similar.

What equipment did you use for photography etc?

thanks! I mostly used a panasonic GX7. Easy to carry everywhere I go.
What lenses did you use?
so I had the kit lens, the 20mm 1.7 I used for walking around. I have a few legacy primes for long shots, and a 14mm semi-wide. Mind you I'm not a great photographer, just picked the best kit under my budget at the time. Japan was the first time I used a real camera.

At web-resolutions it really doesn't matter much I think. The resolving power of almost all modern lenses are greater than 4k.

I think this is the static site generator he developed and used for the site: https://github.com/Jack000/expose
I'm planning on refactoring it actually, it's a bit ugly at the moment.
Looking forward to it. The concept and current execution are great.
I agree, I really liked it, the mix of photos and videos really works. And it loaded fine for me.
I really like the format and the content Jack. It wasn't overly dense as text heavy journals can sometimes be, and it was refreshingly immersive with the short videos.

I've also seen this format work to great effect with NY Times articles, and I for one enjoy consuming stories this way.

I found the seat-belt warning disablers and the local toll booth especially interesting.

Neat, took me a few minutes to realize/remember that it is China and not Mongolia, might help to make it more clear. Had to google Ordos, an interesting story I wasn't aware of.

I loved it, but had trouble reading the tiny, thin, white text over the photos. I know shadows are out, but it would help legibility. I used Firefox and it worked fine.

I wish a handful of folks got together, got crowd funded and travelled the world to cover cities and places in such a way.
Cool format, but the fade-ins are way too slow,

When i first opened the page i thought the images / videos were loading very slow, because i was greeted with a bunch of colored blocks while i scrolled downwards.

I really love the content, the photos are beautiful, but the presentation is terrible. It seems that most like the format, but I don't see it as an efficient way of presenting the content.

Honestly I would prefer to just wait while all the content loads initially. The scrolling really doesn't work otherwise, I initially scrolled by a couple of images because I didn't think there was suppose to be images or videos to all the images.

Lovely content, gimmicky presentation.

Most of the compromises in the design comes from accommodating video. I originally preloaded almost everything, but found that even two videos in the DOM bogs down the browser and makes scrolling laggy.

Anyways, I'm still working on it so feedback is welcome. My current thought is to do away with the fading and serve up placeholder images for the videos until they load.

FWIW I really liked the presentation. I think placeholders for the videos is all that is needed. :)
This is really beautiful. I absolutely enjoyed reading this, brings back fond memories of National Geographics when I was a kid.

I actually enjoyed how the photos don't load until the frame is entirely in view, it kind of made me hold my breath excitedly for the next gorgeous photo to fade in.

It's a very beautiful presentation.

In terms of performance, perhaps you could: i) use domain sharding for pre-loading all the images. ii) Keep the current system for loading and removing videos, but create a placeholder image for each video that's a capture of the first frame of the video. This might make scrolling past videos a little easier.

Regardless, I thoroughly enjoyed the site as-is. Thanks for sharing it with us.

I'm in Europe, so the whole experience scrolling down was of a stutter kind.

Please add a loading indicator of some kind - both for images and for video. When I was scrolling down, most of the time there was at least a 2-3 second delay before an image would appear, and longer for videos. For a couple of video I lost my patience after half a minute and just kept on scrolling. In several cases it wasn't clear if a text blurb on a black background was an intentional break in the narration or if it was just a delay in background loading.

Also, please make a single down arrow keypress do a full page scroll and align the frame to the top of the screen.

And a pony :)

Yes do that, please! :)

The photos look fascinating, but the UX was was just too frustrating for me to continue with on my kinda-shitty comcast internet.

(Also if you don't load all the images at first, at least load like always the next 5 or something. Also I'd recommend making sure to test on crappy internet, or with a network link conditioner.)

Cheers!

The website looks broken on my vertical monitors because of the way you are fading content in and out: http://i.imgur.com/LmzaezF.png

As I scroll down, the browser chooses a random div near the top to show content, and the others fade out. It's very frustrating and not what you intended for me to experience, so I wanted to point it out.

This is among the most beautifully presented travel accounts I have encountered. The site ran flawlessly for me in Chrome, but was a bit jerky in Firefox. Still, it was such an engaging combination of content that my initial reaction was: "I should book a ticket today."
> I can't help but laugh at the American imagery on the vehicles, a symbol of authority that requires no translation.

How sad.

great photos.

The texts are too small.

I just came here to comment on how awful the scrolling is. I literally can not read anything on the page because the scrolling is horrible.
This is great, I really enjoyed the presentation, photos and descriptions...some of which sent me spiraling off into wikipedia for more information.

I hope the author mostly ignores the HN community's incessant need to pretend like any interface that's not a button marked "push for stuff" or doesn't work on some oddball gizmo has something wrong with it.

This is beautiful work.

thanks! There are a lot of negative feedback about the scrolling, that's something I'll definitely have to work on.
On my case that's the opposite, I really really liked the scrolling, it adds a really nice touch to the story. I just wish the text would have a bit more contract in some of the pictures. But otherwise it's really good, thanks for sharing this !
I completely agree with this comment, while I like to assume people are being helpful this whole thread is coming off a bit too nitpicky on the interface.

The story and pictures/video were simply amazing, and the way it displayed was excellent. Having just listened to Dan Carlin's Wrath of the Khans (http://www.dancarlin.com/product/hardcore-history-43-wrath-o...), the presentation really helped with some of the visuals and cultural references on the podcast.

Wonderful narrative but an awful show on a phone. The images keep disappearing when I scroll. I can see them sometimes, then they are replaced by a block of solid color. Some images never come back, some do.
Using a perfectly normal copy of Firefox on Xubuntu, the text is way too hard to read - enough so that I had to give up, sorry.
This is incredible storytelling. I had never heard of Ordos before - it looks amazing.
Pretty good shots. I was browsing the other Asian destinations in @Jack000's blog. Noticed that in the photo blog about Japan trip in 2014, he snapped a BMW i3 and called it "unreleased"[1]. That was inaccurate.

BMW i3 was long been rumored in the auto news. First i3 delivery took place in London November 2013 (mass production started in Sept 2013). Btw, the raw material of i3's carbon fiber unibody was made in Japan [2].

[1]: http://jack.ventures/japan-2014/09/2560.jpg [2]: https://en.wikipedia.org/wiki/BMW_i3

Amazing photos. Normally I can't make it through long picture streams, but your captions really seemed to keep me interested. I actually thought the lazy loading + scrolling worked very well.

On one slide, you mention the locals setup a toll checkpoint. It looks like you just drive right through without paying. Is it just a one way 'courtesy' checkpoint?

There were actually two groups, each responsible for a single direction. I started recording after we paid and passed the first group.