Just like in Javascript 30 repo: GitHub Repo
should I go ahead and make a PR for community content here in README of this repo?

I am making my own notes as I am going through the course:

https://github.com/geekysrm/javascript-notes

I don't know if anyone got the same issues, or it has been posted either here or in Slack channel. However, I have a problem with Eslint setting in VScode.

Issue:
eslint.autoFixOnSave is no longer working for ESlint ver 2.0.4

Solution:
"editor.codeActionsOnSave": {
"source.fixAll.eslint" : true
}

They posted solution in the link below:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

So I got the free trial API key from https://api.exchangeratesapi.io/ and when I tried it in chrome I got error Access Restricted - Your current Subscription Plan does not support HTTPS Encryption. I tried with HTTP but Chrome was of course internally redirecting me to HTTPS.
So I disabled it via chrome://net-internals/#hsts and it started working, but somehow if I ran the function fetchRates() in chrome console from my local server it was still redirecting me to HTTPS so I was unable to get currencies.

I switched to this free API https://app.exchangerate-api.com/

I don't know why but it took me 1 hour of my life, I'm going to sleep it off now... Goodnight, world!

The description object in package.json file has a value full of the eyes symbol, i.e. "👀". Please fix this.
https://github.com/wesbos/beginner-javascript/blob/master/package.json

color is bad

Iam new

The tools needed and they're complex interaction are breezed by and Wes Bos makes allot of assumptions. I found it discouraging to the point that I was going to ask for a Refund, but luckily my friend took the time to sit down and help explain everything to me to get set up. that took about 45 min of really simplified explanations . Like wtf even is command prompt, I researched that on my own. wtf is NodeJS, what is visual studios code, how do these things interact? do I need to have these files from git hub downloaded? how is he accessing these files? It was at 12 min video that should have been much longer and more hands on. Instead he flies through it like we all know what the fuck we are doing. Excuse me why did I just pay you over 100 dollars to teach me coding? still on the fence with so many great resources out there, I'm not at all sold on this material and the way it is presented. I'm a true rookie and just want to start fresh with a good source and this was a bad bad terrible way to start the class off.
So please slow the fuck down, stop making so many assumptions and explain ALL OF THE TOOLS IN ONE VIDEO and walk us through them conceptually, and their application and uses like your explaining it to people who have no idea wtf your talking about because that's literally why were here...
so after seeking multiple other sources to find out what NodeJS even is, and then after watching tutorials about how to run command prompt on PC again from another source. Now you are access files from the command prompt that I dont have and you haven't explained how you got them. And then 3 videos later we need to download more stuff from the command prompt and in a rather confusing way.
Its hard to get started building a bird house when the shop teacher never tells you how to use the table saw and just jumps on in assuming you already know. See what I mean?

I looks like the currency rate api used in the exercise is locked behind an api key now. It's free, but requires an account. I ended up using this one, as it's is open and works as a drop in replacement:

https://ratesapi.io/

Housekeeping item.

In case viewers want to code this one up...

There's one click-outside.js file in the 34 - Click Outside folder. It's not appended with -FINISHED but it's the coded solution.

There are obvious user-generated solutions here😎 Just a heads up.

🌈

