CS249 Web Mashups

[squigglybracketsgirl-blog]

IP - What I’ve learned

MeteorJS is amazing: Learning how to create a meteor app has given me the tools to create really cool web apps! Everything else we’ve learned in this course are also super awesome, but MeteorJS is just one of those things that blows your mind. :) It’s crazy how easy it is to create a complicated web app with Meteor. I’m really excited to use meteor in the future, maybe for future hackathons or my own personal projects. 

It’s exciting when you create something you weren’t originally planning to: One of the things I love about programming is when you think up an idea, and then you begin building it, and you literally watch your baby come to life and grow in front of your eyes. It’s the most exciting thing to me about computer science, especially that moment when you finally finish a project, and you can’t believe that you actually created it. But, maybe my all-time favorite thing about programming projects is when you “accidentally” add something to your project that you weren’t planning to. I think the pure joy of creation and discovery makes all the grueling hours spent coding so worth it. :)

Why I struggle with d3: I think working with d3 again made me realize why I struggle so much with it (and maybe my classmates too). D3 is a declarative language, so it takes care of a lot of the “behind-the-scenes work,” which is nice, but it also makes everything so much more different to understand and visualize. D3 just seems like magic to me, and so it’s difficult to work with. Also, when I’m working with d3, I don’t feel like I’m actually doing anything. It feels similar to CSS, where you’re really only changing the positions and colors and sizes of elements on the screen, but you’re not programming anything that “does something.” Since I’m a perfectionist, I can get very picky with my CSS, so it takes a while to work on it sometimes (even though I understand how it works). I'm also picky with my d3 visualizations, but because I don’t understand it, it takes even longer (for example, I think I spent 2 entire hours just to get the width and height of my scatterplot to resize properly). I don’t know if I’ll ever be comfortable using d3, but I thought it was at least good to understand why exactly I’m afraid of d3. Maybe then I can learn how to build my confidence using d3.

[squigglybracketsgirl-blog]

IP - Challenges

I know this is not a required post, but I found this to be really helpful after reflecting about my team project challenges, so I’m doing it again for my IP. :)

Working with the google maps API: Okay, so the google maps meteor package that I used was actually really, really nice. Except, when I was using it, I didn’t look at the documentation very thoroughly so I had no idea how to work with the package. I struggled for a while and tried to consult google/stackoverflow for everything, and I wasted a lot of time. When I went back to revisit the meteor package instructions, the answer to all my problems was right there. :)

Not planning that much before jumping in: If I could go back in time, I think I’d spend more time on my in-depth descriptions docuent. I could’ve thought through a lot more of the specific implementations details and avoided a lot of messy code I was writing. Since I didn’t think too much about how I was planning on storing things, I ended up with a lot of different MongoDB collections because I was trying a whole bunch of different ideas at once. It took a lot of work to realize that I only needed 1 collection, and it took even more work to actually consolidate everything and reorganize all my code. 

D3: Haha, my biggest enemy, d3...It was really tough to work with, especially after giving up on AM5. But, I got through it! Mike Bostock’s examples were extremely helpful. I spent a lot of time tinkering and getting to know how d3 scatterplots work (I’d only worked with sunbursts and bar charts before). Even though I was able to get a scatterplot to show, I’m still not that confident in my d3 skills, but I’m happy to know that I’ve at least learned how to tinker with d3. 

[squigglybracketsgirl-blog]

IP Progress Timeline

I’m finally done with my IP, and I’m so happy with how it turned out! I realized that I haven’t been posting regular blog updates, but here’s a brief timeline of IP progress.

The Idea: “Claimed” my IP idea, planned on expanding my AM3 by adding the ability to store user scores. Didn’t really know what I was getting myself into at this point.

The Description: Wrote up my more in-depth description document, but I didn’t have the time to put much thought into the details. Eni’s feedback was useful and got me thinking more about more specific implementation details and challenges that I’d have to figure out.

