Mashy Web Mashups

The CS249 adventures and struggles with front-end development as a fail whale. #closethattag

[mashy-potatoes]

This class wasn't a frontend class; you learned to become full stack developers.

Eni on CS249

[mashy-potatoes]

Web applications aren't about building some HTML and some CSS anymore.

Eni, on how web pages have become web applications and its reliance on non-static data

[mashupmarungo-blog]

Grabbing an input Value

For some reason my code isn’t successfully capturing input values from my form and I’m wondering if someone can see a simple mistake I’ve made! Here is the HTML:

And here is my Javascript:

My error is “Uncaught TypeError: Cannot read property ‘value’ of null” because my ‘first’ and ‘second’ variables are null.

Thanks!

[mashy-potatoes]

You haven’t assigned an ID to your input fields, just names. And then in the JS you are trying to use the document.getElementById() method, which doesn’t work because those input fields don’t have IDs.

I’d suggest you do the following:

<input id=‘first’ name=‘Wellesley College’ type=‘text’...>

Having the ID and the name be different is helpful to me, because then later I know which element specifically I am referring to.

Hope I helped!

[mashy-potatoes]

UPDATE: This post has been expanded upon and converted into an eBook. Good API design is hard! An API represents a contract between you and those who Consume your data. Breaking this contract will result in many angry emails, and a slew of sad users with mobile apps which no longer work. Documentation is half Read More →

The API I’m using for my IP is built on REST design principles. In my curiosity, I looked it up. A good insight to see how browsers and servers communicate.

[mashupmarungo-blog]

Trumping <a> tags with preventDefault()

For my IP, I am trying to build my own functionality for links. Rather than clicking on a link and having a new page actually show up with the associated URL, I want to call my own Meteor function. Eni and I got stuck because we couldn’t figure out how to even make our ‘click a’ template event to be entered. Turns out there is an easy fix! If you ever want a default event associated with a particular HTML tag to be disabled, just put an ‘event’ argument in your function and then call event.preventDefault(). Yay!

[mashy-potatoes]

Does anyone know how to use JavaScript Date objects? For some reason, both November and December are represented as 1…

[smiley-scripts-blog]

I think that 1 is just PrinterCollection telling you it has updated 1 document.

[mashy-potatoes]

Oops, I thought that was my print statement of console.log('original day: ' + day + '\t original month:' + month)... And even if it were, it obviously is not. My bad, and thank you!

An alternative to combating Date objects being annoying: Moment.js! I had totally forgotten until Eni reminded me.

[mashy-potatoes]

Does anyone know how to use JavaScript Date objects? For some reason, both November and December are represented as 1...

[smiley-scripts-blog]

Hey y’all!

Here is a screencast I made about this great project management tool called pivotal tracker. 

Hope you find it useful!

[mashy-potatoes]

This is awesome! I can see this being useful for normal work management too.

[mashy-potatoes]

What app did you use to do this screencast?

[mashy-potatoes]

Two is a crowd to me

... and so presenting to a class is a little terrifying.

What while presenting is scary, this one wasn’t as bad as I thought. Probably because Wellesley students are super friendly and actually listen to presentations, and also because somehow giving a technical presentation is more relaxing than a normal presentation.

Some suggestions that I liked:

Grey as a colour indicator for No access. Originally we had thought to reuse the red Out-of-order or another red Closed button, but grey is much better.

Mobile app. We had thought about this when we first got the idea, but I had forgotten about it! And it turns out Meteor has a mobile aspect to it to make it easier to convert.

Develop this as an independent project. Oh ho, I didn’t even about this. Let’s get through the end of this semester first...

[mashy-potatoes]

The Art of Public Speaking

Today my partner and I had our session with our PLTC tutor Sravanti. It was a pretty good run through; we were able to present most of our presentation, and really all that is left is to finish the project. Here’s some things that we did well:

Posture

Volume and eye contact

Use of images