In the Types - Numbers video (#8) at 0:07, you stated:

"There's only one type of numbers in JavaScript, and that is simply just Number."

This is incorrect, given that BigInt is now a numeric type of the language (Stage 4), which means that JavaScript currently has two built-in numeric types: Number and BigInt. This can be verified on the language specification:

https://tc39.es/ecma262/#sec-numeric-types

In the Arrays video (#45) at 20:14, you stated:

"There is no method to insert an item at a specific index."

However, there is, indeed, a method that allows us to insert an item at a specific index, which is the .splice method. We just pass in 0 as the number of items to remove, and after that, we pass in whatever items we to insert at the referenced index.

Using this method, we could rewrite the examples you explained like this:

const bikes = ['bianchi', 'miele', 'panasonic', 'miyata'];
const newBikes = [...bikes];
newBikes.splice(2, 0, 'benotto');
console.log(newBikes);

// Here, I assume you wanted to remove 'panasonic' from the unaltered 'bikes' array
const newBikes2 = [...bikes];
newBikes2.splice(2, 1);
console.log(newBikes2);

In order to get ES Lint to work in VS Code for me, I had to rename .eslintrc-FINISHED to .eslintrc

Hi Wes,

Im sorry if this is the wrong place to create this issue just a quick issue in regards to the attached notes from @geekysrm (Thanks for making them! :D)

When trying to visit the attached notion site I get the following error in console and the page doesnt load.

Please feel free to close this if its the wrong place to bring it up.

Thanks!

"/.../ In out case ..." and then the video ends.

Thank you for the great course 🙏!

Images are broken because picsum.photos no loner allows public access to images.
To experience this issue go to Exercises -> 20 - The DOM -> index-FINISHED.html

There are other alternate sites we can use for public images.
I can create a fix and open a PR for it just let me know.

It should probably say: turn it into an array

👀

Reached this lesson yesterday and was unable to ping the API; took me a while to realise there was PHP database errors displaying on the page and it wasn't me having CORS problems 🤦🏻‍♂️

Not sure if it's only a temporary issue or not, but looking at the Wayback Machine it seems like the site has been displaying the errors for the best part of a week now. None of their social channels have been updated for years and their Contact Form also returns a 404 so bit difficult to contact them to check, so thought I'd flag it here in case it doesn't come back up.

someone know if there are subtitles of the videos in the repo...

When trying to run the sound visualizer finished html file I run into the following errors.

1. Failed to load resource
2. Cannot use import statement outside a module

The resource error can be fixed simply by changing line 1 from

import { hslToRgb } from './utils';

To

import { hslToRgb } from './utils.js';

I have not double checked the course walk through to find why this did not come up earlier but none the less.

The second error can be fixed by changing the script type to module.

<script type="module" src="./sound.js"></script>

This does mean that in order to run the html file you will need to use a npm live server. Again I have not double checked the course to see if this is what was done in the first place.

If this is not acceptable then consider just moving everything into one file and not bother with imports.

I do realize that this course is extremely old so perhaps you don't care anymore but I thought I would make the effort

In video #38 - "Flow Control - If Statements, Function Returns, Truthy, Falsy", at 12:04, you state:

"These greater than, less than, and equal to operators only ever deal with numbers."

And, although these operators do prefer numeric comparison, it is not true that they only deal with numbers. In fact, when using relational comparison operators on strings, the comparison uses a simple lexicographic ordering on sequences of code unit values. It handles string comparison properly and yields a boolean result accordingly. For example:

console.log( 'W' > 'B' ); // true
console.log( 'Wet' > 'Wes' ); // true
console.log( 'Java' > 'JavaScript' ); // false

More details about can be found on the Language Specification: https://tc39.es/ecma262/#sec-abstract-relational-comparison

open wechat && alipay?

no visa card,no paypal

WHAT IN THE READMME.MD FILE

WHY EYES IN IT

Wes,
Do you have any recommendation how to setup Windows 10 environment with NPM?
Would the following setup be sufficient?
https://www.techomoro.com/install-node-js-and-npm-on-windows-10/

Thank you for your help,
Chris

Hey there Wes! I was completing lesson 77, the currency converter, when I got this error in my console:

To make sure I had the right endpoint I went to [https://api.ratesapi.io/latest]. Met with a can't reach this page:

So, I then went to the actual url https://api.ratesapi.io. Same result

Next I tried ratesapi.io and was redirected to:
https://exchangeratesapi.io/pricing/

As you can see the current api being used is down and probably not coming back, although they do offer a free and paid keys.

Searching for alternative service and I'll probably just sign up for the free key from this one. However, it's less than ideal and should be addressed in the copy pasta.

Thanks for the course 👍
Ben

In the Scroll to accept exercise I had some confusing behaviour working with the disabled state of the accept button and refreshing the page. On refresh the button was not disabled.

I thought OMG, someone is gonna accept without reading it all 🙀

I'm using firefox and it turns out firefox persists the dynamic disabled state of a across page loads 💩

It can be worked around by setting autocomplete="off" on the button. Threw me off for a little while there. Perhaps mention it as a x-browser concern or quietly update the html.

Thanks for a great course 🙏

When passed to getRandomBetween() here, typeMin and typeMax are still strings taken directly from el.dataset. Not sure exactly how the function is treating these numeric strings under the hood, but it's not parsing them as ints:

Upon opening index.html in Chrome, I get this error message in the console:

[Deprecation] CSS cannot be loaded from file: URLs unless they end in a .css file extension.

The file in question is style.scss (written by Wes).

I'm sure that there's a solution to this, but I wanted to post this here because this prevents beginners from continuing with the lesson/exercise.

Update: appears to be a non-issue in Firefox.

On the folder in exercises labeled 55 - face detection I typed npm install on WSL and on Powershell. Both installations failed more than once and after clearing the cache on each terminal shell. Here's the full log on PowerShell.

`Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

Install the latest PowerShell for new features and improvements! https://aka.ms/PSWindows

PS C:\Users\benja\OneDrive\Dev\Courses\beginner-javascript-master\exercises\55 - Face Detection Censorship> npm install
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: Version no longer supported. Upgrade to @latest
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.  
npm ERR! code 1
npm ERR! path C:\Users\benja\OneDrive\Dev\Courses\beginner-javascript-master\exercises\55 - Face Detection Censorship\node_modules\@parcel\watcher
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c prebuild-install -r napi || node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp info find Python using Python version 3.9.10 found at "C:\Users\benja\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.9_qbz5n2kfra8p0\python.exe"
npm ERR! gyp http GET https://nodejs.org/download/release/v16.13.2/node-v16.13.2-headers.tar.gz
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.13.2/node-v16.13.2-headers.tar.gz
npm ERR! gyp http GET https://nodejs.org/download/release/v16.13.2/SHASUMS256.txt
npm ERR! gyp http GET https://nodejs.org/download/release/v16.13.2/win-arm64/node.lib
npm ERR! gyp http GET https://nodejs.org/download/release/v16.13.2/win-x64/node.lib
npm ERR! gyp http GET https://nodejs.org/download/release/v16.13.2/win-x86/node.lib
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.13.2/SHASUMS256.txt
npm ERR! gyp http 404 https://nodejs.org/download/release/v16.13.2/win-arm64/node.lib
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.13.2/win-x64/node.lib
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.13.2/win-x86/node.lib
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14)   
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:404:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"        
npm ERR! gyp ERR! cwd C:\Users\benja\OneDrive\Dev\Courses\beginner-javascript-master\exercises\55 - Face Detection Censorship\node_modules\@parcel\watcher
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v8.3.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\benja\AppData\Local\npm-cache\_logs\2022-01-31T21_38_28_409Z-debug.log`

After switching to parcel 2.0.0 from the alpha in the original packageJSON everything installed fine and the dev server booted up.

{
  "name": "pixelated-face",
  "version": "1.0.0",
  "description": "",
  "main": "pixelated-face.js",
  "scripts": {
    "start": "parcel face.html"
  },
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 1 Chrome version"
  ],
  "dependencies": {
    "parcel": "^2.0.0"
  }
}

I was able to debug and fix but most newbie devs would most likely struggle to fix this. If you want I can submit a pull request to bump the version or update it yourself 👍🏻 😄

Excellent course Wes.
Best,
Ben

In /exercises/46 - Arrays/array-loopings-methods.html on line 146,

// index === originalArray.length && console.log('Goodbye');

The short circuit example incorrectly uses originalArray.length instead of originalArray.length - 1. Because of this, the console log will never be run.

This was added to the file in Video 49 at time 9:59.

I noticed that there is no Arrow function used...may i know why?

Just watched the face detection video, super fun! I didn't try it myself yet, but I noticed the face detection creates a lag so it appears that if you moved your head really quickly, your full face could be visible for a moment before the detection catches up.

Thought an additional 'bonus' exercise for this video might be worthwhile to show how to sync the detection with the video. I expect it would mean the video would lag by the same amount as the face detection and the framerate too would dip down to the rate that faces can be detected, so definitely would come with drawbacks.

A simple approach might be to pass a frame from the video to the face detector instead of a stream, then when that promise completes, fill the canvas with that same frame first, then draw the pixelated version over top. Then don't update the canvas again until another face detection cycle completes (that's where the framerate will drop).

Maybe overkill for a beginner JS course but if you want to see a POC I could see what I can come up with. Otherwise feel free to close! Thanks for the course BTW.

Hello,
I am working along the lecture 14. I have encountered a behavior that I am not able to figure.

I wrote custom functions and I tried to displayed results in the console just like Wes.
When I entered a parameter to a function call I received a function name not a parameter content.
I wonder if this error is related to my setup or a browser.
Visual Studio Code
Browser: MS Edge Chromium and Firefox
I have attached a screen shot.
Thanks,
Chris
I use Go Live server extension in VSC.

My JavaScript file.
'function doctorize(name) {
return "Dr. ${name}";
}

function yell(name) {
return "Hey ${name.toUpperCase()}";
}

In the Arrays video (#45) at 31:46, you stated that if one wants to overwrite the original array (comments)—within the deleteComment function—one just has to change the variable declaration keyword from const to let.

However, this is incorrect given that regardless of whether we declare the variable via const or let, we are returning a new array, so in order, to actually overwrite the comments array, it is necessary to modify it in place and return it, like so:

function deleteComment(id, comments) {
    // first find the index of the item in the array
    const commentIndex = comments.findIndex(comment => comment.id === id);

    // remove the item at index commentIndex via .splice (modifying the comments array in place)
    comments.splice(commentIndex, 1);
    return comments;
}

Also, as a suggestion, the code for the case in which a new array is returned might be rewritten using .splice for better readability, like so:

function deleteComment(id, comments) {
    // first find the index of the item in the array
    const commentIndex = comments.findIndex(comment => comment.id === id);

    // make a new array without that item in it
    const newComments = [...comments];
    newComments.splice(commentIndex, 1);
    return newComments;
}

In video #38 - "Flow Control - If Statements, Function Returns, Truthy, Falsy", you explain falsy vs truthy values, summarizing a list of falsy/truthy values:

There are two more falsy values that you did not mention in the examples, and those are -0 and false (which might be pretty obvious but I think you should have listed for the sake of completeness).

Just so you know: VS Code no longer shows the {} when you go into Settings as described in video 5.

Here's more on that:

https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations

...basically you have to do cmd-shift-P to open the commands palette and select Open Settings (JSON).

Cheers!