Show HN: Meme generator for hipsters | Hacker News Reader

Show HN: Meme generator for hipsters

pinwords.com

146 pointshenryl46 comments

Spent three weeks on this. Uses HTML5 canvas, fabric.js and GAE. Learned a lot of interesting tech along the way. Any feedback?

I see this fitting really well with Instagram.

How do you see this hooking in with it? I don't use Instagram.

On Instagram, "picture talking" is very common since the service is completely geared towards pictures but people still want to use words from time to time.

So to express a thought or thank friends, Instagram users have to find a way to put words onto a picture. The most common is to write a note in Notes, take a screenshot and upload that. But on the stylish communication medium that Instagram is, it can look a little gauche. So people will often upload pictures of handwritten notes, etc. which have some class but not everyone wants to go to that much effort.

The easiest thing is to offer a 612x612 template and the ability to show a PNG that users could then save to their Camera Roll and then upload to Instagram. If you can connect with the user's Instagram account and let them upload from Instagram like Chute does, even better!

Disclaimer: been totally cranking on my own words-on-pictures app for the last few weeks — congrats!

Exactly what I had in mind. Thanks for putting it in words.

I agree, sort of.

My wife has at least 3 different apps that let her drop text on images before posting to Instagram. But everyone uses Instagram on their phone, so a web-app doesn't really work here. And the Instagram API is read only at the moment.

Can't some code screen scrape instagram and then get the picture data that way? I screen scrape using firefox using zc.testbrowser libraries but there's libraries where you don't need a browser. hacking that together in curl or even mechanize would be insane w/ php or python because its so much javascript.

I'm sure instagram wouldn't want you logging in with somebodies account and it would come from your server ip unless you have the scripts use proxies to get the data. If you use fb to login you would run into roadblocking accounts plus asking for a fb pw is stuff that only apps like spotify can get away with.

Love it. I'm sure lots of people will like it too. Very polished. I like it that you provide dummy images so impatient people like me don't have to upload an image to test it out.

I should probably do a better job of highlighting that. If you click on one of the textures at the bottom, you can start one without uploading. Here's a direct link to the wood texture for example: http://www.pinwords.com/start/032fb4c570bf11e18ae1e7074e371e...

That part was clear to me immediately. All in all it was really easy to use.

What might be confusing from a UI point of view, is that the example images on the top right look like a banner you are supposed to click on to get to the main site (to me at least).

If you would have done eye-tracking on me when I was using this, I was first drawn to the face (people always look first at faces), then I went down to where it said "No images? Click on one of these.". That might be because the woman in the picture is sort of looking in this direction. After that I looked to the where the logo is "pinwords, instantly ...".

I had instinctively clicked on the images at the top before going to the textures. Might have been nice to catch these (ED: clicks) (or maybe even hover ?) and highlight them (ED: images at the bottom) in something like the "MacBook sleep light" style. Just the background of the block - glow from the current (dark) to white and back. Would make it even friendlier, I think.

It didn't work well when the texture was dark and the text was black.

Not a question about Pinwords (good job, BTW), but...

I noticed that this is a repost of a submission originally titled 'Show HN: My side project helps you add beautiful text on pinterest images '. That post garnered just five upvotes and no comments.

Clearly, you've garnered more attention with this post. What prompted you to try this particular verbiage instead? Do you think timing played a factor?

The title is everything apparently. The first post was also early in the morning. I have a bad habit of being impatient with these things.

This would be an interesting project: Finding a way to make the time of posting irrevelant. Probably impossible in today's super short span internet. But maybe with a different frontpage and "new page" sorting?

Could someone explain how the original content source is kept?

Seeing that you cannot link to a page but must hot-link to the image then I am failing to see how the source is kept.

For example, here is a regular pin for http://www.thesartorialist.com/photos/on-the-street-somewher..., http://pinterest.com/pin/189151253069642005/. The content is shown as coming from thesartorialist.com

