A Newbie’s Experience in the WebXR Weekend Challenge 2018

Do you know anything beyond how to make basic circle and rectangular in VR?

I sure as hell didn’t, at least on June 29 when I decided it was an excellent idea to join the WebXR Weekend Challenge at Microsoft Reactor!

I was mentally freaking out and wondering what I was doing. If you read my Twitter posts, you would know that I love VR – and know next to nothing on the actual coding part. My last VR-code-related tweet was a floating ball I created by following A-Frame tutorial.

Once I sat down though, it wasn’t so bad. The lady I first met turned out to be a mentor from Microsoft – they had a VR team coming all the way from Seattle this weekend for this event! Microsoft have really throw all in for this event. They provided the space with office snacks and drinks, a team of WebVR-specialized mentors, a draw for a Windows Mixed Reality headset prize,  and another opportunity to get the headset by submitting a project interest form.

During the pitch, one of the person on stage was interested in the use of VR in science but also didn’t know WebVR,  so he’s here to learn! Fellow WebVR learner spotted! I later learned that he is a high school student working with VR in Berkeley Lab during the summer.

High School.

Talk about modern technology in our academic system – the only thing I know to do with computer in high school was reading online stories, surfing MySpace, and accidentally getting our family PC infected while watching videos.

Our mentors are more familiar with Babloy.js – I totally didn’t realized Babylon.js is a Microsoft open source project until then – so that’s what we went with.

My teammate, Sam, had a multi-page tiff file of a butterfly wing, and the initial step was simple – materialize it in WebVR. One of our mentor suggested an A-Frame project that shows MRI in VR: aframe-mri-poc. Fortunately I had went through the A-Frame tutorial, and the code was very easy to read. The developer simply used <a-image> tag to source multiple images, lower opacity, then position the images side by side. We just have to implement that with Babylon.js, preferably done with some sort of loop so we don’t have to manually create an image tag for each image – the tiff file had hundreds of images.

Turned out Babylon.js has a transparency example that does something similar to what we had in mind. With Babylon, it was definitely more of a JavaScript language. Instead of a bunch of <a-image> tags, we did a loop where we called the image link with Texture() and created planes using MeshBuilder’s CreatePlane().

The number of images and the size expected of tiff files was just too heavy on the performance though. We spent most of first night trying to research a solution that would parse the files. Eventually, we just went with converting the images to jpeg beforehand. Sam used Google Cloud’s features to do mass conversion of the tiff file and got the file names ordered for easy looping.

Now, onto the features. With the image in VR, how would user interact with it? Several ideas popped up throughout the hackathon – we kind of just came up with ideas and tried them as we went. We moved from just uploading science images to medical images. Our Microsoft mentor connected us with a medical professional who also work with VR, and we got to Skype and learned about the industry from him. By the end, our VR model can be move, scale, have control of threshold, and have drawing on it that can erase at the press of a virtual button.

I started with the move feature. I was totally confused by controller, since that was never much of an issue when you are just creating floating object. This time, a fellow participant graciously lent us his Oculus headset, so we were going to target to that headset, meaning controller is a must. My targeted object would move and rotate at the same time, and I couldn’t figure how to fix it. Fortunately, my teammate gave it a try and figured it out.

Our mentors were amazing, and we had at least one person there to patiently explain and debug issues with us during the entire hackathon. That was particularly helpful when Sam was working with the painting tool and the resulted performance issues. I also got more help with understanding how the code behind controller works. Another mentor helped me figure out why was my scale button was getting smaller instead of changing the object that I want to scale.

During the hackathon, I learned various concepts and terminologies that I am going to research more about, such as mesh, shader, and how different controller operate (browser war renewed in the form of VR controller in 2018….). I also got to talked to various professionals about their view on VR – VR artists, doctor, and Microsoft team. The later of which showed a Teia Solution building demo by Stereograph3D built with Babylon.js after I asked them about architecture in WebVR, which had my jaw dropped (you can do that in a browser?).

Being the only team to do the medical category… we won the medical category for the Weekend Challenge, but the greatest prize is the learning experience, which was my goal for the hackathon. This is the result:

And here our mentor having some fun with the app – doesn’t our skullman look happy? :

I also got selected to received the Mixed Reality headset, which was amazing and really helpful because I can’t afford a headset now. Once I get the set, I hope to do a review. In addition, since the project we did was true hackathon-style spaghetti code and geared toward Oculus, maybe I can clean it up and gear it toward the new headset?  I only did a very small portion of the codebase since I struggled a lot with the controllers, so I really hope to study more and get a better grip of what was done.

Doing React in 14 Hours: Hacking For Humanity 2017

“Damn, those kids are smarter than me!” I whispered to Jessica, who laughed and playfully slapped me in the arm. We watched in awe as the kids – middle schooler going to high school – talked about wanting to build their app in Java and the algorithm involved (“I didn’t know computer existed when I was in middle school!” “…We sound so old!”). The joy of hackathon – you see all sort of ideas and participants.

The Event

I was at DocuSign HQ for Hacking for Humanity, hosted by Girls in Tech and Hackbright and sponsored by DocuSign, Cisco, Kintone, Handshake, Memebox, and JINS. Topics we can select may include Homelessness, Sexual Assault, Domestic Violence, Human Trafficking, or Women’s Health.

The host decided to assign us into teams in advance. Like all events though, we have a bunch of MIA attendee – Missing In Action. So, those us missing members waited in line for reassignment. While there, I started chatting – which led me to me be invited into another team before the re-assignment.

We started as 4 person team – UI/UX designer Jessica and Tawny, software engineer Anoja, and myself as web developer. The host wanted a 5 person, so they assigned us Ryu, engineer and Kintone evangelist visiting from Japan.

Opening talk took the whole morning – Hackbright even did a Coding 101! For me, the most interesting part was listening to SF Safe House and Women Inc’s work and mission.

DocuSign CEO Opening
SF Safe House
W.O.M.A.N., Inc
Special gifts from sponsor Memebox

Since this hackathon didn’t have idea pitching, our team are formed without a project idea or even a common topic interest. My team eventually decided to go with Women’s Health: HerCare, a web app that extracts SFGov Opendata and list nearby free health care clinic, then help user to easily find transportation route.

UI working… on the DocuSign window, with the Bay Bridge as background pic.

Onto Hacking

Both Anojo and Ryu mentioned they know a bit of JavaScript, so I decided to go with React. As with all projects, I quickly encounter issues.

Styling in React

Being in a time-constrained event like hackathon, I decided to use Bootstrap. But altering DOM other than React is considered bad practice: Bootstrap contain its own JavaScript, which conflicts with React. The common suggestion online was to use react-bootstrap.

fetch() and Component Lifecycle

For some reason, console.log revealed that the state is not setting with the data I retrieved in fetch() when I use the OpenData API. Looking into React’s fetch(), I learned that it returns a promise that must be waited. Meanwhile, render() is also setting state and mounting. To ensure the state are set in the mounted component befire re-rendering is trigger, API calls with setState() should be done in componentDidMount().

Latitude & Longitude via Google Map API

While trying to get Google Map working, I spent too much time on the wrong npm packages. I had picked one of the recently updated one with a simple example, thinking it would be a snap.


Fortunately, when I finally switch to a different one someone recommended in Reddit (react-gmaps), it worked almost right away. After that, I needed to get the latitude and longitude by address – regular user obviously wouldn’t be entering their latitude and longitude.

Having been working with bunch of npm packages lately, I jumped onto the npm-package-solution again. Silly, since it turns out Google have an API for that.

*Sigh* The precious hours… Almost submission time!

Controlling State Updates via componentWillReceiveProps() & componentDidUpdate()

When users clicked on the parent component, LocationList(), which holds the address, it should updates the child component, GoogleMap(). The update involves calling the Google API that detects latitude and longitude.

So, another API call. I would use componentDidMount(), right? I mean, the React doc say so itself:

If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

…yea, didn’t worked. The question is why?

Well, the thing is that the map component (GoogleMap in this case) was first mounted, then its states changes when the parent component (LocationList) holding it passed down a new prop that activates an update – not a new mounting. What I need was componentDidUpdate().

But when I did the API call in GoogleMap and use setState to update the states with latitude and longitude data, the component itself will update, again.

This is an infinite loop.

That’s where componentWillReceiveProps() came into use. I set up a flag variable, “updated”. In the constructor, it is initialize as false.  Inside componentDidUpdate(), an if statement checks the flag. If false, we do the API call, setState, and set “updated” to true. After that, the subconsquent update from state change will not activate another API call because the flag variable is now true. Only if the component receive new props from the parent component LocationList(), – in another word, someone click one of the address listing – would the variable “updated” be set to false and thus activate the API call.

Deployment on Heroku

Unfortunately, I didn’t solve the infinite issue until after the submission. Fortunately, I have continuously deploy my site onto Heroku. Deploying React onto Heroku is acutally a snap. The Heroku team have a instruction page just for that: Deploying React with Zero Configuration. I do have do a npm run build to get it running, but after that, it’s smooth sailing.

Team Communication

Due to language barrier and differences in programming specialty, we ended up doing the same task by accident at first, so stop coding and checking in became essential. Though the programmers in my team knows JavaScript, latest JavaScript and web development best practices isn’t exactly their specialty. In the end, Ryu ended up finding jQuery to be easier to do. In hindsight, I should have realize that language barrier may prevent my teammate from using React, which had an all-English doc. Fortunately, Ryu was good with at AWS, which he easily use to deploy his jQuery.


Prototype: HerCare Location Listing
Prototype: HerCare Appointment Request
The demo! HerCare main page
Demo: HerCare Location List

The challenge of this competition was definitely communication and task distribution. It was a bumpy ride, but we eventually find our rhythm. Both Anojo and Jessica was inspired to do more hackathon, so I recommended July’s AngelHack in Silicon Valley to them – we will probably bump into each again as a result!

HerCare Team!

HackGen: My Experience at 2017 AngelHack

I managed to snatch a free ticket for the 2017 AngelHack, so I was off to another hackathon!

My team and I created HackGen, which grabs DevPost data and displays winning hackathon idea randomly, often resulting in quite hilarious results. Seriously, my team spent a good portion of time after code freeze in laughter. Some people’s hackathon idea makes no logical sense. I can only deduce that they wrote it after a long all-nighter and did not presented their project that way on stage.

For this hackathon, I participated predominately in the front-end features, making sure the data that my teammate, Ting-Wai To and Michael Snowden, are displayed in an aesthetic, user-friendly manner. Consistent with my coding habits, the site uses responsive design. The languages I used included HTML, CSS, JS, Ajax, and jQuery. The framework we used was Django. We started trying to host the site on AWS, but ended up using Heroku. The VCS was Git on both Github and Heroku. Our project works with Amazon Echo and also allows visitors to subscribe by using the SparkPost API.

The site started with the name HackPredict and was supposed to predict the chance of success for an hackathon idea:

Initial version, HackPredict

However, the collected data wasn’t enough for an accurate prediction. No matter what was input, the result remained between 40%-50%. Eventually, it developed into an idea generator:

HackGenerator, draft version. I have no idea who wrote that idea… (Fruit Ninja?)

And this is its final outlook:

HackGen, Final iteration!

Now, for the struggles and lessons:

In this case, I was reminded that Anaconda and Virtual Environment don’t play well together. My team had a lot of trouble. I was able to solved it by doing a simple conda install python=2.7.8. I think it helped that I have previously set up everything to work once already last month while working on a Slackbot with Django as backend. All I needed was to switch from Python3 to Python2.7. The other guys sounded like they had bit more trouble.

I also ran into trouble with static file management in Django, which according to Michael, is a common problem. When Ting-Wai wanted to use Bootstrap with static url, Michael and I were all going “No! Just CDN it!” Yea, we didn’t get along with it.

Ting-Wai apparently hates the Bootstrap progress bar, but Michael really wanted a progress bar. So, I went with a customized dot progress bar. Fortunately, while I know Bootstrap, I often practice coding in raw CSS to build my foundation, so it was easy to whip one up:

My teammates were surprise that I didn’t use Bootstrap at all for the site. I actually did started with Bootstrap, but I wanted more customization on the input and buttons. Besides, almost everyone use Bootstrap with very few customization in a hackathon, so why not take a different approach? For a small site, raw CSS is pretty easy.

I also had trouble once my teammate set up mysql with Django. I first got “Did you install mysqlclient or MySQL-python?” error, which persisted even after installing those packages. Following online suggestion, I homebrewed mysql-connector-c, which turned out to be a Python3 suggestion. I got a “Segmentation fault 11” error and wasn’t able to do a runserver at all. I uninstalled mysql-connector-c and looked up for new solutions. The golden solution:

export DYLD_LIBRARY_PATH=/usr/local/mysql/lib:$DYLD_LIBRARY_PATH.

*Sighs* I swear, setting things up probably took more time from my team than coding. I am not the one in charge of set up, but I can tell by the way my teammates acted. If this is an anime or cartoon, they would probably had smoke coming out of their ear. One of them rushed to a couch for a nap right after demo. There were a lot of demos too. The hosts had to divide us and the judges into 2 rooms, and I think we were the last few teams to demo.

I got to brush up on my front-end skill during that weekend and hang out with a lot of cool people. Got a bunch of nice goodies:

Amazon have notebook, t-shirt, and ninja sticker – who don’t like ninjas!? IBM have cool hexagon sticker and external usb port, the later of which I totally need for my Chromebook (only 1 usb port there). SparkPost is my favorite since I am a sticker collector: they have grid notepad and awesome stickers. Apparently, they have all the languages they supported sticker-ify, plus one more design for our beautiful Golden Gate Bridge!

All in all, it was a good hackathon, with awesome people, good amount of API challenge choices, cool goodies, healthy food and plenty of coffee, and a lot of fun demos and ideas.

D3, Data Visualization, & Bubble Wrap: Winning at the 2017 PDA Hackathon

Another hackathon? Do I really want to do two hackathon in a month? On the other hand, my last hackathon was as fun as it was intense. I really enjoyed it. Plus, this hackathon is hosted by Stanford library with digital archiving as the theme.

Archiving. Library. My inner bookworm is dancing. (Or wiggling?)

The temptation is just too great.

So, on a sunny Friday afternoon, I drove from San Francisco to Stanford, and my adventure at the 2017 Personal Digital Archiving (PDA) Hackathon commenced!

The hackathon was part of the PDA Conference. While I didn’t got to attend ($120 for late non-student registering), listening to the participants, the conference seemed to be very well done and highly-praised. They sounded so enthusiastic, particularly about the keynotes and agenda selections, that even I felt excited!

For me, the excitement was also twofold compared to a normal hackathon. I obviously enjoyed the chance to code a project with practical usage in a team environment. But I had also been a library assistant, a teen library council member, and an art history minor student. My love for the history of fine art and literature started when I was just a kid. To be with so many that shared the same interest was rejuvenating after so fully engaged into the tech industry in the last 2 years of my career change.

Naturally, when one of the attendee, Katie, talked about her intention to do a project that address email archiving issues related to her work as an art archivist, I was hyped up!

Art + Archiving = I Am In!!!

Our team decided to build a web platform that organizes and analyzes email in a shareable way. Having an art archivist that is passionate about her work really helped directed the project. While I had looked into Stanford’s email archiving software ePADD, without hearing Katie’s perspective as a professional, it was difficult to fully comprehend the importance of analyzing email and maintaining content privacy in the field of digital archiving.

Thus, with the project decided, our team “Girl With A PERL Earring” began our platform, Bubble Wrap!

Bubble Wrap Logo
Our Platform, Bubble Wrap

Katie and Natasha, whom were both interested in art digital archiving, created the wire frame using Proto.io. Lakshmi, whom was interested in analyzing email, tackled extraction method for a set of sample emails. She applied the NLTK toolkit with Python to extract the data into the required JSON file for our project.

Inspired by the MIT Immersion project Katie showed me, I researched into the project’s background. I knew I saw a similar graph built using a D-something library and 4j-someting while attending a DevWeek presentation. I was right. Immersion was a force-directed graph built using the data visualization D3 library and graph database Neo4j.

D3 LogoNeo4J LogoInital research indicates that D3 have a high learning curve. It required understand of jQuery chain methods, objects in JavaScript, CSS to style SVG, reading coordination… wait, I know those.

And the sample codes. It looks understandable.

I think I can do it.

Gosh, it would kill a lot of my brain cell. I mean, an entirely new library in less than 12 hours?


But yes, I can do it. Let’s do it!!!

Thus began an intense all-nighter that I haven’t attempted since I left architecture school. I did got 3 hours of sleep, but the impression that I didn’t sleep apparently got stuck in the event host’s mind. My teammates were also impressed with my energy. I have a feeling the most memorable part the library host and my teammates will remember about me is that I don’t need to sleep.

But hey, the result was worth it. The data visualization I created looked beautiful, and I learned so much!

D3 required a good grasp of SVG and not just basic CSS styling. I struggled with labeling the circle (it seemed to be a known issues. Text couldn’t just be drawn on the circle) and DOM query (SVG have their own set of query method).

I didn’t have time to go through tutorials, so I quickly analyzed sample codes that seemed applicable. From there, I selected specific methods to research. Force, a D3 module, have its own rules and requirements. In particular, it takes the array key, “source” and “target”, from the imported JSON file. I had changed the JSON keys to make it more applicable to our case, so I was confused when nothing was printing.

As morning came, the essential features of my graph seemed completed.

Working on Bubble Wrap's Graph
Working on Bubble Wrap’s Graph. Photo by Josh Schneider.

Then another issues occurred – our presentation is on Proto.io and Google Slide, so how do we present a dynamic demo? At one point, the discussion involved taking snapshot, but it would defeat the purpose of a moving demo. So, I quickly whipped up a Heroku page, looked into the right webpack (static), and pushed my code up. There, a dynamic demo site!

Bubble Wrap Force-Directed Graph
The Force-Directed Graph
Bubble Wrap Selected Network
Bubble Wrap Selected Network with Annotation Generated

By the way, it is now also hosted permanently at my own website, and it has a Github repo for the curious.

Proto.io was beautiful – elegant but clean. Sadly, while Lakshmi got the JSON set up, it was too late to link it to my D3 script. I ended up using a modified dummy code from the D3 tutorial. Fortunately, Lakshmi set a flowchart in advance, so she was able to go over how the Python script work.

Bubble Wrap Proto.io Login Page
Front/Login Page. Our Proto.io demo was created by Katherine Martinez and Natasha Culbreth.

To our excitement, we won a prize! The prize was for – and since it is long, I dared everyone to say this in one go really really fast – “Most innovative project relating to email management or archiving”.

Bubble Wrap Team Photo
Bubble Wrap Team Photo: Natasha Culbreth, Lakshmi Rao, Amy Chan, and Katherine Martinez

In total, I learned a whole new library in less than 12 hours, met new friends, got to hang out with archivists, listened to some really cool conversations, and won a prize. All in 12 hours!

Safety on the Street: The 2017 All-Women Hackathon

Have you ever been harassed on the street?

That was the question of the day for my team and I last Saturday, when  I attended the 2017 All-Women Hackathon hosted by Expat Woman at Pivotal Lab. The Hackathon have 7 challenges, as listed in their Eventbrite:

  • Engage more Girls in STEM
  • End the Gender Gap in Tech
  • Women’s Empowerment
  • Women’s Safety
  • End Gender Violence
  • Teach Boys/Men to Respect/Empower Women
  • Help Immigrant/Refugee women Navigate the US

My team’s chosen challenge is Women’s Safety, and the project idea stemmed from the experience of our team members, when some random guy just started yelling at them outside the street Pivotal Lab. The incident motivated Grace to go up stage and pitch her ideas, which brought our team together, which consisted of Grace, Magda, Daminika, Anju, Steph, and I.

safe-route team
The Safe Route team, hard at work

Our project is a web app would let user to search their destination using the Google Map API, but instead of just seeing the route, they will also see safety ratings. The rating would be generated from a combination of crime data and user feedback, showing keywords that indicates incidents that occurred. Users would be able to filter and customized feedback result base on time of travel and gender. Upon research, I saw that SFPD have Socrata OpenData set up. With the combination of the OpenData and Google Map API, the path to map a safe route in real-time is not far!

To coordinate our pace, Grace took the advice from one of the hackathon mentor to set up a hourly timer, and I started to write a to-do list that will let our teammates assign themselves to different tasks. Even though I introduced myself as a front-to-full developer, interestingly I ended up working with Grace to establish the data parameters that the app will query.

Using a mix of skills in JSON, REST, SQL (for OpenData’s SoQL), and ES6 JavaScript, I programmed a script that will extract the needed data from OpenData. Grace got an Express server running to connect my script result to Dominika and Magda’s part of the program that deals with Google Map API.

Doing our initial brainstorming, deciding on the project’s direction and presentation content took a lot of discussion. Thankfully, we had a good group of mentors who would periodically come by to talk with us.