The Demo: Presented a very basic demo of my app in class. I had really only worked on the HTML and CSS, and just a little with the google maps MeteorJS package. So, nothing was really working yet, but at least I had something. :)

Starting the actual work: Here comes the exciting part! I started adding a ton of code to my project, getting the basic functionality of the game down. Started working more with the google maps package, added user score, added randomly selected levels, worked with the marker icons added a bunch of bootstrap modals, calculated solve time, and added a recommendation system! It was awesome seeing my game grow and develop before my eyes! And thennnn...

The coolest thing happened!: And here’s my favorite part about my IP. I somehow accidentally added the coolest feature to my app! And, you can actually see it in my github commits log

Haha, the only reason that this commit message doesn’t have a bunch of exclamation points is that git commit -m “” doesn’t allow them. :) I was so excited that my users could take pictures of beautiful street view panoramas and save them in a “photo album” (Google Maps Street View Panoramas are gorgeousss). At this point, I was getting really excited about my game, but I had a bunch of exams I had to worry about, so I decided to take a break.

Began working again a week later: Picking back up where I left off was actually a lot harder than I had expected.I was grateful for the comments I had left a week earlier, but I’d lost all my momentum. Fortunately, I really only had 1 thing left to work on: the leaderboard + d3 visualization. I had deliberately saved this part for last, because I am least comfortable working with d3. I also had no idea what sort of visualization I wanted to create (not even what data I was planning on visualizing)...This was just a lack of planning on my part. I spent a good amount of time just trying to thinking of something to visualize, and then I decided to create a scatterplot.

The d3 scatterplot: One of the hardest things I’ve ever done in my life. :) I was grateful for the many examples on Mike Bostock’s website and other bl.ocks sites. I struggled with d3 for a long time, but got it to work in the end. I even have a neat little hover feature that I added myself!

Finally done, but not really: I was finally done, so I began testing my game. I should’ve known that I wouldn’t get it all right on the first try. I had to do a bit of debugging, and it seemed that every time I fixed a bug, I just created a new different one! But now, I’m actually done, and I’m pretty confident that my game is mostly bug free. :)

Actually done, yay: Now that I’m actually done, it blows my mind a little just to see how far I’ve come. I know we’ve already reflected for the course this semester, but I would’ve never imagined that I’d be able to write a complete app all by myself using a bunch of different complex technologies (MeteorJS, MongoDB, Bootstrap, D3JS, Google Maps). It’s scary to think that just over 4 months ago, putting text on a page was so exciting and magical to me. 

A thank you: It’s also soo incredibly cool to see what all my peer’s are creating! I am blown away every day by my classmates. Their ideas are amazing!! Just to name a few: Wikipedia Degrees of Separation, Gmail visualizer, NYTimes IP, Mood Playlist Builder, Korean Language Game, Bus Tracker, Trailer Push, What is Wellesley Watching, and more. My peers are so cool, and it’s exciting to see what everyone’s doing! I love how everyone in this class has been super supporting and encouraging and helpful, and it’s been a wild ride learning with everyone. Thank you everyone, and also a big thank you to Eni who has put in so much work to make this course possible. I’m so glad that I was able to take this course before it disappears forever. :)

[squigglybracketsgirl-blog]

Reflection 2: Achieving Course Goals

Wow, it’s crazy looking back to see how much I’ve learned this semester. I can honestly say that I have never learned so much in one semester before. I came into the class without knowing a single thing about HTML, CSS, or Javascript. I remember going to the first night of help room to see Katherine because I was completely lost. I didn’t understand anything, and the first week of this course was really rough, but I’m so glad that I didn’t give up back then. I actually ended up reading through 2 entire textbooks (Head First HTML & CSS and Head First Javascript), and I remember being so proud of myself for putting text on a page for the first time! Haha, I felt like a little kid playing with the background colors and the text colors. That was such a long time ago...Now I can do so much more. It blows my mind a little. :)

