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.

 

Advertisements

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 6


What we learned/did

  • We finished up Juke this week, which was our 5-part angular workshop. It was a relief to be done with it, but then I ended up redoing most of it on my own time.  We had an assessment about Angular on Friday, and redoing the workshop was a very good way to study. Plus everything makes way more sense the second time you see it. The assessment itself was (don’t hate me, any fellow classmates who might be reading this) pretty fun. It’s nice to break out of the pair programming routine now and then and just spend a couple silent hours really focusing on your work. Plus, I love Angular, as you might have guessed if you’ve been keeping up with my blog.
  • We also briefly explored web authentication, which is one of those really huge things that I never would have thought to learn on my own. I now know how to make a website that you can log in to, which has become pretty essential. And that thing where it says “log in with google”? Yeah, I can do that too.

My favorite parts

  • We had a pretty fun Harry Potter themed cyber security workshop called ‘Defense Against the Dark Arts. I find that even (especially?) as an adult, Harry Potter references really help me focus.
  • I have also gotten more serious about algorithm practice on my own. There is a prize for anyone who can reach level 4 on codewars by the start of senior phase, so I’ve been working on some trickier problems. I’ve also been attempting to write out code by hand and test it on paper before trying it on the computer, which is very useful and also very very frustrating.

Code and the city

  • I’ve escaped the city for the long weekend (see trees below) and the fresh air and unobstructed views of the horizon are pretty nice. But New York was also quite nice this week, weather wise, and I’ve found a few spots next to raised gardens where, if you crouch down and ignore your peripheral vision, you can make yourself believe that you are surrounded by nature, which helps with the sanity.
  • I’ve had a lot of really excellent falafel this week, mostly from the Halal truck parked tantalizingly between my gym and Grace Hopper, exuding the smell equivalent of siren song, but also from Roti, which I pass by all the time but tried for the first time this week and highhhhhly recommend.

My overall thoughts/opinions

  • I can’t believe junior phase is over! Looking back, I have learned so much, a lot of which I would never have taught myself. We have learned to connect databases, server-side code, and code for the browser through http and AJAX requests. We have been exposed to a vast number of npm libraries and dived deeply into a handful of them. That said, I am very excited for senior/project phase, where I can use more of my own creativity and problem solving abilities. I’m looking for some project ideas, so if you have any, please send them along!

Week 1


I just completed week one at Grace Hopper! Here are my thoughts.

Stuff we learned/did 

  • The theme this week was computer science fundamentals. We had a very targeted review of some topics that, apparently, are quite common in interviews for junior-level developers. These included:
    • Data Structures! We built models of queues (a word I just learned to spell), linked lists, and binary search trees in JS.
    • The DOM! I, and many of my classmates, I think, had previously been relying on JQuery to make our websites interactive (because, like, why wouldn’t you, JQuery is magical). We learned to access and update elements in the DOM (like the paragraph you’re reading, or the header on this page, or the link you clicked to get here) without any of that Jquery magic, and even wrote a program that performs some of the magic of JQuery, making it seem less magical.
    • Algorithm efficiency! We learned about big O notation, which is a vague and imprecise (yet useful and omnipresent) way to describe an algorithm’s run time. I already knew all about this because I played guess my number with my 6th graders. Literally. You learn everything in the 6th grade.
    • Sorting! We implemented bubble sort and merge sort. It was a really great programming exercise and I kind of wish we had written more search algorithms, it might be something I decide to do on my own time.

My Favorite Parts 

  • Pair programming: in each workshop we are assigned a different partner who we work with the entire time. This has been a really great way to get to know my classmates better, and it also makes 6 hours of basically nonstop programming way more doable. Another benefit is that it forces me to talk through my ideas and make sure I really understand them, usually while drawing many scribbly diagrams. I can now do a breadth-first search in my sleep.
  • Game night: Settlers of Catan and gluten free pizza… What more could I ask for?

Code and the City 

  • New York has always intimidated/overwhelmed/disgusted me, and now I live here! I’ve heard that it’s better to live in New York than to visit, and I have to agree. It’s great to have a nice, quiet room to retreat to at the end of the day (although by doing so, I am contributing to the gentrification of yet another Brooklyn neighborhood, so there’s that).
  • I actually really like FiDi, where Grace Hopper is located. The streets are twisty and turny and you can never tell where you are. To me, the flowing streets feel way more natural than a harsh grid and it makes the whole place more liveable.

Overall Impressions

  • I have  to say that I expected the work to be quite a bit harder. The workshops are challenging enough, but there hasn’t been anything that I really struggled to finish. I am definitely learning a lot, but in general I expected the pace to be faster for such a short program. We will see if it picks up in the next few weeks.

Stuff I started using 

  • If you ever need to take notes on a coding lecture, I recommend Quiver from the App store. It lets you go back and forth between normal text and nicely formatted code pretty seamlessly. I never pay for apps, but this was a good use of $10.