Tessel, Again

One of the highlights of my week was being a team leader for this round of the tessel hackathon, helping to bring in another victory for Grace Hopper.

The project, called Stop, Teaf! is designed to help to protect the user against the rampant herbal tea theft in the Grace Hopper kitchen. Simply slip a discrete tessel into one of your tea bags, and the  accelerometer module will sense a thief trying to snatch it. This sets off an alarm on your computer, and you will receive a command line prompt, into which you can type a stern message to the thief. Back in the kitchen, the tessel’s audio module will then robotically shout this message to the thief using text-to-speech technology. And if that’s not enough to scare them, there is also a little flag waving that says “Stop, thief!”

This time I wasn’t doing any of the coding or planning (although the result had some things in common with my first tessel project). Instead, I spent my time running around trying to help my team of four debug and refine the plan to fit the time constraints. We ultimately got the project fully functional about 5 minutes after the judges came by, but nonetheless we took home the “Best Campus Solution” award.

 

Advertisements

Week 8


Above: Ben, the office pup, distracting me from a lecture.

Just in time, here’s my Week 8 Post! We have now officially entered Senior Phase, which is much less structured. So this blog post will be less/differently structured to match.

Senior Phase 

Junior phase followed a daily pattern of lecture -> workshop -> review -> lecture -> workshop -> review. The workshops were very scaffolded and, based on the lectures, we knew pretty much exactly what to expect. The longest workshop would be about 6 hours.

Senior phase is much more open ended. There are only three large projects in senior phase, and we are given basically the entire day to work on them uninterrupted. Although there are still lectures and scaffolding (at times, more than I would like), it has been great to get really invested in a project, make a plan for it, and see it through without step-by-step instructions. On the whole I have felt much more relaxed and engaged.

We also start each day in senior phase with REACTO, a daily white-boarding practice. We are given an algorithm problem, and take turns pretending to “interview” each other, while the other person solves the problem on a whiteboard without the help of a computer. This is a crucial interview skill and has been pretty fun so far, although I’m hoping for some tougher problems!

The Project

This week we are all working on the same project, which is affectionately named “Grace Shopper.” We have been instructed to make an online shopping website (we can be “selling” anything) that allows users to browse, create an account, log in, add items to their cart, and checkout. It is a very thorough review of everything we learned in junior phase, from databases to front-end design.

We were assigned teams of 3-4, and I got lucky with mine. We have been getting along great and working very well together. We have decided to pair program, swapping partners every day or so. Even though that seems like it would cut our woman power in half, it has ended up being very efficient, since we keep each other focused and catch each other’s mistakes, usually, before they spiral out of control. We have decided to make a fake online farmers market, since one of our teammates lives on a farm in New Jersey and has tons of beautiful photos. Look out for the finished project here soon — it is due Wednesday!

Key Takeaway 

By far the most essential thing I have learned this week is Git, a system that allows multiple people to work on the same project, track changes, and merge different branches of work together. As you can imagine, this gets pretty complicated, and I have started to understand some more advanced techniques so that I don’t have to freak out right away when I get an error message. This is a pretty big life skill for a programmer, so I’m glad to be building it now.

 

The 6 Coolest things about ES6

giphy-1