Coming into the class, I had no goals...which is a little weird. Maybe it’s because I had zero experience with web development or web mashups, and I didn’t even know what an API was, or what CSS or HTML were. Websites were like magic to me, and so I guess I just came to the class just hoping to learn more about everything and anything. I definitely achieved this goal and much more. 

I’ve achieved the course learning goals: I can write programs in Javascript that manipulate the DOM dynamically. I can work with external data (JSON or other formats). I understand how to use web APIs to retrieve data. I can use Meteor to create web applications and store data using MongoDB. I can critique my peers’ code. And, I can create visualizations using D3 (except, this is the particular learning goal that I am least confident about). It’s crazy. If you had mentioned any of these words to me at the beginning of the year (DOM, MongoDB, Javascript, JSON, API, meteor, D3), I would’ve just given you a blank stare. It’s awesome to see how much I’ve learned.

I’ve gained all of the transferable skills too! After having taken CS249, I can safely say that I’ve learned how to pick up new technologies quickly. I’ve learned that google and stackoverflow are my 2 best friends. I’ve learned that sometimes it’s actually more exciting when you figure something out and discover it on your own. Also, I’ve definitely learned to be persistent in the face of challenges. All of the AMs were incredibly challenging, but I got through them all, and I think my perseverance has tripled because of this course. At times, I would’ve liked to give up, but working with my peers and friends really helped me keep pushing, which brings me to my next transferable skill: collaborating with peers in solving complex problems. In CS230, peer programming was mandatory, but sometimes it felt more of a hassle than a help (just with trying to schedule a time to meet up, etc). But, I’ve truly learned the value of working with peers. It just makes everything so much fun. Working on the team project with my 2 partners was amazing! I want to work on more team projects with them in the future!

Hmm, skills I’ve strengthened and will help me in other situations? Well, there are a ton. I’ve mentioned a lot of them already: perseverance, persistence, picking up technologies quickly, learning the value of collaboration. But, probably the biggest thing I’ve learned from taking this course was that I can do so much more than I think I can. A few months ago I would’ve never imagined that I could incorporate meteor and mongoDB and an external API and D3 all in one project! And now I’m doing just that! So, I learned that you shouldn’t limit yourself only to whatever you can imagine at the current moment. Be ambitious and dream big. :)

If I were to take this course again, I would have read the Head First textbooks during winter break. It was a little stressful trying to learn how to put text on a page at the same time that AM1 was due, haha. I had to turn in an assignment that involved HTML and CSS and Javascript, and I barely knew how to put words on a page! I felt soo very far behind, and so I crammed in over a 1000 pages of reading in that first week of classes to try to catch up. In the end, I did catch up, but if I could go back in time, I would definitely read at least half of the Head First HTML TB before the first day of class. I also would’ve paced myself a little better. Since I went all out the first half of the course, I was starting to feel really burnt out after AM4 (especially when we got to AM5, which I still haven’t done and probably won’t end up doing). I was only able to keep pushing because I began working with a friend. So, if I could go back in time and do it again, I’d pace myself a little better so I didn’t crash as hard when we got to D3, which I feel is the most confusing technology we’ve worked with all semester.

I know that this course won’t be offered again, but if it is, I wouldn’t change many things. If I had to suggest one thing though, it would be related to the organization of the course website. At times, it was hard to follow AM deadlines and milestone deadlines and reflection deadlines and all the other deadlines all at once, since they deadlines were posted on separate pages scattered throughout the course website. This was especially confusing when it seemed like we had AM5, AM6, the group project, and the IP all happening at once, with small milestones overlapping. It would’ve been tremendously helpful to have a single page on our course website solely dedicated to deadlines in a chronological order. But other than that, I’ve come to love the course how it is. It was crazy and challenging and hard, but it was all worth it. I’ve learned so very much, more than I could’ve imagined, and I’ve made really great friends too. :)

