10 ms·

Show HN: I make my family postcards every year. Here's this year's.

109 points by flixic 13y ago

ozh 13y ago
Pretty fun :) It's after clicking on "Gallery" that I understood you could draw on the postcard, maybe a hint on the landing page would be nice edit: oh, I get it. On my FF, the "family postcard draw it" thingie flashes too fast. edit: also, line breaks are not saved.
charlesgarson 13y ago
Isn't this a family Christmas card, rather than a postcard? Isn't a postcard something you send back from a vacation?
- jinushaun 13y ago
  No, a postcard is a very specific type of mail, which can have any image you desire on the other side (vacation, Christmas, save the date, etc). The key characteristics of a postcard is that you don't put them in an envelope and you can send them using cheaper postcard stamps instead of more expensive standard stamps.
eugmill 13y ago
Very nice. You should either open-source it or do a write up on how you made it. As a newbie to web development, I'd love to read it.
- flixic 13y ago
  It's open source! Use, remix, study and criticise! https://bitbucket.org/lekevicius/christmas-2013/ https://bitbucket.org/lekevicius/christmas-2013/
ryanwatkins 13y ago
Doesn't work in Chrome on a tablet. Start drawing zoomed to some a flipped view of the backside and there is no space bar to tap without a text field. Hacks for desktop only is understandable but increasingly a niche area to target first.
- flixic 13y ago
  "to target" and "first" (: Well, it's a hack - for pretty much one day, mostly for our family friends. If something doesn't work, really, I would have no problem saying "Oh, sorry, just use Chrome on desktop. Merry Christmas!" Really, tablets don't matter much here (:
frankdenbow 13y ago
beautiful work! would love a breakdown on how you built this (I made a postcard app a few years back picsicle.com)
- flixic 13y ago
  You can check the source: https://bitbucket.org/lekevicius/christmas-2013 https://bitbucket.org/lekevicius/christmas-2013 Basically, it's just a Rails app. No front-end framework, just jQuery. Canvas is converted to base64, sent to server, server uploads to S3, user gets URL. Very simply, one day hack.
gregschlom 13y ago
It's interesting how a simple symmetry instantly transforms what would otherwise be a bunch of random ugly lines into something beautiful. Kaleidoscopic IFS fractals are also based on this concept. (8 axis symmetry + some simple transformations), and look at the result: http://www.youtube.com/watch?v=renxaQZfsdk http://www.youtube.com/watch?v=renxaQZfsdk
- judk 13y ago
  Yes, we see beauty in symmetry, so any junk becomes beautiful when arrayed in a pattern, and the junk creator can feel proud of creating a work of art, when in fact the aesthetic is mostly provided by the symmetry engine.
- SeanLuke 13y ago
  See also MacPaint->Goodies->Brush Mirrors
tannerc 13y ago
This is excellent. Extremely simple and fairly intuitive, I wish I had heard about it days sooner. It's somewhat surprising to continuously encounter such (seemingly) simple projects/proof-of-concepts like this that fulfill a need many of us didn't realize we had. If you haven't yet, consider writing about how you came to the idea for this particularly iteration and the process of creating it. I know I'd enjoy reading something like that.
- flixic 13y ago
  Thanks! I do this every year. Last year, I experimented with Meteor.js and made a Christmas forest: http://kaledos.lekevicius.lt http://kaledos.lekevicius.lt (sorry, in Lithuanian). Made that in about 10 hours - idea, design, development. It's a fun thing. This year I did the same. You couldn't have heard about it days sooner, because it did not exist yesterday, just yesterday I wrote "rails new christmas_2013". And I have no intention of maintaining it: next year it will be another thing made in a day (:
  - lucaspiller 13y ago
    Very nice idea. Linksmų šventų kalėdų!
  - deleted 13y ago
    [deleted]
gorhill 13y ago
Very nice.
kevining 13y ago
Nice site! It seems like the initial instructions don't show up in Firefox though. The drawing still works.
- 51Cards 13y ago
  Same here, in Firefox the instructions disappeared on load. Had to experiment to see what it did. Cool otherwise.
robodale 13y ago
Hello, this is dog.
- yincrash 13y ago
  what is with all the dog ones?
  - THE_DOG 13y ago
    YES THIS IS A DOG ATTACK
  - markHH 13y ago
    This is how to upload custom images to the gallery: Using Google Chrome Inspector, you can find out the line that is triggered in the Javascript code when the "SAVE" button is pressed (inspect the "SAVE" button element, and it will tell you what part of the code is executed when it's clicked). By looking at the code, you see that what happens is: the previous HTML5 Canvas where you draw the snowflake is rendered into JPEG and encoded in base64 (.toDataURL("image/jpeg")), then the data is appended to the <form> element inside the "value" attribute of an <input> tag. Then, the form is submitted via POST. So if you set a DOM Breakpoint (using Chrome's Inspector) to watch for subtree modifications of the <form>, you will catch it when the <input> tag is appended. Then, you go take your own custom .jpeg, encode it into base64 (for example here: http://base64.wutils.com/encoding-online/image-to-base64/ http://base64.wutils.com/encoding-online/image-to-base64/), and then paste your custom image data inside the the "value" attribute. Then you resume the script, and the server will receive your custom image data, instead of the original one.
TallboyOne 13y ago
The gallery has my chuckling really hard
- amcnett 13y ago
  My pre-click expectations were fully met.
  - aestra 13y ago
    Glad I wasn't the only one with that idea...
judk 13y ago
It works on mobile, but please add an on page button to clear card, since I don't have a space bar.
deleted 13y ago
[deleted]
markHH 13y ago
How to upload custom images to the gallery: Using Google Chrome Inspector, you can find out the line that is triggered in the Javascript code when the "SAVE" button is pressed (inspect the "SAVE" button element, and it will tell you what part of the code is executed when it's clicked). By looking at the code, you see that what happens is: the previous HTML5 Canvas where you draw the snowflake is rendered into JPEG and encoded in base64 (.toDataURL("image/jpeg")), then the data is appended to the <form> element inside the "value" attribute of an <input> tag. Then, the form is submitted via POST. So if you set a DOM Breakpoint (using Chrome's Inspector) to watch for subtree modifications of the <form>, you will catch it when the <input> tag is appended. Then, you go take your own custom .jpeg, encode it into base64 (for example here: http://base64.wutils.com/encoding-online/image-to-base64/ http://base64.wutils.com/encoding-online/image-to-base64/), and then paste your custom image data inside the the "value" attribute. Then you resume the script, and the server will receive your custom image data, instead of the original one.
aestra 13y ago
This reminds me so much of a toy I had when I was a kid, with a catchy commercial... http://en.wikipedia.org/wiki/Spirograph http://en.wikipedia.org/wiki/Spirograph commercial http://www.youtube.com/watch?v=VoSECiRl-pI&t=8m49s http://www.youtube.com/watch?v=VoSECiRl-pI&t=8m49s
JoeAltmaier 13y ago
Drops mouse=up event sometimes...IE 11.0.9600

109 points by flixic 13y ago

ozh 13y ago

Pretty fun :) It's after clicking on "Gallery" that I understood you could draw on the postcard, maybe a hint on the landing page would be nice edit: oh, I get it. On my FF, the "family postcard draw it" thingie flashes too fast. edit: also, line breaks are not saved.

charlesgarson 13y ago

Isn't this a family Christmas card, rather than a postcard? Isn't a postcard something you send back from a vacation?

jinushaun 13y ago
No, a postcard is a very specific type of mail, which can have any image you desire on the other side (vacation, Christmas, save the date, etc). The key characteristics of a postcard is that you don't put them in an envelope and you can send them using cheaper postcard stamps instead of more expensive standard stamps.

eugmill 13y ago

Very nice. You should either open-source it or do a write up on how you made it. As a newbie to web development, I'd love to read it.

flixic 13y ago
It's open source! Use, remix, study and criticise! https://bitbucket.org/lekevicius/christmas-2013/ https://bitbucket.org/lekevicius/christmas-2013/

ryanwatkins 13y ago

Doesn't work in Chrome on a tablet. Start drawing zoomed to some a flipped view of the backside and there is no space bar to tap without a text field. Hacks for desktop only is understandable but increasingly a niche area to target first.

flixic 13y ago
"to target" and "first" (: Well, it's a hack - for pretty much one day, mostly for our family friends. If something doesn't work, really, I would have no problem saying "Oh, sorry, just use Chrome on desktop. Merry Christmas!" Really, tablets don't matter much here (:

frankdenbow 13y ago

beautiful work! would love a breakdown on how you built this (I made a postcard app a few years back picsicle.com)

flixic 13y ago
You can check the source: https://bitbucket.org/lekevicius/christmas-2013 https://bitbucket.org/lekevicius/christmas-2013 Basically, it's just a Rails app. No front-end framework, just jQuery. Canvas is converted to base64, sent to server, server uploads to S3, user gets URL. Very simply, one day hack.

gregschlom 13y ago

It's interesting how a simple symmetry instantly transforms what would otherwise be a bunch of random ugly lines into something beautiful. Kaleidoscopic IFS fractals are also based on this concept. (8 axis symmetry + some simple transformations), and look at the result: http://www.youtube.com/watch?v=renxaQZfsdk http://www.youtube.com/watch?v=renxaQZfsdk

judk 13y ago
Yes, we see beauty in symmetry, so any junk becomes beautiful when arrayed in a pattern, and the junk creator can feel proud of creating a work of art, when in fact the aesthetic is mostly provided by the symmetry engine.
SeanLuke 13y ago
See also MacPaint->Goodies->Brush Mirrors

tannerc 13y ago

This is excellent. Extremely simple and fairly intuitive, I wish I had heard about it days sooner. It's somewhat surprising to continuously encounter such (seemingly) simple projects/proof-of-concepts like this that fulfill a need many of us didn't realize we had. If you haven't yet, consider writing about how you came to the idea for this particularly iteration and the process of creating it. I know I'd enjoy reading something like that.

flixic 13y ago
Thanks! I do this every year. Last year, I experimented with Meteor.js and made a Christmas forest: http://kaledos.lekevicius.lt http://kaledos.lekevicius.lt (sorry, in Lithuanian). Made that in about 10 hours - idea, design, development. It's a fun thing. This year I did the same. You couldn't have heard about it days sooner, because it did not exist yesterday, just yesterday I wrote "rails new christmas_2013". And I have no intention of maintaining it: next year it will be another thing made in a day (:
- lucaspiller 13y ago
  Very nice idea. Linksmų šventų kalėdų!
- deleted 13y ago
  [deleted]

gorhill 13y ago

Very nice.

kevining 13y ago

Nice site! It seems like the initial instructions don't show up in Firefox though. The drawing still works.

51Cards 13y ago
Same here, in Firefox the instructions disappeared on load. Had to experiment to see what it did. Cool otherwise.

robodale 13y ago

Hello, this is dog.

yincrash 13y ago
what is with all the dog ones?
- THE_DOG 13y ago
  YES THIS IS A DOG ATTACK
- markHH 13y ago
  This is how to upload custom images to the gallery: Using Google Chrome Inspector, you can find out the line that is triggered in the Javascript code when the "SAVE" button is pressed (inspect the "SAVE" button element, and it will tell you what part of the code is executed when it's clicked). By looking at the code, you see that what happens is: the previous HTML5 Canvas where you draw the snowflake is rendered into JPEG and encoded in base64 (.toDataURL("image/jpeg")), then the data is appended to the <form> element inside the "value" attribute of an <input> tag. Then, the form is submitted via POST. So if you set a DOM Breakpoint (using Chrome's Inspector) to watch for subtree modifications of the <form>, you will catch it when the <input> tag is appended. Then, you go take your own custom .jpeg, encode it into base64 (for example here: http://base64.wutils.com/encoding-online/image-to-base64/ http://base64.wutils.com/encoding-online/image-to-base64/), and then paste your custom image data inside the the "value" attribute. Then you resume the script, and the server will receive your custom image data, instead of the original one.

TallboyOne 13y ago

The gallery has my chuckling really hard

amcnett 13y ago
My pre-click expectations were fully met.
- aestra 13y ago
  Glad I wasn't the only one with that idea...

judk 13y ago

It works on mobile, but please add an on page button to clear card, since I don't have a space bar.

deleted 13y ago

[deleted]

markHH 13y ago

How to upload custom images to the gallery: Using Google Chrome Inspector, you can find out the line that is triggered in the Javascript code when the "SAVE" button is pressed (inspect the "SAVE" button element, and it will tell you what part of the code is executed when it's clicked). By looking at the code, you see that what happens is: the previous HTML5 Canvas where you draw the snowflake is rendered into JPEG and encoded in base64 (.toDataURL("image/jpeg")), then the data is appended to the <form> element inside the "value" attribute of an <input> tag. Then, the form is submitted via POST. So if you set a DOM Breakpoint (using Chrome's Inspector) to watch for subtree modifications of the <form>, you will catch it when the <input> tag is appended. Then, you go take your own custom .jpeg, encode it into base64 (for example here: http://base64.wutils.com/encoding-online/image-to-base64/ http://base64.wutils.com/encoding-online/image-to-base64/), and then paste your custom image data inside the the "value" attribute. Then you resume the script, and the server will receive your custom image data, instead of the original one.

aestra 13y ago

This reminds me so much of a toy I had when I was a kid, with a catchy commercial... http://en.wikipedia.org/wiki/Spirograph http://en.wikipedia.org/wiki/Spirograph commercial http://www.youtube.com/watch?v=VoSECiRl-pI&t=8m49s http://www.youtube.com/watch?v=VoSECiRl-pI&t=8m49s

JoeAltmaier 13y ago

Drops mouse=up event sometimes...IE 11.0.9600