CS249 Web Mashups @mashupmarungo-blog - Tumblr Blog

Reflection #2: What did I learn?

Achieving Goals: I remember looking at this section of the course description on the first day of class and being a little overwhelmed with the prospect of learning web development at such a comprehensive level. I have never taken a web development class - in high school or at Wellesley. Fortunately, I took CS307 which introduced me to JavaScript and a tiny bit of HTML, but certainly not to such a degree as my exposure in CS249. I didn’t know anything about the DOM, or CSS, and had never heard of D3. I also have never mashed APIs into any sort of code, and I was excited to learn about ajax/ http requests, and learn about data binding and API usage, etc. My own goals were mostly around feeling comfortable about building my own website to the point that I could build a web-based resume.

I haven’t built my own resume, but I definitely feel comfortable doing so! It is my summer project. I loved this class so much. Someone mentioned how it almost felt like a hackathon every week. I totally agree! I loved Eni’s style of giving small lectures, and letting us hack away together in groups, alone, and with her. I have learned so much about the DOM, HTML, and CSS. And I feel so powerful for being able to mash up pretty much any API I want. That expands my horizons to the length of the internet, and that is crazy!

I wish I had learned more about D3. I am working on my visualization currently, and am having quite a bit of trouble - I skipped Am5. If i could do this course again (which I would in a heartbeat), I would have sucked it up and gone through all of the tutorials, and done my AM5 visualization. That is my only regret!

Transferable Skills: I feel that one of the biggest things this class has taught me is that one of the biggest parts about being a good coder is knowing how to ask the right questions. As we all stumbled through Meteor, I have realized that I don’t need to actually know a lot of details. As long as I know the function I am looking for, and know what I don’t know about solving a problem, I can ask StackOverflow, W3Schools, Eni, and any classmates for finding the answer. This gives me a lot of confidence for taking on new projects, languages, coding environments, and beyond.

This class has been a really valuable, challenging in the right ways, and also downright fun! Thanks, Eni!

#reflection

Reflection Post 1: Presentation

My group practiced a few times and went to the PLTC for a meeting with Sravanti as well as with Adele. Both times, we received critiques mostly for the structure of our presentation rather than pointers on how to hold oneself during a presentation. With that in mind, I watched our presentation.

I think the biggest issue we had was still the structure of our presentation. It wasn’t very clear until well into the presentation what the actual product was - we knew the pain we were trying to solve. And we communicated our design goals very well. But we never went out and said “This is the product - we are building an app that will push Wellesley students some self-care-related tasks and reward them with points and a leaderboard for completing them.”

I also stumbled over my words a bit, and there was some transition awkwardness between me and Clare a couple of times. That could have been improved.

All three of us are comfortable giving speeches, presentations and in general, talking during class. I think it was our confidence perhaps that was our biggest downfall - we relied on natural flow to get us through the presentation when I think our flow could have been improved with a little more concrete assignments for people to talk on certain slides, and have a better climax. However, I think we did okay. I also think every single group did exceptionally well in their presentation! Go CS249!

#reflection

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:

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!

mashupmarungo-blog

Wha I knew it was something simple like that! Thank you!

#answer

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.

Than

#question

My app so far !

It’s really elementary but I’m excited that Eni and I figured out how to display Wikipedia content onto my meteor app! here is a div of the article:

I’m excited that Meteor facilitates HTTP requests rather than complicates them!

#reflection

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!

#reflection #contribution

obscurejavascript

Undefined is a confusing type in JavaScript, but first I will start with the obvious cases. Like the null type can only be null, the undefined type can only be undefined. Firstly there is a global undefined variable with the value of undefined:

console.log(typeof...

mashupmarungo-blog

Kind of tangential, but this reminds me of this cool equality table for Javascript:

https://dorey.github.io/JavaScript-Equality-Table/

true == 1 == “1″ == [1]

false == [] == [[]] != {}

#contribution #answer

IP Review: Geography Game

This is a really cool new way of building a geography game! Rather than just typing in a place, or naming countries, the game is to actually recognize a place from a bird’s eye view and actually go on your map to match the picture.

I’m going to be honest and say that I would not have recognized the Sydney Opera House from that perspective, or pretty much any perspective. I hope that it’s not super hard to find places that will actually be recognizable from that point of view. Also, I’m sure once kids have played the game, they’ll recognize after being exposed to the answers.

It could be fun to add some fun facts about each place so that the game not just about recognizing famous landmarks, but really learning about their significance. I wonder if there’s a an encyclopedia database of some sort that writes with a kid’s literacy level in mind.

What will the scoring rubric? How quickly they go through challenges? How few hints they use? How many times they’ve played? I wish I knew more about game theory to give a good suggestion about how to build a scoring system.

I’m excited to play this game!

#ipidea

IP Review for Hunminjeongeum: The Korean Language Game

I love language/ word games. My favorite game of all time is Boggle. So personally, I love this idea of turning the popular Korean language game into an app. I’m surprised that there is no digital form of the game!

The logic behind the game is to take two consonants, and check that there are plenty of words with both of the consonants in there. If there are, then display them to the player, and when they input a word, check that that word holds both consonants, and exists in the Naver Dictionary API. I think that’s going to be reasonable to code, especially since the Korean dictionary probably doesn’t hold more than 300k - 400k words. As long as the search algorithms are linear or sublinear, the runtime of the code should be reasonable.

Fun addition: Perhaps you could have levels of easy, medium and hard! If the computer finds 200-500 words that contain the two consonants, then that round is marked as easy. But if the computer only finds 1-20 words with that set of consonants, then it’s marked as hard? I guess you could go through and pre-determine a few dozen combos for the various levels if you wanted to give the user an option to play with all easy, mediums, or hard. Or if you want to skip that you could just give a visual or indicator during the round of whether it’s easy/med/hard to spice up the game!

I look forward to seeing the visual decisions you make. And now I only have to learn Korean so that I can play this game!

#ipidea

Data.js Discussion and Code Review

In class last week, fellow data.js people gathered together and swapped ideas about search logic, data structures, and other fun things that we were in charge of. It was fun and interesting to see the way people thought about the same problem in entirely different ways, and what people got stuck on. What may have taken me a whole hour to figure out, took Susie 2 seconds, while something I thought of in 5 minutes took another person 20. Our discussion reminded me how important collaboration and peer-coding is.

I got a very thorough review of my code today and was grateful for all of the suggestions. I agree with a lot of what was said, and also agree with my original implementation for what my reviewer critiqued and wonder if there will be a time when all of us can have a discussion of each other’s code so that there’s a dialogue about the feedback.

The gist of my feedback was that the structure of my coding was good and the functionality was all there, but I had some inefficient data structures, and some redundant functions. I definitely agree with my reviewer that my data structures were sometimes inefficient. For instance, I didn’t use a dictionary data structure to associate a department with its abbreviation. Instead, I used two arrays where the placement of a department corresponded to its abbreviation in the other array. I definitely should have used a structure with a key : value relationship. There was also a function that found a course by crn#, going through a for loop to find it. It was a function leftover from a previous draft and I definitely should have cleaned up my code and implemented the useful data structure that Eni provided in her cleanedCourses to pull properties from an object. LESSON LEARNED: Use my data structures as they should be used and don’t make shortcuts, using the safe array option!

There was one section of my code where my reviewer didn’t agree on my implementation technique. I built a search function for the days in a very specific way. I in fact spent the majority of my time trying to improve my code for that because of the particular searching capabilities we decided as a group that we wanted. I do stand by my code, although I completely agree that it’s a lumbering function if we had been just trying to figure out a way to return classes with the exact days that the user selected in their search criteria. If the functionality differences didn’t come across, that means I definitely should have commented more about why I used the logic that I did. LESSON LEARNED: comment more, be open to criticism, understand that reviewer has an entirely different perspective on the code that you have.

All in all, I thought the code review exercise was a great learning experience for me, even though I’m skeptical of doing it myself (I feel very weird about giving any kind of negative feedback to a peer). This experience definitely taught me that peer review has a lot of virtues, and I shouldn’t ride it off.

#reflection

Dear Data Reflection

I was excited to try out my critique plan of trying to recognize bias and signature in the two women’s visualization techniques. This is what I decided:

Giorgia is more excited about showing diversity and difference in her day while Stefanie is more interested in recognizing commonalities. As I did a quick glance of the entire set of the dear data postcards, I noticed that Giorgia’s tended to be more complex and Stefanie’s tended to be more monochrome and simple. Revealed quite obviously in the latest postcard, Giorgia’s visualization is an eclectic collection of little icons jumbled together. Her point comes across nicely - her days a filled with ups and downs, and makes me think her days were really fun and exciting. Stefanie’s on the other hand, is a set of very cohesive structures that are sectioned off into only a few categories. She also visualized her thesis of wanting to understand her time allocation on a broad level.

I think both biases/ interests are valid, and both beautiful in their own right. I would say that Stefanie’s visualizations are easier to understand, but I actually like Giorgia’s visualizations a lot and agree to a certain extent that data and nuance lost for the sake of simplicity and aesthetic is not necessarily the way to go. As a true independent, I’ll end with this: compromising between the two biases (favoring simplicity over nuance, and vice versa) is certainly difficult to do, and I think only the best infographic artists in the world could see, and walk that line perfectly.

If I were going to do a project like this with a friend using code, I would definitely want to focus on data structures whose trend would work well with movement/ animation. The first thing I thought of was doing a dynamic visualization of pedestrian traffic on the Wellesley paths. I have this weird thing where I am confident that going to the clapp library from Stone D is fastest by going in front of the chapel. But when I’m at the library, I am completely confident that the fastest way back home to Stone D is using the path behind the chapel. Perhaps polka dots could represent people traversing a path, and thickness of path could represent popularity of the path at that particular time in the day. I would love to know through crowd sourcing which path is the fastest between any given building.

#reflection

jollyjava

Design and Redesign

The redesign of the political map for the 2004 election was particularly interesting for me. I am very interested in the political system that we have since it does not always reflect people’s general political affiliations. The redesigned map shows how this is really true because the map becomes red, purple, and a few sections of blue. Then another visual is the map distorted geographically by scaling counties and styes according to their population. This is even more striking and clearly show the blue areas and becomes even more purple. However, I do find it problematic that they neglected to include Hawaii and Alaska, as if they are not a part of the election process anymore. However, the redesigned visuals become very very complex.

If I were asked to critique a visualization, I think one important criterion/ good practices to keep in mind is the motivation to redesign the visual, what information is not shown in an agreeable manner. Another thing to keep in mind is the person doing the redesign and be kind to them. It is not encouraging if someone is completely rude about the work that you put a lot of time into.

mashupmarungo-blog

I chose the same redesign to talk about in my reflection post, and I didn’t even notice that Hawaii and Alaska weren’t included in the design. Good catch!

#answer

Redesign and Criticism

My favorite redesign was a map of the USA where city size represented in the map are proportional to the population size, so that one can accurately see just how much of America is red-leaning and blue-leaning. It reminds me of this visualization of a human body:

The body’s limb size is proportional to the number of nerve endings / how sensitive it is. Not all limbs were created equal. And states were not all created equal either. These two visualizations are great examples of revealing the misrepresentation of reality.

As an independent (politically), I am quite sensitive to political bias. I can hear the language that people use one either end of the political spectrum, and am often so frustrated with the fact that each side drinks its own kool aid and refuses to recognize their own personal vendettas against a particular notion or cause. Conservatives in Utah that I know are just as sure of themselves as radical progressives in LA, yet both believe the other to be ridiculous. Seeing a map where the coasts are stark blue and the middle is solid red just bothers me to no end - it looks like states just screams partisanship. It was a big relief to see a swirling vortex of red, blue and purple where dialogue and nuance are represented in visually representative proportions. It calmed my soul.

My rant about bias is actually a great segue into my ideas about what kind of critic I would be. One of my greatest virtues/personality flaws is the ability to switch sides in a debate on a moment’s notice depending on whom I am talking to. I’ve never felt more radical than living in small town Utah, but have never felt more conservative than my time here on Wellesley campus. As a critic, I would probably focus on understanding each designer’s bias in building an infographic, and would play devil’s advocate, whether or not I share the same bias, in order to truly challenge the designer into building the most informative, least leading visualization possible.

#reflection

Reflection on WWW

I’ve heard Takis say this before, so it’s not something that should have surprised me. But his comment still surprised me. Whenever he gets going about the wonders of the WWW, he asserts that all of us CS students have sufficient information in our brains to come up with the WWW ourselves. The concepts of building a WWW are not beyond our grasp, or too vast to consider. Rather, they are so simple that any of us could have thought of it ourselves. And then he chastises himself for not having thought of the WWW himself.

His lecture reminds me just how integral the mashups process is to the very lifeblood of the WWW. What is the WWW but a network of requests and answers? Asking to see a website from a particular server and then using it is not any different from sending an ajax request to an API, and using a callback function to manipulate the data received. As we learn about how to use data, provide data, manipulate data and have a lot of fun doing it, we’re actually learning the inner workings of the WWW. Love it!

#reflection

Reflection on Data Privacy: Moral Mashers

Professor Darakhshan Mir’s lecture on data privacy blew me away. I have heard horror stories about data privacy and security online before, but somehow, time always lulls me into a sense of complacency about what people are watching, noticing and assuming about me as an online user. During the talk, I was very aware of how my Facebook page’s security settings weren’t very high, my name is practically in my Tumblr handle, and my FB profile picture is also my tumblr profile. My social media accounts probably make it super easy to use just small bits of information about me to find out a whole lot more. I’ve been telling everyone I can about how the combination of gender, birthday and hometown can uniquely identify something like 87% of the U.S. population!? That’s crazy to me.

What I took away is that, in order to be moral mashers, we must respect the privacy of people’s data that we are using. The last thing I’d like to do is feel that someone’s privacy was invaded on account of an app that I build. On the other hand, I felt almost giddy thinking about just how powerful data is - what we can do with it, what we can infer from it. I stand by the fact that the internet, and data usage can be a greater force for good than bad, and I fully intend to discover those forces myself.

#reflection

squigglybracketsgirl-blog

Why are visualizations so cool?! I think my favorite kind of visualization is any sort of algorithm visualization. I think algorithms are beautiful, and algorithm visualizations make me so happy.

Visualgo is my FAVORITE algorithm visualization site. It was so helpful in CS230 when we were...

mashupmarungo-blog

Okay I actually just wrote a little blurb about wanting to infograph an algorithm because I was taking CS231 before seeing your post. I seriously love Prim’s Algorithm - I wish I had seen this when I was toiling away in MATH225. Let me know if you’d like to collaborate with algorithm infographing!

#answer

Thoughts on Visualization Project

I was thinking about my project. I think that if I don’t do the Wellesley data that Eni provided with us, I will do something with CS231 algorithms that I’m studying. This website gives a small visualization of the process for each sorting algorithm and shows in real time why something is faster, more adaptive, etc.

http://www.sorting-algorithms.com/

I would like to build decision trees or make a visual representation of the relative efficiencies of different algorithms given particular data sets. My animation would involve the actual execution of either iterative or recursive algorithms, etc.

I extend an invitation to anyone also in my CS231 class (or who has taken it before) to work with me if they’re also interested in that!

#reflection

Trending Blogs

Recently Viewed Blogs

CS249 Web Mashups