[newbie2cs-blog]

My own learning goals for this semester were to see how I feel about computer science and what I can do with coding. I also wanted to be able to make a Web- Mashup. As simple as it is, that was my goal. I have achieved this, which is very exciting to me. In my final IP, I used the Rotten Tomatoes...

[squigglybracketsgirl-blog]

Hey newbie2cs! I just want you to know that you should be ridiculously proud of yourself right now. :) I know you've worked really hard the entire semester, and you've learned so much. Your enthusiasm for computer science and your kind words have been such a great encouragement to me personally. Without knowing any HTML, CSS, or Javascript before the first day of class, you should be super proud! I loved reading your reflection. It’s crazy to see how far you’ve come.

[squigglybracketsgirl-blog]

Reflection 1: Team Project Presentation

Even though watching myself on recorded video was extremely awkward, it was actually very helpful. When I’m in the middle of giving a presentation, I’m usually never aware of all the little things I’m doing. I’m trying to say the right words, at the right volume, with the right amount of gestures, with good eye contact, with good posture, at a good pace, with a confident voice, and so much more, all at the same time, and it’s terrifying. It’s no wonder that public speaking is the #1 greatest fear in the country.

So, if you’re also terrified of public speaking, don’t worry. A lot of us are. :) But, we all just have to keep practicing until we’re more confident. 

But, let me get back on topic. So, the video recording was very helpful because I was able to watch myself a little more objectively. I noticed quite a few things that I can improve on in the future: moving my hands a lot, speaking a little softly, saying “um” a few times, tripping over my words a couple times, etc. But, the thing that most annoyed me, I guess, was how I ended a lot of my sentences with an upward inflection (as if I was unsure of myself, as if I was asking the audience a question). My biggest goal for my public speaking in the future is to present more confidently (in words, inflection, posture, everything). And, I think that just takes practice and more practice. :)

As for our presentation as a team as whole, I’m really happy with it. We kept the time well, and we kept a good pace. I thought that we divided the parts pretty equally, and we got around the same amount of speaking time. I was also really proud of our transitions. They were pretty smooth. :)

If I had to give this presentation again, I would’ve practiced my own part a little more, focusing on presenting with more confidence. But I think the amount of time my group spent rehearsing together was just right, so I would keep that the same.

This was a good learning experience, and it’s motivated me to want to improve my public speaking skills in the future.

[squigglybracketsgirl-blog]

Presentation Advice

My group met at Lulu at 6pm to eat dinner and throw our presentation together. We managed to finish a rough draft of our PPT and deploy our meteor app by 6:45pm, and so we ran over to the science center to get to Sravanti by 7pm. On the way, we assigned ourselves to different slides of our presentation.

We actually did a really good job of stumbling through our presentation for Sravanti, and we got really helpful feedback. We got some advice about basic presentation skills: word choice, posture, transitions, etc. But we also got some more specific feedback (like presenting with a mixed audience in mind). 

My team is meeting again tonight to run through our presentation again, because practice is the best thing we can do to prepare for tomorrow. 

Can’t wait to present our project! Hope you all like it!

[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!

[squigglybracketsgirl-blog]

Thanks for sharing this screencast, smiley-scripts! Pivotal Tracker looks like such a helpful group project tool!

[squigglybracketsgirl-blog]

Group Project - What I’ve Learned

I’ve learned a lot from working on this group assignment.

Seemingly simple project ideas can turn out to be really tricky: Our group thought we had a really simple project idea. We just wanted to have a simple “live” FAQ board for students who attend events (so that they can easily ask questions and receive quick responses in real-time from event coordinators or even from other participants). After jumping into our project, however, we realized that there were a whole bunch of different issues we hadn’t considered (participants vs coordinators, what were their different privileges? how are we going to manage multiple events? they can’t all share the same “quickhelp” board... etc). This group project helped me learn that simple ideas are not necessarily easy to implement because a ton of other issues may come up. 

Github is amazing: In the past, I’ve stayed far away from github. It was partially because I didn’t understand how to use it, but my biggest reason for avoiding github was that I just didn’t trust it to manage merge conflicts. I was also worried that github would lose my code somewhere and that it would somehow mess up something. But, after working with github for the first time on this group project, I fully trust github to keep my code safe. I actually love github now, and I think I’ll use it all the time for my future projects. 

A great team makes a huge difference: I love my team! I think having a good team really makes a huge difference. And by “good team,” I don’t just mean a team of students who are good at programming. My teammates are great at the programming stuff, but that’s not why they’re “good” teammates. I love my team because of how well we communicate and work together. And it makes a huge difference to have a team that’s flexible and not afraid to be honest about what we know works and what doesn’t. We have really open communication about what we think we should cut and what we think we should add, and we have great discussions about what exactly our goals for our app are. And that’s why my team is the best. It’s too bad that is our last group project in 249. But maybe we’ll get a chance to work together again. :)

[squigglybracketsgirl-blog]

Group Project Challenges

CSo my group has made great progress on our group project. We spent all Friday night and all Sunday morning last weekend “hacking” on our project. Then, we worked on it whenever we had free time during the week. Right now, we have a pretty functional, almost-complete app. :)

Some challenges that we came across:

Multiple pages: we wanted to at least create the illusion of having multiple pages. We achieved this by storing a Session variable called “currentPage,” and then we’d display the corresponding template when that variable was updated (on navbar button click)

Coordinator vs. participant status: At first, we wanted to completely separate coordinators and participants of events. We agreed that users should either create a coordinator account or a participant account. But then we realized that coordinators wouldn’t be able to participate in other events. So now, every user is automatically a participant but still has the ability to create and coordinate events.

Access/permission to do stuff: It was a little tricky to manage all the different users and determine whether or not they had permission to perform certain actions. For example, we have a “quick help” board (like a real-time FAQ wall), and we had to make sure that users were able to delete their own posts/responses but not other users’ posts/responses. Also, users can only add to the schedule if they were the ones who created the event (this prevents random participants from messing with the event schedule). 

Overall, I’m really proud of my group. We worked really hard on this project, and we spent a lot of time figuring out a lot of tiny little details. I hope the class likes our project. :)

[squigglybracketsgirl-blog]

Team Project Discussion

Yesterday during class, we got some awesome feedback & suggestions from Team Pamela + Gracie. A really great idea that they recommended adding to our project was the ability to group posts depending on whether they were resolved or unresolved. That way, users can easily look up “old” questions that already have answers, but they can also easily see which questions still need to be answered.

[squigglybracketsgirl-blog]

Group Project Progress

Met with Ella and Jamie in Lulu tonight to discuss our plans for our group project. We made some good progress. We talked about what exactly we want to include in our meteor project, and here are our goals:

Allow users to log-in and indicate whether they are participating in or organizing an event

Have a “quick help” board, more like a fancy chat system that allows participants to post questions or requests and receive responses from coordinators or other participants in real-time

A “smart” schedule that indicates which events have passed, which are currently running, and which events are coming up in the future

Maybe if we have more time, we might add a few more features, but we’re excited to start working on the ideas we have so far.

Other stuff we accomplished tonight:

Set up a GitHub repo

Drew up some mockups

Discussed game plan for finishing project on time

Scheduled our next meeting time

I love my group, and I’m super excited to start working on our project together! :)

[squigglybracketsgirl-blog]

IP Review 2: Wikipedia Game, Degrees of Separation

Dude, this is such a cool idea! I love it! It’s so creative, and I’d totally play this game. :)

