Hacker News Reader

Comment by cyberferret | Hacker News Reader

Unsplash is a really cool resource. We actually use it (paired with another 'sister service' called Unsplash.it) to provide ever changing and semi interesting 404 error pages for our web app... I blogged about how we do it a while back - http://devan.blaze.com.au/blog/2015/11/3/errors-dont-have-to...

View on HN

You might want to add a text shadow, because the error message isn't visible on quite a few images. I just loaded the page 5 times, and couldn't see it twice.

http://i.imgur.com/YNBEUzc.jpg

Also, it gives some strange behavior in Firefox. If I load the below in a tab, it shows a random image as expected. Then if I open it again in a new tab it shows the previous image that loaded from the first tab, and then it switches images to a new random one a second later.

http://www.hrpartner.io/nopage

Lastly, you could solve the above issues, and decrease the load time from 1s to 200ms if you just self hosted a few random images, and you wouldn't have to worry about your 404 page depending on Unsplash.

Edit: It's actually taking 6-8 seconds to load the image now, and the 404 page is white text on a white background during that time.

Thanks for the feedback! Yes, I do notice there are quite a few lighter images on Unsplash nowadays, so the white text will be hidden on those. Will add the shadows to the text as you suggested to make it work better.

I'll investigate those Firefox issues too - I did most of the testing in Chrome, Safari and IE, but will do some more on FF to ensure it works OK on all browsers.

If traffic gets really high on our site, I may resort to locally hosted images to reduce load time. Unsplash.it may also be throttling the image load time for us, as I am thinking the sudden spike from this HN post may have alerted them to the fact that there is suddenly a flurry of remote calls to them from our server IP? Or perhaps the Amazon CloudFront CDN is causing a slow down there? I will investigate - thanks for your useful feedback.

You could color-sample the pictures displayed on the fly with a library like color-thief[0] and render the text in some acceptable contrasting color. We do something similar for a bit of our app that allows the users to set color schemes.

[0]http://lokeshdhakar.com/projects/color-thief/

Nice library! All javascript too. Thanks for the heads up - will certainly make an interesting project to use this to calculate the text colour for the error screens.

In fact, I may be able to go back to using coloured Unsplash images. I went for Grayscale images purely so that I could stick to white text for the contrast.

Since you're worried about server load on Unsplash there is always (as I'm sure you're aware) the option to periodically ding their server and store a rotating cache of their images instead of having the user hit them per request.

Thanks. I had heard about the possiblity of doing this, but never visited it in detail - mainly because (up until this post today), we were only serving up one or two 404/500 pages per day, but if things get really busy, then I expect I will look into that.

I already use pre-downloaded Unsplash images within the app itself for the user 'lock screens'. I've curated and placed about 20 images on our server expressly for that purpose [1],[2]

[1] - https://flic.kr/p/NV8cS3 [2] - https://flic.kr/p/NN3vvY

lol, the awkward moment when you recognize the Breather used in the stock photo

What does this mean?

E.g. http://www.hrpartner.io/foo

Nice - even dare I say it much nicer than the generic smiling corporate woman on the front page. AB testing be damned, I want black and white landscapes for saas products :-)

Ha! You should have posted a graphic screen shot. The (invalid) link will always load a new random image so I can't see what you were trying to show me. :)

But thanks also for the feedback on the actual home page image. We are in the midst of (ironically) A/B testing that header image and have been rotating a few over the past weeks to see which ones have better clicking power. We've gone from abstract office shots to really corporate-y team and people shots etc. so appreciate any and all feedback!

While on the topic of your home page, I found it incredibly annoying that the header links are invisible when on white sections of the page.

https://www.evernote.com/l/AAFoxsm7IrtAXJHPeMtuEupE-j8Q-iZCH...

Ah - thanks for the heads up. I thought that issue had been fixed, but might have been re-broken during the A/B testing. I can't load your Skitch image, but I checked the site and know what you mean. It is annoying and I will get that looked at.

I guess the Google Bot and Spammers around the globe appreciate the effort. :D

LOL - and our server logs certainly prove that too.

But just wait until the Google Bots become sentient - I am banking that we will be spared their wrath purely for breaking up the boring monotony of their crawling life!

(not a user [yet?]) seems like it'd be nice if unsplash.it let me limit ?random to a specific collection or collections. ?random[=coll0[,coll1,...,collN]]

Reply on news.ycombinator.com