Skip to content

Commit

Permalink
linting and formatting fix
Browse files Browse the repository at this point in the history
  • Loading branch information
danielhalasz committed Mar 6, 2024
1 parent a0588be commit 39c5149
Show file tree
Hide file tree
Showing 58 changed files with 867 additions and 1,258 deletions.
10 changes: 1 addition & 9 deletions .cspell.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
{
"language": "en",
"words": [
"asdf",
"hackyourfuture",
"monospace",
"Precourse",
"distractor",
"distractors",
"typeof"
],
"words": ["asdf", "hackyourfuture", "monospace", "Precourse", "distractor", "distractors", "typeof"],
"ignorePaths": ["node_modules/**", "**/*.json", "**/*.mp4", "**/*.svg"]
}
7 changes: 1 addition & 6 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,7 @@
"confirm": false,
"console": false
},
"extends": [
"eslint:recommended",
"prettier",
"airbnb-base",
"plugin:sonarjs/recommended"
],
"extends": ["eslint:recommended", "prettier", "airbnb-base", "plugin:sonarjs/recommended"],
"overrides": [
{
"files": ["**.test.js", "**.spec.js"],
Expand Down
11 changes: 3 additions & 8 deletions .markdownlint.jsonc
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,19 @@
},

// MD005/list-indent - Inconsistent indentation for list items at the same level
"MD005": true,
"MD005": false,

// Deprecated and disabled
// MD006/ul-start-left - Consider starting bulleted lists at the beginning of the line
// "MD006": true,

// MD007/ul-indent - Unordered list indentation
"MD007": {
// Spaces for indent
"indent": 2,
// Whether to indent the first level of the list
"start_indented": false
},
"MD007": false,

// MD009/no-trailing-spaces - Trailing spaces
"MD009": {
// Spaces for line break
"br_spaces": 2,
"br_spaces": 1,
// Allow spaces for empty lines in list items
"list_item_empty_lines": false,
// Include unnecessary breaks
Expand Down
2 changes: 1 addition & 1 deletion .prettierrc.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"printWidth": 80,
"printWidth": 120,
"proseWrap": "always",
"trailingComma": "all",
"tabWidth": 2,
Expand Down
20 changes: 9 additions & 11 deletions 00-asserting/0-comments-and-logs/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
# Comments and Logs

Comments and logs are for developers, not for the computer. They exist to help
you understand your program.
Comments and logs are for developers, not for the computer. They exist to help you understand your program.

Comments and logging will not change what your program does, just how easy it is
to understand.
Comments and logging will not change what your program does, just how easy it is to understand.

---

Expand Down Expand Up @@ -53,11 +51,11 @@ console.log('a', 'message', 'from', 'beyond'); // 'a', 'message', 'from', 'beyon
## References

- Comments
- [launchcode](https://education.launchcode.org/intro-to-professional-web-dev/chapters/how-to-write-code/comments.html)
- [programiz](https://www.programiz.com/javascript/comments)
- [javascript.info](https://javascript.info/structure#code-comments)
- [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#comments)
- [launchcode](https://education.launchcode.org/intro-to-professional-web-dev/chapters/how-to-write-code/comments.html)
- [programiz](https://www.programiz.com/javascript/comments)
- [javascript.info](https://javascript.info/structure#code-comments)
- [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#comments)
- Logging
- [launchcode](https://education.launchcode.org/intro-to-professional-web-dev/chapters/how-to-write-code/output.html?highlight=log)
- [programiz](https://www.programiz.com/javascript/console)
- [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Console/log)
- [launchcode](https://education.launchcode.org/intro-to-professional-web-dev/chapters/how-to-write-code/output.html?highlight=log)
- [programiz](https://www.programiz.com/javascript/console)
- [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Console/log)
64 changes: 28 additions & 36 deletions 00-asserting/1-predicting-execution/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,63 @@

> [Guide video](https://vimeo.com/713207359)
Studying JavaScript will be challenging. The HYF way of learning is not
glamorous. You will need to learn how to study JS, and very importantly
Studying JavaScript will be challenging. The HYF way of learning is not glamorous. You will need to learn how to study
JS, and very importantly

- you will need to adjust your learning expectations

Studying JavaScript will be 100% different from learning HTML and CSS. HTML &
CSS are all about learning and applying rules. if you apply the rules correctly,
your web page looks right. You don't need to think about what happens between
Studying JavaScript will be 100% different from learning HTML and CSS. HTML & CSS are all about learning and applying
rules. if you apply the rules correctly, your web page looks right. You don't need to think about what happens between
your code and the final web page

- Studying JavaScript is 100% about what happens behind the scenes!

Programming is all about inner processes. You should focus 100% on what happens
between starting your script and the final result. Making your code work, or
solving a challenge is second. Learning how the JavaScript engine executes your
Programming is all about inner processes. You should focus 100% on what happens between starting your script and the
final result. Making your code work, or solving a challenge is second. Learning how the JavaScript engine executes your
code step-by-step is first. You should focus on ...

---

## Program Memory

_Program Memory_ is a term that refers to the values stored in memory at EACH
SPECIFIC moment of execution. These values can change often, sometimes at every
step of your program! Learning to program requires you to understand:
_Program Memory_ is a term that refers to the values stored in memory at EACH SPECIFIC moment of execution. These values
can change often, sometimes at every step of your program! Learning to program requires you to understand:

- how does the JS engine represent memory?
- how does the JS engine interpret your code line-by-line?
- how does each instruction interact with program memory?

Your first goal is learning to see what is happening inside your program at each
step:
Your first goal is learning to see what is happening inside your program at each step:

- _`console.log`_: The simplest way to peek into program memory, but logging has
some huge limitations. You will only log what you think of logging, but
there's a lot more going on! A few `console.log`s here and there is not the
best way to understand how your whole program's memory is represented
- _DevTools Debugger_: The best way to peek inside program memory. It will take
some practice to use effectively and is worth every second. You can see every
value in memory, at every step of your program's execution. Debuggers are
- _`console.log`_: The simplest way to peek into program memory, but logging has some huge limitations. You will only
log what you think of logging, but there's a lot more going on! A few `console.log`s here and there is not the best
way to understand how your whole program's memory is represented
- _DevTools Debugger_: The best way to peek inside program memory. It will take some practice to use effectively and is
worth every second. You can see every value in memory, at every step of your program's execution. Debuggers are
designed to help you understand how memory is structured in JS

---

## General Study Tips

> For more info, check out:
> [Learning From Code](https://home.hackyourfuture.be/students/study-tips/learning-from-code)
> For more info, check out: [Learning From Code](https://home.hackyourfuture.be/students/study-tips/learning-from-code)
Look through the rest of the files in this folder to learn a good study workflow

- Spend lots of time studying the examples
- understand of what each line of code means (technically and humanly)
- step through them one line at a time, following the workflows in this folder
- predict!!! Always try guess what will happen before stepping your code
- draw on paper, read out loud, do what you can to make the code more tangible
- Write lots of comments in the exercises and examples, your future self will
thank you
- what surprised you about each line? what did you learn from that surprise?
- what should you study deeper next time you review this topic?
- which other examples/exercises/resources/projects used this concept?
- what random thoughts did you have while studying this?
- ... you know you best, write whatever helps!

Hint: the solutions to many of the \_'s in the exercises are written in the
debugger ... if you know how to look for them ;)
- understand of what each line of code means (technically and humanly)
- step through them one line at a time, following the workflows in this folder
- predict!!! Always try guess what will happen before stepping your code
- draw on paper, read out loud, do what you can to make the code more tangible
- Write lots of comments in the exercises and examples, your future self will thank you
- what surprised you about each line? what did you learn from that surprise?
- what should you study deeper next time you review this topic?
- which other examples/exercises/resources/projects used this concept?
- what random thoughts did you have while studying this?
- ... you know you best, write whatever helps!

Hint: the solutions to many of the \_'s in the exercises are written in the debugger ... if you know how to look for
them ;)

---

Expand Down
9 changes: 4 additions & 5 deletions 00-asserting/2-isolate/3-value-swaps/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@

> [Guide video](https://vimeo.com/713210298)
These exercises are not supposed to show you good practice. When writing your
own code you will want to avoid ever changing the value of a variable once it
has been assigned.
These exercises are not supposed to show you good practice. When writing your own code you will want to avoid ever
changing the value of a variable once it has been assigned.

The goal of learning the value swaps is to understand how JS memory changes over
time, and how each line of code executes line by line to modify memory.
The goal of learning the value swaps is to understand how JS memory changes over time, and how each line of code
executes line by line to modify memory.
83 changes: 35 additions & 48 deletions 00-asserting/2-isolate/README.md
Original file line number Diff line number Diff line change
@@ -1,87 +1,74 @@
# Isolating JavaScript

> Careful! The goal of these exercises is to help you master JavaScript
> execution, and to become familiar reading, writing and refactoring some core
> JS language features. The goal of these exercises _is not_ to teach you best
> Careful! The goal of these exercises is to help you master JavaScript execution, and to become familiar reading,
> writing and refactoring some core JS language features. The goal of these exercises _is not_ to teach you best
> practices.
>
> In fact, some of the exercises in this folder are _bad_ practices. For example
> you will be learning how type coercion works with primitives and operators,
> you _should not_ write code that uses type coercion on purpose. But you will
> come across code that does and you will have bugs related type coercion, so
> it's good to learn how it works.
> In fact, some of the exercises in this folder are _bad_ practices. For example you will be learning how type coercion
> works with primitives and operators, you _should not_ write code that uses type coercion on purpose. But you will come
> across code that does and you will have bugs related type coercion, so it's good to learn how it works.
>
> Some of the exercises in this folder will be difficult and abstract. you do
> not need to finish everything at once, you can always start a set of exercises
> and come back to finish them later.
> Some of the exercises in this folder will be difficult and abstract. you do not need to finish everything at once, you
> can always start a set of exercises and come back to finish them later.
---

Studying JavaScript will be challenging. The HYF way of learning is not
glamorous. You will need to learn how you study JS, and very importantly
Studying JavaScript will be challenging. The HYF way of learning is not glamorous. You will need to learn how you study
JS, and very importantly

- you will need to adjust your learning expectations

Studying JavaScript will be 100% different from learning HTML and CSS. HTML &
CSS are all about learning and applying rules. if you apply the rules correctly,
your web page looks right. You don't need to think about what happens between
Studying JavaScript will be 100% different from learning HTML and CSS. HTML & CSS are all about learning and applying
rules. if you apply the rules correctly, your web page looks right. You don't need to think about what happens between
your code and the final web page

- Studying JavaScript is 100% about what happens behind the scenes!

Programming is all about inner processes. You should focus 100% on what happens
between starting your script and the final result. Making your code work, or
solving a challenge is second. Learning how the JavaScript engine executes your
Programming is all about inner processes. You should focus 100% on what happens between starting your script and the
final result. Making your code work, or solving a challenge is second. Learning how the JavaScript engine executes your
code step-by-step is first. You should focus on ...

---

## Program Memory

_Program Memory_ is a term that refers to the values stored in memory at EACH
SPECIFIC moment of execution. These values can change often, sometimes at every
step of your program! Learning to program requires you to understand:
_Program Memory_ is a term that refers to the values stored in memory at EACH SPECIFIC moment of execution. These values
can change often, sometimes at every step of your program! Learning to program requires you to understand:

- how does the JS engine represent memory?
- how does the JS engine interpret your code step-by-step?
- how does each instruction interact with program memory?

Your first goal is learning to see what is happening inside your program at each
step:
Your first goal is learning to see what is happening inside your program at each step:

- _`console.log`_: The simplest way to peek into program memory, but logging has
some huge limitations. You will only log what you think of logging, but
there's a lot more going on! A few `console.log`s here and there is not the
best way to understand how your whole program's memory is represented
- \__DevTools Debugger_: The best way to peek inside program memory. It will
take some practice to use effectively and is worth every second. You can see
every value in memory, at every step of your program's execution. Debuggers
are designed to help you understand how memory is structured in JS
- _`console.log`_: The simplest way to peek into program memory, but logging has some huge limitations. You will only
log what you think of logging, but there's a lot more going on! A few `console.log`s here and there is not the best
way to understand how your whole program's memory is represented
- \__DevTools Debugger_: The best way to peek inside program memory. It will take some practice to use effectively and
is worth every second. You can see every value in memory, at every step of your program's execution. Debuggers are
designed to help you understand how memory is structured in JS

---

## General Study Tips

> For more info, check out:
> [Learning From Code](https://home.hackyourfuture.be/students/study-tips/learning-from-code)
> For more info, check out: [Learning From Code](https://home.hackyourfuture.be/students/study-tips/learning-from-code)
Look through the rest of the files in this folder to learn a good study workflow

- Spend lots of time studying the examples
- understand of what each line of code means (technically and humanly)
- step through them one line at a time, following the workflows in this folder
- predict!!! Always try guess what will happen before stepping your code
- draw on paper, read out loud, do what you can to make the code more tangible
- Write lots of comments in the exercises and examples, your future self will
thank you
- what surprised you about each line? what did you learn from that surprise?
- what should you study deeper next time you review this topic?
- which other examples/exercises/resources/projects used this concept?
- what random thoughts did you have while studying this?
- ... you know you best, write whatever helps!

Hint: the solution for many of the \_'s in are written in the debugger ... if
you know how to look for them ;)
- understand of what each line of code means (technically and humanly)
- step through them one line at a time, following the workflows in this folder
- predict!!! Always try guess what will happen before stepping your code
- draw on paper, read out loud, do what you can to make the code more tangible
- Write lots of comments in the exercises and examples, your future self will thank you
- what surprised you about each line? what did you learn from that surprise?
- what should you study deeper next time you review this topic?
- which other examples/exercises/resources/projects used this concept?
- what random thoughts did you have while studying this?
- ... you know you best, write whatever helps!

Hint: the solution for many of the \_'s in are written in the debugger ... if you know how to look for them ;)

---

Expand Down
11 changes: 5 additions & 6 deletions 00-asserting/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@

## 0. Comments and Logs

A short review of comments and logs, two JS language features designed to help
developers understand code.
A short review of comments and logs, two JS language features designed to help developers understand code.

## 1. Predicting Execution

A short review of stepping through and predicting program execution, plus some
guides for using different debugging tools.
A short review of stepping through and predicting program execution, plus some guides for using different debugging
tools.

## 2. Isolate

Practice predicting and verifying program execution with `console.assert` in
small programs that only use variables declared with `let` or `const`.
Practice predicting and verifying program execution with `console.assert` in small programs that only use variables
declared with `let` or `const`.
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
# Statements vs. Expressions

In JavaScript a piece of code can be either a statement or an expression. It's
not important that you 100% understand the difference, just that you have a
basic idea:
In JavaScript a piece of code can be either a statement or an expression. It's not important that you 100% understand
the difference, just that you have a basic idea:

- **Expressions** _evaluate_ to a value. This means you can write an expression
on the right side of a variable assignment to store the value for later.
- **Statements** _do not_ evaluate to a value. This means if you try writing a
statement on the right side of a variable assignment you will get an error.
- **Expressions** _evaluate_ to a value. This means you can write an expression on the right side of a variable
assignment to store the value for later.
- **Statements** _do not_ evaluate to a value. This means if you try writing a statement on the right side of a variable
assignment you will get an error.

Of course it's more complicated than that (it's JavaScript after all), but this
will get you far enough for now.
Of course it's more complicated than that (it's JavaScript after all), but this will get you far enough for now.

---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,4 @@ Operators that work according to the _truthiness_ of their arguments.

## Truth Tables

- [&&](https://www.youtube.com/watch?v=Eb4im7q8KaU),
[||](https://www.youtube.com/watch?v=WXkJZPQSw_c)
- [&&](https://www.youtube.com/watch?v=Eb4im7q8KaU), [||](https://www.youtube.com/watch?v=WXkJZPQSw_c)
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
# Comparisons

In these examples and exercises, you will be studying how JavaScript works when
comparing different types. You should _always avoid this_ in your own programs.
The code in this folder is to help you understand how JavaScript works, not to
In these examples and exercises, you will be studying how JavaScript works when comparing different types. You should
_always avoid this_ in your own programs. The code in this folder is to help you understand how JavaScript works, not to
show best practices.

---
Expand Down
Loading

0 comments on commit 39c5149

Please sign in to comment.