I am, however, a little worried about how much effort it might take to find a path between 2 random words. This sounds like a bfs search, but on Wikipedia, I feel like this could potentially take a long time considering how many hyperlinks there are on a single Wikipedia page. So, maybe instead of picking 2 random words and finding a path between them, you can randomly select just 1 word and then randomly “wander” to another word (however many “degrees” away, like 5 or 6 or more or less depending on how difficult you want these challenges to be).

Also, I have a question about your ideas for visualizations. You mentioned that you were hoping to maybe display a visualization of the “link journey” the user has taken. What does that mean? Is it just a list of words the user has traveled through/to? Will this involve d3? I don’t know what your thoughts are, but I’m just curious. You can of course visualize the user’s stats and scores compared to other users (based on a leaderboard or high score chart, you have a lot of options). :)

I’m actually really excited to see how your game turns out. Especially the multi-player feature, since it’ll make full use of Meteor’s reactivity. I can’t wait to see what you come up with. Please be sure to keep us all updated with posts (and screenshots too)! :)

[squigglybracketsgirl-blog]

IP Review 1: NYTimes + Google + Amazon Books

This is a really cool idea! I love your goal of inspiring people to begin reading again! For me, after a certain age, I felt like I had run out of books to read (of course, that wasn’t the case, but it just felt harder and harder to find books that actually interested me). So, I think your IP idea is awesome. :)

So far, I think your project has been thought out pretty well, but I do have a few questions:

What data are you going to visualize for each book? I know you mentioned this as one of your potential problems. I can’t think of too many suggestions, but here are a few that might help you: word count, copies sold, number of user recommendations (stars on amazon?), maybe some data in comparison to other similar books?

What are you going to store about each user? Just the books they’re interested in? Maybe think more about what information you’re going to save for each user. 

That’s all I got for now. Great idea, and I’m excited to see how it turns out! :)

[squigglybracketsgirl-blog]

AM5 Progress

This is what my AM5 currently loos like:

So far, I’ve been able to get this sunburst to show up (it’s even zoomable!). I was able to modify one of the examples I found earlier, and I was able to swap in the course history data. I also have a hover thing going on: when a user hovers his/her mouse over a section on the sunburst, some information is displayed on the left hand side (which I will prettify and add more to).

Some challenges: 

The color was weird, and I’m still not sure if I like it. I didn’t want to give each section a unique color because that would take forever for me to do by hand, so I hard-coded the 6 inner sections and somewhat-randomized the outer sections (a section is a random color within a certain range of its parent section).

I also need to work on the labels of the outermost sections. Since there are so many courses, the text smears together, so you can’t read it. I think I’m actually okay with the smeared text (since it’ll be spread out once the user zooms anyway), but I might try to fix the messed up text somehow. I’m not sure yet. Suggestions are welcome. :)

[newbie2cs-blog]

going to sleep now but are the each blocks working for anyone?? not for me..plz advise. it just doesn’t do anything at all !! (AM6)

[squigglybracketsgirl-blog]

Did you make sure to follow the book’s directions exactly? The guide goes through 3 important steps to get your each blocks working:

1. Make sure your HTML looks like this:

2. Then, in your Javascript code within your “isClient” conditional, you’ll need to define the helper for player:

3. And then replace your placeholder return statement with something actually useful:

Double check if you’ve gone through these steps correctly, and hopefully you’ll get your each blocks to work! :)

If you still have trouble, maybe check to see if you have any documents in your PlayersList MongoDB collection in the first place. If your collection of players is empty, I don’t think the each block does anything. 

[squigglybracketsgirl-blog]

AM5 - Helpful Examples

I found this nice, simple example (by Jason Davies) of a zoomable sunburst that has been EXTREMELY helpful. I was looking at Mike Bostock’s examples but some of them were a bit too complicated, so it was great to find a more basic, clean example that I could learn from first.

Ultimately though, I’m aiming for something that looks more like this (Kerry Rodden’s example), a zoomable sunburst with UPDATING data. Once I understand Jason Davie’s code, I’ll try to work through Kerry’s code. At least, that’s the plan for now!