NerdWords

Here are the things i try to remember whenever I'm creating a bare-bones single-page Angular application with Express on the backend.

If you've ever needed to write an app really quickly for a hackathon or maybe a coding take-home for a job search, and you work with Angular, this post is for you. I'm not going to cover the intricacies of building an Angular and Express application. This is just a checklist of all the little pieces to remember to add. If you miss one of these, to quote XKCD, you will not go to space today.

What's not included:

Just to be perfectly clear, this walkthrough only covers a basic Express application setup. You may notice I've not included some things that might seem basic or required. I may come back later and add them - but my goal was to walk through the things that are required for almost every single application you might have to throw together quickly. This checklist is built for someone who wants to show off their front-end skills (which is often a good idea for something like a hackathon, where you'll be presenting a final product, not your actual code-base). For this reason, I've excluded some features from this checklist, the most notable of which are:

Authentication: Not all apps require authentication. And those that do have very different requirements - some require local authentication with salted passwords, some require setting up OAuth with various providers (but which ones? Google? Facebook? Twitter?), some require setting up OAuth on your own API, etc etc etc. As such, I have not gone into authentication below. If you'd like to add authentication into your app, I recommend checking out Passport.

Database: You might think it strange that there's no database! But if you're building an app for a take-home or hackathon, you might not need that kind of backend logic. You might just want a facade front-end that you can develop. Also, which Database would you want to use? SQL? MongoDB? I may later write some posts on full MEAN and SEAN stack application setups. I didn't want to dig into it with this post, for brevity.

So what did I choose to include in this checklist? This checklist assumes you are attempting to:

build a single-page Angular 1.x application on the front-end

deliver a single index.html page using an Express app

deliver an API from an Express app, which will be consumed by the Angular app

deliver static files (CSS, JS, etc) from an Express app

Directory Structure

Before we get started, thought I'd share the file and directory structure. Feel free to create any of these files now, to get yourself started.

project | +-- main.js (Express app) | +-- index.html (HTML where your app will run) | +-- api (API routes for sending data to Angular front-end) | | | +-- index.js | +-- public (for static files, like JS and CSS) | | | +-- js | | | | | +-- script.js (Angular app) | | | +-- css | | | +-- style.css | +-- node_modules (this one is created automatically below)

Dependencies: Node & NPM

You will need to have Node and NPM installed to make this app work.

To install dependencies, create a package.json using the npm init command at the top-level directory of your app.

You can follow along and npm install as we get to each step, or if you prefer to cover your bases now, you can just run the following npm install command:

npm install --save express body-parser angular angular-ui-router

Express Checklist

Time to build an express app!

1. Install Express

To get started, make sure you've run npm install --save express (unless you preinstalled all dependencies).

2. Create an Express App

In your main.js file, instantiate your express app with the following code:

var express = require('express'); var app = express();

3. Add Body Parsing

Add your body parsing functionality. This will allowed you to parse JSON and form data from your app.

Ensure you've installed the body-parser npm package.

Then add body parsing middleware to your app, like so:

var bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false}));

4. Add an API Router

You're going to need to create an API router next. This will catch any requests to /api and send them to a separate router that will handle them.

To add the router to your Express app, use the following lines of code:

app.use('/api', require('./api'))

Then create a folder named api. In that folder, create an index.js file, and add the following content:

var express = require('express'); var router = new express.Router(); // handle requests, or send them to another subrouter module.exports = router;

This index.js file will act as a sort of dispatcher for all API requests.

5. Add Static File Routing

For this app, you will at a bare minimum need to serve the static files for your Angular application. You may also want to serve CSS files, Bootstrap, Foundation, or other JS libraries and/or frameworks. (Though heads up, I recommend not using jQuery if you're already using Angular - that's a lot of JS to bring into your frontend)

To serve static files from your node_modules directory, where the Angular script was added, add the following code to your main.js file:

app.use(express.static(_dirname + "/node_modules"));

Make sure to use dirname for any other static directories you want to serve. If you want to also serve a "public" directory, add this line to your main.js file as well:

app.use(express.static(_dirname + "/public"));

6. Serve the Index for All Other Requests

In order to actually serve the application, you'll need to send your index.html on any other requests received. To do so, add the the following code to your main.js file:

app.get("*", function(req, res, next) { res.send(_dirname + `/index.html`); })

7. Add Error Handling

Error Handling Middleware: Make Future You Happy.