ECMAScript 6 is the most recent update to JavaScript. Most of its features can be called “sugar”, things that don’t change the underlying processes or structure of Javascript, but make your code cleaner, easier to read, and more similar to code written in other common programming languages. Many browsers haven’t adapted to ES6 yet, but here are a few features that are already changing the way I write code, complete with examples.

  1. Arrow Functions
    • Some say that arrow functions are funny looking, but I think they’re beautiful. They especially help clean up your code if you are writing simple callback functions. For example, this is the code to sort an array of numbers from least to greatest without arrow functions:
      var arr = [15, 8, 4, 16, 42, 23]; 
      arr.sort(function(a, b){
          return a>b; 
      }); 
      

      And here is the code to do the same thing with arrow functions:

      let arr = [15, 8, 4, 16, 42, 23];
      arr.sort((a,b) => a > b); 
      

      Nice right? I don’t even know what I’m going to do with all my extra time now that I don’t have to write “function” or “return.” They also help with certain situations where you want more control over the “this” keyword, but I won’t get into that here.

  2. Default parameters
    • Another cool time saver. JavaScript allows you to call basically any function with basically any amount of parameters that you feel like at the time, which is cool,  but it can be problematic if you are writing a function and you expect all your parameters to be defined. It is often necessary to assign default parameters. For example, this function will say “hello” to you if you pass it your name, otherwise it will say “Hello, Earthling!” :
      function sayHello(name){
        var person = name || "Earthling";
        console.log("Hello," + person + "!");
      }
      

      There are a few other ways to assign defaults pre ES6, but as far as I know, they all require at least one extra line of code. Enter ES6 Default Parameters:

      function sayHello(name = "Earthling"){
        console.log("Hello," + name + "!");
      }
      

      Boom, there goes that line. Now, that might not seem like a lot in this context, but for functions with multiple parameters, you’re saving yourself a lot of code.

  3. The for…of loop
    • ES6 does some really nice things for arrays, and the for… of loop is one of them. This loop has the potential to be pretty life changing, since basically everything that happens on a computer requires some array or array-esque thing to be looped through. Here are a few ways to loop through arrays the OLD way. You could use an old-school for loop:
      var arr = [4, 8, 15, 16, 23, 42]; // assume this line in each ex. 
      for (var i = 0; i< arr.length; i++){
         console.log(arr[i]); 
      }
      

      This is still sometimes the best option because it gives you total control over the array and the manner in which you’re iterating over it, but it’s not very semantic – the words on the page don’t tell you a lot about what you are trying to do. Enter for each, which is more semantic but annoyingly requires a callback function:

      arr.forEach(function(num){
         console.log(num); 
      }); 
      

      This is more semantic, since it tells us that we are performing an operation “for each” “num” in the array. And, admittedly, you can clean up the callback with an arrow function, but this is still just too much thinking sometimes. Pre-ES6 you still have one more option, if you REALLY want to, of using the object iterator for…in:

      for (var idx in arr){
         console.log(arr[idx]); 
      }
      

      This is a pretty good option, but we’re back to referring to array elements by their indexes instead of by name. Enter ES6’s for…of loop!

      for (let num of arr){
         console.log(num); 
      }
      

      Ahhh. perfect. So sleek, so clean, so semantic, no callbacks. You can even make other objects iterable in this way, although I’m not sold that that will ever be a good idea. Time will tell.

  4. Assignment with Array Destructuring 
    • Let’s say you’ve got an array of stuff and you want to give names to that stuff. You could do that the old way:
      var prices = [2, 45, 6, 19, 32]; 
      var cookie = prices[0]; 
      var lobsterDinner = prices[1]; 
      var rest = prices.slice(2); 
      

      Now cookie = 2, lobsterDinner = 45, and rest = [6, 19, 32]. It did the job, but that was pretty hard to look at. Enter ES6:

      let prices = [2, 45, 6, 19, 32];
      let [cookie, lobsterDinner, ...rest] = prices;   
      

      Nuff said.

  5. The Spread Operator 
    • This thing isn’t all that handy, except for when it’s VERY handy. Putting a … before an array essentially chops that array up into its individual elements, particularly in the argument of a function. Here’s a cool example. Say you want to find the maximum element in an array of numbers. You could do it the yuck way:
      var max = Math.max.apply(null, arr); 
      

      Or the ES6 way:

      var max = Math.max(...arr); 
      

      Much cuter. You can also do it in reverse, which comes in handy when you’re trying to convert the arguments object into a proper array. The old way:

      function example(){
         var args = Array.prototype.slice.call(arguments); 
      }
      

      I’m sorry I made you look at that. Let’s do it with ES6:

      function example(){
         var args = [...arguments]; 
      }
      

      Nice. Edit: You can even do away with the arguments object complely by simply declaring your function thusly:  function(...args){}

  6.  Sleek object assignment 
    • I don’t actually know the technical name for this thing, or if it even has a technical name, but it’s awesome. Let’s say you want to create an object based on parameters in a function or some other variables that you have laying around. And let’s say you want the keys in the object to have the same names as the variables. This could get very repetitive:
      function eatYourVeggies(carrots, broccolini, beets){
         var veggieObj = {
            carrots: carrots, 
            broccolini: broccolini, 
            beets: beets
         }; 
      }

      but not with ES6!

      function eatYourVeggies(carrots, broccolini, beets){
         let veggieObj = {carrots, broccolini, beets}; 
      }

      Never again will you experience the agony of writing the same word twice in a row.

There’s a lot else to love about ES6. Const and let, for example, or native promises. But these 6 examples stand out to me as the most simple, elegant, and readable. I can’t wait to start using them!

 

Week 5


What we learned/did

  • This past week was unique in that we focused exclusively on learning a single technology, and we practiced it through a single workshop that lasted all five days. The focus was Angular.js, the final element of the ‘SEAN’ (Sequelize, Express, Angular, Node) stack taught at Grace Hopper. To put it simply, Angular is magic. To put it a little less simply, it is a front-end framework that you can use to make websites interactive in a MUCH more elegant way than JQuery. Beyond that, using Angular adds a lot of structure to your code, naturally dividing it into small, single-purpose and manageable parts that are easy to read and follow. One of my biggest complaints up until this week was that we were not learning how to structure our projects in a logical way, but working in Angular for just one week has given me a very good sense of how to divide things in a way that makes sense.

My favorite parts

  • Well, I  guess I just gushed about Angular for a paragraph already, but I can keep going. There was this one moment when we had written out code for an entire workshop using some pretty complicated event emitters, and then the next day we learned how to use states in Angular. We went in and refactored everything, and we got rid of all the confusing stuff. Our code ended up being about half as long and way prettier. It was this satisfying:
    gif
    Also, we had a very cool CS Saturday workshop about cryptography. I can now tell you all about why large prime numbers are useful in encryption, as long as you don’t know anything about it yourself.

