6 ms·

Simple kitten placeholder

133 points by nanna 6y ago

kleinsch 6y ago
I enjoy https://www.fillmurray.com/ https://www.fillmurray.com/
metalliqaz 6y ago
i'm disappointed that when I put in 800x10 I just got a slice of a larger picture instead of lots of tiny kittens in a line
082349872349872 6y ago
V2: gradients, à la https://i.pinimg.com/originals/97/23/44/9723443d55a5b09771788316fe2e32b2.jpg https://i.pinimg.com/originals/97/23/44/9723443d55a5b0977178... V3: genotype->phenotype simulation: https://www.basepaws.com/blog/cat-coat-genetics/ https://www.basepaws.com/blog/cat-coat-genetics/
Traubenfuchs 6y ago
I created a custom HTML element to allow easier placement of kittens. https://jsfiddle.net/Lytx27cg/1/ https://jsfiddle.net/Lytx27cg/1/
lemcoe9 6y ago
Another opportunity for a shameless plug of my kitten-inspired website: IPKitten.com, which serves to give your IPv4 address, User Agent, and a ARIN-based IP address lookup to show the ISP. https://ipkitten.com https://ipkitten.com
- mxuribe 6y ago
  Thank you for your work here! Not only is the info displayed handy (having several useful items all on a single page), but it brought a nice smile to my face! Kudos!
jwarren 6y ago
This has been my go-to placeholder site for the best part of a decade. Not because it necessarily works the best, but just because I always remember it.
- sacredSatan 6y ago
  For me that site has been Lorem pixel. I thought of it as soon as I read the title. Haven't used it in a while so not sure if it is any good now. https://lorempixel.com https://lorempixel.com Nevermind, it is down. I just thought that the name was pretty cool and always remembered it.
  - sbruchmann 6y ago
    AFAIK they rebranded as https://picsum.photos/ https://picsum.photos/
  - breakingcups 6y ago
    It works for me here?
ealhad 6y ago
Pointless code snippet to replace every image on a webpage by a kitten (it fails for very small images, because of dumb randomization) function randInt() { return Math.round (Math.random() * 20 - 10) } for (const img of document.getElementsByTagName('img')) { img.src = `https://placekitten.com/g/${randInt() + img.width}/${randInt() + img.height}` }
- dspillett 6y ago
  Or turn it into a one-line immediately executed function, and you can add it as a bookmark and run it on pages that are not yours: javascript:(function b(){function randInt() {return Math.round (Math.random() * 20 - 10)};for (const img of document.getElementsByTagName('img')) {img.src = `https://placekitten.com/g/${randInt() + img.width}/${randInt() + img.height}`}})(); Create a bookmark with that as the URL, go to some page, click the bookmark, kittens everywhere, profit!
  - seisvelas 6y ago
    Many sites will also have a CSP that blocks placekitten.com along with other 3rd party img tag origins. Daring users on Firefox can circumvent this protection by browsing to about:config and setting security.csp.enabled to false.
    - dspillett 6y ago
      Aye, CORS settings will break it, as will any images that get dynamically updated our loaded as you scroll etc. Also it won't catch images used as backgrounds. There are a lot of ways to break bookmarklets, intentionally, by application of security settings for other reasons (like, erm, security!), or accidentally.
danso 6y ago
I'm more of a https://www.placecage.com/ https://www.placecage.com/ fan myself, though this placekitten site [0] apparently uses CC-licensed images, something that most of the novelty placeholder sites skirt. [0] https://placekitten.com/attribution.html https://placekitten.com/attribution.html
derwiki 6y ago
Similar, I always prefer hipster ipsum for sample text: https://hipsum.co/ https://hipsum.co/
- v01dlight 6y ago
  Oh, oh my... Why do I love and hate that so much.
stanrivers 6y ago
You need to make it so people can upload kitten pictures; and then people can vote on the kitten pictures; and then the pictures that are served cycle through the top [10]. Obviously, that could result in nefarious activities... but it would be cool if it could work.
- josephorjoe 6y ago
  Sadly the moment you let random people upload anything on the internet, you are no longer doing what it was you thought you were doing, and you are now dealing with all of the consequences of letting random people upload images to your application. Years ago I abandoned a simple recipe creator/organizer side project when I started imagining what photos people would upload and what I would have to do about it.
- dylan604 6y ago
  No, absolutely not. That's like saying sed, awk, grep need more features. These are all specific tools. They do a job reliably and fast. Keep your bloat out of my tools. Please. thank you. Not everything in the world needs Social.