Seriously, everything is better with error handling - I highly recommend ensuring you have some good error handling middleware right from the beginning, yes even for hackathon projects (actually, especially for hackathon projects - you'll need that itme you might have lost to debugging).

To add Express error handling middleware, add the following code to your main.js file:

app.use(function(req, res, next, err) { res.status(err.status || 500).send(err.message || 'Internal Server Error'); })

8. Listen on a Port

Select a port (in the example, I've used 8000), and add this line at the bottom of your main.js file:

app.listen(8000);

If you're planning to deploy to a service, like Heroku, you can also do the following:

app.listen(ENV.port || 8000);

Angular Checklist

You Angular application will be in the public/js/script.js file.

1. Instantiate Angular App with UI Router

You'll need to remember to create the actual app object that'll be used throughout your Angular code.

var app = Angular.module('MyApp', ['ui.router']);

Don't forget to inject the UI Router!

2. Configure App Settings

You're going to need to configure your app to:

Fix the route prefixes (to avoid having "#" in every URL)

Provide a route to which the app will default (in the case of an unrecognized URL)

This will all happen in app.config(function() {}).

To do this, you'll need to inject the locationProvider and the urlRouterProvider.

Let's do this:

app.config(function($locationProvider, $urlRouterProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/') })

index.html Checklist

In order for your Angular app to work correctly, you'll need to remember a few key things to add into your index.html file.

1. Create an Index.html File

I'll start with a basic, valid HTML page with no content, like so:

<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> </body> </html>

From there, we'll make sure to load in all the things necessary to make the Angular app functional. Many of these are mission critical - if your app feels like it should be working, but it's not, definitely check that you've done all of these.

2. Load in Angular

Remember to load in Angular itself! It's easy enough to forget. But we've set up a static route for it and everything, so let's be sure to add it into the <head>, like so:

<script src="node_modules/angular/angular.min.js"></script>

NOTE: The exact route within your node_modules MIGHT change in a later Angular release. Please double check that this is the correct path.

3. Load in the UI Router

You'll also have to remember to load in the Angular UI Router into the <head> like so:

<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>

NOTE: The exact route within your node_modules MIGHT change in a later Angular UI Router release. Please double check that this is the correct path.

4. Load in Your Application

Again, easy to forget, super critical to not forget. Same as above, add to the <head> in your index like so:

<script src="js/script.js"></script>

5. Bootstrap the Angular App with the ng-app Directive

Do not forget to use ng-app so to bootstrap your Angular application. It must be somewhere in your HTML - specifically, in a node that is going to be the parent of all nodes that you want to have Angular functionality.

Can't stress this one enough - if you forget this for some reason, absolutely none of your Angular code will work at all.

I usually like to add the ng-app to the <body>, like so:

<body ng-app="MyApp"> </body

If you're building a complex application that requires multiple Angular applications, you might end up loading in different ng-app attributes in different parts of your HTML.

You could also choose to add the ng-app directive to the <html> element.

6. Add a UI View for the Angular UI Router

You're going to need to decide what aspects of your page will change when the Angular router changes states. Typically, common components like the navbar, footer, or maybe even sidebars might remain the same, and the "content" of the site will change.

You can either add the ui-view as an HTML element, like so:

<ui-view></ui-view>

Or you can add it as an attribute on an HTML element of your choice, like so:

<div ui-view></div>

This really is up to you, and depends on the structure of your app.

7. Add a Base URL

If you want UI router to work correctly in HTML5 mode, which we added earlier to our Angular files, we need to add a <base> element inside the <head> of our HTML, and set it to our base route ("/").

<head> <base href="/"> </head>

Appendix: Putting it All Together

In case you'd like to see the files in their completeness, they are as follows:

main.js

Here is the main.js containing the Express app:

var express = require('express'); var app = express(); var bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use('/api', require('./api')); app.use(express.static(_dirname + "/node_modules")); app.use(express.static(_dirname + "/public")); app.get("*", function(req, res, next) { res.send(_dirname + "/index.html"); }); app.use(function(req, res, next, err) { res.status(err.status || 500).send(err.message || 'Internal Server Error'); }); app.listen(ENV.port || 8000);

api/index.js

Here is the api/index.js file:

var express = require('express'); var router = new express.Router(); module.exports = router;

index.html

Here is the index.html file:

<!DOCTYPE html> <html> <head> <title>My App</title> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script> <script src="js/script.js"></script> <link rel="stylesheet" href="css/style.css"> <base href="/"> </head> <body ng-app="MyApp"> <ui-view></ui-view> </body> </html>

public/js/script.js

The Angular code in the script.js file will look like this:

var app = Angular.module('MyApp', ['ui-router']); app.config(function($locationProvider, $urlRouterProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

Hiring in tech is a big issue. There were two great talks on the topic - one focused on helping engineers sell find work they love, and another focused on helping promote more women and inclusion in technology.

Job Hunting for Engineers

Amazing talk, amazing topic, amazing speaker. Patrick McKenzie was super motivating and inspiring and also really practically useful. I highly recommend you check this one out. I particularly appreciated the section about choosing the path for your career. He basically described the possible routes you can take as follows:

Broad - move towards architecture and systems design at a larger scale

Deep - just continue to advance as a developer and engineer, moving into senior, staff senior, etc.

Management - start leading teams, maybe someday aim to be a CTO

Lateral - move into another technical position that requires coding, but isn’t just engineering (like devops or sales engineer)

Business - found a company or establish yourself as a consultant

Since I’m still early career, it’s too early for me to decide a path. But having an idea of what’s to come is really useful, and helps me frame my current experience as a quest to figure out where I want to go with my career.

Gender Masking Interviews

This talk was a surprise. Aline Lerner founded a company, interviewing.io that gender masks interviews, in order to try to uncover bias in the tech interview process.

In her experiments and research, she came across something surprising and sort of shocking. Women were underperforming in the interviews, even when gender masked - and the reason seemed to ultimately be attrition problems. After a bad interview, women were more likely to leave the platform (this is accounting for women who were hired). In fact, after the first bad interview experience, 30% of women left the platform - compared to only 3% of men.

This surprising result was a bit painful to hear. But at the same time, I’ve experienced this, and I know many other women have. It’s difficult to pick yourself up after a failure when it feels like it might actually just be a confirmation of your lack of ability - particularly after years of self-doubt and of being doubted by others. We internalize stories of gender - and sometimes those stories make us feel like failures after one bad interview.

The nice thing about these results? It reminds me that if I keep working and don’t give up, I will find success. (same applies to you, dear reader). Certainly won’t get better at interviews if you give up on interviewing!

Check out my posts about Signal 2016:

Twilio Signal 2016 (overview)

Twilio Signal 2016 - Bots

There were a number of talks on the Bot track. The ones I caught were all really interesting and exciting.

27 Rules for Bots

This fun, fast-paced talk went into some great topics around creating bots, and how they will transform our world by bringing content to people in-context. The biggest advantage of bots like text-bots or Slack bots is that they don’t force you to context switch. Definitely watch this really engaging talk by Alex Godin, founder of slash-hyphen.

Slack Bots

Check out this awesome talk by Allison Craig, from Slack, on how to get started creating your first Slack bot. She talks about how to make your Slack bot simple, pleasant and productive.

NodeBots

Kassandra Perch gave a vibrant, hilarious and inspiring talk all about her super cool Node bot table. Yes, you read that correctly. Kassandra is making a smart table - for board gaming. This table has a REST API. I can’t even express how happy this project and talk made me. Really motivated me to start playing around with more hardware and making strange and wonderful inventions myself! Check out the talk.

Check out my posts about Signal 2016:

Twilio Signal 2016 (overview)

Twilio Signal 2016 - Hiring in Tech

Saw two great talks on this topic at Signal this year.

Usable Architecture

A wonderful talk by Joyce Jang and Kate Heddleston about how to make system architecture more usable, in order to promote scalability - not just of software, but of teams. Some gems from this talk:

“If your system is too complex for your whole team to use safely, it is too complex. Period.” - building out systems that don’t have to be barricaded from developers in order to protect themselves just means everyone can contribute more code, and that it’s easier to understand what’s going on.

The question “How do you deploy code?” Their recommendation: a single deploy button. If you build your tests and architecture correctly, then by the time it reaches the deploy stage it should be easily ready to go. It’s better to setup a build system with well-rounded tests and then just have things automatically deployed if they pass tests. This is hard for many companies, because it requires thorough testing.

The question “How do you know where you are in your system?” This is especially an issue in a microservices architecture. It’s something worth paying attention to.

Containers. They sure are all the buzz lately. But the main point they made is that containers are great for usability for two reasons: 1. Changing the system installations requires the same workflow as changing code; 2. System installations are linked to Git commits.

Overall, a really enlightening talk. Really enjoyed their insight into building usable web infrastructure.

Check out the talk.

Common Vulnerabilities

Really enjoyed hearing Eileen Uchitelle from Basecamp talk about common security vulnerabilities and how to avoid them. Always good to have that extra reminder for taking care of CSRF and XSS attacks on your web applications, and it was great learning about XXE attacks, which I hadn’t known much about.

CSRF attacks, for those who don’t know, are Cross-Site Request Forgery attacks. They’re a bit spooky, because they require little to no user action - by hijacking a user’s active session, the attacked can appear almost indistinguishable from the victim. Luckily with modern frameworks, there is often built-in protection using authenticity tokens. Still, it’s important to check that the version and framework you use is actually doing something about this.

XSS, Cross-Site Scripting attacks, can be seriously damaging if you don’t sanitize all user input coming into your site. Best thing you can do is always sanitize user data (a sanitizing library, liked Yahoo’s [xss-filters](https://github.com/yahoo/xss-filters], is a good idea), or just minimize direct user input  strings wherever possible.

XXE attacks are so interesting! XXE stands for XML eXternal Entity (nice job with the abbreviations, guys...). Basically, there is a way to load a file into an XML file in order to create extensible XML. Seems like a great idea? Well, it’s actually terrible! Apparently, if external entities are allowed in your XML, an attacker can request any file on your DB (assuming they can figure out it’s name). So they can steal all your secrets, including important infrastructure information, and can literally hijack your application. Moral of the story: XML, why. Also, don’t allow (if you simply must use XML) external entities ever. Or if you do, make sure to whitelist that biz!

Check out my posts about Signal 2016:

Twilio Signal 2016 (overview)

Twilio Signal 2016 - Hiring in Tech

Attended Signal 2016, hosted by Twilio, a couple weeks ago, and I learned a lot, so I thought I’d write up about it and share some of the cool things I learned and people I met. It was a really phenomenal event!

I’ll be breaking this up into multiple posts by category (so much to talk about!) In this first post, I just wanted to bring up 2 speakers that don’t quite fit into a category.

Animation in the Physical World

Oh my goodness, cannot speak highly enough about the animation talk by Justin Woo of Jibo. Jibo is this amazing new household helping robot that you can program with all your own animations. And the animations are physical animations - as in, you program it, and the bot does it. The implications for the future of animation, puppets, the arts in general are huge on this project. I can’t wait to start playing with Jibo now that the SDK is released! Seriously, this talk was so much fun - Jibo is doing some really amazing things. Check out the talk.

Terrible Ideas With Git

There isn’t much to say about this talk other than the fact that it was absolutely hilarious, very enlightening, and you should seriously already be watching it now. Needless to say, you can do some amazing and absurd things with Git if you work at it. Presented by Corey Quinn, Director of DevOps at FutureAdvisor.

Check out my posts about Signal 2016:

Twilio Signal 2016 - Hiring in Tech

Twilio Signal 2016 - Bots

This weekend I had an awesome time at the Hack for the World Hackathon at Facebook, presented by Powerful Women in Tech. I showed up without a team, or even an idea - which is one of my favorite ways to show up at a Hackathon!

I love hackathons. They remind me of the 24-hour play festivals I used to participate in college. The quality of the work produced is similarly creative but not quite fully baked.

It was so delightful to be coding in a room full of women coders again! Everyone there was so smart, capable, and badass. It was really quite inspiring!

This time, I worked with a team of 3 women: myself, Blithe Brandon and Carrie Wang, and we prototyped OffGrid. Check it out, here's my team!

The idea behind OffGrid is that sometimes you want to do something where you'd just like a friend to know what you're up to, in case something goes wrong - meeting someone to buy something on CraigsList, going on a long hike alone, things like that. In particular, as a woman, fear can prevent you from going on so many adventures. It's a serious fun-stopper. So with OffGrid, you can just post on Facebook automatically to let people know you're leaving, and share your location. And the idea that your friends can respond with a "Got Your Back" so you can have fun and still know someone's got your back! Then when you get back, you can go back On Grid, and it'll notify your friends, and delete the original Facebook post.

Of course,this being a 1-day hackathon, many of our favorite features are yet implemented. I'm working on another big project right now, so I'm not sure I'll take it further. But you can take a look at the source code and contribute on github.

I had a wonderful time - and met some awesome ladies in tech. Thanks to Facebook for hosting the event!

I’m so thrilled and honored - Glassbreakers chose me as their "Glassbreaker of the Day"!!

In case you aren’t familiar with Glassbreakers, it's an amazing website and you should definitely check it out. It helps connect folks from underrepresented groups in technology with each other. I've already met so many inspiring lady engineers through Glassbreakers, so I can't recommend it highly enough. They also provide diversity solutions to companies, which is awesome.

I want to spend a little moment to give some appreciation to Eratosthenes. This guy was pretty frickin awesome. Later in this post, I’ll explain how the Sieve of Eratosthenes allows you to find all prime numbers in a range. Other accomplishments under this guy’s belt:

invented the discipline of geography

invented chronology, the science of figuring out when things occured in relation to each other in the past

first person to calculate circumference of the Earth

lived in the 200s BC for goodness sake!!

figured out this sick method for finding prime numbers I’m about to show you

Finding Prime Numbers

Okay, so here’s the deal. Given a number, how do you calculate all numbers between 0 and that number which are prime?

To start with, we will want an array of all numbers, and we can just use a boolean at each index to specify whether or not it’s prime.

function findPrimes(n) { //create an array of true values var nums = new Array(n).fill(true) }

Maybe you could just go through all numbers, and then just see if each number is divisible by any earlier number. You might be tempted to write something like this:

function findPrimes(n) { var nums = new Array(n).fill(true) for (var i = 2; i < n; i++) { for (var j = i; j > 0; j--) { ... }

I'm gonna stop you right there. This might seem easy, but this method will get pretty crazy crazy when the numbers start growing even a little bit. That kind of brute force solution will only get you so far.

Let’s not do that.

Let’s learn from the ancient wisdom of Eratosthenes.

The Sieve of Eratosthenes Algorithm

Here is how the Sieve of Eratosthenes works. You create a list of all numbers. For each number, you eliminate any later numbers in the list that are divisible by that number. Is this starting to sound like a program?

Here’s how you would write out this algorithm:

function findPrimes(n) { var nums = new Array(n).fill(true) // loop through all numbers for (var i = 2; i < n; i++) { // if nums values is true, this number hasn't been reached yet if (nums[i]) { // for every number after this number for (var j = i+1; j < n; j++) { // if it is divisible by i, it cannot be prime if (j % i === 0) nums[j] = false; } } } // only return numbers that have value of true return nums.map(function(val, idx){ if (idx > 1 && val) return idx; }).filter(function(val) { return val; }); }

That should do it!

Optimizing it...

But we’re doing some unnecessary work here. For one, if we know we only care about numbers divisible by i, we can just increment by i and ignore all other numbers, rewriting that section as such:

// for every number divisible by this number for (var j = i * 2; j < n; j += i) { nums[j] = false; }

Optimizing it more...

We can do even better. You can actually start eliminating from the square of i, like so:

// for every number after this numbers square // that's divisible by this number for (var j = i * i; j < n; j += i) { nums[j] = false; }

Optimizing it even more!

Would you like a fun fact? Here’s a fun fact. Did you know that, with this method, by the time we reach the square root of n, we will have found all the prime numbers? It’s true! So you can optimize even further to end up with a final version like so:

function findPrimes(n) { var nums = new Array(n).fill(true) // loop through all numbers for (var i = 2; i < Math.sqrt(n); i++) { // if nums values is true, this number hasn't been reached yet if (nums[i]) { // for every number after this number // for every number divisible by this number for (var j = i * 2; j < n; j += i) { nums[j] = false; } } } // only return numbers that have value of true return nums.map(function(val, idx) { if (idx > 1 && val) return idx; }) .filter(function(val, idx) { return val; }); }

And there you have it! Using the above function you can find all primes (a lot faster than with the brute force approach).

This past Thursday I attended Women Leaders in Technology here at TechLAB Innovation, a startup incubator in Santa Clara. (Thanks very much to Women Who Code for sponsoring my ticket!) It was really great to be in a room full of women tech innovators, company founders and aspiring company founders. I thought I’d write a quick blog post to share how awesome this event was!

Panel

The panel was moderated by Andy Cunningham, Founder and President of the Cunningham Collective. She did a fantastic job of steering the conversation in important topics like breaking barriers, how diversity affects innovation, and the role of mentoring in encouraging more women to become technology leaders.

The panel consisted of four amazing women leaders in technology:

Colleen Kapase, VP of Partner Go to Market Strategy at VMware

Renee Ryan, VP and Investor at the Johnson & Johnson Development Corporation

Radha Basu, CEO and Founder of iMerit

Lisa Lambert, VP and Managing Director of the Diversity Equity Fund at Intel Capital

It was really fantastic hearing the perspectives of four inspiring women in technology who all worked at very different organizations. The talk was sobering in content, because we discussed some of the myriad challenges involved with pursuing funding as a woman in technology. As Lambert pointed out, the number of women-led companies in the world is merely 8-10% - but it’s even worse right here in the Silicon Valley, where that percentage falls to only 3%. It makes initiatives like the one at Intel, announced last year, that stated they would invest $300M into companies led by women and minorities. Upon some research, I noted that even that initiative has apparently [received some backfire internally](http://techcrunch.com/2016/04/22/intel-ceo-says-leadership-team-has-received-threats-for-companys-stance-on-diversity/.

As Lambert discussed in the panel, women represent half of the population - and they are often the early adopters of new technology. Statistics have shown that more women play video games than men, and according to a study by Dr. Genevieve Bell, women adopt new technologies, particularly mobile and communications oriented technologies, before men. It’s impossible to ignore the importance of women as tech users, and yet the tech itself is being built almost primarily by men (the US Bureau of Labor Statistics estimates that only 17.9% of software developers in the US are female).

Anyway, not to harp on statistics - what’s the solution? Because right about now is when well-meaning people start bringing up the Pipeline Problem. Lambert described it as the Leaky Pipeline (as women enter the pipeline, but they can’t move up the pipeline to more esteemed positions). I was really glad that someone in the audience brought up this supposed Pipeline Problem, and just how frustrating it is when people bring it up - for women at all levels. The woman who brought it up expressed frustration with being a mid-level employee who is constantly told about problems finding more entry-level women - when she herself is struggling for recognition and advancement, and knows many women in similar positions.

I really appreciated (and agree with) what Kapase had to say about it. It’s a distraction. It’s easy to say there are no people coming in. It’s harder to examine intrenched issues with organizations that might be as much a part of the problem. No one wants to admit it, but the fact is that many companies simply aren’t making diversity a priority. At the end of the day, the focus is on the success of the business, and diversity falls to the wayside. The funny thing about this is that diversity is a business issue. Studies have shown that diversity leads to better innovation, stronger profits, happier workers (and higher retention rates), and other positive effects on business.

Pitches

After the panel, 5 women-led companies pitched their product for funding to a group of potential investors. Each of the companies was really interesting and exciting! Here's a quick summary:

RigPlenish, demo by Founder & CEO Nupur Mehta is doing amazing things to help ambulances help more people by decreasing time spent on paperwork.

DroneSmith, presented by Co-Founder & CEO Jinger Zeng. Dronesmith is creating an amazing framework to allow developers to program drones remotely and without having to understand the hardware components.

Neuroprex, presented by Founder & CEO Janice Huang, PhD. Neuroprex is building a portable TMS device for treating major depression in-home, rather than through multiple costly office visits.

Aqueal is producing new waterproof bandage protection for everyday and post-surgery use.

Kachingle, presented by Founder & CEO Cynthia Imig Typaldos, has created a revolutionary co-marketing platform for extended contributions and social engagement with pet shelters.

So excited to share the capstone project created alongside my amazing teammates Emily Intersimone & Mariya Bogorodova!

We built a web app called Symph that lets you create new musical ideas and share w/ friends. Our goal was to make music composition fun & accessible. Also, we really wanted to play with synthesizing music in the browser. Hope you’ll check it out and let me know what you think! We’re deployed at getsymph.io

You can also take a look at our source code on Github.

We built the app using the MEAN stack - MongoDB/Mongoose, Express, Angular & Node.

In addition, some of the key technologies & libraries we used included:

ToneJS - used throughout our app, this library provided us an abstraction over the Web Audio API, which let us schedule our music in a timeline of notes (instead of dealing with oscillators, frequencies & filters directly through Web Audio API). We scheduled our music using callbacks added to the Tone.Transport object. Our challenge was the make sure there wasn’t latency on playback when we added animations, or when trying to save the notes in a format we could send to the DB.

FabricJS - used on our Loop Editor to create the grid on which you can add notes. This library provided an abstraction over the HTML5 Canvas API. We created a canvas object, and drew a grid on it - FabricJS helped us add the functionality that lets you click, drag, extend, delete notes on that grid. Biggest challenge was making sure we had a way to not only save musical info about notes added to the grid, but also draw notes for an existing loop on load.

HTML Drag and Drop API - we created custom Angular directives to handle the drag and drop functionality on the Mix Editor page. This page lets you drag and drop loops into Tracks to make mixes. Things we had to consider included: copying loops dragged from the Loop Bucket, actually moving around loops that are dragged from within the Tracks, and adding a Delete button. We had to deal with ensuring there weren’t duplicate HTML IDs, and also making sure that when you drop a loop div into the Track, it actually adds that loop’s musical data to the timeline.

Overall, building Symph was an amazing experience - in no small part due to the amazing Mariya & Emily who I was lucky to be able to work with! We’re continuing to add to the application even now, including things like new instruments, sampled instruments (piano sounds!!), etc. As of late, I’ve been working on creating tests for the routes & models, to make it easier to continue developing the app.

I’m officially graduated from Grace Hopper Academy! It’s incredibly bittersweet. I’m super proud of myself, and of every amazing woman in our cohort. But I’m also really sad to be leaving NYC! And then, of course, excited to be going home to the Bay Area, and to start the hunt for my next exciting job opportunity. I’m approaching job hunting very differently this time around. I’m really just trying to network and meet with as many people as possible. I’m not just looking for a job - I’m looking for a company I really care about, whose mission I feel aligned with. But it’s also really excited to know that the skills I have at this point are valuable, and that I can make a huge difference anywhere I end up. My list of dream companies is daunting but exciting. For now, I’m keeping the list pretty short, and I’m only looking into companies that I feel very passionate about. That may change with time (and rejections... don’t remind me) but for now, I’ve realized the best use of my energy is to only throw myself into the application process for companies that I feel really motivated to join. But in the meantime, I’m also really open to discovering new companies I may have never heard of, especially if they’re small startups. In reflecting back on my time at Grace Hopper, I’ve had so many discoveries along the way, and I thought I’d share some of my “revelations” here, in no particular order. Also these are all opinions, and subject to change with time.

1. I love backend programming! I’m still as crazy about APIs as I ever was, and I also have really enjoyed learning a lot about working with NoSQL databases, ORMs/ODMs. This shouldn’t strike me as a surprise, given my background in network technology, but I just thought that I would be more psyched about front-end when I entered the program. I was just way wrong about this.

2. I love Angular. It makes creating a web application so easy! It’s really nice to work with a tool that takes care of the architecture problem for you. Being so opinionated, it’s really clear whether you’re doing something the “right” way in this framework.

3. I also sometimes hate Angular. It can make web application maintenance so hard... and it’s very opinionated, so whenever I find myself not wanting to do something the “Angular way” I sometimes feel constrained.

4. I’m actually kind of good at front-end at this point... didn’t expect this, but I’ve been discovering that I know a lot more HTML/CSS than I thought I did. I guess this makes sense, since I’ve been learning HTML/CSS the longest of any language I’ve been working with. But it’s such a slow process to get good, particularly with CSS, that it sort of snuck up on me that I don’t find it completely insane to position things on the page anymore.

5. Bootstrap can be super useful - especially when time is very constrained. I was very hesitant to use Bootstrap, mostly because I think it creates less semantic markup, what with all the class names everywhere and oh so many divs. But actually, when you’re really strapped for time (ha, no pun intended) being able to rapidly prototype the HTML using Bootstrap is kind of invaluable. It also takes care of some of the nastier responsive design issues for you, which can be a godsend in moments of chaos.

6. Flexbox is awesome. I’m seriously a huge fan.

7. I’m a full stack engineer! As much as I’ve discovered how much I enjoy back-end code, and also that I feel pretty solid with front-end and this point - the fact is, I really enjoy a diverse set of tasks when I’m working on a project. I’m really excited that I have the ability to work across the entire stack. It makes me feel empowered - and I feel like working as a full stack developer will allow me the kind of variety I crave in my work.

8. I am a perpetual student. I am seriously having to fight the urge to just take more classes instead of job hunting! I was worried that after this program, I might feel done learning new programming concepts - but mostly, I feel like I’ve been using JavaScript only for 4 months and I want to get back to the Python & Ruby, and maybe learn some new languages and frameworks - Django? React? There’s just so much out there!

I’m starting a new series, because I know there are many strange little idiosyncrasies to the JavaScript language that can be baffling to beginners and experienced programmers alike (especially programmers coming from languages like Ruby or Python).

Re-discovered one of these while practicing the Select Sort algorithm today (p.s. deliberately using nested for loops made me cringe)

Here is the problematic implementation of Select Sort, which is supposed to sort an array in place:

function selectSort(arr) { var smallest, oldVal; for (var i in arr) { smallest = i; for (var j = i+1; j < arr.length; j++) { if (arr[j] < arr[smallest]) smallest = j; } if (smallest !== i) { oldVal = arr[i]; arr[i] = arr[smallest]; arr[smallest] = oldVal; } } return arr; }

The above code might seem like it should work, but actually, if you try to sort an array with it, unexpected things happen:

selectSort([1,2,5,7,20,-1]) // => [ -1, 2, 5, 7, 20, 1 ]

Why would this be happening? The logic may seem sound - if you walk through the iterations of the for loops, it might seem like it should sort the array.

You might now be growing suspicious of for…in - and you’re be right. Maybe you’ve been using it for years, in a language like Python (like I had). Well, there’s something weird about for...in in JavaScript. And if you take a look in the docs, low and behold:

“Note: for…in should not be used to iterate over an Array where the index order is important.” - for…in documentation on MDN

Why would you want this behavior? Chalk it up to one of JavaScript's many mysteries. For…in is designed for objects. Arrays are technically objects, and their indices are the keys. And when iterating over an object (in JavaScript, as in many languages), there is no guaranteed order.

This is why most people use a forEach when iterating over an array. Or, if you need to break out of the for loop before it completes, as in this case, you would want to use the long-form for loop syntax.

With this in mind, here is a reimplementation of the above select sort function:

function selectSort(arr) { var smallest, oldVal; for (var i = 0; i < arr.length - 1; i++) { smallest = i; for (var j = i+1; j < arr.length; j++) { if (arr[j] < arr[smallest]) smallest = j; } if (smallest !== i) { oldVal = arr[i]; arr[i] = arr[smallest]; arr[smallest] = oldVal; } } return arr; }

And it will return the expected results:

selectSort([1,2,5,7,20,-1]) // => [ -1, 1, 2, 5, 7, 20 ]

In short, while for...in works on Arrays, it is insidious and does not work in the expected way! Perhaps it’s safest to stay away from for...in when working with Arrays.

I have never felt so disappointed by a for loop.

Just for fun, here is the same function written in Python:

def selectSort(arr): for i, val in enumerate(arr): smallest = i for j in range(i+1, len(arr)): if arr[j] < arr[smallest]: smallest = j if smallest != i: oldVal = arr[i] arr[i] = arr[smallest] arr[smallest] = oldVal return arr

Life has been crazy, guys! Boy, it's been nuts. What a wild couple of weeks it's been - very little time to stop and take stock. But I thought I'd share a little bit of what's been happening in the past 2 weeks.

StackStore - eCommerce Site

Working with in groups of 3-4, we created our first fully featured fullstack application using the MEAN stack. The project, StackStore, was designed to solidify our knowledge of authentication, session, local storage, and just what it's like to work on a team on a larger project. While it was a pretty grueling few days, we came out the other end with a mock online store. With a little more time, we would also have liked to integrate the Stripe API for payment processing, but we were really focused on a couple of key features - in particular, making the cart persist for both users and guests, as well as implementing powerful front-end filtering of our list of product. The project was difficult, but ultimately really satisfying. The greatest challenge for my group was losing traction over the weekend. We all worked a lot over the weekend, but when the week started and we were all in the same place, it was hard to review and integrate everyone's code in a timely fashion in order to finalize the rest of the app. In retrospect, I see how it would have been useful to make more and smaller branches. We learned a lot about the challenges of working remotely, and also making sure to communicate well as a team. All in all, I think the project was a success - and it was really nice to be working on a project with a team for the first time in the program. I haven't worked with a real team of people since I left A10 Networks about a year ago - and honestly working with a super amazing team is the thing I miss most from that job. (Seriously, shoutout to A10 TechPubs - they're awesome)

Stackathon

Created my first full-fledged independent project: SuperGender.

It was quite a doosy, and required 4 straight days of pretty much non-stop coding. (Also I was coding right up until the presentation.)

So what is SuperGender? Basically, I analyzed data from 100,000+ comic book characters from the Comic Vine API to determine some interesting gender-related trends in comic books. In particular, I was able to analyze the gender breakdown of characters, the average number of issues per character (broken down by gender), the top 10 origins (Human, Alien, Mutant, etc) of each gender, and the top 10 first name/title of character alter egos.

It was a really interesting and surprisingly difficult process. In order to analyze the Comic Vine API in a timely and dependable fashion, I created 2 scripts - one to query the /characters route for all characters and save them to MongoDB, and another to process all of the data and analyze it in order to seed stats objects on MongoDB as well. This meant that I was able to easily serve up all of my statistics without too much latency, and that the user on the front-end can filter statistics by Publisher. Right now, I've implemented filters for the major publishers (Marvel, DC Comics, Disney, Dark Horse Comics & Image Comics) - but in the future, I'm planning to add a search/dropdown to find data from any of the hundreds of publishers in my data.

Other improvements I'm planning include analyzing number of deaths per character by gender, adding filters for creation year of the character (this could highlight some interesting trends), analyzing the genders of friends/foes of characters by gender, and analyzing the gender breakdown of various superhero teams. I'm also curious about ways I might be able to use vision APIs to analyze skin coverage of male v. female characters.

By the way, I really love comics! I've been super excited about the new trend of making comics more inclusive. Between the new Captain Marvel, Thor, Ms. Marvel, and Batgirl, it's a pretty excited time to be a woman or girl who reads comics.

If you'd like to take a look at the code that I wrote to do all of this, feel free to check out the github repo. Would love comments and suggestions if you have any! It actually takes a long time to seed the DB, so I ended up creating the ability to seed in batches.

Tech Talk

I presented my mini tech talk to my fellow GHA classmates today, and had a great time! I talked a little bit about how to get a Phaser game started with a simple walkthrough. You can check out the demo and slides here. It was a bit nerve-wracking preparing to speak in front of everyone - the hackathon project took a lot out of me. But I'm glad I took the time to get familiar with Phaser. I was really happily surprsied at how easy it is to work with, and I'm looking forward to playing around with it and making some fun, nerdy games with it in the future.

Capstone

And now we're in the final phase of the program - capstone. We're still in the planning phases, and haven't 100% settled on an idea. But we have a good one cooking that we're pretty sure we want to go with. More on that as it unfolds... for now, let's just say it combines music and tech. We're still closing in on our exact project, but it's starting to seem like a lot of fun! Looking forward to sharing it in a few weeks when I (gasp) finish up the program? Just 3 more weeks!

I really hope that people who are starting to learn programming (especially women) who have read some of my posts will feel encouraged that it’s okay to feel like you’re not getting it when you’re learning new programming concepts. If that’s you, please don’t feel discouraged!

You are not dumb.

This is an important lesson I actually learned while attending Skillcrush - It’s the computer that is dumb, not you! It has incredibly strict requirements for how you communicate with it. It has no ability to interpret or guess what you actually meant to say. If you miss a comma, or even a word - any human could figure out what you meant! But your computer cannot.

When your code doesn’t work, it's likely because the computer doesn’t understand it, not because you’re not smart. Unfortunately, as programmers, we are beholden to computers, and we must learn to think like them in order to program well. This takes time and practice and memorization and a lot of patience.

I want more people to discover how awesome programming can be, because it has been incredibly empowering for me to push through the particularly difficult times in my own learning and get to the meat of it.

Keep at it, trust yourself, trust the process.

If you haven’t seen it, I’m super pumped that I’ve been featured on Switchup! I gave a Q&A about my experiences with Grace Hopper, including how/why I applied, and where I discuss some of my insecurities from before I started Grace Hopper.

I’m sometimes wary of discussing my insecurities in such a public form as a blog, because I wouldn’t want potential employers to think I’m actually bad at programming, and because I, like most people, don’t like pointing out my own flaws. But I think it’s really important for us all to move away from arrogance as programmers - it’s not healthy for people or organizations, and it pushes away new programmers (which cannot be helping with the talent gap in tech). The truth is, we all feel dumb sometimes (yes, even the cockiest “rockstar ninja hacker 10x” programmer), and I would rather constructively discuss how to handle that than pretend that I’m perfect and nothing is ever hard for me.

This all highly relates to the amazing 2015 Pycon Keynote given by Jacob Kaplan-Moss - go watch it, it’s important.

Last week, Mina Markham, a front-end engineer for the Clinton campaign, came to Grace Hopper Academy to give a talk and a Q&A. I really enjoyed her candid discussion about what it’s like to be a woman in tech, and how she addresses the obstacles she faces. She graciously offered to give a tour of the campaign HQ in Brooklyn to anyone who was interested.