zcaceres

Debugging JavaScript Applications

A practical distillation for Fullstack Academy students

Faults in computer problems were theorized as far back as 1843, when Ada Lovelace noted of Babbage's Analytical Engine, "Granted that the actual mechanism is unerring in its processes, the cards may give it wrong orders." Almost 160 years later, NIST reported that software errors cost the US $59 billion annually. Clearly, some of the cards are wrong. However, unlike Grace Hopper's famous moth, most of the time the culprit is ourselves.

Debugging is a sanitization procedure consisting of:

• Preventing bugs in the first place, through good practices and assistive tooling.
• Detecting bugs when they first arise, through proper error handling and testing.

zcaceres

JQuery

FSA 1702 – March 21, 2017

---

Introduction

It's about interacting with the DOM tree. jQuery happens on the client-side and is executed in the browser.

Front-End Applications == User Interfaces

zcaceres

Organizing Projects

1. Keep things small
2. Self-documenting variable names
3. READMEs
4. Comments
5. Make 'interfaces' as though you're designing a public API with private implementation details

• List our user views / actions
• ERD
• Look at each view

zcaceres

AJAX – Let's Get A-Jacked!

FSA 1702 – March 22, 2017

AJAX helps us make requests from the client-side.

---

Old HTTP Requests

Each time we do a URL bar query we re-render the HTML completely. The same is true with a POST request using a form.

>AJAX allows us to move HTTP requests to the background and replace only part of the DOM.

zcaceres

ES6

FSA 1702 – March 27, 2017

---

History

ECMA Script 6 (ES2015). A weird name that arose from a copyright dispute (European Computer Manufacturing Association).

Standardizing and updating the language is meant to make the lives of developers easier and simpler. Never perfectly aligned across browsers, but does get better over time. ES6 still has some unsupported functionality.

zcaceres

React Router

FSA 1702 – March 28, 2017

Simpler Single-Page Applications

---

The Old Way

• Make many requests, get your files
• Make a new request, get a new page

zcaceres

React & Forms

FSA 1702, March 29, 2017

"Do what you got to do." Because form logic sucks.

---

Forms

Validation gets really complicated really fast. All sorts of crazy edge cases that create spaghetti.

React to the rescue.

zcaceres

React - Redux

FSA 1702, March 30, 2017

Predictable State Container for Javascript Apps

We dispatch actions (an expression of intent). Redux changes our state for us in a store, and returns a new state. We don't change our state directly. Then we can REWIND TIME.

---

So what the hell does that mean?

State: condition of the app (data) at a particular moment in time

zcaceres

Cryptography

FSA March 25, 2017

Foundational ideas in Cryptography

---

Crypto

• Cryptography: code-making / secret keeping
• Cryptanalysis: code-breaking / secret revealing

zcaceres

Machine Learning: CS-Saturday

FSA 1702 – April 1, 2017

---

Competitive Search and Agents for Games – Minimax

Let's make agents to play deterministic zero-sum game.

Monte Carlo tree search is a non-deterministic extension of this approach.

Deterministic games have 'no excuses' (dice rolls, cards drawn etc). Only the players' moves determine the outcome of the game.