yawnxyz 6y ago
i've always wondered how they can afford paying for bandwidth costs...
- Cthulhu_ 6y ago
  Bandwidth is relatively cheap nowadays, plenty of hosts that offer a ton of bandwidth along with cheap hosting. And the images (at least on the homepage) are pretty small, clocking in at less than 10 KB each.
  - dspillett 6y ago
    Aye. The images seem to be static: you always get the same one for any given size. So there isn't much work being done to serve them most of the time. I expect they have nginx configured to serve a file statically if found, and on error go to the script that will pic one, resize as needed, serve it, and also drop the result into place so next time that size it requested the image can be sent as a simple static file. CPU time is often a limiting factor with shared or VPS hosting, this will most likely keep that from being where the bottleneck actually is. Or the hit of DB access, which this scheme would not need (at least not for most requests, perhaps there is a DB of images used when a request for a new size comes in).
deleted 6y ago
[deleted]
seg_lol 6y ago
I don't know what it is, but I feel uneasy embedding images from an unknown location into my site, even if just for dev. What are other folks thoughts on security or potential downsides? Don't depend on it, even accidentally, It leaks information, if you are running "hidden" on the net, but placekitten.com will still know, images could get replaced, if you bundle the images via server side rendering, could attack imagemagick, and or parsing attacks and potentially include js in the payload. If I were a dev image replacement service, what information or advantage could I gain?
- Cthulhu_ 6y ago
  Assuming it's only used in development: - Early information on unreleased software / UIs; maybe you could jump the gun and introduce a concept faster. - Access to customer data, if it's improperly censored / randomized after being pulled from a production database - (advanced) Malware injection - (advanced) Malicious code injection
- loa_in_ 6y ago
  Since you don't check for the image format you can get served a SVG image with embedded JavaScript and CSS that could potentially run in your website context. It's not that straightforward as just an image tag won't let attackers run any js by default, but inlining the image would.
- dylan604 6y ago
  I wouldn't suggest doing it as a direct call, but if you write a script that has a few methods of verifying that it actually is an image and then even converts it to a new image, it might be a little more safe. Sure, it might slow things down, but it's for dev, right? But that slowdown might be a good thing. Do you really need all of those images?

133 points by nanna 6y ago

I enjoy https://www.fillmurray.com/ https://www.fillmurray.com/

i'm disappointed that when I put in 800x10 I just got a slice of a larger picture instead of lots of tiny kittens in a line

082349872349872 6y ago

V2: gradients, à la https://i.pinimg.com/originals/97/23/44/9723443d55a5b09771788316fe2e32b2.jpg https://i.pinimg.com/originals/97/23/44/9723443d55a5b0977178... V3: genotype->phenotype simulation: https://www.basepaws.com/blog/cat-coat-genetics/ https://www.basepaws.com/blog/cat-coat-genetics/

Traubenfuchs 6y ago

I created a custom HTML element to allow easier placement of kittens. https://jsfiddle.net/Lytx27cg/1/ https://jsfiddle.net/Lytx27cg/1/

lemcoe9 6y ago

Another opportunity for a shameless plug of my kitten-inspired website: IPKitten.com, which serves to give your IPv4 address, User Agent, and a ARIN-based IP address lookup to show the ISP. https://ipkitten.com https://ipkitten.com

mxuribe 6y ago
Thank you for your work here! Not only is the info displayed handy (having several useful items all on a single page), but it brought a nice smile to my face! Kudos!

jwarren 6y ago

This has been my go-to placeholder site for the best part of a decade. Not because it necessarily works the best, but just because I always remember it.

sacredSatan 6y ago
For me that site has been Lorem pixel. I thought of it as soon as I read the title. Haven't used it in a while so not sure if it is any good now. https://lorempixel.com https://lorempixel.com Nevermind, it is down. I just thought that the name was pretty cool and always remembered it.
- sbruchmann 6y ago
  AFAIK they rebranded as https://picsum.photos/ https://picsum.photos/
- breakingcups 6y ago
  It works for me here?

ealhad 6y ago

Pointless code snippet to replace every image on a webpage by a kitten (it fails for very small images, because of dumb randomization) function randInt() { return Math.round (Math.random() * 20 - 10) } for (const img of document.getElementsByTagName('img')) { img.src = `https://placekitten.com/g/${randInt() + img.width}/${randInt() + img.height}` }

