fullstack academy

The one where she’s in over her head

Here’s a general picture of how my first 6 weeks at school went.  My instructors can confirm that this is pretty much how things were, although it’s possible they’re no longer working in education after working with a few students like me.

The day begins.  Unlimited possibilities!  I take notes through a 90-minute lecture covering server vs. client, NPM, expressJS, websockets, templating, and swig. It all makes perfect sense.

Sit down for coding portion of workshop, open on the web portal.

Try to figure out what expressJS is.  In the middle of an article from Daily JS, I am encouraged by TA’s to, ‘Just play around with it, you’ll figure it out!’ I use the terminal to accidentally create an express project in a nameless folder.

Get about 50 errors trying to create a Sublime command in terminal, because of .. something.  A bunch of “You are about to… Are you sure?”

No, damnit, I’m not sure.

Give up.  Drag each file individually into Sublime.

confused stick figurePuzzle through all the cryptic files in the express project.  Try to figure out how they fit together.  My instructor is trying to tell me something but the node console is now flashing red and yellow error messages, over and over and over.  I can’t get it to stop.  I can’t get it to STOP!

Restart my terminal.  Restart my browser.  Forget my workshop portal password and wait for the reset email to come through.

Look through the files some more.  Try to figure out where I’m supposed to type.

Oh no!  The internet is down!  Wait — that was just my mouse USB coming unplugged.

Re-plug mouse.  Finally manage to get some text from Sublime into the browser.  Then the whole thing shuts down again.  “undefined,” something something, no line number, …

Coding classmate comes by and asks if I got p6 working yet.  I’m still on p2.

25 minutes later… Turns out I put my jQuery code before loading jQuery into my file.  Also you’re not supposed to make an unnamed express project.  Also I wrote ‘sting’ instead of ‘String’.  Someone is trying to explain to be about how capitalization matters in JavaScript but not in HTML.  Someone else is talking to me about my abysmal indenting.  Also, when the directions said to delete line 12 of app.js, they actually meant line 13 of app.js, because expressJS has been updated since these directions were written. And my crash is due to … … one or more of these, or maybe something else.

On to p3.

Advertisements

Luxe: Upgrade your AirBNB

At FullStack week 8, we are each given 10 days to create a personal project that leverages our skills in JavaScript into an app or plugin.Screen Shot 2014-10-06 at 11.23.29 AM

My app tackles a question often asked by AirBNB hosts: What is the simplest way to make my space/experience worth more to potential guests?  My answer: Luxe.

Luxe is a CMS platform that lets any AirBNB host become the local tour guide/luxury concierge for their guests by creating a beautiful custom website for their property that gives their guest activity suggestions, best restaurants in the area, and tips for getting the most out of their stay.  Luxe AirBNB guests need not do a lot of planning for their visit, as their host has already done the legwork and saved links and directions into their site.

Best Features:

The mongoose schema was carefully crafted to anticipate the host’s and guest’s needs, including information for international travelers.  As part of the effort to make the site easy to set up, we scrape the AirBNB listing to get all the user’s pictures and critical info and automatically add it to their listing’s database schema.

Screen Shot 2014-10-06 at 10.59.30 AMScreen Shot 2014-10-06 at 10.59.47 AM

 

In order to make the process easy for hosts, I wanted to make their site mostly functional before the host even touches it, so that all it needs is a few pieces of information from the host.  I’m very proud of the UI, which came out beautifully with added hover events, carousel click events, and tooltips — all part of my effort to pre-load the site with beautiful pictures and minimize distracting (but useful) text.

Biggest Challenges:

Every CMS faces one huge challenge: the uncertainty of user input.  I had to allow for any case, including the possibility that a user would leave an input or an entire section blank.  On the other end of the spectrum, I had to make character limits to protect the integrity of the layout.

Screen Shot 2014-10-06 at 11.22.35 AM

This project required the creation of two integrated but separate sites: one to attract hosts and help them manage their listings, and another for guests to view their host’s website.  With grunt combining my stylesheets on load, I had to ensure that the styles for the former would not interfere with the latter.  And when dealing with this much CSS, it became a challenge to find things unless I kept my code well-organized.

Closing thoughts: Not every good project stems from an original idea.  But what made this project my best yet was the investment I felt in it as a creative yet practical solution to a real-world problem.  This is one case where web technology has the potential to truly make a world of difference for tens of thousands of AirBNB hosts, many of whom support themselves partially through AirBNB hosting, as well as for the many guests who are interested in a luxury experience with less cost and more flexibility.

g-habilitate: Hacking Tessel

When I heard that my school FullStack Academy would be co-hosting a hackathon with Technical Machine, makers of the tessel, I had mixed feelings.  I felt very excited to be part of my first hackathon and try to build something in a mere 8 hours.  On the other hand, I’ve never felt great about my hardware skills, and I worried that I would be out of my depth.

First, some explanations:

Tessel is tiny a micro-controller that can be programmed with JavaScript.  It supports a number of small hardware attachments/sensors such as GPS, accelerometer, sound meter, Leap Motion, camera, etc.

As soon as Tim and Eric from Technical Machine demoed the tessel, I knew what project I wanted to do.  I’ve been intrigued of late by the wonderful new tools to help patients with motor delays and motor tremors, such as the new spoon that helps people with tremors eat independently.  I saw tessel as a great tool to use for patients to be able to see and track their hand motions in order to gain better control over them — a treatment called biofeedback.

Our plan was simple: we would track the x-, y-, and z- coordinates of a handheld tessel with an accelerometer attached, send these coordinate changes from the tessel to our computer server and from our computer server to the browser, and render them in some kind of visualization.  We would call it g-habilitate: g for gravity.

Implementation was not so simple.  We quickly discovered a major problem — the back-end and front-end did not communicate well.  The back-end needed a separate websockets module for NodeJS, so we were now using two different websockets modules.  The back-end websockets module would only send buffered variables; the front-end would not accept buffers.  The rate at which the accelerometer sampled was too fast for the front-end to keep up given our overtaxed wifi connection, so our visualization was laggy and jerky.  Because no one had tried this exact type of project before with the tessel, we had to fly by the seat of our pants to solve these problems.

We split the work together and got to work.  We had a great group, and got our g-habilitatessel_handte working just in time to present.  Out of 11 groups, we managed to snag “Best Real-World Application” and a fantastic prize provided by the folks from Technical Machine.

A few takeaways from this experience:

  • There’s nothing like building from scratch to really understand how the elements fit together.  Before starting, I would have said I have a great understanding of how nodeJS, websockets, and the front-end work together.  Now that I’ve done this project, I’m wiping the oil off my hands — I don’t just know how they work, I’ve wired them together and seen the gears turning.
  • There’s something very freeing about a time limit that keeps you focused on the big picture.  We didn’t have time to get bogged down — we had to keep our momentum going.
  • Visuals trump idea every time.  Arguably the best idea at the hackathon — a running app that would time the beat to your steps — didn’t place because their demo didn’t come together in time.  An arguably less interesting and less useful idea — using the tessel to take stop-motion photography and stringing it together with photo software– took first place with beautiful panoramic visuals.  Something to keep in mind for future hackathons…
  • 100 lines of code can take infinitely longer to debug than 1,000 — especially when there’s a lot of cross-communication involved.  But I have never been so proud of the 100 lines of code we put together.  Thank you to Jacques and Jonah, my intrepid teammates who kept us on track and turned a vision into a great hack.

View our project on github.