freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.
We're gonna change the presentation of our bar charts. We'll separate them out by adding some margins and multiplying our heights by a constant to scale the bars.
Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart
Concepts:
selection.style(name[, value[, priority]])
If a value is specified, sets the style property with the specified name to the specified value on the selected elements and returns this selection. If the value is a constant, then all elements are given the same style property value; otherwise, if the value is a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The function’s return value is then used to set each element’s style property. A null value will remove the style property. An optional priority may also be specified, either as null or the string important (without the exclamation point).
If a value is not specified, returns the current value of the specified style property for the first (non-null) element in the selection. The current value is defined as the element’s inline value, if present, and otherwise its computed value. Accessing the current style value is generally useful only if you know the selection contains exactly one element.
https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_style
selection.attr(name[, value])
If a value is specified, sets the attribute with the specified name to the specified value on the selected elements and returns this selection. If the value is a constant, all elements are given the same attribute value; otherwise, if the value is a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The function’s return value is then used to set each element’s attribute. A null value will remove the specified attribute.
If a value is not specified, returns the current value of the specified attribute for the first (non-null) element in the selection. This is generally useful only if you know that the selection contains exactly one element.
https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_attr
D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards.
-————————————————————————————————————-
D3.js (also known as D3,
...
https://www.youtube.com/watch?v=UGLT8Z_G9vg
We're now gonna set the domain and range. Refer to the previous challenge for more clarification.
Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale
Concepts:
d3.scaleLinear([[domain, ]range])
Constructs a new continuous scale with the specified domain and range, the default interpolator and clamping disabled. If either domain or range are not specified, each defaults to [0, 1]. Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y can be expressed as a function of the domain value x: y = mx + b.
https://github.com/d3/d3-scale#linear-scales
continuous.domain([domain])
If domain is specified, sets the scale’s domain to the specified array of numbers. The array must contain two or more elements. If the elements in the given array are not numbers, they will be coerced to numbers. If domain is not specified, returns a copy of the scale’s current domain.
https://github.com/d3/d3-scale#continuous_domain
continuous.range([range])
If range is specified, sets the scale’s range to the specified array of values. The array must contain two or more elements. Unlike the domain, elements in the given array need not be numbers; any value that is supported by the underlying interpolator will work, though note that numeric ranges are required for invert. If range is not specified, returns a copy of the scale’s current range. See continuous.interpolate for more examples.
https://github.com/d3/d3-scale#continuous_range
-————————————————————————————————————-
D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards.
freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.
Thanks for Watching
...
https://www.youtube.com/watch?v=8M7Xkt48YAQ
If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. Find the sum of all the multiples of 3 or 5 below the provided parameter value number.
Link to Challenge : https://www.freecodecamp.org/learn/coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5
Written Guide and Source Code : https://www.notion.so/ganeshh123/Multiples-of-3-and-5-595ff47362ff45c6b3dfa793cbc826a3
Full Playlist: https://www.youtube.com/playlist?list=PLhGp6N0DI_1RQjG0wIOi2afjuh9iIeHU6
Project Euler Written Guides : https://www.notion.so/ganeshh123/62598b647b6040f88843b33b46faa309
All My Tutorials can be found at : https://www.notion.so/Tutorials-Ganesh-H-293ea420d34a464f9a1907e0405b5f26
00:00 - Introduction
01:32 - Working
06:00 - Solution
-————————————————————————————————————-
Project Euler (named after Leonhard Euler) is a website dedicated to a series of computational problems intended to be solved with computer programs. The project attracts adults and students interested in mathematics and computer programming. Since its creation in 2001 by Colin Hughes, Project Euler has gained notability and popularity worldwide. It includes over 700 problems, with a new one added once every one or two weeks. Problems are of varying difficulty, but each is solvable in less than a minute of CPU time using an efficient algorithm on a modestly powered computer. As of 5 April 2020, Project Euler has more than 1,000,000 users, from all over the world, who have solved at least one problem.
NOTE: I am not a teacher by any means, these videos are just to help me improve my understanding.
Thanks for Watching!
...
https://www.youtube.com/watch?v=Uyc1jTaqHp8
Work out the first ten digits of the sum of the following one-hundred 50-digit numbers.
Link to Challenge : https://www.freecodecamp.org/learn/coding-interview-prep/project-euler/problem-13-large-sum
Written Guide and Source Code : https://www.notion.so/ganeshh123/Large-sum-1ca611ed100a434f906bdc21ff2b858c
Full Playlist: https://www.youtube.com/playlist?list=PLhGp6N0DI_1RQjG0wIOi2afjuh9iIeHU6
Project Euler Written Guides : https://www.notion.so/ganeshh123/62598b647b6040f88843b33b46faa309
All My Tutorials can be found at : https://www.notion.so/Tutorials-Ganesh-H-293ea420d34a464f9a1907e0405b5f26
00:00 - Introduction
01:32 - Working
06:12 - Solution
-————————————————————————————————————-
Project Euler (named after Leonhard Euler) is a website dedicated to a series of computational problems intended to be solved with computer programs. The project attracts adults and students interested in mathematics and computer programming. Since its creation in 2001 by Colin Hughes, Project Euler has gained notability and popularity worldwide. It includes over 700 problems, with a new one added once every one or two weeks. Problems are of varying difficulty, but each is solvable in less than a minute of CPU time using an efficient algorithm on a modestly powered computer. As of 5 April 2020, Project Euler has more than 1,000,000 users, from all over the world, who have solved at least one problem.
NOTE: I am not a teacher by any means, these videos are just to help me improve my understanding.
Thanks for Watching!
...
https://www.youtube.com/watch?v=SPcjieGSmNI
IMPORTANT: You must use Helmet version 2.3.0 to pass this test!
Browsers use MIME Type Sniffing to try and parse a file by reading it's contents and making a guess of the file type. This can be exploited to run malicious scripts, and we can set a header using helmet's noSniff() middleware to disable this.
Link to Challenge : https://www.freecodecamp.org/learn/information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet-nosniff
Written Guide: https://www.notion.so/ganeshh123/Avoid-Inferring-the-Response-MIME-Type-with-helmet-noSniff-e4c9340b0f5542b18ffe88e44f190d6a
Full Playlist for this course : https://www.youtube.com/playlist?list=PLhGp6N0DI_1TeEsQOdf1JmV8PnkQfEpQ4
All Writen Guides for this course : https://www.notion.so/ganeshh123/8ba82d9d1ff84c4583d6e9418ebe426b
All My Tutorials can be found at : https://www.notion.so/Tutorials-Ganesh-H-293ea420d34a464f9a1907e0405b5f26
00:00 - Introduction
00:06 - What is Mime Type Sniffing?
Content sniffing, also known as media type sniffing or MIME sniffing, is the practice of inspecting the content of a byte stream to attempt to deduce the file format of the data within it.
https://en.wikipedia.org/wiki/Content_sniffing
01:00 - Danger with MIME Type Sniffing
https://youtu.be/eq6R6dxRuiU
01:54 - X-Content-Type-Options Header
The X-Content-Type-Options response HTTP header is a marker used by the server to indicate that the MIME types advertised in the Content-Type headers should not be changed and be followed. This is a way to opt out of MIME type sniffing, or, in other words, to say that the MIME types are deliberately configured.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
02:30 - Use Helmet version 2.3.0
02:54 - Setting the Header - helmet.noSniff()
helmet.noSniff sets the X-Content-Type-Options header to nosniff. This mitigates MIME type sniffing which can cause security vulnerabilities.
https://github.com/helmetjs/helmet/tree/master/middlewares/x-content-type-options
03:28 - Explanation of Solution
-————————————————————————————————————-
HelmetJS is a type of middleware for Express-based applications that automatically sets HTTP headers to prevent sensitive information from unintentionally being passed between the server and client. While HelmetJS does not account for all situations, it does include support for common ones like Content Security Policy, XSS Filtering, and HTTP Strict Transport Security, among others. HelmetJS can be installed on an Express project from npm, after which each layer of protection can be configured to best fit the project.
freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists
...
https://www.youtube.com/watch?v=3VhJH3zuZwc
Don't be an overconfident idiot like me, and you should be fine here!
We can avoid setting up multiple routes, and instead chain the middleware functions one after the other. When declaring a route, you can give as many arguments as you can, consisting of functions to be executed in order.
Link to challenge : https://www.freecodecamp.org/learn/apis-and-microservices/basic-node-and-express/chain-middleware-to-create-a-time-server
Written Guide : https://www.notion.so/ganeshh123/Chain-Middleware-to-Create-a-Time-Server-80fdb6c9c543478589e5cef4807f46a9
Full Playlist for this course : https://www.youtube.com/playlist?list=PLhGp6N0DI_1SdIZ3uhbXnKAq2UcICSnWS
All Writen Guides for this course : https://www.notion.so/ganeshh123/dab5e189407244c793c2f32d066eee9f
All My Tutorials can be found at : https://www.notion.so/Tutorials-Ganesh-H-293ea420d34a464f9a1907e0405b5f26
Concepts:
Middleware
Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.
http://expressjs.com/en/guide/using-middleware.html
app.use()
Mounts the specified middleware function or functions at the specified path: the middleware function is executed when the base of the requested path matches path.
https://expressjs.com/en/api.html#app.use
-————————————————————————————————————-
Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser.
Express.js, or simply Express, is a web application framework for Node.js. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing.
freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving t
...
https://www.youtube.com/watch?v=21JhRUsuEPk
The final step is to be able to emit and receive chat messages that all clients can see. We can do this by emitting the message to the server, and letting the server emit it to all clients.
Link to Challenge : https://www.freecodecamp.org/learn/quality-assurance/advanced-node-and-express/send-and-display-chat-messages
Written Guide: https://www.notion.so/ganeshh123/Send-and-Display-Chat-Messages-ef6f91cb24c24164afb693b491a2508e
Full Playlist for this course : https://www.youtube.com/playlist?list=PLhGp6N0DI_1RL9djhgSH65pZhJ6xSyKX8
All Writen Guides for this course : https://www.notion.so/ganeshh123/ccf6039186334f83a54c1c9216f30e3c
All My Tutorials can be found at : https://www.notion.so/Tutorials-Ganesh-H-293ea420d34a464f9a1907e0405b5f26
00:00 - Introduction
00:07 - The 3 Step Process
00:24 - Emit the Message from Client to Server
01:42 - Emit the Message from Server to all Clients
03:25 - Receiving and Displaying Messages in the Client
04:30 - Testing Chat Messages
05:34 - Explanation of Solution
-————————————————————————————————————-
Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser.
Express.js, or simply Express, is a web application framework for Node.js. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing.
freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.
freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScrip
...
https://www.youtube.com/watch?v=hiTCPFNkWi4
This trick opens Command Prompt inside any folder or directory from Windows Explorer, without having to "cd" to it. This is especially useful for running scripts during Software Development.
-----------------------------------------------------------------------------------------------
Links :
Written Guide : https://www.notion.so/Quickly-Open-Command-Prompt-in-any-Folder-Windows-10-eea3c84cb86349ca973fb6510df31784
-----------------------------------------------------------------------------------------------
Commands:
cmd
-----------------------------------------------------------------------------------------------
Music:
'Coffee Shop' by PYC [https://www.patreon.com/PYCMusic]
Link: https://soundcloud.com/pycmusic/coffee-shop
-----------------------------------------------------------------------------------------------
cmd.exe is the default command-line interpreter for the OS/2, eComStation, ArcaOS, Microsoft Windows (Windows NT family and Windows CE family), and ReactOS operating systems. The name refers to its executable filename. It is also commonly referred to as cmd or the Command Prompt, referring to the default window title on Windows. The implementations differ on the various systems but the behavior and basic set of commands is generally consistent.
-----------------------------------------------------------------------------------------------
Thanks for Watching!
...
https://www.youtube.com/watch?v=IeFXb79nepc
To link login forms to our strategies, we can mount a middleware called passport.authenticate() to our POST route.
Link to Challenge : https://www.freecodecamp.org/learn/quality-assurance/advanced-node-and-express/how-to-use-passport-strategies
Written Guide: https://www.notion.so/ganeshh123/How-to-Use-Passport-Strategies-b37474d0b8a34d25b207034f8c965d19
Full Playlist for this course : https://www.youtube.com/playlist?list=PLhGp6N0DI_1RL9djhgSH65pZhJ6xSyKX8
All Writen Guides for this course : https://www.notion.so/ganeshh123/ccf6039186334f83a54c1c9216f30e3c
All My Tutorials can be found at : https://www.notion.so/Tutorials-Ganesh-H-293ea420d34a464f9a1907e0405b5f26
00:00 - Introduction
00:12 - Login Form Setup
00:55 - Creating a User Account Document for Testing
01:27 - Setting up a POST route
01:49 - Getting Form Data with Body Parser - bodyParser.urlencoded()
Returns middleware that only parses urlencoded bodies and only looks at requests where the Content-Type header matches the type option. This parser accepts only UTF-8 encoding of the body and supports automatic inflation of gzip and deflate encodings. A new body object containing the parsed data is populated on the request object after the middleware (i.e. req.body). This object will contain key-value pairs, where the value can be a string or array (when extended is false), or any type (when extended is true).
https://github.com/expressjs/body-parser#bodyparserurlencodedoptions
02:37 - Mounting the Strategy - passport.authenticate()
This function returns a middleware which runs the strategies. If one of the strategies succeeds, this will set req.user. If you pass no options or callback, and all strategies fail, this will write a 401 to the response.
https://github.com/jwalton/passport-api-docs#passportauthenticatestrategyname-options-callback
05:12 - Where the User's Details can be found
05:36 - Correction/Tweak for MongoDB Database Connection
06:35 - Testing the Login
07:18 - Rendering Page with User Details - response.render()
Renders a view and sends the rendered HTML string to the client.
https://expressjs.com/en/api.html#res.render
08:20 - What Happens When Authentication Fails
09:00 - How This Works
10:10 - Challenge Solution
-————————————————————————————————————-
Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser.
Express.js, or simply Express, is a web application framework for Node.js. It is designed for building web applic
...
https://www.youtube.com/watch?v=ts1SU3J39OY