Examples, exercises and guides for the Debugging module
You will need NPM and nvm on your computer to study this material
Using a browser with good DevTools will make your life easier: Chromium, FireFox, Edge, Chrome
- Install o update the
study-lensespackage globally$ npm install -g study-lenses(if you do not have it installed)$ npm update -g study-lenses(if you already have it installed)- Didn't work? you may need to try:
- (mac)
$ sudo npm install -g study-lenses
- (mac)
- having trouble updating?
- try this:
$ npm uninstall -g study-lenses && npm install -g study-lenses
- try this:
- Fork and clone this repository:
- fork the HackYourFuture repository to your personal account
[email protected]:HackYourFutureBelgium/debugging.git
- clone your fork to your computer
- when there are updates to the module:
- update your fork with a PR
- pull the changes from your fork to your computer
- fork the HackYourFuture repository to your personal account
- Navigate to the module repository in terminal
$ cd debugging
- Run the
studycommand from your CLI$ study
- The material will open in your default browser, you're good to go!
- you can read the
study-lensesuser guide from your browser by navigating tolocalhost:xxxx?--help
- you can read the
If you have a windows computer and get this error:
... /study.ps1 cannot be loaded because running scripts ...follow the instructions in this StackOverflow answer, that should take care of it ; )
🥚🐣🐥 ./isolate: Practice the foundations of JavaScript in isolation. Learn to step through and predict your program's execution using the debugger and JS Tutor. These examples and exercises have no user input.
- 🥚 ./predicting-execution: Take a quick tour of
the debugger and JS Tutor, two tools that will help you understand program
memory and how JS follows your instructions one step at a time. Learn to use
breakpoints and the
debuggerstatement to pause your program on specific lines. - 🥚 ./linting: Practice using feedback from ESLint to write code that uses consistent style and best practices.
- 🥚 ./fixing-errors: JavaScript errors! - get over the initial fear by learning to find and describe errors in your code. Then learn how to pause on errors in the debugger and to read callstack messages.
- 🐣 ./fixing-bugs: Learn a structured approach to finding, describing and fixing bugs.
- 🐣 ./integrate: Practice all the skills and knowledge you've gained. You will read, debug, complete, and write full programs.
- 🐣 ./operator-precedence: Learn how to understand and work with expressions that have 2 or more operators.
- 🐣 ./using-functions: Learn how you can use functions to organize and and reuse your code.
- 🐥 ./hoisting: That famous thing about JS! It's not so bad once you get it, the key to understanding hoisting is to understand the program life-cycle: creation phase and execution phase. This chapter is more abstract, hoisting is something "invisible" about JavaScript program execution. What's most important is that you are comfortable stepping through code that uses hoisting.
You're not expected to master this material in one week, but starting to practice in week 1 will make everything else easier. Practicing a little bit every day is the best way to improve.
- 🥚 ./predicting-execution
- 🥚 ./linting
- 🥚 ./fixing-errors:
- 🥚🐣 ./isolate: through conditionals
- 🐣 ./operator-precedence: tracing
- 🐣 ./fixing-bugs
- 🥚🐣 ./isolate: through refactoring loops
- 🐣 ./integrate: through numbers
- 🐣 ./operator-precedence: evaluating
- 🥚🐣 ./isolate: through the callstack
- 🐣 ./using-functions: through write functions
- 🐣 ./operator-precedence: expanding
- 🥚🐣 ./isolate: all the rest
- 🐣 ./integrate: arrays
- 🐣 ./using-functions: through avoid side-effects
expand/collapse
- Don't rush, understand! Programming is hard.
- The examples and exercises will still be there to study later.
- It's better to fail tests slowly and learn from your mistakes than to pass tests quickly and not understand why.
- Don't skip the examples! Understanding and experimenting with working code is a very effective way to learn programming.
- Write lots of comments in the examples and exercises. The code in this repository is yours to study, modify and re-use in projects.
- Practice Pair Programming: two people, one computer.
- Take a look through the Learning From Code guide for more study tips
If you can't finish all the material in this repository, that's expected! Anything you don't finish now will always be waiting for you to review when you need it. These 4 emoji's will help you prioritize your study time and to measure your progress:
- 🥚: Understanding this material is required, it covers the base skills you'll need for this module and the next. You do not need to finish all of them but should feel comfortable that you could with enough time.
- 🐣: You have started all of these exercises and feel you could complete them all if you just had more time. It may not be easy for you but with effort you can make it through.
- 🐥: You have studied the examples and started some exercises if you had time. You should have a big-picture understanding of these concepts/skills, but may not be confident completing the exercises.
- 🐔: These concepts or skills are not necessary but are related to this module. If you are finished with 🥚, 🐣 and 🐥 you can use the 🐔 exercises to push yourself without getting distracted from the module's main objectives.
There's so many examples and exercises in this repository, it's easy to forget of what you still need to finish or what you want to review again. Luckily VSCode is really good at searching through folders of code.
You can write hashtags in your comments while you're studying, then search for those hashtags later so you don't miss anything. Here's some ideas:
// #todo, still a few blanks left- search for#todoin Study Lenses or VScode to find all the exercises you still need to study// #review, coercion is confusing this again next week- search for#reviewto find the files you need to study again- ... anything goes! Find the hashtags that work for you
Creating a project board on your GitHub account for tracking your study at HYF
can help you keep track of everything you're learning. You can create the board
at this link: https://github.com/your_user_name?tab=projects.
These 4 columns may be helpful:
- todo: material you have not studied yet
- studying: material you are currently studying
- to review: material you want to review again in the future
- learned: material you know well enough that you could help your classmates learn it
expand/collapse
This repository comes with some scripts to check the quality of this code. You can run these scripts to check the code provided by HYF, and to check the code you write when experiment with the examples and complete the exercises.
This script will format all of the code in this repository making sure that all the indentations are correct, the code is easy to read, and letting you know if there are any syntax errors.
This script will check all of the files in your repository for spelling mistakes. Spelling is not just a detail, is important! Good spelling helps others read and understand your programs with less effort.
spell-check is not so clever though, it doesn't have all possible words in
it's dictionary and it won't know if you wanted to spell a word incorrectly.
If you think one of it's "Unknown word"s is not a problem, you can either ignore
the suggestion or add the word to the "words": [ ... ], list in
.cspell.json.
This script will lint all the Markdown files in this repository, checking for syntax mistakes and other bad practices. Fixing linting errors will help you learn to write better code by pointing out your mistakes before they cause problems in your program.
Some linting errors will take some practice to understand and fix, but it will be a good use of time.
Just like lint:md, but for .js files. This script will lint all of the JS
files in this repository, letting you know if there are any syntax errors or bad
practices.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent