diff --git a/Abdullateef_Adebisi_1.md b/Abdullateef_Adebisi_1.md new file mode 100644 index 0000000..7b1862f --- /dev/null +++ b/Abdullateef_Adebisi_1.md @@ -0,0 +1,219 @@ +Most common and useful commands to use +Now that we have a foundation of how the CLI works, let's dive into the most useful commands you can start to use for your daily tasks. + +Keep in mind that these examples will be based on my current configuration (Bash on a Linux OS). But most commands should apply to most configurations anyway. + +Echo prints in the terminal whatever parameter we pass it. +echo Hello Shina! // Output: Hello Shina! +pwd stands for print working directory and it prints the "place" or directory we are currently at in the computer. +pwd // Output: /home/German +ls presents you the contents of the directory you're currently in. It will present you with both the files and other directories your current directory contains. +For example, here I'm on a React project directory I've been working on lately: + +ls // Output: +node_modules package.json package-lock.json public README.md src +If you pass this command the flag or paremter -a It will also show you hidden files or directories. Like .git or .gitignore files + +ls -a // Output: +. .env .gitignore package.json public src +.. .git node_modules package-lock.json README.md +cd is short for Change directory and it will take you from your current directory to another. +While on my home directory, I can enter cd Desktop and it will take me to the Desktop Directory. + +If I want to go up one directory, meaning go to the directory that contains the current directory, I can enter cd .. + +If you enter cd alone, it will take you straight to your home directory. + +mkdir stands for make directory and it will create a new directory for you. You have to pass the command the directory name parameter. +If I wanted to create a new directory called "Test" I would enter mkdir test. + +rmdir stands for Remove directory and it does just that. It needs the directory name parameter just as mkdir: rmdir test. + +touch allows you to create an empty file in your current directory. As parameters it takes the file name, like touch test.txt. + +rm allows you to delete files, in the same way rmdir allows you to remove directories. +rm test.txt + +cp allows you to copy files or directories. This command takes two parameters: the first one is the file or directory you want to copy, and the second one is the destination of your copy (where do you want to copy your file/directory to). + +If I want to make a copy of my txt file in the same directory, I can enter the following: + +cp test.txt testCopy.txt +See that the directory doesn't change, as for "destination" I enter the new name of the file. + +If I wanted to copy the file into a diferent directory, but keep the same file name, I can enter this: + +cp test.txt ./testFolder/ +And if I wanted to copy to a different folder changing the field name, of course I can enter this: + +cp test.txt ./testFolder/testCopy.txt +mv is short for move, and lets us move a file or directory from one place to another. That is, create it in a new directory and delete it in the previous one (same as you could do by cutting and pasting). +Again, this command takes two paremers, the file or directory we want to move and the destination. + +mv test.txt ./testFolder/ +We can change the name of the file too in the same command if we want to: + +mv test.txt ./testFolder/testCopy.txt +head allows you to view the beginning of a file or piped data directly from the terminal. +head test.txt // Output: +this is the beginning of my test file +tail works the same but it will show you the end of the file. +tail test.txt // Output: + +this is the end of my test file +The --help flag can be used on most commands and it will return info on how to use that given command. +cd --help // output: +cd: cd [-L|[-P [-e]] [-@]] [dir] +Change the shell working directory. +Change the current directory to DIR. The default DIR is the value of the HOME shell variable. + +The variable CDPATH defines the search path for the directory containing DIR. Alternative directory names in CDPATH are separated by a colon :. + +A null directory name is the same as the current directory if DIR begins with .... + +In a similar way, the man command will return info about any particular command. +man cp // output: + + CP(1) User Commands CP(1) + + NAME + cp - copy files and directories + + SYNOPSIS + cp [OPTION]... [-T] SOURCE DEST + cp [OPTION]... SOURCE... DIRECTORY + cp [OPTION]... -t DIRECTORY SOURCE... + + DESCRIPTION + Copy SOURCE to DEST, or multiple SOURCE(s) to DIRECTORY. + + Mandatory arguments to long options are mandatory for short options + too. + + -a, --archive + same as -dR --preserve=all + + --attributes-only + don't copy the file data, just the attributes + ... + +You can even enter man bash and that will return a huge manual about everything there's to know about this shell. ;) + +code will open your default code editor. If you enter the command alone, it just opens the editor with the latest file/directory you opened. +You can also open a given file by passing it as parameter: code test.txt. + +Or open a new file by passing the new file name: code thisIsAJsFile.js. + +edit will open text files on your default command line text editor (which if you're on Mac or Linux will likely be either Nano or Vim). +If you open your file and then can't exit your editor, first look at this meme: + +![vimExit](https://www.freecodecamp.org/news/content/images/2022/03/vimExit.png) +And then type :q! and hit enter. + +The meme is funny because everyone struggles with CLI text editors at first, as most actions (like exiting the editor) are done with keyboard shortcuts. Using these editors is a whole other topic, so go look for tutorials if you're interested in learning more. ;) + +ctrl+c allows you to exit the current process the terminal is running. For example, if you're creating a react app with npx create-react-app and want to cancel the build at some point, just hit ctrl+c and it will stop. + +Copying text from the terminal can be done with ctrl+shift+c and pasting can be done with ctrl+shift+v + +clear will clear your terminal from all previous content. + +exit will close your terminal and (this is not a command but it's cool too) ctrl+alt+t will open a new terminal for you. + +By pressing up and down keys you can navigate through the previous commands you entered. + +By hitting tab you will get autocompletion based on the text you've written so far. By hitting tab twice you'll get suggestions based on the text you've written so far. + +For example if I write edit test and tab twice, I get testFolder/ test.txt. If I write edit test. and hit tab my text autocompletes to edit test.txt + +Git commands +Besides working around the file system and installing/uninstalling things, interacting with Git and online repos is probably the most common things you're going to use the terminal for as a developer. + +It's a whole lot more efficient to do it from the terminal than by clicking around, so let's take a look at the most useful git commands out there. + +git init will create a new local repository for you. +git init // output: +Initialized empty Git repository in /home/German/Desktop/testFolder/.git/ +git add adds one or more files to staging. You can either detail a specific file to add to staging or add all changed files by typing git add . + +git commit commits your changes to the repository. Commits must always be must be accompanied by the -m flag and commit message. + +git commit -m 'This is a test commit' // output: +[master (root-commit) 6101dfe] This is a test commit +1 file changed, 0 insertions(+), 0 deletions(-) +create mode 100644 test.js +git status tells you what branch are you currently on and whether you have changes to commit or not. +git status // output: +On branch master +nothing to commit, working tree clean +git clone allows you to clone (copy) a repository into the directory you're currently in. Keep in mind you can clone both remote repositories (in GitHub, GitLab, and so on) and local repositories (those that are stored in your computer). +git clone https://github.com/coccagerman/MazeGenerator.git // output: +Cloning into 'MazeGenerator'... +remote: Enumerating objects: 15, done. +remote: Counting objects: 100% (15/15), done. +remote: Compressing objects: 100% (15/15), done. +remote: Total 15 (delta 1), reused 11 (delta 0), pack-reused 0 +Unpacking objects: 100% (15/15), done. +git remote add origin is used to detail the URL of the remote repository you're going to use for your project. In case you'd like to change it at some point, you can do it by using the command git remote set-url origin. +git remote add origin https://github.com/coccagerman/testRepo.git +Keep in mind you need to create your remote repo first in order to get its URL. We'll see how you can do this from the command line with a little script later on. ;) + +git remote -v lets you list the current remote repository you're using. +git remote -v // output: +origin https://github.com/coccagerman/testRepo.git (fetch) +origin https://github.com/coccagerman/testRepo.git (push) +git push uploads your commited changes to your remote repo. +git push // output: +Counting objects: 2, done. +Delta compression using up to 8 threads. +Compressing objects: 100% (2/2), done. +Writing objects: 100% (2/2), 266 bytes | 266.00 KiB/s, done. +Total 2 (delta 0), reused 0 (delta 0) +git branch lists all the available branches on your repo and tells you what branch you're currently on. If you want to create a new branch, you just have to add the new branch name as parameter like git branch . +git branch // output: + +- main + git checkout moves you from one branch to another. It takes your destination branch as paremeter. + git checkout newBranch // output: + Switched to branch 'newBranch' + git pull pulls (downloads) the code from your remote repository and combines it with your local repo. This is particularly useful when working in teams, when many developers are working on the same code base. In this case each developer periodically pulls from the remote repo in order to work in a code base that includes the changes done by all the other devs. + If there's new code in your remote repo, the command will return the actual files that were modified in the pull. If not, we get Already up to date. + +git pull // output: +Already up to date. +git diff allows you to view the differences between the branch you're currently in and another. +git diff newBranch // output: +diff --git a/newFileInNewBranch.js b/newFileInNewBranch.js +deleted file mode 100644 +index e69de29..0000000 +As a side comment, when comparing differences between branches or repos, ussually visual tools like Meld are used. It's not that you can't visualize it directly in the terminal, but this tools are greate for a clearer visualization. + +git merge merges (combines) the branch you're currently in with another. Keep in mind the changes will be incorporated only to the branch you're currently in, not to the other one. +git merge newBranch // output: +Updating f15cf51..3a3d62f +Fast-forward +newFileInNewBranch.js | 0 +1 file changed, 0 insertions(+), 0 deletions(-) +create mode 100644 newFileInNewBranch.js +git log lists all previous commits you've done in the repo. +git log // output: +commit 3a3d62fe7cea7c09403c048e971a5172459d0948 (HEAD -> main, tag: TestTag, origin/main, newBranch) +Author: German Cocca +Date: Fri Apr 1 18:48:20 2022 -0300 + + Added new file + +commit f15cf515dd3ec398210108dce092debf26ff9e12 +Author: German Cocca +... +The --help flag will show you information about a given command, exactly the same way it works with bash. +git diff --help // output: +GIT-DIFF(1) Git Manual GIT-DIFF(1) + +NAME +git-diff - Show changes between commits, commit and working tree, etc + +SYNOPSIS +git diff [options] [] [--] [...] +git diff [options] --cached [] [--] [...] +... diff --git a/Abdullateef_Adebisi_2.md b/Abdullateef_Adebisi_2.md new file mode 100644 index 0000000..4f00e5f --- /dev/null +++ b/Abdullateef_Adebisi_2.md @@ -0,0 +1,256 @@ +The term “lexical scope” may seem tricky to grasp at first glance. But it's helpful to understand what each word means. + +So this article will explain lexical scope by first examining the meaning of “lexical” and “scope”. + +So, let’s get it started by understanding the term “scope”. + +What exactly is Scope? +Scope refers to the area where an item (such as a function or variable) is visible and accessible to other code. + +Note: + +Scope means area, space, or region. +Global scope means global space or a public space. +Local scope means a local region or a restricted region. +Here's an example: + +// Define a variable in the global scope: +const fullName = "Oluwatobi Sofela"; + +// Define nested functions: +function profile() { +function sayName() { +function writeName() { +return fullName; +} +return writeName(); +} +return sayName(); +} +Try it on StackBlitz + +In the snippet above, we defined the fullName variable in the global scope. This means that it is visible and accessible globally to all code within the script. + +But we defined writeName() within the sayName() function, so it is locally scoped to sayName(). + +In other words, writeName() is locally visible and accessible only to code in the sayName() function. + +Keep in mind that whenever the writeName() function gets invoked, the computer will not go straight to the global scope to call the fullName variable. Instead, it must sequentially go through the scope chain to look for fullName. + +What is a Scope Chain? +A scope chain refers to the unique spaces that exist from the scope where a variable got called to the global scope. + +Here's an example: + +// Define a variable in the global scope: +const fullName = "Oluwatobi Sofela"; + +// Define nested functions: +function profile() { +function sayName() { +function writeName() { +return fullName; +} +return writeName(); +} +return sayName(); +} +In the snippet above, observe that the fullName variable got called from the writeName() function's scope. + +Therefore, the scope chain that exists from the variable’s call to the global scope is: + +writeName() scope ---> sayName() scope ---> profile() scope ---> global scope + +In other words, there are four (4) spaces from fullName’s invocation scope to its lexical scope (the global scope in this instance). + +Note: The global scope is the last link in JavaScript's scope chain. + +How Does the Scope Chain Work? +JavaScript's scope chain determines the hierarchy of places the computer must go through — one after the other — to find the lexical scope (origin) of the specific variable that got called. + +For instance, consider the code below: + +// Define a variable in the global scope: +const fullName = "Oluwatobi Sofela"; + +// Define nested functions: +function profile() { +function sayName() { +function writeName() { +return fullName; +} +return writeName(); +} +return sayName(); +} +In the snippet above, whenever the profile() function gets invoked, the computer will first invoke the sayName() function (which is the only code in the profile() function). + +Secondly, the computer will invoke the writeName() function (which is the only code in the sayName() function). + +At this point, since the code in writeName() instructs the computer to call and return the fullName variable's content, the computer will call fullName. But it will not go directly to the global scope to call fullName. + +Instead, the computer must go step-by-step through the scope chain to look for the lexical scope of fullName. + +So, here are the sequential steps the computer must take to locate fullName's lexical scope: + +Firstly, the computer will check if fullName got defined locally within the writeName() function. But it will find no fullName definition there, so it moves up to the next scope to continue its quest. +Secondly, the computer will search for fullName's definition in sayName() (the next space in the scope chain). Still, it doesn't find it there, so it climbs up the ladder to the next scope. +Thirdly, the computer will search for fullName's definition in the profile() function. Yet still, fullName is not found there. So the computer goes forward to seek fullName's lexical scope in the next region of the scope chain. +Fourthly, the computer goes to the global scope (the following scope after profile()). Fortunately, it finds fullName's definition there! Therefore, it gets its content ("Oluwatobi Sofela") and returns it. +Time to Practice with Scope 🤸‍♂️🏋️‍♀️🏊‍♀️ +Consider the script below. Which of the three fullName variables will the computer call? + +// First fullName variable defined in the global scope: +const fullName = "Oluwatobi Sofela"; + +// Nested functions containing two more fullName variables: +function profile() { +const fullName = "Tobi Sho"; +function sayName() { +const fullName = "Oluwa Sofe"; +function writeName() { +return fullName; +} +return writeName(); +} +return sayName(); +} +Will the computer call the first, second, or third fullName variable? + +Note: You will benefit much more from this tutorial if you attempt the exercise yourself. + +If you get stuck, don’t be discouraged. Instead, review the lesson and give it another try. + +Once you’ve given it your best shot (you’ll only cheat yourself if you don’t!), go ahead to see the correct answer below. + +Did you get it right? +Out of the three fullName definitions present in the script above, the computer will call and return the one defined in the sayName() function. + +sayName()’s fullName variable will get called because sayName() is the scope inside which the computer will first find a fullName definition. + +Therefore, when profile() gets invoked, the returned value will be "Oluwa Sofe". + +Try it on StackBlitz + +Some things to keep in mind: + +Suppose the computer did not find fullName's definition in any of the scopes. In such a case, the computer will return Uncaught ReferenceError: fullName is not defined. +The global scope is always the last scope of any JavaScript scope chain. In other words, the global scope is where all searches will end. +An inner (child) scope has access to its parent (outer) scope, but an outer scope does not have access to its child scope. +For instance, in the snippet above, writeName() can access codes inside any of its parent scope (sayName(), profile(), or the global scope). +However, neither sayName(), profile(), nor the global scope can access any of writeName()'s codes. +Quick Review of Scope So Far +JavaScript scope is all about space. + +So next time your partner calls you to their private scope, remember they are inviting you to their private space 😜! + +When you get there, be sure to ask them about their best lexical game... + +But what does lexical mean, I hear you ask? Let’s find out below. + +What Does Lexical Mean? +Lexical refers to the definition of things. + +Anything related to creating words, expressions, or variables is termed lexical. + +For instance, a scrabble game is a lexical activity because it relates to the creation of words. + +Also, someone whose job relates to linguistics (the study of languages) has a lexical career. + +Note: Another name for a dictionary is a lexicon. In other words, a lexicon is a dictionary where words are listed and defined. + +So now that we know what scope and lexical mean, we can talk about lexical scope. + +What is Lexical Scope in JavaScript? +Lexical scope is the definition area of an expression. + +In other words, an item's lexical scope is the place in which the item got created. + +Note: + +Another name for lexical scope is static scope. +The place an item got invoked (or called) is not necessarily the item's lexical scope. Instead, an item's definition space is its lexical scope. +Example of Lexical Scope +Consider the code below: + +// Define a variable in the global scope: +const myName = "Oluwatobi"; + +// Call myName variable from a function: +function getName() { +return myName; +} +In the snippet above, notice that we defined the myName variable in the global scope and called it in the getName() function. + +Question: Which of the two spaces is myName’s lexical scope? Is it the global scope or the getName() function’s local scope? + +Answer: Remember that lexical scope means definition space — not invocation space. Therefore, myName’s lexical scope is the global scope because we defined myName in the global environment. + +Another example of lexical scope +function getName() { +const myName = "Oluwatobi"; +return myName; +} +Question: Where is myName’s lexical scope? + +Answer: Notice that we created and called myName within getName(). Therefore, myName’s lexical scope is getName()’s local environment because getName() is myName’s definition space. + +How Does Lexical Scope Work? +A JavaScript expression’s definition environment determines the code permitted to access it. + +In other words, only code within an item's lexical scope can access it. + +For instance, consider the code below: + +// Define a function: +function showLastName() { +const lastName = "Sofela"; +return lastName; +} + +// Define another function: +function displayFullName() { +const fullName = "Oluwatobi " + lastName; +return fullName; +} + +// Invoke displayFullName(): +console.log(displayFullName()); + +// The invocation above will return: +Uncaught ReferenceError: lastName is not defined +Notice that the invocation of displayFullName() in the snippet above returned an Uncaught ReferenceError. The error returned because only code within an item's lexical scope can access the item. + +Therefore, neither the displayFullName() function nor its internal code can access the lastName variable because lastName got defined in a different scope. + +In other words, lastName’s lexical scope is different from that of displayFullName(). + +lastName’s definition space is showLastName() while displayFullName()’s lexical scope is the global environment. + +Now, consider this other code below: + +function showLastName() { +const lastName = "Sofela"; +return lastName; +} + +// Define another function: +function displayFullName() { +const fullName = "Oluwatobi " + showLastName(); +return fullName; +} + +// Invoke displayFullName(): +console.log(displayFullName()); + +// The invocation above will return: +"Oluwatobi Sofela" +In the snippet above, displayFullName() successfully returned "Oluwatobi Sofela" because displayFullName() and showLastName() are in the same lexical scope. + +In other words, displayFullName() could invoke showLastName() because the two functions are both defined in the global scope. + +Note: + +In example 2 above, displayFullName() did not gain access to showLastName()'s lastName variable. +Instead, displayFullName() invoked showLastName() — which then returned the content of its lastName variable. +An alternative to the lexical scope is the dynamic scope — but it rarely gets used in programming. Only a few languages, like bash, use dynamic scope. diff --git a/Abdullateef_Adebisi_3.md b/Abdullateef_Adebisi_3.md new file mode 100644 index 0000000..6c7e775 --- /dev/null +++ b/Abdullateef_Adebisi_3.md @@ -0,0 +1,87 @@ +Events + +Passing arguments and this to listeners +Asynchronous vs. synchronous +Handling events only once +Error events +Capture rejections of promises + +Class: EventEmitter +Event: 'newListener' +Event: 'removeListener' +emitter.addListener(eventName, listener) +emitter.emit(eventName[, ...args]) +emitter.eventNames() +emitter.getMaxListeners() +emitter.listenerCount(eventName[, listener]) +emitter.listeners(eventName) +emitter.off(eventName, listener) +emitter.on(eventName, listener) +emitter.once(eventName, listener) +emitter.prependListener(eventName, listener) +emitter.prependOnceListener(eventName, listener) +emitter.removeAllListeners([eventName]) +emitter.removeListener(eventName, listener) +emitter.setMaxListeners(n) +emitter.rawListeners(eventName) +emitter[Symbol.for('nodejs.rejection')](err, eventName[, ...args]) +events.defaultMaxListeners +events.errorMonitor +events.getEventListeners(emitterOrTarget, eventName) +events.getMaxListeners(emitterOrTarget) +events.once(emitter, name[, options]) +Awaiting multiple events emitted on process.nextTick() +events.captureRejections +events.captureRejectionSymbol +events.listenerCount(emitter, eventName) +events.on(emitter, eventName[, options]) +events.setMaxListeners(n[, ...eventTargets]) +events.addAbortListener(signal, listener) +Class: events.EventEmitterAsyncResource extends EventEmitter +new events.EventEmitterAsyncResource([options]) +eventemitterasyncresource.asyncId +eventemitterasyncresource.asyncResource +eventemitterasyncresource.emitDestroy() +eventemitterasyncresource.triggerAsyncId +EventTarget and Event API +Node.js EventTarget vs. DOM EventTarget +NodeEventTarget vs. EventEmitter +Event listener +EventTarget error handling +Class: Event +event.bubbles +event.cancelBubble +event.cancelable +event.composed +event.composedPath() +event.currentTarget +event.defaultPrevented +event.eventPhase +event.initEvent(type[, bubbles[, cancelable]]) +event.isTrusted +event.preventDefault() +event.returnValue +event.srcElement +event.stopImmediatePropagation() +event.stopPropagation() +event.target +event.timeStamp +event.type +Class: EventTarget +eventTarget.addEventListener(type, listener[, options]) +eventTarget.dispatchEvent(event) +eventTarget.removeEventListener(type, listener[, options]) +Class: CustomEvent +event.detail +Class: NodeEventTarget +nodeEventTarget.addListener(type, listener) +nodeEventTarget.emit(type, arg) +nodeEventTarget.eventNames() +nodeEventTarget.listenerCount(type) +nodeEventTarget.setMaxListeners(n) +nodeEventTarget.getMaxListeners() +nodeEventTarget.off(type, listener[, options]) +nodeEventTarget.on(type, listener) +nodeEventTarget.once(type, listener) +nodeEventTarget.removeAllListeners([type]) +nodeEventTarget.removeListener(type, listener[, options]) diff --git a/Contributors.md b/Contributors.md index a9e9ede..616a6c8 100644 --- a/Contributors.md +++ b/Contributors.md @@ -1,8 +1,6 @@ -# Contributors List +# Contributors List -*Names* - -1. icodejsx +1. icodejsx 2. ogbon(Segun Amosu) 3. Solomon Eseme - +4. Abdullateef Adebisi