dspillett 6y ago
Or turn it into a one-line immediately executed function, and you can add it as a bookmark and run it on pages that are not yours: javascript:(function b(){function randInt() {return Math.round (Math.random() * 20 - 10)};for (const img of document.getElementsByTagName('img')) {img.src = `https://placekitten.com/g/${randInt() + img.width}/${randInt() + img.height}`}})(); Create a bookmark with that as the URL, go to some page, click the bookmark, kittens everywhere, profit!
- seisvelas 6y ago
  Many sites will also have a CSP that blocks placekitten.com along with other 3rd party img tag origins. Daring users on Firefox can circumvent this protection by browsing to about:config and setting security.csp.enabled to false.
  - dspillett 6y ago
    Aye, CORS settings will break it, as will any images that get dynamically updated our loaded as you scroll etc. Also it won't catch images used as backgrounds. There are a lot of ways to break bookmarklets, intentionally, by application of security settings for other reasons (like, erm, security!), or accidentally.

danso 6y ago

I'm more of a https://www.placecage.com/ https://www.placecage.com/ fan myself, though this placekitten site [0] apparently uses CC-licensed images, something that most of the novelty placeholder sites skirt. [0] https://placekitten.com/attribution.html https://placekitten.com/attribution.html

derwiki 6y ago

Similar, I always prefer hipster ipsum for sample text: https://hipsum.co/ https://hipsum.co/

v01dlight 6y ago
Oh, oh my... Why do I love and hate that so much.

stanrivers 6y ago

You need to make it so people can upload kitten pictures; and then people can vote on the kitten pictures; and then the pictures that are served cycle through the top [10]. Obviously, that could result in nefarious activities... but it would be cool if it could work.

josephorjoe 6y ago
Sadly the moment you let random people upload anything on the internet, you are no longer doing what it was you thought you were doing, and you are now dealing with all of the consequences of letting random people upload images to your application. Years ago I abandoned a simple recipe creator/organizer side project when I started imagining what photos people would upload and what I would have to do about it.
dylan604 6y ago
No, absolutely not. That's like saying sed, awk, grep need more features. These are all specific tools. They do a job reliably and fast. Keep your bloat out of my tools. Please. thank you. Not everything in the world needs Social.

yawnxyz 6y ago

i've always wondered how they can afford paying for bandwidth costs...

Cthulhu_ 6y ago
Bandwidth is relatively cheap nowadays, plenty of hosts that offer a ton of bandwidth along with cheap hosting. And the images (at least on the homepage) are pretty small, clocking in at less than 10 KB each.
- dspillett 6y ago
  Aye. The images seem to be static: you always get the same one for any given size. So there isn't much work being done to serve them most of the time. I expect they have nginx configured to serve a file statically if found, and on error go to the script that will pic one, resize as needed, serve it, and also drop the result into place so next time that size it requested the image can be sent as a simple static file. CPU time is often a limiting factor with shared or VPS hosting, this will most likely keep that from being where the bottleneck actually is. Or the hit of DB access, which this scheme would not need (at least not for most requests, perhaps there is a DB of images used when a request for a new size comes in).

deleted 6y ago

[deleted]

seg_lol 6y ago

I don't know what it is, but I feel uneasy embedding images from an unknown location into my site, even if just for dev. What are other folks thoughts on security or potential downsides? Don't depend on it, even accidentally, It leaks information, if you are running "hidden" on the net, but placekitten.com will still know, images could get replaced, if you bundle the images via server side rendering, could attack imagemagick, and or parsing attacks and potentially include js in the payload. If I were a dev image replacement service, what information or advantage could I gain?

Cthulhu_ 6y ago
Assuming it's only used in development: - Early information on unreleased software / UIs; maybe you could jump the gun and introduce a concept faster. - Access to customer data, if it's improperly censored / randomized after being pulled from a production database - (advanced) Malware injection - (advanced) Malicious code injection
loa_in_ 6y ago
Since you don't check for the image format you can get served a SVG image with embedded JavaScript and CSS that could potentially run in your website context. It's not that straightforward as just an image tag won't let attackers run any js by default, but inlining the image would.
dylan604 6y ago
I wouldn't suggest doing it as a direct call, but if you write a script that has a few methods of verifying that it actually is an image and then even converts it to a new image, it might be a little more safe. Sure, it might slow things down, but it's for dev, right? But that slowdown might be a good thing. Do you really need all of those images?