jiebi/CodeConvo huggingface dataset:
Currently, you cannot determine who is connected to your web socket. While `req.user` contains the user object, that's only when your user interacts with the web server, and with web sockets you have no `req` (request) and therefore no user data. One way to solve the problem of knowing who is connected to your web socket is by parsing and decoding the cookie that contains the passport session then deserializing it to obtain the user object. Luckily, there is a package on NPM just for this that turns a once complex task into something simple! <del> Add `passport.socketio`, `connect-mongo@~3.2.0`, and `cookie-parser` as dependencies and require them as `passportSocketIo`, `MongoStore`, and `cookieParser` respectively. Also, we need to initialize a new memory store, from `express-session` which we previously required. It should look like this: </del> <ins> Add `passport.socketio@~3.7.0`, `connect-mongo@~3.2.0`, and `cookie-parser@~1.4.5` as dependencies and require them as `passportSocketIo`, `MongoStore`, and `cookieParser` respectively. Also, we need to initialize a new memory store, from `express-session` which we previously required. It should look like this: </ins> ```js const MongoStore = require('connect-mongo')(session);
Going back to the information security section, you may remember that storing plaintext passwords is *never* okay. Now it is time to implement BCrypt to solve this issue. <del> Add BCrypt as a dependency, and require it in your server. You will need to handle hashing in 2 key areas: where you handle registering/saving a new account, and when you check to see that a password is correct on login. </del> <ins> Add `bcrypt@~5.0.0` as a dependency, and require it in your server. You will need to handle hashing in 2 key areas: where you handle registering/saving a new account, and when you check to see that a password is correct on login. </ins> Currently on our registration route, you insert a user's password into the database like so: `password: req.body.password`. An easy way to implement saving a hash instead is to add the following before your database logic `const hash = bcrypt.hashSync(req.body.password, 12);`, and replacing the `req.body.password` in the database saving with just `password: hash`.
# --description-- <del> The last part of setting up your GitHub authentication is to create the strategy itself. For this, you will need to add the dependency of 'passport-github' to your project and require it in your `auth.js` as `GithubStrategy` like this: `const GitHubStrategy = require('passport-github').Strategy;`. Do not forget to require and configure `dotenv` to use your environment variables. </del> <ins> The last part of setting up your GitHub authentication is to create the strategy itself. For this, you will need to add the dependency of `passport-github@~1.1.0` to your project and require it in your `auth.js` as `GithubStrategy` like this: `const GitHubStrategy = require('passport-github').Strategy;`. Do not forget to require and configure `dotenv` to use your environment variables. </ins> To set up the GitHub strategy, you have to tell Passport to use an instantiated `GitHubStrategy`, which accepts 2 arguments: an object (containing `clientID`, `clientSecret`, and `callbackURL`) and a function to be called when a user is successfully authenticated, which will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies, but some may require more information as outlined in that specific strategy's GitHub README. For example, Google requires a *scope* as well which determines what kind of information your request is asking to be returned and asks the user to approve such access. The current strategy we are implementing has its usage outlined [here](https://github.com/jaredhanson/passport-github/), but we're going through it all right here on freeCodeCamp!
To set this up properly, we need to have a serialize function and a deserialize function. In Passport, we create these with `passport.serializeUser( OURFUNCTION )` and `passport.deserializeUser( OURFUNCTION )` <del> The `serializeUser` is called with 2 arguments, the full user object and a callback used by passport. A unique key to identify that user should be returned in the callback, the easiest one to use being the user's `_id` in the object. It should be unique as it generated by MongoDB. Similarly, `deserializeUser` is called with that key and a callback function for passport as well, but, this time, we have to take that key and return the full user object to the callback. To make a query search for a Mongo `_id`, you will have to create `const ObjectID = require('mongodb').ObjectID;`, and then to use it you call `new ObjectID(THE_ID)`. Be sure to add MongoDB as a dependency. You can see this in the examples below: </del> <ins> The `serializeUser` is called with 2 arguments, the full user object and a callback used by passport. A unique key to identify that user should be returned in the callback, the easiest one to use being the user's `_id` in the object. It should be unique as it generated by MongoDB. Similarly, `deserializeUser` is called with that key and a callback function for passport as well, but, this time, we have to take that key and return the full user object to the callback. To make a query search for a Mongo `_id`, you will have to create `const ObjectID = require('mongodb').ObjectID;`, and then to use it you call `new ObjectID(THE_ID)`. Be sure to add `mongodb@~3.6.0` as a dependency. You can see this in the examples below: </ins> ```js passport.serializeUser((user, done) => {
It's time to set up *Passport* so we can finally start allowing a user to register or login to an account! In addition to Passport, we will use Express-session to handle sessions. Using this middleware saves the session id as a cookie in the client and allows us to access the session data using that id on the server. This way we keep personal account information out of the cookie used by the client to verify to our server they are authenticated and just keep the *key* to access the data stored on the server. <del> To set up Passport for use in your project, you will need to add it as a dependency first in your package.json. `"passport": "^0.3.2"` </del> <ins> To set up Passport for use in your project, you will need to add it as a dependency first in your package.json. `passport@~0.4.1` </ins> <del> In addition, add Express-session as a dependency now as well. Express-session has a ton of advanced features you can use but for now we're just going to use the basics! `"express-session": "^1.15.0"` </del> <ins> In addition, add Express-session as a dependency now as well. Express-session has a ton of advanced features you can use but for now we're just going to use the basics! `express-session@~1.17.1` </ins> You will need to set up the session settings now and initialize Passport. Be sure to first create the variables 'session' and 'passport' to require 'express-session' and 'passport' respectively.
The following challenges will make use of the `chat.pug` file. So, in your `routes.js` file, add a GET route pointing to `/chat` which makes use of `ensureAuthenticated`, and renders `chat.pug`, with `{ user: req.user }` passed as an argument to the response. Now, alter your existing `/auth/github/callback` route to set the `req.session.user_id = req.user.id`, and redirect to `/chat`. <del> Add `http` and `socket.io` as a dependency and require/instantiate them in your server defined as follows: </del> <ins> Add `socket.io@~2.3.0` as a dependency and require/instantiate it in your server defined as follows, with `http` (comes built-in with Nodejs): </ins> ```javascript const http = require('http').createServer(app);
```js // doubles input value and returns it const doubler = (item) => item * 2; <ins> doubler(4); // returns 8 </ins> ``` <del> If an arrow function has a single argument, the parentheses enclosing the argument may be omitted. </del> <ins> If an arrow function has a single parameter, the parentheses enclosing the parameter may be omitted. </ins> ```js <del> // the same function, without the argument parentheses </del> <ins> // the same function, without the parameter parentheses </ins> const doubler = item => item * 2; ```
}; ``` <ins> If `value` submitted to `/api/check` is already placed in `puzzle` on that `coordinate`, the returned value will be an object containing a `valid` property with `true` if `value` is not conflicting. ```js async (getUserInput) => { const input = '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; const coordinate = 'C3'; const value = '2'; const data = await fetch(getUserInput('url') + '/api/check', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ puzzle: input, coordinate, value }) }); const parsed = await data.json(); assert.property(parsed, 'valid'); assert.isTrue(parsed.valid); }; ``` </ins> If the puzzle submitted to `/api/check` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }` ```js
# --instructions-- <del> Create a second `p` element after the existing `p` element with the following kitty ipsum text: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.` </del> <ins> Create a second `p` element with the following kitty ipsum text: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.` </ins> <del> Then, create a `main` element and nest the two `p` elements inside the `main` element. </del> <ins> Then, create a `main` element and nest only the two `p` elements inside the `main` element. </ins> # --hints--
h4.negative-10.text-nowrap Community Builder img.profile-image(src='https://s3.amazonaws.com/freecodecamp/branden-byers.jpg' alt="Branden Byers picture") h4.text-nowrap Madison, Wisconsin <del> p.negative-10 "I'm a massage therapist and Stay-at-home-dad. I learned Hypercard, then Rails, but now I feel at home with JavaScript." </del> <ins> p.negative-10 "Cookbook author and stay-at-home-dad. Started coding as a kid, got distracted, but now I'm back in full JavaScript force!" </ins> .col-xs-12.col-sm-4.col-md-3.team-member h3.negative-10.text-nowrap Michael Johnson h4.negative-10.text-nowrap Nonprofit Coordinator
h4.negative-10.text-nowrap Live Content Manager img.profile-image(src='https://s3.amazonaws.com/freecodecamp/jason-rueckert.jpg' alt="Jason Rueckert's picture") h4.text-nowrap Seattle, Washington <del> p.negative-10 "My high school job was testing basketball shoes for Nike. I learned code to work smarter, not harder. I have no thyroid." </del>  No newline at end of file <ins> p.negative-10 "My high school job was testing basketball shoes for Nike. I learned code to work smarter, not harder. I have no thyroid." </ins>
## The `dashedName` Property <del> The `dashedName` property is used to generate the URL path for the superblock, block, or challenge. These should generally match what the `/utils/dasherize.js` helper would output for the file name. </del> <ins> The `dashedName` property is used to generate the URL path for the superblock, block, or challenge. These should generally match what the `/utils/slugs.js` helper would output for the file name. </ins>
# --description-- <del> The `input` element allows you several ways to collect data from a web form. Like anchor (`a`) elements, `input` elements are <dfn>self-closing</dfn> and do not need closing tags. </del> <ins> The `input` element allows you several ways to collect data from a web form. Like `img` elements, `input` elements are <dfn>self-closing</dfn> and do not need closing tags. </ins> Nest an `input` element in the `form` element.
# --description-- <del> You may be familiar with the `meta` tag already; it is used to specify information about the page, such as the title, description, keywords, and author. </del> <ins> You may be familiar with the `meta` element already; it is used to specify information about the page, such as the title, description, keywords, and author. </ins> <del> Give your page a `meta` tag with an appropriate `charset` value. </del> <ins> Give your page a `meta` element with an appropriate `charset` value. </ins> The `charset` attribute specifies the character encoding of the page, and, nowadays, `UTF-8` is the only encoding supported by most browsers.
# --description-- <del> Continuing with the `meta` tags, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation). </del> <ins> Continuing with the `meta` elements, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation). </ins> Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page.
# --description-- <del> Another important `meta` tag for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page. </del> <ins> Another important `meta` element for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page. </ins> <del> Add a `meta` tag with the `name` attribute set to `description`, and give it a useful `content` attribute. </del> <ins> Add a `meta` element with the `name` attribute set to `description`, and give it a useful `content` attribute. </ins> # --hints-- <del> You should add a new `meta` tag to the `head`. </del> <ins> You should add a new `meta` element to the `head`. </ins> ```js assert.equal(document.querySelectorAll('meta').length, 3);
The `console.log(array[0])` prints `50`, and `data` has the value `60`. <del> **Note:** There shouldn't be any spaces between the array name and the square brackets, like `array [0]`. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. </del> # --instructions-- Create a variable called `myData` and set it to equal the first value of `myArray` using bracket notation.
Your `#video` should have a `src` attribute ```js <del> const el = document.getElementById('video') assert(!!el && !!el.src) </del> <ins> let el = document.getElementById('video') const sourceNode = el.children; let sourceElement = null; if (sourceNode.length) { sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; } if (sourceElement) { el = sourceElement; } assert(el.hasAttribute('src')); </ins> ``` You should have a `form` element with an `id` of `form`
Your `#video` should have a `src` attribute. ```js <del> const el = document.getElementById('video') assert(!!el && !!el.src) </del> <ins> let el = document.getElementById('video') const sourceNode = el.children; let sourceElement = null; if (sourceNode.length) { sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; } if (sourceElement) { el = sourceElement; } assert(el.hasAttribute('src')); </ins> ``` You should have a `form` element with an `id` of `form`.
# --description-- <del> So far you have been using type selectors to style elements. A <dfn>class selector</dfn> is defined by a name with a dot directly in front it, like this: </del> <ins> So far you have been using type selectors to style elements. A <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this: </ins> ```css .class-name {
# --hints-- <del> You should have a `@media (prefers-reduced-motion: no-preference)` rule. </del> <ins> You should have one `@media (prefers-reduced-motion: no-preference)` rule. </ins> ```js <del> assert.exists(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')); </del> <ins> assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)').length, 1); </ins> ``` You should wrap the existing `*` rule within the `@media` rule.
You should have an opening `<html>` tag with a `lang` attribute of `en`. ```js <del> assert(code.match(/<htmls+lang=('|")en1s*>/i)); </del> <ins> assert(code.match(/<htmls+langs*=s*('|")en1s*>/gi)); </ins> ``` You should have a closing `<html>` tag. Remember that closing tags have a `/` following the opening `<` bracket.
} ``` <del> This would log `Alan`, `Jeff`, `Sarah`, and `Ryan` - each value on its own line. </del> <ins> This would log `Alan`, `Jeff`, and `Sarah` - each value on its own line. </ins> In this statement, we defined a variable `user`, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console.
assert(!!el && el.tagName === 'LABEL') ``` <del> Your `#name-label` should not be empty </del> <ins> Your `#name-label` should contain text that describes the input. </ins> ```js const el = document.getElementById('name-label') assert(!!el && el.innerText.length > 0) ``` <del> Your `#email-label` should not be empty </del> <ins> Your `#email-label` should contain text that describes the input. </ins> ```js const el = document.getElementById('email-label') assert(!!el && el.innerText.length > 0) ``` <del> Your `#number-label` should not be empty </del> <ins> Your `#number-label` should contain text that describes the input. </ins> ```js const el = document.getElementById('number-label')
assert(!!el && el.tagName === 'LABEL') ``` <del> Your `#name-label` should not be empty. </del> <ins> Your `#name-label` should contain text that describes the input. </ins> ```js const el = document.getElementById('name-label') assert(!!el && el.innerText.length > 0) ``` <del> Your `#email-label` should not be empty. </del> <ins> Your `#email-label` should contain text that describes the input. </ins> ```js const el = document.getElementById('email-label') assert(!!el && el.innerText.length > 0) ``` <del> Your `#number-label` should not be empty. </del> <ins> Your `#number-label` should contain text that describes the input. </ins> ```js const el = document.getElementById('number-label')
npm run create-next-step ``` <del> ## create-empty-steps </del> <ins> ### create-empty-steps </ins> A one-off script that automatically adds a specified number of steps. The challenge seed code for all steps created will be empty. **Note:** This script also runs [update-step-titles](#update-step-titles). <del> ### How to run script: </del> <ins> #### How to run script: </ins> 1. Change to the directory of the project. 2. Run the following npm command:
npm run create-empty-steps X # where X is the number of steps to create. ``` <del> ## insert-step </del> <ins> ### insert-step </ins> A one-off script that automatically adds a new step at a specified position, incrementing all subsequent steps (both their titles and in their meta.json). The challenge seed code will use the previous step's challenge seed code with the editable region markers (ERMs) removed. **Note:** This script also runs [update-step-titles](#update-step-titles). <del> ### How to run script: </del> <ins> #### How to run script: </ins> 1. Change to the directory of the project. 2. Run the following npm command:
npm run insert-step X # where X is the position to insert the new step. ``` <del> ## delete-step </del> <ins> ### delete-step </ins> A one-off script that deletes an existing step, decrementing all subsequent steps (both their titles and in their meta.json) **Note:** This script also runs [update-step-titles](#update-step-titles). <del> ### How to run script </del> <ins> #### How to run script </ins> 1. Change to the directory of the project. 2. Run the following npm command:
npm run delete-step X # where X is the step number to be deleted. ``` <del> ## update-step-titles </del> <ins> ### update-step-titles </ins> A one-off script that automatically updates the frontmatter in a project's markdown files so that they are consistent with the project's meta.json. It ensures that each step's title (and dashedName) match the meta's challengeOrder. <del> ### How to run script </del> <ins> #### How to run script </ins> 1. Change to the directory of the project. 2. Run the following npm command:
Add all your code for these lessons in the `server.js` file between the code we have started you off with. Do not change or delete the code we have added for you. <del> BCrypt has already been added as a dependency, so require it ad `bcrypt` in your server. </del> <ins> BCrypt has already been added as a dependency, so require it as `bcrypt` in your server. </ins> Submit your page when you think you've got it right.
li &#8226 Understand that they will build your project using JavaScript frameworks (as opposed to older or proprietary tools) li &#8226 Keep your expectations high. Our students' goal is to produce work that's up to your standards h3 If you're OK with these terms, great! We'd love to help you! Fill in this form and we'll get right back to you. <del> form.form-horizontal(role='form', action="/nonprofits/", method='POST') </del> <ins> form.form-horizontal(role='form', action="/nonprofits/", method='POST', novalidate='novalidate', name='nonprofitForm') </ins> input(type='hidden', name='_csrf', value=_csrf) .form-group <del> label(class='col-sm-2 control-label', for='name') Your name </del> <ins> label(class='col-sm-2 control-label', for='name') Your name * </ins> .col-sm-8 <del> input.form-control(type='text', name='name', id='name') </del> <ins> input.form-control(type='text', name='name', id='name', autocomplete="off", ng-model='name', required='required') .col-sm-8.col-sm-offset-2(ng-show="nonprofitForm.name.$invalid && nonprofitForm.name.$error.required && !nonprofitForm.name.$pristine") alert(type='danger') span.ion-close-circled(id='#name-error') |  Your name is required. </ins> .form-group <del> label(class='col-sm-2 control-label', for='email') Your email </del> <ins> label(class='col-sm-2 control-label', for='email') Your email * </ins> .col-sm-8 <del> input.form-control(type='text', name='email', id='email') </del> <ins> input.form-control(type='text', name='email', id='email', autocomplete="off", ng-model='email', required='required') .col-sm-8.col-sm-offset-2(ng-show="nonprofitForm.email.$invalid && nonprofitForm.email.$error.required && !nonprofitForm.email.$pristine") alert(type='danger') span.ion-close-circled(id='#email-error'). Your email is required. </ins> .form-group <del> label(class='col-sm-2 control-label', for='message') Briefly describe what problem you need to solve, and for whom. </del> <ins> label(class='col-sm-2 control-label', for='message') Briefly describe what problem you need to solve, and for whom. * </ins> .col-sm-8 <del> textarea.form-control(type='text', name='message', id='message', rows='7') </del> <ins> textarea.form-control(type='text', name='message', id='message', rows='7', autocomplete="off", ng-model='message', required='required') .col-sm-8.col-sm-offset-2(ng-show="nonprofitForm.message.$invalid && nonprofitForm.message.$error.required && !nonprofitForm.message.$pristine") alert(type='danger') span.ion-close-circled(id='#message-error') | Your message is required. </ins> .form-group .col-sm-offset-2.col-sm-8 <del> button.btn.btn-primary(type='submit') </del> <ins> button.btn.btn-primary(type='submit', ng-disabled='nonprofitForm.$invalid') </ins> span.ion-paper-airplane <del> | Submit </del> <ins> | Submit </ins>  No newline at end of file
**Examples** <del> `3 == '3'` returns `true` because JavaScript performs type conversion from string to number. `3 === '3'` returns false because the types are different and type conversion is not performed. </del> <ins> `3 == '3'` returns `true` because JavaScript performs type conversion from string to number. `3 === '3'` returns `false` because the types are different and type conversion is not performed. </ins> **Note:** In JavaScript, you can determine the type of a variable or a value with the `typeof` operator, as follows: