Javascript

The puppeteer

If HTML + CSS are the bones and skin of a website, Javascript is the puppeteer. It's a source of intelligence that can change elements on your site based on rules and conditions that you define. It's also a catch-all for anything that HTML and CSS can't do.

Exercises to complete after reading below

1. Complete the Codecademy JavaScript track. (~8 hrs)
2. Complete Codeschool's Try jQuery. (~3 hrs)

Example of JS: Filter button

Let's say you have a site with images of dogs, cats, and monkeys. You want a button labeled 'monkeys' to only show monkeys without refreshing your site. You also want the other buttons to correspond to the other animals.

Overall puppeteering might look like this

(Assuming animal images are on the site.)

1. Create a button named "Monkeys" in HTML.
2. In Javascript, instruct the code to run a list of tasks once that button is clicked. We'll name that list justShowMonkeys.
3. Write the list of tasks that comprises justShowMonkeys.
4. Once it works, do the same for the rest of the animals.

The justShowMonkeys list of tasks might look like this

1. Select all the animals and hide them
2. Now select all the monkeys
3. Show them

That's it! We just wrote pseudo-code for that functionality. You can always look up the code syntax and memorize it later. It's important to write out a list like this in plain English before you start.

A computer is an unintelligent order-taker

Computers simply follow our instructions. Our task in programming is to be able to break a problem down into really small steps that combine into a larger more interesting goal.

Mental health note

Students find programming (in our case Javascript) to be the most difficult and time consuming subject to understand. Nobody gets this stuff right away and it's common for people to take a few months to get comfortable with writing code.

If you're not from an engineering or math background, programming is probably unlike anything else you've done. Therefore it is normal for it to take a while and we are here to help you through it.

It might feel like you're hitting your head against a wall and not getting anywhere but I promise that you will have major breakthroughs and they will feel amazing.

You will be making progress especially when it doesn't feel like you are.

Your neighbor's code will probably be different

That doesn't mean yours is wrong. This causes a lot of stress for students. It's like on Chopped when the 4 contestants get the same basket of ingredients to cook a dish. When the time ends for cooking, they're all sizing up their competitors' dishes concerned that they may be better.

Coding is a lot like cooking. It's all procedure-based and it's rare to have two people do it the same way.

Code is iterative

It can be intimidating to read code written by an experienced person. She will solve problems in ways that you would never dream of. Often times though, the result she obtained took several passes on code that was originally really simple.

Issues may have happened along the way that complicated the solution. There may have been opportunities to simplify or make certain aspects modular and reusable.

Crude code is always where you start. You end up in a more elegant place later on.

The taxonomy of learning to program

Writing code is not like writing an essay. Developers don't sit down and write pages and pages of code. They wrestle with it and run it tons of times before their final result is coded to ensure things are working along the way. Several passes are taken on the same code. Eventually from experience, you take better routes from the outset.

From least understanding to highest understanding, this is how we've seen the programming learning process.

1. Understand your tools - Early on this is the understanding of tools like strings, integers, arrays, conditionals, and loops. You need to know what is possible in small steps before you will know how to break your problem down into these small steps. Expect to spend a lot of time reading documentation and playing with functions in the Chrome Console.
2. Once knowing the tools, create a plan - This will drive the code you create. Write a list of tasks that need to be done and replace it later with working code.
3. Writing working code - Not pretty code. Make it work. Crude is where you start.
4. Optimizing for simplicity, readability, and maintainability - You need to leave your code in a way you'll understand after months of not seeing it. This includes using good names, simplifying your code into fewer lines (refactoring), and making sure your code is maintainable. Will it take as much time to change your code as it does to start from scratch? That's a problem. Getting better at this requires experience (aka. being bitten by doing it wrong) and learning from peers and books.
5. Designing - Once you understand the prior concepts, you can then understand how to design or 'architect' software. The better you can do this, the better you can quickly onboard new teammates, write new features, and change the workings of the application efficiently. This is often the job of a Senior Developer/Engineer/Architect and they are always in high demand.