Salesforce - Hit the Ground Running

This summer I interned at Salesforce, where I worked as a fullstack developer, specifically on the service cloud. Here are my key takeaways:

1. Legacy code is a thing

1. Good documentation is a blessing and tremendously helps speed up the process.
2. If you got tools, use them. (Using an IDE? Take advantage of its features!)
3. Find people, and talk!

Here's the catch: often code is orphaned and does not have an owner. It just happens - People leave the company, one file has multiple owners, a file has too general a purpose, etc. I'm glad I got to learn from doing and definitely, there's a difference between me before and me after the internship.

2. Browser compatibility is a thing

Usually, it's an old version of IE restricting what you can and cannot do. Got a fancy HTML5 feature you learned in class that you want to use? Think twice - can it be supported? Same goes for CSS and Javascript. Working at Salesforce provided a good challenge as I had to find ways to solve a complex issue with a solution that would work in all sorts of settings. You can't just ignore the 5 or so percent of users still on fossilized browsers because that translates to a whole lot of people!

3. Accessibility is a thing

Accessibility, along with browser compatibility, are topics tossed around in school but few classes actually teach. But it's something that exists, and something all developers and designers should keep in mind. How can code solve this problem? How can design solve this problem? How does one evaluate design? And actually, how can applications and future interfaces (whether on web, a touch device, or whatever the future holds) be built to be more accessible? Just like how some users use IE, some users have accessibility issues that we, as developers, can address.

4. Code debt is a thing

Unfortunately, the real world isn't like school where you can hack together a project, turn it in, and then turn over a new leaf and start anew. Everything I write must be understandable because it could be reused, reworked, or cleaned out in the future. One part of this is not having a huge magical do-everything method. Another is following existing naming convention. But also not using impressive but totally unreadable one-liners is also a thing. Leaving good comments and having simple, easy to follow code means someone in the future will be happy. I know the pain.

5. Agile development is an awesome thing!

Probably the most useful thing of it though is giving people ownership of what they're doing. Announcing it every day makes you commit to tasks. But it also lets others know what you've been toying with. I may be working with "this side" of the code mostly, but that doesn't mean I'm not interested in others! What I learn today can help greatly for future possible stories - and it helps foster a more collaborative team.

6. Specialized roles are a thing

School has trained me to take on an ace-of-all-spades sort of role just because projects are occasionally solo. This portfolio/blog is a testament to that - design, art, programming all mixed in. But often we work in teams, and members have roles. The focus then shifts to fostering good relationships with team members and communication  - but the benefits are great! For one, you're not lonely. But next, they often share a fresh point of view that helps make a better product and experience. Even I got wrapped up into "technical" stuff after working with code for so long - but a talk with the team writer helped me take a step back and look at what I created. A good team makes you think critically and not just churn out work. 

7. Taking care of yourself is a thing

Coming in with a good night's rest made a huge difference for productivity. Not having my shoulders hurt from sitting also helps. And eating well too! Sometimes you get sucked into work, but having a life outside of it actually impacts productivity! When I talk with coworkers, I don't always want to talk work because sometimes all we need is a bit of time to relax and loosen our brains a bit. I don't think all nighters, ramen dinners, and the stereotypical "college lifestyle" is something that should be sustained, especially once you're working.

I could go on, but then this immense text block would be truly terrifying. I had a great time at Salesforce because my team was very welcoming and friendly. But also because the Salesforce internship program is well run! There were challenges that I was able to overcome, and I think I've both grown as a developer and as a person as a result. I would highly recommend the company! Mahalo for making my summer awesome!

Tldr: Read the bolds and my team at Salesforce was awesome!

TartanHacks - TwitterQuizzer

This is a bit delayed, but roughly a month ago I attended a ~1 day Hackathon at Carnegie Mellon called 'TartanHacks" (Feb 6-7). The application my team of three created a simple web app game where people could quiz themselves on how well they knew their friends on twitter. A tweet would be shown to the player and the player then had to guess who it came from.

 

Once the game was over, the player could tweet the score to share.

I was playing as someone else and obviously my score reflects that

My personal goal for this project was presenting a simple interface while experimenting with CSS3 animations. You can't see here, but the heart on the starting screen dips up and down and for each round, the 'card' shows a tweet and flips over to show the answer. This is technically a one page application with parts coming in and out via AJAX, so all transitions also use CSS animations in tandem with javascript. I also got my first real taste of twitter Bootstrap.

In other words, my goal was to create an interface that could easily be understood by anyone, and to accomplish that I went for a simple interface bolstered with animations to make it a seamless experience. Of course there were some issues with this project. Our app interacted with the Twitter API, and we quickly hit the call limit. One way of solving this is creating multiple accounts (each with their own quota). Another issue was that multimedia was returned as a reduced twitter link, and it was difficult to sense what type of media was ultimately returned. An image? A link to soundcloud? A youtube video? In a perfect world, the game would show said media, and we attempted to do this by using a built in twitter embed iframe. But the iframe came with the source user by default, and attempts to obfuscate or remove the name proved frustrating. So for now it simply displays the link.

Regardless, this proved to be a fun and learning experience, and I'm happy with how the application presents itself. Shoutout to Aditi Sarkar and Sangha Lee for being a great team!

Repo link: Coming soon

GGJ - A Platforming Postmortem

This weekend was the Global Game Jam, where gamedevs and game enthusiasts (me) craft games within 48 hours. I entered my first game jam excited to make games that I'd love playing. I knew there was a steep learning curve for me - I had never used Unity and also never programmed in C#. Luckily, it wasn't hard to pick up even in the tight time constraints, and I prepared beforehand.

So what did my team make? We created a simple geometric 2D platforming game using the Unity2D engine. You - a triangle - must fling yourself across shape themed terrain and find a home - whether it be in a square, a pentagon, or in another cluster of triangles. There's also the mechanic of 'changing yourself' to fit in with different shapes. As you change, you also exchange abilities (jump height, wall jump, speed).

Game name: Full Circle

Github repo: https://github.com/angelamuliu/squaretown

GGJ Link: http://globalgamejam.org/2015/games/full-circle

That's what came out - but what did I do? Although I could have worked on the UI or art easily, I wanted to challenge myself. I was one of two programmers on the project. Fortunately for me, C# is similar to Java so I had no issues writing in it. The biggest challenge was working in the framework of Unity, and of course others issues like how should we move the player? Should we use physics or allow greater control by building it from the ground up (we did a mix of the two)? Other programming challenges I solved was ground checking for the triangle, state switching and activating objects, creating crumbling platforms, and well...there were just a plethora of scripts that had to be done.

Using a triangle as the player led to fun challenges and insane jump spins!

What were the biggest challenges? I suppose learning Unity while furiously trying to also make progress was one, but I find myself in that situation a lot (learning on the fly) so actually, it was kind of fun and very rewarding. I took charge with source control (Git) since my teammates were less experienced in the area, and found myself fix the ever common issue of 'someone overwrote my change what do I do please help' situations that came up. 

But by far, the biggest challenge was team coordination. My teammates were awesome and talented people, and great to talk with outside the context of a game creating marathon. But there was quite a bit of friction when it came down to making tough decisions and doing work. Sometimes one person wouldn't agree no matter what, so we had to adapt. This occasionally involved scrapping a lot of good work to get a person on board...which in turn, turned off other teammates. I had to make a lot of creative sacrifices for the sake of bringing the team together, which is okay. But next time I'd like to make something that goes beyond conventional gaming practices - this was a game jam after all!

But overall, I believe it was a great experience. I feel more confident working with Unity, C#, Git, and more after just two days working with said tools. And I learned a lot about working in teams. Now that I've got the basics down, I can make something really special in my own time.

multiLib - node web app

Last semester felt like sprinting at 400 mph. When break rolled around, it was a sudden halt and I proceeded to catch several(?) mildly awful sicknesses.

Enough of that though, check out multiLib! A web application final project that uses node.js, express, socket.io, mongoDB, and then some. It was created in roughly 1 month for the class 67-328 "Mobile to Cloud."

You can read more about the app and check out the code at its github repo page. It's an online multiplayer mad lib game, hosted on OpenShift at the moment. Although it looks to have multiple pages, multiLib actually is a one page web application that uses socket.io to update what is displayed based on interactions.

Because of the tight timeframe, I choose to focus on 1) making the app responsive and 2) achieving the "minimum viable product." I wanted to ensure the experience was relatively solid and self explanatory. Again, I'd recommend checking out the deployed app to see for yourself (you need 2 people or screens to get the full experience) and judge me on how I did. : )

In case it is taken down though, here are some screenshots:

Robot pictures by yours truly.

Keeping stuff looking good, despite what size it may be!

I would say the biggest challenge was keeping track of all possible events passed with socket.io. Once I got the hang of it, it was pretty simple, but I did end up having 15+ events and 3 different rooms. Another interesting thing for me was using a nosql database (MongoDB). But all and all, making multiLib was a great learning experience and I'm satisfied with what came out.

Hadoop/Spark and RoR Summer Adventures

I worked at the Pittsburgh Supercomputing Center (PSC) over the summer during an internship sponsored by XSEDE. I also juggled helping my 67-272 (Application Design and Development) professor fix/polish an existing Ruby on Rails (RoR) project.

Whew! That's a lot of acronyms. Expect more coming.

PSC XSEDE: A dip into BigData

---

My goal for the internship was to utilize log data about a large webserver named the 'Archiver.' Like most log data, it wasn't being analyzed, just being collected.

This powerpoint I created for my presentation about this project @ the XSEDE'14 Conference summarizes things nicely.

But to go more into detail...I used Hadoop to store cleaned logs. Hadoop allows multiple machines/nodes to act as if it are a single machine, in a sense. I took advantage of the HDFS (Hadoop Distributed File System). Instead of writing a mapReduce function, I ran Spark on top of the Hadoop cluster. Spark allowed me to utilize data inside of the HDFS and conveniently create large in-memory data structures called RDDs (Resilient Distributed Datasets) which I could perform repeated tasks on. Spark also came with a machine learning library module that could be applied onto RDDs.

Data flow @ the PSC for my project

The challenges I bumped into are common for anything 'BigData.' One was getting access to data, and subsequently having to learn my way around the OpenTSDB API (Open Time Series Database). Another was cleaning said log data. I wrote a python script that would query the OpenTSDB, create a CSV, and then place it into the HDFS. I ran this script once a day via crontab. Then there was the problem of incorrectly setup collectors - that had to be amended as well. Of course, bugs were to be expected too.

Collection and cleaning took a substantial chunk of my time. When I had enough data in the HDFS, I moved onto using K-means clustering to examine the data. K-means is a commonly used machine learning algorithm which locates n centoids and matches your datapoints to 'closest' centoids. It allows you to find relationships between dimensions (i.e. filereads vs. CPU) and more! My project's data looked at 5 dimensions about the Archiver: filereads, filewrites, net IO, CPU, and disk IO.

The final step was visualizing the results. For this, I decided to use d3, a javascript library that can visualize documents on the web. The user could change what dimensions he/she wanted to view at a time. Here's what came out of early analysis (shown only on 2 dimensions):

White points are centoids. Colors determine 'area of influence.' If it looks like some centoids have more than others, it's cause other dimensions that aren't being displayed are influencing....

For the last few steps, I was working on making it possible to call the Spark K-means script from the web page and update what was viewed.

My experience at the PSC was overly positive. I got great working experience using Hadoop, Spark, python, d3, javascript, OpenTSDB, and machine learning algorithms. Definitely challenging but greatly rewarding - and I can tell what I've learning will be useful in the years to come.

>> Github repo to most of code

A poster made for XSEDE'14 and Duquesne Presentations. Take a look!

FamilyTyes: A RoR rollercoaster

---

This is a project still in motion. It started at the beginning of summer. A previous (and now separated) team worked to create a web application for the organization, FamilyTyes. This site was to record attendances, keep track of quiz data, and visualize said data. It was to help the organization prove that it had a STEM impact on those enrolled in its classes.

When I came, the site was already very made...in a sense. The backend was quite solid. The frontend, maybe not so much.

BEFORE:

The site as I saw it for the first time. Deployed too

There was a plan to give every student enrolled with FamilyTyes an ID card, and scan said cards to access the system. Cool, but maybe not quickly applicable. So instead, the professor and I decided to make the site mobile friendly (teens have smartphones, right?) and modify the way the whole quizzing process occurred.

That's not good.

Several issues. Current site was not mobile friendly, at all. Also, at some point the site was using Bootstrap, but then switched to foundation. Foundation was not installed as a gem, but rather being loaded in multiple times in many areas. TLDR; this project's views needed a lot of love.

I decided to make the site resemble FamilyTye's home site, otherwise no one would know that the two sites were closely associated. To make it mobile friendly, I created two views - one for mobile, one for web - through the tools foundation provided me. I also have some AJAX here and there to make taking role, etc. faster and more logical.

The new mobile homepage, nav in top left.

You can actually look at the site now @ http://ftdev.info/

Since this is a WIP and for FamilyTyes, I don't want to go any further. At least, until the site is officially released! We want to use the system with kids at the Baldwin High School starting in October. Let's hope that goes well! ; )

cAPP and HCI

I got into CMU's undergraduate HCI double major program! This happened awhile ago, sorry for the late update.

In the meantime, enjoy this bit of work I did is for an entrepreneurship class midterm group project (what a mouthful). What we came up with was 'cAPP,' a fit-all drug cap that would sense when the bottle was opened and sync with a smart phone application which keeps track of your medical schedule. Here are some of the rough mocks I did for the presentation that illustrate its function.

Sophomore year is nearly over. Just one more week of finals / projects, and I'll be done! Expect to see more work posted here once that happens.

On a tangent, I'll be working in Pittsburgh this summer. I've gotten a research opportunity at Pittsburgh Super Computing (PSC) and hopefully, will also be able to help a professor with some research. Looking forward to a productive break until junior year...

IS Milieux - Bikes...And POS?

This is a team project I contributed on during the fall semester. We designed and then prototyped a touch-enabled tablet point of sales (POS) system for an imaginary bike company called "Overmoyer." It is meant to be held by salespeople to assist in presenting products, registering customers, and processing transactions. It could also be considered a tool for customer relationships as well then.

 I'm lucky to have worked with such friendly and talented people! Our project ended up winning the "ISM Best Overall" in the class. Hooray for more mugs, chocolate, and certificates to bring back home.

I'll show you guys just what I worked on. Anything I don't mention was coded/designed by one of my teammates. They're seriously awesome.

Tablet is in landscape view. I wireframed the area you see on the right and created the mockup rating icons...And wrote the text! The bikes on the left and font choice was a more universal aspect of the POS system and was not designed/chosen by me.

The Felt Jetty bike description page. Now in portrait mode! 

This project marks my first exposure to using source code management (git). It was a confusing but interesting ride, and I'll only continue using such procedures. 67-272, a class I'm taking now, has my head all up in ruby, rails, git, and a slew of klingon language. More on that later. Instead, have this logo I made for the POS team project!

We named our team "Global Eucalyptus Consulting." Hence the magical eucalyptus leaf, soon to take over the world with the power of technology.