In the end, we were able to get a Google Slides set up, a demo video recorded, and time to rehearse our presentation, all in 11 hours! Somehow, I ended up being the presenter, which was a bit nervous-inducing. Thankfully, it went smoothly.

safe-route snapshot
Final Product of our web app, Safe Route

Overall, it was fun to work on the project with my teammates, and my experience at this hackathon was very satisfying. We didn’t win the physical prizes, but the experience was a prize of its own.

Reflection of DeveloperWeek Hackathon 2016

I haven’t took the Muni for a while. I totally underestimated the time, missed a bus, and ended up way too late.

Not a good start.

By the time I was there, there is only about 10 minute before the main stage kickoff starts – wait, I mean I was late for breakfast.

What? Breakfast is a very important part of hackathon. Especially if you are a coffeeholic. Oh, coffee, my precious coffee.


The point is that everyone is there, chatting among themselves or the booth host, and I am still didn’t had my morning joe… wait, the booth is already set up this year!?

Well, at least I didn’t missed the food.

The main stage kickoff was late this year, and there were some momentary confusion about when and where it was to happen. It didn’t help that the attendees are split into 3 stories, with the lower story being the actual place for the main stage. I stalked checked up frequently on DeveloperWeek’s Facebook and Twitter account. Finally, someone came in to inform us that the kickoff is about to start. It was pretty much just each company introducing themselves and their Challenges, which was posted at Accelerate.im, DeveloperWeek’s website for the hackathon event.

The companies involved this year that caught my attention because they were either on Opening stage or holds one of the booth includes Galvanize, Codeanywhere, Concierge, Flowroute, HP, CapitalOne, Cortical.io, IBM, Intuit, Magnet, NetApp, RedisLabs, SparkPost, CloudBees, Weebly, and Shippo.

It would be way too long to go over each company. I may go over them in a later post?

The decision to come to the Hackathon was last minute, so I didn’t really know what Challenges there were or had a team. I met up with a friend, but she was in a team that uses Ruby, which I know nothing about other than the fact my favorite and very awesome food subscription box uses it for their website (Yep, I checked their job page. What? An internship with a food company would be awesome! Except they use Ruby on Rails. And they don’t need interns. *Sighs* By the way, the company is Love With Food. Great snacks, fun preview video, and they donate a meal for each box purchased. Did I mentioned that they are awesome?).

So, first task. Read Challenges and existing Projects. The Challenge from Shippo caught my attention quickly. I thought of the multiple subscriptions of magazines and boxes I have, and how nice it would be to view them on one site. But then, no one seemed to have similar Challenge, so I decided to wonder around the booth, attend the workshops, and learned more about the available tools. After all, learning was my objective this time. While several were interesting, none of them materialized into a web app idea in my mind like Shippo did. In the end, I posted my own Project online onto Accelerate.im. However, I think I might had been too late, and no one is looking to team up anymore.

Lesson of the day, start and decide quick in a Hackathon.

One of the workshop, IBM’s Bluemix, did caught my interest. It seemed like I could use it to build web app, where I could input my code for Shippo. However, in the end, it was in vain. There were several errors that I came across, and it wasn’t friendly enough for me to create a login system in 24 hours. In the end, I became too obsessed with it and wasted time.

Another lesson learned. In hackathon, do not obsess over non-essential problem.

I did created a PHP class to extract the information given by Shippo’s API. I used WordPress and its numerous plugin for user registration. But by then, I realized I wouldn’t finish on time. I took too much time with IBM’s Bluemix, and there were also some issues with the WordPress plugins. I could do an all-nighter to make up for the time – except I had a volunteer project due and a dinner party for my dad the day when the Hackathon ends. I did not want to fall asleep for either of them for a project that I will either not finish or finished very roughly. Promised responsibilities comes first.

In the end, I turn of my laptop and went to bed. The idea is there now. Even if the hackathon had passed, I still got a project started that I plan to finished after my current EduGarden app, so not all is lost. Plus, this way, I get to make a much more complete project, which is much more satisfying for my perfectionist side. My current EduGarden app is being done with a focus on secure programming practices and an aim of learning PHP MVC. While EduGarden is made to work fine in both mobile screen and even without Javascript, my second app – now title SubscribeTrack – will probably focus completely on mobile usability with an aim to learn css3 media queries.

The current project of SubscribeTrack is now on Github without the WordPress codes, temporary placed on hiatus until EduGarden is done.