Now trying with pinwords.com, I must upload the direct image (which makes sense, how else would it work to mark up the image) which results as http://pinterest.com/pin/189151253069642015/ The content is shown as coming from thesartorialist.com The content is shown as coming from pinwords.com. Though going into the original pin at pinwords there is no mention of thesartorialist.com in site.

I understand these are how previous bookmarklets have worked for other apps, yet I hate this so much. Not only does it make easier for users to mark up content they may or may not own, it makes it harder for Pinterest to remain mostly true about keeping content creators (the ones who actually produce the content) copyright concerns in mind.

You can upload by clicking the "web" button or using the bookmarklet. The source should be kept in the resulting page.

That is indeed what I did, there is no source shown here http://www.pinwords.com/pins/e68d21f0720b11e1aaccfd54b73b70c.... Try it http://www.thesartorialist.com/photos/on-the-street-somewher...

> The page at www.pinwords.com says: Not a valid image.

Which to me, means it's either not able to scan the page for images or only accepts direct links to images.

You're right. That's a bug! I'll fix that tonight. Thanks.

Do you have more examples than the ones in the page header?

Would be nice to quickly see what this outputs, i.e. browse what people are doing with it. Too lazy to test myself...

Spent a couple of embarrassing seconds clicking on the text on one of the sample windows until I noticed that I had to push the "Next" button to get to that stage…

I was definitely debating with myself on that particular behavior. On the one hand it lets you preview themes more easily, on the other, it adds more friction / confusion. I'll play around with a "click once" theme browser. Thanks for the feedback.

I had the exact same problem. Make it editable from the get-go.

Uploaded a small picture to test it (the first one I found, about 200x200), the text was so small so I didn't even understand I can re-size it. The words would fit on the image if every word or two goes on each line.

Just something for you to think about, maybe your future users run into this problem also.

After you choose a template and press the continue button. There should be a back button if you change your mind. I realize that you can go back clicking on the tip of the template on the top. Which is cool, but not the most intuitive thing in the world.

Overall looks very well polished, GJ and GL.

Is that bootstrap.js? Looks great! Barley looks like bootstrap, but after I worked with it on a project, I recognize some characteristic elements. How much work was it to make it look like this?

EDIT: Sorry for editing a question into my comment after you already answered. It's a bad habit.

Caught me. This is a side project (doing a real startup as my day job), but I basically put in 20-30 hours a week for the last 3 weeks working nights and weekends.

This is really nice. I've been working on a very similar project in fabric.js this past week (captioning a picture, dragging text around on it and posting to facebook and pinterest).

The live updating as you type is a really nice feature, one that I hadn't even considered yet.

Nice one. I would love to have such a tool to build presentations. Any suggestions?

Interesting but I had a few issues (in Firefox). Using the default text resulted in an image with no text and trying to go back and use a different text caused the Continue button to lock.

Thanks for the feedback. What version of Firefox were you using? It sounds like your browser was still trying to load the fonts.

I'm using Firefox 11 on Linux x86_64.

Meme generation you say? Well there just might be a simpler way...

> curl http://www.reddit.com

This looks beautiful - congrats!

How did you like working with Fabric.js?

It was the lightest weight canvas library I could find. Primarily used the interactive features of it. I had to write my own text extension because Fabric's (canvas's) is pretty primitive.

Make an API that would plug into Carrierwave and you will rule the world!

This is going to be huge.

Totally Tumblr, wait til that crowd get their keyboards on this!

Cool. How does it turn the HTML into an actual jpg image?

http://stackoverflow.com/questions/934012/get-image-data-in-...

An important caveat is if you have any images in the canvas, they should be hosted on the same domain or you have to resort to CORS workarounds http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

This is a great idea. Congrats on launching.

can use more templates .. and also how about showing memes generated by users ?

Definitely working on that. This is my MVP.

Nice domain, too! Good luck.

simple, yet so useful - look forward to more font themes!

nice!

Reply on news.ycombinator.com