Put This Cake in your Face

Wishes App

I think one of the most challenging aspects for new students in C.S.  is the massive amount of tools, languages, and libraries that are accessible at the click of a button.  It is overwhelming and confusing and distracting.  When I started making the functional part of my application in JavaScript, I kept asking myself (and others), "...but why am I doing this in JavaScript?  I know I want my content to be dynamic, but why can't I just use PHP?"  People kept saying, "JS is for client side stuff and PHP is server side".  I'm thinking, yeah I effing know that, but how do I know what side I need to be on!?    

I actually took a semester of PHP last year and when it was over, I never wanted to use it again.  Forms, forms, forms.. all these stupid text fields and buttons and checking variables and sanitizing input - it was so dreadfully boring I just wanted to claw my eyes out.  So I was surprised when I caught myself thinking that PHP would be easier to use than JavaScript.  I assumed it was because I had only been using JavaScript for 2 weeks and it would just take some time to figure it out.  So, I spent another week trying to figure it out.  At the end of the week, I was so frustrated and felt like such an idiot, that I decided to take a week off for my birthday and not think about it at all.  In hindsight, a week might have been a little excessive... but I came back and rewrote everything in PHP.  In a day. Everything works perfectly on mobile too, which is a big relief! 

If you look at the app, you will see there are several more pages than I had before.  I think it gives a better feel for where I am going with this application. (Hopefully it is "fleshed out" enough for my professor...)  It appears as if I have done more work on it than I had before, but in reality, I am pretty much at the same point I was.  First of all, the way I have the pages mocked up, is not how I will actually be creating the cards.  The only way I found to convert a <div> into an image, is by using  html2canvas.js. (Which, by the way, is amazing and works perfectly and the guy who created it is super helpful)  But, for my purposes, it will be more efficient to just draw the cards directly on the canvas and skip the conversion.  Especially since I figured out I can use non-system fonts in the canvas!  I have a basic canvas drawn card working in the application right now.  This week, I will get my canvas saved on the server and decoded back out as an image that the user can email, save, share, or add to their user page.  Once I get that function working, I can concentrate on setting up the card design database.... which is going to be SO fun!!!

How I felt today:  

  

Your App Sucks!

Last week, I was dreading doing the reviews of my classmates' websites.  I knew it was going to take forever... and it did.  I spend a lot of time researching random shit on the internet, so while I was watching the presentations, I kept thinking, oh, they should read that article I found about ____.  Since I HAD to do the reviews, (What? I have to give my opinion on something?! Fine, twist my arm.) I figured I might as well make them as helpful as possible by including links to resources I felt were applicable.  I was also one of the only people in the class that put my name on all of the reviews I did!  :) I am not talented at writing for copy, so I end up typing exactly like I talk.  I figured it would be pretty obvious which reviews I wrote.  If you've ever gotten an email from me, you can probably read it and picture my facial expressions and hand gestures as you read it.    

I'm glad our professor allowed anonymous reviews though because I feel like it helped some people to be more honest.  A lot of the reviews I got made me laugh.  This one might have been my favorite:

What is it with women and greeting cards? I’ve never personally seen a guy who cares about them and almost every woman I know has to send one for every little thing. Maybe it’s sampling bias on my part, but this seems like a thing. At any rate this IS innovative, I can see something like this getting used a lot. The layout/design is very modern (apparently flat page styles are big these days, I guess they display well on mobile devices)

Overall, a lot of the guys did not get the purpose of my app.  I am confident that once I get done, the guys will all understand what I'm doing and will find a use for it.  At first I thought, eh - whatever - but it did occur to me, that I would have to figure out how to market this to males.  This comment gave me an idea of how to do that:

“Wishes” is a greeting card maker of sorts. I also see it as a meme generator. You type in a phrase or wish and click make card. This generates some randomized card with what you typed on it for you to send to a friend.

Exactly. Guys like Memes.  Taking the male/female use aspect into consideration, along with these next comments, I have a better idea of how I need to remake my landing page.

Maybe have a stream on the front page of the recent cards people made. So you can hear the cute things people say to each other and that would give you an idea of what you might want to say to someone. Or if you like the card someone generated you can just steal theirs. Im a lazy guy and that would be nice for us males to have… We can look romantic and still be driven by other goals.

