What is Reddit's opinion of placekitten?

I'm like 99 percent certain this is what placekitten was designed for. But in general, you should be charging above market rates for working on stuff you cannot place on a resume.

Would this make more sense returning images that are resized dynamically, or keeping a cache of previously-called images on harddrive?

I mean, once you start getting into the 1000's:

http://placekitten.com/200/3500

The CPU time starts getting more expensive than HDD space, right (CPU time as in, response time starts getting longer and longer)?

This has been a bug with Placekitten for at least a year. For some reason, images with a height ending in 00 don't work most of the time. I'm thinking it may be to save on bandwidth? You can kind of fudge it by replaceing the last 0 with a 1.

Example:

http://placekitten.com/400/400

http://placekitten.com/400/401

Here's what I would do:

Find a PSD template website (http://themeforest.net/category/psd-templates)
Look at their files and try to build it without any images, using placeholders for the real photos (like slider images, etc) (http://placekitten.com/)

Lorem Ipsum is pretty standard copy and paste text to use as filler until one has real copy. looks more like english than keyboard mashing. I also like to use placekitten.com for filler images.

As much as I love my cat, he can be a bit devilish most of the time. I was showing this to my wife, and jokingly said that 666/666 would be our cat.

http://placekitten.com/666/666

It's a dead ringer for him! We couldn't stop laughing for twenty minutes! Thanks for the link.

Ever since I bought mine cash and then a few days later finished work on my portable teleporter (it's just a hobby, so it doesn't look shiny and stuff, but it works, link to detailed plans and tutorial/how-to), I don't pay anything for my car. ]=)

The right-justified nav, with left-justified opening content is weird. What if you left-justify the menu links, but keep the search bar on the right?

Also, ShesJustAGlitch is right, carousels are almost never the right choice. If you have the content, I'd recommend a vertically scrolling portfolio. Masonry or not, people can scroll WAY easier with a mouse.

As for placeholder content, Reddit loves cats, you need placeholder images; This should work perfectly. :)

What is the thing to the right of the sidebar? If it's actually blank like that, I'd get rid of it as it makes it look incomplete/broken.

This definitely isn't horrible, just needs to be polished a bit.
Be very careful calling yourself a UX designer.

uh, sure...

but its pretty simple to write prototype quality HTML/CSS with out having to worry about testing / cross browser and perfectly working code...

Like, if you know an image should be 600x300 px in size, use something like http://placekitten.com/600/300 (change the numbers, get any size you want).

TBH, I'm not sure what your professor is expecting - but I suspect you're right, he doesn't know what he's talking about.

I'm just going to leave this here to be an asshole and I like messing around writing blocks of code in silly ways like this:

!>body[style="background-color:red;"]>img[src="http://placekitten.com/200/138" alt="Kitten!"]*3+h${Hello, I am a H$ tag}*3+ul>li*5>a[href="https://google.com"]{Google link $}

OP - if you can work out what that is - it will do your homework for you - although you're probably better off learning it properly.

All your code should go inside the body tag. It is the body.

Inside, new html5 tags like header, main, and footer.

The names are pretty self-explanatory, but if you're making a header, you should really use the <header> tag.

It's practically just a div with a fancy name. This goes in head: > <meta name="viewport" content="width=device-width, initial-scale=1"> <style> header{ margin: 0 auto; } header img{ width:100%; max-width:500px; } <\/style>

this in body:

> <header> <img src="http://placekitten.com/800/800" \> <\header>

(then put your content in a main tag, or in a article tag in a main tag, and put your footer in a footer tag)

the first is a meta tag. It basically says to make the page the same size as the physical screen. (by default, smartphones would mimic being computers). Following that is an opening style tag, then a style for the header tag to be centered. the following code is the image inside the the header tag, it should be 100% the width of the screen if it does not exceed 500pixels. If it is more than 500 pixels, its probably a desktop. The style tag is closed and then there's a header tag (basically a div) with an image.

edit: explained a little

I noticed this as well when I tried http://placekitten.com/184/184 . This saddens me, I want my square kittens!

EDIT: This one seems to work, though, so it can't be just squares http://placekitten.com/1337/1337

You can easily grokk such things by printing objects you are experimenting with:

kittens = open('http://placekitten.com/') p kittens # => #<StringIO:0xa5436e8> p kittens.read # => very long string p kittens.read.class # => String

or, you can try to run code in irb console, it shows what the objects you are dealing with.

So, it's calling method StringIO#read, which returns String, then it calls method String#[] on the resulting string (selecting only part of a string, though, with 559 and 441 it will be an empty part).

The tricky part for novice here is to understand, that read[559, 441] is two method calls, not one. It's the same as:

response_full_body = kittens.read response_body = response_full_body[559, 441]

placekitten.com is like lipsum.com for images. You can specify nearly any image dimension and it'll provide you with a safe-for-work, appropriate-for-client picture of a cat.

My favorite solution, 100% height inline-block pseudo element before :

.container { height: 280px;
width: 260px; text-align: center;

border: 1px solid red; }

.container:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }

.container img { vertical-align: middle; }

Demo : http://jsfiddle.net/3hf4cvty/

Explaination : https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

Consider taking a look at Promises as well (one such implentation is http://promisekit.org/). It's used alot in Javascript.

Here's an excerpt of how it can help organize with a/synchronous code:

UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:…]; [sheet promise].then(^(NSNumber *buttonIndex){ int const size = (buttonIndex.intValue + 1) * 100; return [NSURLConnection GET:@"http://placekitten.com/%d/%d", size, size]; }).then(^(UIImage *kittenImage){ self.imageView = image; });

couple options:

image processing on the server.

image processing off line.

