4 ms·

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

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-be-boring http://devan.blaze.com.au/blog/2015/11/3/errors-dont-have-to...

aibottle 10y ago
I guess the Google Bot and Spammers around the globe appreciate the effort. :D
- cyberferret 10y ago
  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!
Guest98123 10y ago
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 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 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.
- cyberferret 10y ago
  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.
  - wavefunction 10y ago
    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/ http://lokeshdhakar.com/projects/color-thief/
    - cyberferret 10y ago
      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.
  - SOLAR_FIELDS 10y ago
    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.
    - cyberferret 10y ago
- cloudjacker 10y ago
  lol, the awkward moment when you recognize the Breather used in the stock photo
  - corobo 10y ago
    What does this mean?
lifeisstillgood 10y ago
E.g. http://www.hrpartner.io/foo 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 :-)
- cyberferret 10y ago
  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!
  - morgante 10y ago
    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-iZCHTo https://www.evernote.com/l/AAFoxsm7IrtAXJHPeMtuEupE-j8Q-iZCH...
    - cyberferret 10y ago
      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.
deleted 10y ago
[deleted]
asdfweqr 10y ago
(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]]

aibottle 10y ago

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

cyberferret 10y ago
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!

Guest98123 10y ago

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 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 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.

cyberferret 10y ago
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.
- wavefunction 10y ago
  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/ http://lokeshdhakar.com/projects/color-thief/
  - cyberferret 10y ago
    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.
- SOLAR_FIELDS 10y ago
  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.
  - cyberferret 10y ago
cloudjacker 10y ago
lol, the awkward moment when you recognize the Breather used in the stock photo
- corobo 10y ago
  What does this mean?

lifeisstillgood 10y ago

E.g. http://www.hrpartner.io/foo 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 :-)

cyberferret 10y ago
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!
- morgante 10y ago
  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-iZCHTo https://www.evernote.com/l/AAFoxsm7IrtAXJHPeMtuEupE-j8Q-iZCH...
  - cyberferret 10y ago
    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.

deleted 10y ago

[deleted]

asdfweqr 10y ago

(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]]