Code and the city

  • There were a couple of days this week that weren’t oppressively hot, which was pretty great. I went for a walk across the Brooklyn Bridge with one of my classmates and saw some pretty incredible views of the city (and a ton of great views of people taking pictures of the city). We also had our weekly learning team lunch on the Elevated Acre, a very pleasant park made of Astroturf which is, in New York, considered to be a form of nature.

My overall thoughts/opinions

  • Yay Angular! I can’t believe we only have one week left of junior phase, it’s such a blur!

Week 3

tessel hackathon project

Our prizewinning project for the Tessel hackathon

What we learned/did

  • Most of the week was dedicated to understanding promises, a structure that allows you to write readable code for handling asynchronous operations. Without promises, it’s very easy to get lost in a sea of abandoned brackets and semicolons whenever you’re trying to get the computer to do multiple things that take time, like connect to a server or database, and you need to wait for those things to happen before you can do something else. Promises make it way cleaner and easier to read (and apparently faster to process?) but are also a bit tricky to wrap your head around at first, so it’s good we had a full week of introduction to it.
  • We also did a couple of projects using sequelize, which is a library that is built on promises and allows you to query a database without using SQL (just when I was on a roll)
  • Lastly, we had a test on friday to see how we were doing on sequelize and express. I actually enjoyed it, spending two hours silently coding on my own was, in a way, a good change of pace from pair programming, and it was good to be able to see what I could do without help.

My favorite parts

  • On Friday afternoon, we had a tessel hackathon with the Fullstack Academy students. I’m proud to say that my group took home the ‘most creative’ prize for building a machine that could sense an awkward silence and play cricket noises, wave a ‘well this is awkward’ flag, and text you a conversation starter. I’m especially proud of this considering that the other two winning teams were all men, and my team was all women.

Code and the city

  • I figured out the metro card thing. You have to keep it in your wallet and not let it rattle around in your bag with your loose change. Still though, MTA, if you’re reading this, you need to get over this whole magnetic strip thing, it’s 2016.
  • I’m about to go above 14th street for the first time since living here. Wish me luck as I enter the grid.

My overall thoughts/opinions

  • This was a pretty fun week! I learned a lot and I also had some really good partners that made it go by quickly. It kind of felt like one long day with naps in the middle.

Week 2


Stuff we learned/did 

  • This week we left the friendly and familiar land of JavaScript, which had been starting to feel almost as natural as writing in human English, and entered the murky waters of “The Back End.” In developer speak, this means servers, Internet protocols, and databases (mostly just servers, if you want to get technical, but the other two are deeply involved). JavaScript was originally designed to be a front-end language, but with Node.js, it has become possible to use it for back end tasks as well (and in some ways it is very well-suited for this). Basically everyone and their mother has written some or other library that extends the capabilities of Node.js, and many of them are very useful. What that boils down to is that we have been learning a new technology about every 2.5 hours.

My Favorite Parts 

  • SQL is a programming language designed specifically to work with databases (arguably the programming language for databases). This week we learned SQL in about 24 hours. I went from knowing nothing about it to being quite confident in my ability to use it for normal tasks. That was pretty cool

Code and the City 

  • I’m still trying to like this place. I’m currently mad about the fact that I have to swipe my subway pass about 20 times before it will let me in, which causes me to miss a lot of trains and get a lot of funny looks, but I still have 3 days left on it so what can you do.

Overall Impressions

  • I can no longer complain that this is too easy.

Foundations

Blueberry smoothie and a page from Eloquent Javascript
My typical workspace. Blueberry smoothie and a smoothie-stained printout of Eloquent Javascript.

I recently completed Week 3 of Foundations, which is the remote course that makes up the beginning of the Grace Hopper curriculum. We are spending this time building a strong foundation of knowledge so that we can get started right away with the tougher and more interesting stuff when we arrive on campus.

In order to be accepted at Grace Hopper, you already have to have a pretty good grasp of the basics of programming (loops, arrays, functions, recursion) and be confident enough in your abilities to complete some tricky challenges in a timed test. So far in Foundations, we have reviewed those topics on a much deeper level than I originally learned them. I thought I knew what an array could do, for example, but I had only scratched the surface before now. The major themes so far have been object-oriented programming and inheritance, but I’m not going to try to explain that here, check out my links if you’re curious!

The structure of the online course is a combination of videos recorded by Grace Hopper and Fullstack Academy instructors, followed by coding challenges. One recent coding challenge involved rewriting some common methods that are built into JavaScript, which I found to be a really helpful exercise. There are also a number of outside resources that we are expected to complete. We all have access to Codeschool, which is an extremely informative (if a little dry) tool for learning a variety of coding skills. Codeschool has been our main source for lessons on HTML/CSS, and even though I thought I was relatively experienced in that area, I still learned a lot from the tutorials.

The foundations instructors have been very responsive and helpful. There is an online forum where we can communicate with them as well as with fellow students, and I’ve been able to get all my questions answered pretty quickly.

Overall, I’ve enjoyed foundations a great deal, but I can’t wait to get on campus and start learning around other people who will shame me if I spend too much time on Facebook or take a break to watch 3 episodes of Sex and the City.

p.s. One of our assignments was to make a simple guessing game to practice our html/css. I find it weirdly fun to play. Check mine out here!