Hacking EDU Training Day

What’s with Hackathon, loud music, and monochrome t-shirts freebies? And why large laundry bag (I think it’s actually taller than me. But then, I am only 4 feet 10) as freebies? Wait, this is a college Hackathon prep day, so I guess I can understand the idea of more laundry bag and more dark-shaded t-shirts to delay laundry duties. Aw, the good old days of living in campus-related housing.

Hacking EDU is coming to California in October. In preparation, Hacking EDU Training Day was hosted at Paypal last week. The event starts with a lunch at 12. Upon entry, I was greeted by 2 tables of t-shirts, as mentioned earlier (more shirts! Yeah for free t-shirts, though my drawers now have a distinctive collection of blue, gray, and black shirts). Then I grabbed some pizza and drink (Hmm… seems like Red Bull or some Red Bull fans had taken advantage of the event to spread the drink around. Coffee company had not. *sigh* I missed good coffee so bad that day.)

The place was packed and there wasn’t any empty seats. Fortunately, one of the booth people waved me over to borrow one of their chair. The “town-hall”, where the lunch and opening ceremony was held, also hosted several tech booths. The person I sat with was Mark from Gun.io, so his booth was the first one I talked to. I just started MySQL database this semester and is still new to CS overall, but Mark was enthusiastic about his work and ready to explain. Essentially, he wanted users to be able to travel between different browser or servers without losing the integrity of their data – to be able to sync in real-time effectively.

Next to us was the Pebble booth. I enjoyed using a regular watch, so I was curious about smart watch as well. When I had finished lunch, it was the first booth that I went over. The watch looked smaller that I’d imaged. Turns out we can purchase the original refurbished Pebble for only $50 at the event. They also have a Giveaway, but I didn’t won.

For the first workshop, I had planned to go to the one about apps on clouds. After looking at the Pebble watch though, I got interested about their workshop instead. In their workshop, I got to start a basic exercise. Pebble codes are mostly based on C (C again! I really need to study it this summer. But I also want to learn C++… choices, choices…), so I was a bit slow in typing it at first. Turned out I was not the only one – one of the attendees asked if the presenter, Kirby, can show one of the steps again. Kirby then informed us that the code was also located in Github. After a vote among the attendees in the room, it was decided that he would focus on the concept during the presentation, and we the attendees will try the practice later using the code in Github.

Chegg’s workshop was the second workshop I attend. They focused on security issues. Semi-quoting here because I was standing and couldn’t take notes – True to the nature of Hackathon, they have build a website (which displays the code that users type in, and allows multiple users to have their own place to code and demonstrate their result) for this event in 24 hours! The presenter used the website to show us ways that website codes can directly inject things, such the image of their dancing co-worker – if we are not careful. Then, they have a small competition set up, with winner being those who can creatively use the coding website. The first winner managed to make the browser screen into a ping pong game! I tried to make a hopping rabbit icon with a “taking over the world” message, but for some reason my HTML5 animation didn’t work on the website *sigh*  I wonder if it is because I didn’t do much HTML coding this semster.

The presenters also did several hack demo. While my eyes were totally preoccupy on why my animation wasn’t working, it was still entertaining to listen to what the presenters were doing and what hackers are capable of. Some of the things reminded of what I learned in CS network class, except I get to see it happen in real life!

For the last workshop, I decided to see what gun.io was like in actual demo after hearing all the talks at the booth. Following the instructions on gun.io’s Github page, I successfully got gun installed. I am not sure I got Node.js working though. When I installed that, the terminal outputted several errors message. I tried to follow along the demo, but I think either my installation wasn’t correct, or I missed a step, since the demo result didn’t look the same as mine. But then, the codes and instructions are on Github, so I can always try it later. I decided to focus on listening to the demo. Go Github! The event group would also send out videos later, so I can catch up on both events that I attended and events that I missed.

After that and some dessert (free ice cream!), we had the Closing Ceremony, in which the event people had total fun embarrassing two individuals that were fortunate enough to have their birthday that day. Then we had a founders talk from Boostrap and Twitter. The two converse well together, and I enjoyed the talk about how good design plays into the development of a good tech program and company.

After that, the days ends – It felt shorter than expected, although it was an eight hours event. Can’t wait for the actual Hackathon this October!