It’s Christmas Eve!
I had plans for most of the day so I wanted to do a more simple project. Well, I think today’s website turned into one of the hardest so far! The plan was to let the user enter a message and display the message on a “card” with a set image. I was able to get the message input and display set up without trouble and then I decided to let the user upload their own image. This is when I spent a long time reading about uploading images to the server and got very confused. Ajax? Image resizing functions? Multiple image selections? Previews?
1.FileReader(), reader.onload, attr()
Thank goodness for sites like stack overflow and the goodness of programmers in sharing their code! I used FileReader(), reader.onload and attr() to show a preview of the user’s image on the page. Oh that moment when the image showed for the first time.. glorious!
With programming, it seems even when I expect things are in order… and the site works, I’m still somewhat surprised!
3. flat UI colors
One of the problems I’ve had since starting my daily website is the styles! I don’t have any experience in design and often get overly zealous with using contrasting colours. At one point my sister walked by and said “eww that’s gross” (I think the background was mint with colours of fuchsia, blue, and green on the page…). I spent a lot of time trying to tone everything down. This page of flat UI colors was very useful in choosing colors to use: http://flatuicolors.com/. But of course, you can see how I can get overly excited with some of the fun colors on there.
I wanted the page to look flat but had trouble getting the “choose file” button to fit with the rest of the page. In the end I left it the way it was. I think the end product looks okay, although not as festive as you’d think it would be as something built on Christmas Eve.
I think today’s website was a little too difficult for me at this point. There are a lot of concepts I barely understood even though I was able to build this. There’s a lot to learn!
Make your own card and send it to a friend!