We know our audience (all of the memes!

Some things we need to work on:

Keep things (semi-)professional, which is a little different from knowing your audience

Capitalise bullet points

Talk about all the images on your powerpoint

Don’t look up when you’re thinking - look at the audience. Fun fact: people are lying when they keep eye contact with you all the time. This is because when you’re remembering things you naturally look upwards, whereas people who are lying try hard to make it not obvious they’re not lying, so they look at you for too long. So this piece of public speaking advice is actually counterintuitive...

Make our presentation a little more technical

Something that was specific to me was that I tend to talk as if there are parentheses, and when the parens are happening I tend to talk too quickly and too quietly. This was an interesting point because I have found that I like to use parens in essays, even if they aren’t really ‘formal’ writing.

I’m actually kinda nervous for tomorrow!

[smiley-scripts-blog]

Hey y’all!

Here is a screencast I made about this great project management tool called pivotal tracker. 

Hope you find it useful!

[mashy-potatoes]

This is awesome! I can see this being useful for normal work management too.

[mashy-potatoes]

Our paper prototype, as of last week. Having a paper prototype was great to allow users to interact with our vision of an app, but I think it’s more appropriate for mobile interfaces to imitate tapping with your finger. (I got the idea for a paper prototype from CS220, where we used paper prototypes for a mobile web website.) Post-Its are also awesome; they imitated pop-up boxes, and are quick changes. The numbered alert boxes, for example, we presented in different orders to see which our users liked the most.

TL;DR: Post-Its are the best.

[mashy-potatoes]

Pros, cons and comments of Meteor

Pros

Meteor makes it so easy to set up an application. You can get it done in seconds without having to learn about backend at all. (Especially since I haven’t taken CS304). Frontend languages doing the backend all for you? It’s like magic.

The integration of Spacebars and templates. This organises your code so well because you’re forced to do so, and really makes me think about how all the templates, events and helper functions are interacting with each other.

The fact that there are separate definitions of helpers and events. In Java there is no distinction except when you see //helper function, and again this helps organise your code.

Cons

This may be more of a weakness on my part, but I get the logic, syntax and rules mixed up with the language I’m most familiar with: Java. One example was today when I tried to user innerhtml to insert HTML code into a div, when in fact Meteor doesn’t let you do that. Another is when I tried to use a loop to insert options in my form instead of another template. (When in doubt [in Java], USE LOOPS!) So I guess the cons to take away from this that I use Java as too much of a basis, and a con of Meteor is that the boundary between it and normal HTML/CSS/JavaScript is blurry.

Comments

Having all the templates in one HTML file reminds me of jQuery Mobile, where it has all the pages of a mobile site on one page.

[mashy-potatoes]

Prototype Feedback

Jamie, Priscilla and Ella reviewed paper prototypes of our app. I found this to be very similar to CS220 Human-Computer Interaction’s user testing.

There is no need for an undo button after submitting a printer’s status; the user can just update it again with the current information.

The order of the pop up messages appear to give a coherent message.

Are you sure the printer is ____?

Have you informed a student worker?

Would you like to send an automated email to [email protected]?

Thank you, your update has been received

Minimise pop up messages. Pop up messages can be annoying, but I thought (as an LTS worker) that it was important to have certain aspects - such as asking student workers for help before sending an email to Help Desk.

They liked the :) and :( faces indicating the status of the printer. And this coordinating with the opening/closing times. A more visual way to present it!

A “I don’t know” option

The app would be better without logins (for quick updating and checking)

It’s not necessary to have an alternative printer suggestion - some people are more willing to walk farther to print, depending on their circumstances.

Current time in the corner isn’t necessary, since the app updates itself.

Hover over a printer option with a message saying “Click me to update”

One MongoDC collection for all the printers.

This was a great session with lots of feedback. I enjoyed seeing how enthusiastic they were about the idea of our app, further demonstrating that this is a problem on campus.

[aversiontosocialmedia-blog]

Conditional visibility of certain features in Meteor [GP]

In AM6, we addressed conditional visibility within one template when dealing with login, i.e. if the user was logged in, you could see some stuff, otherwise it wasn’t visible. 

Is there a way to do this using Meteor if/else for multiple templates? That is, when a user is logged in, we want them to be able to see one whole template, whereas if they’re not logged in, we want them to see another different template (vs. different aspects of the same template, like in AM6). 

[mashy-potatoes]

I’m assuming this wouldn’t be possible, because of the syntax in the JS file:

Template.templateName.helpers Template.templateName.events etc.

This shows that the helpers and events are associated with that template, and I assume that they don’t ‘exist’ outside of that template. (Think of it like a local variable, if you will.)

[mashy-potatoes]

SCRATCH THAT I’ve given it more thought. I think you can!

<template name=“templateOne”>

    {{#if helperForTemplateOne}}

         {{> templateTwo}}

    {{else}}

         {{templateThree}}

    {{/if}}

</template>

I hope that helps!

[aversiontosocialmedia-blog]

Conditional visibility of certain features in Meteor [GP]

In AM6, we addressed conditional visibility within one template when dealing with login, i.e. if the user was logged in, you could see some stuff, otherwise it wasn’t visible. 

Is there a way to do this using Meteor if/else for multiple templates? That is, when a user is logged in, we want them to be able to see one whole template, whereas if they’re not logged in, we want them to see another different template (vs. different aspects of the same template, like in AM6). 

[mashy-potatoes]

I’m assuming this wouldn’t be possible, because of the syntax in the JS file:

Template.templateName.helpers Template.templateName.events etc.

This shows that the helpers and events are associated with that template, and I assume that they don’t ‘exist’ outside of that template. (Think of it like a local variable, if you will.)

[mashy-potatoes]

Why don’t you need ; for return statements in Meteor?

Just out of curiosity.

[mashy-potatoes]

As answered by squigglybracketsgirl:

Haha, I had this same exact question earlier this semester! It turns out semi-colons for Javascript are optional (so this is not just a Meteor thing). Here’s an explanation: codecademy.com/blog/78…

Thank you!