

Show HN: Meme generator for hipsters - henryl
http://www.pinwords.com/?s=hn

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

~~~
alagu
I see this fitting really well with Instagram.

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

~~~
zach
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!

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

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

~~~
henryl
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...](http://www.pinwords.com/start/032fb4c570bf11e18ae1e7074e371e4c)

~~~
ma2rten
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 ...".

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

------
zeantsoi
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?

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

~~~
aw3c2
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?

------
phwd
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://www.thesartorialist.com/photos/on-the-street-somewhere-in-
the-rive-gauche-paris/), <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.

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

~~~
phwd
That is indeed what I did, there is no source shown here
[http://www.pinwords.com/pins/e68d21f0720b11e1aaccfd54b73b70c...](http://www.pinwords.com/pins/e68d21f0720b11e1aaccfd54b73b70c4).
Try it [http://www.thesartorialist.com/photos/on-the-street-
somewher...](http://www.thesartorialist.com/photos/on-the-street-somewhere-in-
the-rive-gauche-paris/)

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

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

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

------
mhd
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…

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

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

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

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

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

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

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

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

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

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

~~~
qubital
I'm using Firefox 11 on Linux x86_64.

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

> curl <http://www.reddit.com>

------
Aaronontheweb
This looks beautiful - congrats!

How did you like working with Fabric.js?

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

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

------
chrishaum
This is going to be huge.

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

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

~~~
henryl
[http://stackoverflow.com/questions/934012/get-image-data-
in-...](http://stackoverflow.com/questions/934012/get-image-data-in-
javascript)

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>

------
endlessvoid94
This is a great idea. Congrats on launching.

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

~~~
henryl
Definitely working on that. This is my MVP.

------
blhack
Nice domain, too! Good luck.

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

------
vinix88x
nice!