<div class="imgcontainer"><img src="http://placekitten.com/g/200/300" ></div> .imgcontainer{overflow:hidden;width:120px;height:120px;} .imgcontainer img{width:100%;height:auto;}

something like masonry.js

If you want a mouseover option, how about this?: http://jsfiddle.net/RyDyJ/

This relies on jquery.

SCRIPT: (You can just put this just before you close the body tag)

HTML:

CSS:

.beforeAfter { position: relative; }

.beforeAfter img { position: absolute; top: 0; left: 0;
z-index: 100; }

.beforeAfter img.after{ z-index: 200; display: none; }

And a version that works on ANY site (the above needs jQuery on the site):

javascript:(function(){var a=document.getElementsByTagName('img'),i=a.length;while(b=a[--i]){b.setAttribute('src','http://placekitten.com/'+b.width+'/'+b.height);}})();

I didn't make either of these, just sharing the sources.

Load up foxnews.com or any other site.

Paste this into URL bar and hit enter:

javascript:(function(){$('img').each(function(i,img){var $i = $(img), w = $i.width(), h = $i.height(); if ( w && h ){img.src = 'http://placekitten.com/'+w+'/'+h;}});})()

Image Transcription: Code

(html (head (title "Website") (style :type "text/css" "* { box-sizing: border-box; }" "body { font-family: sans-serif; font-weight: 300; margin: 3em; font-size: 12pt; }" "img { float: right; }")) (body (img :src "http://placekitten.com/200/300" /) (h1 "Hello, World!") (div :id "article" (p "This is a paragraph.") (p "This is another paragraph," (b "oh " (i "fuck."))))))

^^I'm a human volunteer content transcriber for Reddit and you could be too! If&#32;you'd&#32;like&#32;more&#32;information&#32;on&#32;what&#32;we&#32;do&#32;and&#32;why&#32;we&#32;do&#32;it,&#32;click&#32;here!

I once made over $1,000 via referring some people to sign up for eBates by posting embedded links in a few Reddit comments like this.

The referall program used to be this: https://www.hearmefolks.com/wp-content/uploads/2016/12/ebates-referral-bonus-table.jpg

.bg{background:url(http://placekitten.com/200/300);} sets the background image url for any element with the class bg. in this case, it is an adorable kitten, but you might want to use /img/mycoolbg.jpg or /img/suprisedpickachu.gif. so you'd change it to .bg{background:url(/img/suprisedpickachu.gif);}. assuming that your image is in a folder called img, it should just work.

Can you walk me through the steps of batch converting in Photoshop? It seems like it would be time consuming.

Edit: Is this more like what you're looking for then? Use a placeholder service like this(rabbits, bunnies) until you have everything organized the way you'd like it. Then you only have to resize your images once when you throw them up.

Hi, OP here. I created this little placeholder image site with my designer friend (she had the idea and is making all of the patterns, I did the programming).

This was inspired by all of the "placeholder image" sites out there like Lorem Pixel , and especially PlaceKitten -- which unfortunately appears to have fallen out of maintenance (lots of broken images).

The big difference with placepattern is that it's intended for repeating background images for use in your CSS. (But of course there's nothing stopping you from using them as placeholders in your content img tags). The other important feature of this is that unlike most of the placeholder image sites, you will always get the same image for the requested size. (This "feature" of most placeholder image sites where you get a different random image for each page load really bothers me for some reason).

Hope others find it as cool and useful as I do!

Here's an example to look at with a bit of , with the same basic idea as andersevenrud's example above:

<!doctype html> <meta charset=utf-8> <title> arrays of images </title> <pre></pre> <script> var log = document.querySelector('pre');

var imageURLs = [ 'http://placekitten.com/g/90/91', 'http://placekitten.com/g/91/91', 'http://placekitten.com/g/95/91' ];

var images = [];

imageURLs.forEach(function(url){ var image = new Image(); image.src = url; images.push(image) })

log.innerHTML += JSON.stringify(imageURLs, null, 2); log.innerHTML += images;

for(var i=0; i < images.length; i++){ document.body.appendChild(images[i]); }

</script>

You'll notice that the two arrays imageURLs and images are serialized differently: one is an array of strings and the other an array of Image objects (represented by JSON.stringify as [object HTMLImageElement]). Those images are DOM nodes, so we can attach them to the body with appendChild and they should render.

Good extension, slightly confused a co-worker when he used my machine and was looking at BBC News during the EU elections.

Similarly, for Web developers who need placeholder images: PlaceKitten

http://placekitten.com

Placeholder images of kittens. For website and other design needs.

Need a 300x200 placeholder image?

http://placekitten.com/300/200

Also, http://baconipsum.com - a meat-based lorem ipsum placeholder text generator.

And here's a bookmarklet for placekittens.

<ul> <li>Drag and drop this highlighted bookmarklet <a href="javascript:(function(){var kittens=function(){for(var b=document.images,a=0;a<b.length;a++){var c=b[a].width,d=b[a].height;if(c&&d)b[a].src='http://placekitten.com/'+c+'/'+d}return false};kittens();})()" style="background-color: yellow; padding: 5px;">Kittens</a> into the bookmarks bar of Firefox</li> <li>Visit any other site (which has some pictures)</li> <li>Click on the kittens bookmarklet in your bookmarks bar</li> </ul>

What is Reddit's opinion of placekitten?
From 3.5 billion Reddit comments

➔ placekitten website

By popularity on Reddit, this Service is:

29 reviews of this app found across Reddit:

What is Reddit's opinion of placekitten? From 3.5 billion Reddit comments

➔ placekitten website

By popularity on Reddit, this Service is:

29 reviews of this app found across Reddit:

What is Reddit's opinion of placekitten?
From 3.5 billion Reddit comments