Grace Shopper!

Last week’s project, Grace Shopper, is officially deployed! It is a fake shopping website where you can browse products, create an account and login, leave reviews, add items to your cart, and even enter your credit card to checkout (although I wouldn’t recommend it since there are no actual products). You can check it out here!

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

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!

 

Goals for Review Week

Week 7 at Grace Hopper is Review Week, a time to take a few assessments and independently study anything that might be useful for the upcoming project phase. This is my to-do list to keep myself on track!

UPDATE: Looking back after the end of review week, here’s how I did.

1. Complete the ES6 Codeschool course
2. Brainstorm million-dollar web app ideas
3. Get to 4 kyu on codewars
4. Venture above 45th street
5. Make a Chrome web extenstion
6. Watch some videos of old Grace Hopper tech talks and come up with a good topic
7. Blog about how easy and beautiful it is to make a search bar in Angular I decided to write about the beauty of ES6 instead 

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!