If you are wanting to keep the card creation page clean, maybe consider a landing page with samples and information about how to use the cards. 

Here were some other comments that I found helpful and will be thinking about as I continue to work on the app:

Right now, the “make card” button only makes a card in one format at a time. It would be nice if the button would create multiple card options with one click. It would also be nice if users could select the card look before entering the text.  

The worst feature is probably the flat white background; while white goes with just about everything it lacks character.

Site has a slightly clunky feel to it – maybe it's the look needs to be more flashy or the speed of the plugin. I'm not sure.

Thank you everyone for taking the time to give me your thoughts.  I'm really motivated now to get this application up and running!

Javascript: Weeks 3&4

Here's my Webpage.....

Quiz: 18/20

We've spent the last two weeks working on site design and javascript. At this exact moment, I feel like I still have a long way to go in both areas.  However, I finally feel like I am at a good starting point for my website.

Last week in class, I was mildly distressed about the future of my website. I had jumped in the week before and started writing the javascript to create styled elements on my page.  The problem was, I wasn't able to make the elements display correctly in CSS alone.... so obviously I was not going to be able to tell Javascript how to do it either.  I got a little panicky when I realized I needed to take a step back and spend more time on Bootstrap CSS/Components the week before our exam.  The most basic functional requirement of my website is to take user input from a text box and display it with a custom CSS style.... the CSS is actually part of my application.  It's not just something I'm using to format my page or make it look pretty - it has to work.  So I studied all weekend and I am super excited to say, I got it working!!

I will rundown the basic mockup and try to explain what I have done and where I am going with this.

Home Page

User can type text in the message box and a "card" will be produced and displayed.

Make Card

I used javascript to get the information from the textbox and create a new element that has a style sheet applied to the text.  Right now, I just hardcoded the style sheets and used the random function in javascript to simulate what the database will be handling later.  There are buttons below the card that allows user to download the image to their computer (or camera roll on mobile), send the image to a friend, or trash the image. Social media sharing buttons will be added too.  None of these buttons work right now because I have no clue how to convert a div into an image... Which is my next task to panic about.

                     

Log In Page

Users can start accounts to store their "cards".  Other people with their page link will be able to post messages on that users' page.  The user will be able to pick a theme (or not) when they open an account, which will correspond to a certain set of style sheets that will be used to make their cards.

Display Page    

This is how I want the user account pages to look.  I want the cards displayed as a single page collage.  Kind of like a Tumblr blog, but with a pretty message/quote creator integrated, AND a public (with permission) submission option.

Functional Requirements to Address:

• how to convert the div to a jpeg 
• setting up a database for user accounts to store jpegs
• use the database to store variables for the style sheets to create cards
• study the collage plus code to see how I can use it to make my grid pages

Non Functional:

• more in depth formatting for text layouts 
• more formatting and planning for mobile screens
• error handling - can't make a card if text box is empty

Yay! for Frameworks: Week 2

I started the landing page for my Wishes Web Application using the Bootstrap Framework.  On a side note, let me just say, I love that copying someone else's code is referred to as "using a Framework".  In addition to the framework files, Bootstrap also provides some basic sample templates.  I choose the Carousel Template for my landing page.   It is currently in an unfinished state, because I was having trouble deciding how much content this landing page actually needs.  At this very second, I think the landing page is done and I need to cut off the bottom, unfinished content and move on to the application layout and design.  We are starting Javascript this week and I would like to have my application design completed so I can work on the code in class.

Color Scheme:
In my head, I see the end result of this application as a single web page, full of various sized pictures, formatted into a collage layout, with the text of the user messages displayed in various fonts and sizes. Eventually, it might be cool to have he user upload their own pictures, but for now I just want to use generic, simple background photographs.  I originally imagined this page to be in full color... but after working on my landing page, I think I am going to start off using only black and white backgrounds photos and allow the user to pick their text color only.  And possibly restrict the color scheme for each account.... for example, if someone starts a baby wish page for a friend, they would pick the color scheme when they create the account.  That way it is guaranteed their page will look pretty.  I can imagine Aunt Brenda choosing some off color and messing the whole page up.

For anyone wanting some design inspiration for their site, Specky Boy always has posts with examples of well designed web sites.