Welcome, internet traveler!
I'm Guilherme Petry, cyberwich, journalist, tech chronicler, writer, web developer, and cybersecurity apprentice.
You are now reading my narrated learning into the depths of computer witchcraft, programming spellcasting, and code chronicles.
Here you will find some uncovered knowledge on post-modern spells.
Wanna see another cool project?
↓ Click! ↓
Send me some smoke signs on GitHub or LinkedIn.
Here is the GitHub repository for this project.
Content in progress.
Fetch API GET request:
Request: call fetch(<path>). Response: a stream of data in a format of a file (JSON, plain text, HTML, XML, PNG, JPG, GIF, SVG, PDF, CSV, binary files and error responses [status code]).
Image from the web example:
<img src="" id="rainbow">
+ <script>
+ catchRainbow().then(response => {console.log('all good!')})
+
+ async function catchRainbow(){
+ const response = await fetch('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Double-alaskan-rainbow.jpg/1200px-Double-alaskan-rainbow.jpg')
+ const blob = await response.blob()
+ document.getElementById('rainbow').src = URL.createObjectURL(blob)
+ console.log(blob)
+ }
+ </script>
+.txt file from the same domain example:
<p id="rainbow"></p>
+ <script>
+ catchRainbow()
+
+ async function catchRainbow(){
+ const response = await fetch('/index.txt')
+ const text = await response.text()
+ const printedResponse = String(text)
+ document.getElementById("rainbow").innerText = printedResponse
+ }
+
+ </script>
+Parsing and logging a .csv file from /:
getData()
+
+async function getData(){
+ const response = await fetch('fileName.csv') //ask for it
+ const data = await response.text() //treat the data, in this case text
+ console.log(data) //do something with it
+
+ const table = data.split('\\n').slice(1) //spliting it by line break \`\\n\`
+ table.forEach(row => { //array.forEach(splitedProduct => {
+ const columns = row.split(',') //split again separating it by columns}
+ const year = columns[0] //defining what the first column is
+ const temp = columns[1] //defining what the second column is
+ console.log(year, temp) //logging it
+ })
+}
+
+Parsing and logging a .csv file from web server:
getData()
+
+ async function getData () {
+ const response = await fetch('https://raw.githubusercontent.com/petry078/exercicios-javascript/main/planilha.csv')
+ const data = await response.text()
+ const table = data.split('\\n').slice(1)
+
+ table.forEach(elt => {
+ const columns = elt.split(',')
+ const year = columns[0]
+ const temp = columns[1]
+ console.log(columns)
+ console.log(year, temp)
+ })
+
+ }
+
Bourne Again Shell (Bash) scripts are scripts of commands used on Unix terminals, like the Linux terminal.
It allows you to enter a list of commands (in sequence) just by typing the name of the Bash Script file.
For example, to open Firefox for Developers on Linux systems, you need to open the folder where it is at and double click de file called firefox.
To do it from the terminal, you need:
cd to the folder where firefox is;./firefox.
./means "from this folder where i'm" +/to select file/folder you wish to work with.
To achieve this, you just typed a few commands on the terminal. To do this with a single command, you need a Bash Script.
At your user home folder $ (/home/user), create a file called script.sh.
Your user home folder is usually where your terminal starts. Type
pwdto check. It needs to be/home/petry, for example.
Inside the script.sh write #!/bin/sh on the very first line. This will tell the terminal it is a Bash Script.
The first command of your script will be written above, and so on.
Example:
#!/bin/sh
+cd aurora
+./firefox &
+This is the same as: cd aurora && ./firefox &.
In this case, is just two commands, but this can be used to create complex scripts, with logic operators and all that cool programming stuff.
As you can see on the example, the first command on the script is cd aurora. Aurora is the nickname for the Firefox for Developers, and this folder is actually /home/petry/aurora/.
This is a link. To create one, you will need the ln command. Like:
ln -s [path] [symbolic name]
+Example:
ln -s /home/petry/aurora/ aurora
+This is starting to look like magic...
Git and GitHub, at first, can be a little frustrating. Complex commands, Git running locally and the GitHub platform. I feel you... So, here is the easiest way (I know) to work with Git and GitHub repositories.
Go to the GitHub repository you need work and copy the .git address, which is usually https://github.com/yourUserID/yourRepoName.git and head to the terminal.
Inside the Terminal, browse to the folder you wish to save the repository and type git clone + .git URL. Just like this:
git clone https://github.com/petry078/spellblog.git
Change directory to the repository you just cloned, with: cd + repositoryName.
cd spellblog
And open everything that it is inside the folder on Visual Studio Code, with: code .
Update and change what is needed and go back to the terminal to start the commit process.
First, run git status and read the results. If everything is correct, add every file to the commit, with: git add .
And then git commit -m "commit description" to write the commit.
To upload the commit, just run git push.
The git push must return a message of success with the link of the repository you just pushed the commit. Click on it and check if it's all there.
Its nice to check. I've losted files in this process before...
git clone URLcd repositoryNamegit statusgit checkout -b NewBranchcode .git add .git commit -m "commit description"git push --set-upstream origin NewBranchThis last command will bring the pull request page ready to pull it to main branch.
git status
+git clone gitURL
+git checkout -b NewBranch
+git add .
+git commit -m "commit description"
+git push
+git push --set-upstream origin NewBranch
+
09 Jan 2024
Ancient tech that works. Feels just like the Gutemberg press.
01 Jul 2023
Computing power and black magic do not come from just one source.
03 Mar 2023
After a hours trying to fix all errors. Yeah. Maybe...
31 Jan 2023
Get to know more about headers, caching, CDN and web vulnerabilities.
01 Nov 2022
Command line scripts. This is starting to look like magic...
20 Aug 2022
JavaScript is, indeed, for the mad.
05 Aug 2022
Just the basics, but it will get you going.
26 Jul 2022
Remember! Those are not spells, yet...
21 Jul 2022
Basic Markdown syntax
',45),h=[s];function n(o,p){return a(),t("div",null,h)}var d=e(i,[["render",n],["__file","index.html.vue"]]);export{d as default}; diff --git a/assets/index.html.6956a64c.js b/assets/index.html.6956a64c.js new file mode 100644 index 0000000..76cac8f --- /dev/null +++ b/assets/index.html.6956a64c.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-8daa1a0e","path":"/","title":"","lang":"en-US","frontmatter":{"home":true,"heroImage":"https://petry078.github.io/tarot.gif","heroText":"Spellblog","tagline":"Documentations, writings, spells and other stuff","footer":"Made with VuePress 2 and Markdown \u2014 Guilherme M. Petry 2022"},"excerpt":"","headers":[{"level":3,"title":"\u{1F4DF} LaTeX PDF press specification","slug":"latex-pdf-press-specification","children":[]},{"level":3,"title":"\u{1F30C} API enchantment with JavaScript","slug":"api-enchantment-with-javascript","children":[]},{"level":3,"title":"\u{1F38B} Set up Kali Linux and Metasploitable on VirtualBox","slug":"set-up-kali-linux-and-metasploitable-on-virtualbox","children":[]},{"level":3,"title":"\u{1F375} Intro on web security with Helmet.js","slug":"intro-on-web-security-with-helmet-js","children":[]},{"level":3,"title":"\u{1F391} Bash scriptage","slug":"bash-scriptage","children":[]},{"level":3,"title":"\u{1F52E} JavaScript cast specification","slug":"javascript-cast-specification","children":[]},{"level":3,"title":"\u{1F359} GitHub once and for all","slug":"github-once-and-for-all","children":[]},{"level":3,"title":"\u{1F4DF} Terminal commands","slug":"terminal-commands","children":[]},{"level":3,"title":"\u231B Markdown cheat sheet","slug":"markdown-cheat-sheet","children":[]}],"git":{"updatedTime":1725299410000,"contributors":[{"name":"Petry","email":"petry078@gmail.com","commits":1}]},"filePathRelative":"index.md"}');export{e as data}; diff --git a/assets/intro-on-web-security-with-helmet-js.html.1823eee7.js b/assets/intro-on-web-security-with-helmet-js.html.1823eee7.js new file mode 100644 index 0000000..8ba9f72 --- /dev/null +++ b/assets/intro-on-web-security-with-helmet-js.html.1823eee7.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-5f1b757b","path":"/posts/intro-on-web-security-with-helmet-js.html","title":"Learn web security with Helmet.js","lang":"en-US","frontmatter":{"title":"Learn web security with Helmet.js","date":"2023-01-31","sidebar":false,"tags":["inforsecurity","cybersecurity","helmet.js","websecurity"]},"excerpt":"","headers":[{"level":2,"title":"Installing","slug":"installing","children":[]},{"level":2,"title":"Usage","slug":"usage","children":[{"level":3,"title":"Not included in app.use(helmet());:","slug":"not-included-in-app-use-helmet","children":[]}]}],"git":{"updatedTime":1725299410000,"contributors":[{"name":"Petry","email":"petry078@gmail.com","commits":1}]},"filePathRelative":"posts/intro-on-web-security-with-helmet-js.md"}');export{e as data}; diff --git a/assets/intro-on-web-security-with-helmet-js.html.96b5daa1.js b/assets/intro-on-web-security-with-helmet-js.html.96b5daa1.js new file mode 100644 index 0000000..9f43767 --- /dev/null +++ b/assets/intro-on-web-security-with-helmet-js.html.96b5daa1.js @@ -0,0 +1,11 @@ +import{_ as a,r as o,o as i,c,a as e,b as t,d as s,e as r}from"./app.03d0ed6d.js";const p={},l=e("h1",{id:"intro-on-web-security-with-helmet-js",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#intro-on-web-security-with-helmet-js","aria-hidden":"true"},"#"),s(" Intro on web security with Helmet.js")],-1),u=s(`"Helmet helps you secure your Express apps by setting various HTTP headers. It's not a silver bullet, but it can help!", says the developers. It is a middleware (communication software) that deals with HTTP headers and also offers security modules for the `),d={href:"https://expressjs.com",target:"_blank",rel:"noopener noreferrer"},h=s("Express"),m=s(" (Node.js framework) applications."),k=s("According to "),f={href:"https://stackshare.io/expressjs",target:"_blank",rel:"noopener noreferrer"},_=s("stackshare.io"),y=s(", Express.js is used in more than 1900 companies applications around the world, including Twitter, Accenture, BlaBlaCar and others. Helmet can be also be used with "),b={href:"https://github.com/helmetjs/helmet/wiki/How-to-use-Helmet-without-Express",target:"_blank",rel:"noopener noreferrer"},g=s("other frameworks"),v=s("."),w=s("This documentation is based on (and can help you follow) the "),x={href:"https://www.freecodecamp.org/learn/information-security/#information-security-with-helmetjs",target:"_blank",rel:"noopener noreferrer"},S=s("Information Security with HelmetJS"),T=s(" course on FreeCodeCamp."),j=r(`Run npm install helmet and in your Express application (app.js):
const express = require("express");
+const helmet = require("helmet");
+const app = express();
+app.use(helmet());
+It is all about headers. Use
curl -v <URL>on terminal, to read headers and confirm Helmet.js is working.
On app.js write app.use(helmet()); to include all manual configurations listed below:
app.use(helmet.hidePoweredBy()); removes the X-Powered-By header;app.use(helmet.frameguard({action: 'deny'})); makes your application break when used inside <frame> <iframe> HTML tags. This can help against Clickjacking attacks;app.use(helmet.xssFilter()); sanitizes user input fields, protecting against Cross-Site Scripting (XSS) attacks;app.use(helmet.noSniff()); tells the browser not to use MIME sniffing and read the file as the Content-Type header says. MIME sniffing is a technique used in browsers to determine the file type by reading some of its data. This can create vulnerabilities.
app.use(helmet.ieNoOpen()); prevents the mighty Internet Explorer to download and execute infected HTML files.app.use(helmet.hsts({maxAge: ninetyDaysInSeconds, force: true})); configures HTTP Strict Transport Security (HSTS), or HTTPS only, avoiding insecure HTTP requests. You also gonna need to instantiate a variable with 90 days in seconds
ninetyDaysInSeconds = 90*24*60*60to check certification expiracy.
app.use(helmet.dnsPrefetchControl()); disables browser DNS Prefetch. To make navigation faster, DNS prefetch resolve domain names before the user tries to click on the link. However, it can cause user data leak, if you serve a malicious website in your application. The attack is the inplantation of this malicious link.
app.use(helmet());:app.use(helmet.noCache()); prevents your user to use cached versions of your application. This can be good when you just pushed a security update.
Content Security Policy:
app.use(helmet.contentSecurityPolicy({
+ directives:{
+ scriptSrc: ["'self'"],
+ styleSrc: ["'self'"]
+ }
+}))
+scriptSrc and styleSrc with "'self'" will restrict the execution of scripts and stylesheets, originated from the same origin as the domain itself. These directives enhance security by mitigating Cross-Site Scripting (XSS) and file injection attacks.
In JavaScript we write objects. Objects have properties, that can be:
Everything that is not a primitive value, is an object.
There are several built-in objects in JavaScript:
Object;Function;Boolean;Symbol;ErrorMath;Number;Date;String;RegExp;Array;Typed Arrays;Map;Set;JSON;ArrayBuffer;SharedArrayBuffer;DataView;Promise;Proxy;Reflect.Objects can have methods, wich are functions that will use the object properties data.
"When a function is called as a method of an object, the object is passed to the function as its this value."
Use typeof varName to reveal data type of element at runtime.
A function is a callable object, with a set of commands that will be runned when the function is called. Example function().
Functions can return something and have scope {} defined.
Functions can be called as methods, that will run with the object properties data. Example: object.functionAsMethod() just like console.log().
As like an object it is, functions can have properties and methods.
function(paramenters){
+ commands
+}
+Alternative function syntax for using it as variables, or parameters. Arrow functions dosent have its own this and can't be used as constructor function.
let arrowFunction = (paramenters) => {
+ commands
+}
+Number(varName) coverts to number;String(varName) converts to string;Number.parseInt(varName) coverts to whole number;Number.parseFloat(varName) converts to floating-point number.console.log(Number.isInteger(12)) will check if number is floating-point.let fu = "bar" //string
+let fuu = 123 //number
+console.log(\`Name: \${name};\`)
+console.log(\`Surname: \${surname}.\`)
+var jsString = "JavaScript";
+console.log(jsString.toUpperCase());
+console.log(jsString.toLowerCase());
+
+var jsStringLenght = jsString.length
+console.log(jsStringLenght)
+Precedence order:
| Operator | Function |
|---|---|
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| / | Division |
| % | Remainder (resto de uma divis\xE3o inteira) |
| ** | Power (Ex: 5\xB2 = [5 ** 2]) |
() first priority***, /, %+, - last priority| Operator | Function |
|---|---|
| = | Assignment (recebe) |
| // Auto-assignment | |
| += | Addition (a += 5; // a = a + 5) |
| -= | Subtraction (a -= 2; // a = a - 2) |
| *= | Multiplication (a *= 3; // a = a * 3) |
| /= | Division (a /= 2; // a = a / 2) |
| %= | Remainder (a %= 2; // a = a % 2) |
| **= | Exponentiation (a = 2; // a = a2) |
x++ x = x + 1x-- x = x - 1Pre-increment
++x
Pre-decrement
--x
It returns true or false, comparing only the value.
| Operator | Function |
|---|---|
| > | Greater than (maior que) |
| < | Less than (menor que) |
| >= | Greater than or equal to (maior que ou igual) |
| <= | Less than or equal to (menor que ou igual) |
| == | Equal to (same value) |
| != | Not equal to |
Compares value and type.
| Operator | Function |
|---|---|
| === | Strict equal to (igual restrito) |
| !== | Strict not equal to (desigual restrito) |
Examples:
5 > 2 //true
+7 < 4 //false
+8 >= 8 //true
+9 <= 7 //false
+5 == 5 //true
+4 != 4 //false
+
+// strict equal operator
+2 === 2 // true
+2 === '2' // false
+
+// strict not equal operator
+2 !== '2' // true
+2 !== 2 // false
+| Operator | Function | Example |
+|-----------|----------------|------------------------------------|
+| ! | Not (nega\xE7\xE3o) | \`(x < 10 && y > 1)\` // true |
+| && | And (conjun\xE7\xE3o)| \`(x == 5 || y == 5)\` // false |
+| || | Or (disjun\xE7\xE3o)| \`\`\`!(x == y)\`\`\` // true |
+Unary operator ! (not) only deals with one operating, turning 0 in 1 and 1 in 0. True to false, false to true.
Binary operators && and || deals with two operating and returns true or false after analysis. If you ask for a book heavy and && black, it must return true only if the book is heavy and black, but the or || operator will return true if at least one is true.
//Inverts the result
+!true //false
+!false //true
+
+//Both need to be \`true\` to return \`true\`.
+true && true //true
+true && false //false
+false && false //false
+false && true //false
+
+//Only one need to be \`true\` to return \`true\`
+true || true //true
+true || false //true
+false || false //false
+false || true //true
+It begins with a logic test, if it returns true, it will run the code on the first true slot, and if it returns false, runs the second false slot.
Syntax:
x && b ? true : false
Examples:
// 1.
+let media = 5.5
+let mediaCalculada = media > 6 ? "Aprovado(true)" : "Reprovado(false)"
+
+console.log(mediaCalculada) // Reprovado(false)
+
+// 2.
+var x = 8
+var res = x % 2 == 0 ? 5 : 9 // 5 (true)
+
+//3.
+var age = 18
+var r = age >= 18 ? "Adult" : "Child" // Adult (true)
+The DOM tree:
window.location
+ .history
+ .document.<call to HTML tag (selector)>
+getElementById Select HTML tag by its ID.getElementsByTagName() Select HTML tags.getElementsByName() Select HTML tag by its name.getElementsByClassName() Select HTML tags by its class name.Usage:
<p id = "IdOfP">Old string</p>
+<script>
+window.document.getElementById("IdOfP").innerText = "New string"
+</script>
+Modern aproach of selectors.
querySelector() Select the first HTML TagquerySelectorAll() Creates a list of all elements. Not sure how it works.
querySelector()can be used to select HTML tag + ID/Class (#for ID or.for class)
Usage:
<p>String 1<p>
+<p id = "IdOfP">String 2</p>
+<p class = "ClassOfP">String 3</p>
+<script>
+window.document.querySelector("p").innerText = "Select by HTML tag name"
+window.document.querySelector("#IdOfP").innerText = "Select by ID"
+window.document.querySelector(".ClassOfP").innerText = "Select by Class name"
+</script>
+innerText Write plain text on top of selected element;innerHTML Write HTML on top of selected element;<h1></h1>
+<p></p>
+<script>
+document.querySelector("h1").innerText="Inset only raw text";
+document.querySelector("p").innerHTML="Insert text with <strong>HTML Tags</strong>"
+</script>
+Avoid using
innerHTML, that can represent a risk of Cross-Site Scripting (XSS).
It works alongside with functions(). Events are called with reserved words, inside the .html file, like onkeydown="functionName()" or in the .js file with Event Listeners, like:
<button id="myBtn">Try it</button>
+
+<p id="textField"></p>
+
+<script>
+document.getElementById("myBtn").addEventListener("click", printDate);
+
+function printDate() {
+ document.getElementById("textField").innerHTML = Date();
+}
+</script>
+This can also be done with Arrow Functions:
document.getElementById("myBtn").addEventListener("click", (printDate) => {
+ document.getElementById("textField").innerHTML = Date();
+})
+Mouse events example:
<body>
+ <main>
+ </main>
+
+ <script>
+ let main = document.querySelector("main")
+ //Events
+ main.addEventListener("mouseenter", mouseenterFunction)
+ main.addEventListener("mouseout", mouseoutFunction)
+ main.addEventListener("click", clickFunction)
+
+ function mouseenterFunction() {
+ main.innerText = "mouseenter event"
+ main.style.background = "red"
+ }
+
+ function mouseoutFunction() {
+ main.innerText = "mouseout event"
+ main.style.background = "yellow"
+ }
+
+ function clickFunction() {
+ main.innerText = "click event"
+ main.style.background = "purple"
+ }
+ </script>
+
+ <style>
+ main {
+ width: 150px;
+ height: 150px;
+ background-color: green;
+ }
+ </style>
+</body>
+Hello \${name} example:
This example needs refinement.
<body>
+ <form>
+ <label for="inName">Name:</label>
+ <input type="text" name="" id="inName">
+ <input type="submit" value="print">
+ </form>
+
+ <h1></h1>
+
+<script>
+ let name = document.querySelector("form").inName.value
+ document.querySelector("form").addEventListener("submit", (printName) => {
+ document.querySelector("h1").innerText = \`Hello, \${name}\`
+ printName.preventDefault()
+ })
+</script>
+</body>
+In addition to the Arithmetic operators, math can be done with the Math. functions.
Math.round(num) return the closest number. Example Math.round(4.4) = 4 and Math.round(4.5) = 5;Math.ceil(num) round to bigger number. Example: Math.ceil(4.2) = 5;Math.floor(num) round to lower number. Example: Math.floor(4.2) = 4;Math.random() will return a random number between 0 and 1.
console.log(Math.round(8.4)) //8
+console.log(Math.round(8.5)) //9
+
+console.log(Math.ceil(4.2)) //5
+console.log(Math.floor(4.9)) //4
+
+console.log(Math.random()) //0.7099176926811621
+Programs read data (input), process it, and return something. With conditionals you can have limitations to work with.
The syntax in JavaScript, and most languages, are if...else, switch...case and with ternary operators.
The condition (parameters) must be written with comparison operators. Each comparison will return true or false.
There are situations in which your program must analyze more than one condition. In that case, use logical operators inside the parameter/condition slot. Example: condition == true && condition == true or condition == true || condition != true.
The if...else conditions can be written in three different structures:
if (condition == true){run};if (condition == true){run}... else{run};if (condition == true){run}... else if{run}...else{run}.Multiple conditions can have as many
else ifas necessary.
let n1 = prompt("N1: ")
+let n2 = prompt("N2: ")
+let n3 = prompt("N3: ")
+let n4 = prompt("N4: ")
+
+let average = (n1 + n2 + n3 + n4) / 4
+
+if (average >= 6){
+ console.log("Approved!")
+} else if (average == 5) {
+ console.log("Need recovery")
+} else {
+ console.log("Disapproved")
+}
+Just another structure to make conditionals. Usable when you have a lot of options based on values of a variable, or when you need to return a different case for every value possible of a variable.
Basic example:
let neighborhood = prompt("neighborhood: ")
+let fee
+
+switch (neighborhood) {
+ case "center":
+ fee = 5
+ break
+
+ case "fragata":
+ case "caranda":
+ fee = 7 //Both (fragada and caranda) will return 7
+ break
+
+ case "elysee":
+ fee = 10
+ break
+
+ default:
+ fee = 8
+}
+
+console.log(fee)
+Repetitions, or Loops, (La\xE7os de Repeti\xE7\xE3o, in Portuguese) allows you to run one or more commands in a program or function as many times you need.
Loops need braking points and can be used with Conditional (if...else/switch... case/break/continue).
The for syntax is composed by 3 instructions for (initialValue; conditional; incremental/decremental){command}:
for (let i = 1; i <= 10; i = i + 1){command}
+ || || ||
+ \\/ \\/ \\/
+{INITIAL VALUE}{CONDITIONAL}{INCREMENTAL}
+
+//This means that \`i\` starts as 1 and, and will run until it grows to 10, since each commands run, it grows by {INCREMENTAL/DECREMENTAL}, in that case 1.
+Incremental short:
i++
The last instruction can also be decremental: i = 1 -1 or i--
Example:
let numbers = 0
+for (let i = 1; i <=4; i++){
+ numbers++
+ console.log(numbers)
+} //It will print numbers from 1 to 4.
+Multiplication table example:
let x = prompt("Number: ")
+
+for (let i = 1; i <=10; i++){
+ let y = x * i
+ console.log(x + " * " + i + " = " + y)
+}
+for (let i = 1; i <1= 10; i++){
+ //command1
+ //command2
+ //command3
+ if (i % 2 == 0){
+ //command4
+ }
+}
+It tests the conditional before, to see if it will run the commands or not.
Examples:
while (condition){
+ command
+} //While this condition is true, run {command}
+let x = prompt("Number: ")
+while (x > 0) {
+ console.log("Oi")
+}
+It executes the command at least once, even if the condition is not true.
Examples:
do {
+ command
+} while (condition);
+let x = 0;
+
+do {
+ x++;
+ console.log(x)
+} while (x < 10)
+The break and continue are two commands that can be used inside JavaScript loops.
break: jumps out of a loop.continue: jumps in the beginning of the loop.while (condition1) {
+ commands
+ if (condition2) {
+ continue //It will test the condition and make the program continue in case of true.
+ }
+ commands
+ if (condition3) {
+ break //It breaks the loop, making the program ignore everything left inside the loop. If there is commands after the break, they will not be executed.
+ }
+ commands
+}
+commands
+Example:
do {
+ const num = Number(prompt("Number: "))
+ if (num == 0 || isNaN(num)){
+ break
+ } else {
+ continue
+ }
+} while (true)
+Counters and accumulators are ways to track how many times a particular action or event has occurred. They are commonly used inside loops to count the number of iterations (iteration is a lap made by the program inside a loop or code block).
However, counters and accumulators are commonly used inside loops, they can also be used outside of loops, to count occurrences of an event or action that occurs multiple times in the program.
In JavaScript, counters and accumulators need to be initiated, usually receiving the value of 0. Since they are used to count cycles, you need to know how many cycles (iterations) it has done already, that is why to start a counter with 0.
Counters represent a variable = a variable + 1 (the count factor), accumulators represent a variable = a variable + another variable, and they can be written with the += operator.
Counter example:
let result = 0 //variable initiation
+result = result + 1 //traditional way
+result += 1 //with the += operator
+Accumulator example:
let result = 0 //variable initiation
+result = result + price //traditional way
+result += price //with the += operator
+Loop with counter example:
let counter = 0
+for (let i = 0; i < 10; i++) {
+ counter += 1
+ console.log(counter)
+}
+Different from variables, that hold only one data entry, arrays can hold many values. Its values can be the same as from the objects, all the JavaScript things.
Arrays can be declared with
consteven when your values may be changed. Whatconstcan't handle being essentially reassigned.
const arr = ["string1", "string2", 12] //Normal array of strings and number
+const newArray = new Array("string1", "string2", 12) //Used as constructor.
+Array values are counted starting from 0 (zero) and the values are selected with its index number. Example:
const arr = ["string1", "string2", 12, 15, "string3"]
+
+console.log(arr[0])
+console.log(arr[1])
+console.log(arr[2])
+console.log(arr[3])
+console.log(arr[4])
+console.log(arr[5])
+
+//Value rewrite:
+arr[0] = "NewValue"
+arr.push() adds one, or more, elements to the end of the array and returns the new array lenght.const arr = ["string1", "string2", 12, 15, "string3"]
+arr.push("one or", "more", "elements")
+arr.pop() removes the last element of the array.const arr = ["string1", "string2", 12, 15, "pop this one"]
+arr.pop()
+arr.shift() removes the first element of the array.const arr = ["shift this one", "string2", 12, 15, "pop this one"]
+arr.shift()
+arr.unshift() adds one, or more, elements to the beginning of the array and returns the new array lenght.const arr = ["string1", "string2", 12, 15, "string3"]
+arr.unshift("zero", "unshift", "test")
+arr.splice() used to remove and replace elements.const arr = ["string0", "string1", 2, 3, "remove 4", "remove 5"]
+arr.splice(4, 2) //Start position, number of elements to delete
+
+
+const arr = ["string0", "string1", 2, 3, "number this 4", "number this 5"]
+arr.splice(4, 2, "quatro", "cinco") //Start position, number os elements to replace, replace value, replace value.
+arr.slice() select elements of an array in a new array.const arr = ["string0", "string1", 2, 3, "quatro", "cinco", 6, 7, 8, 9, 10]
+arr.slice() //Copy the array
+arr.slice(2, 6) // Select elements from index 2 to 6
+arr.map() expects a function as its argument. This function is then called for each element in the array.const arr = [0, 1, 2, 3, 4, 5]
+const mappedArr = arr.map(plus)
+
+function plus(value, index, arr) {return value + 1}
+console.log(mappedArr)
+arr.forEach() used for repetition loops. Run commands in each element of the array and saves results in the same array.const arr = [0, 1, 2, 3, 4, 5]
+arr.forEach(plusFunction)
+
+function plusFunction(item, index, array) {
+ console.log(item + 1);
+}
+
+//with arrow function
+arr.forEach(item => {console.log(item + 1);})
+arr.filter() creates a new array with all elements that pass the test implemented by the provided function.const arr = [1, 2, 3, 4, 5, 6]
+const filteredArr = arr.filter(num => num > 3)
+console.log(filteredArr) // Output: [4, 5, 6]
+arr.reduce() applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.const arr = [1, 2, 3, 4, 5]
+const sum = arr.reduce((total, value) => total + value, 0)
+console.log(sum) // Output: 15
+arr.sort() sorts the elements of an array in place and returns the array.const arr = [5, 2, 8, 1, 4]
+arr.sort()
+console.log(arr) // Output: [1, 2, 4, 5, 8]
+arr.length returns the number of elements.arr.constructor returns the constructor function that created it.arr.prototype don't really know, some cursed stuff.{content in progress}
The methods indexOf(), lastIndexOf(), and includes() are used to locate content inside arrays.
const arr = [0, 1, 2, 3, 4, 5]
+arr.indexOf(3) // Returns the index of the first occurrence of 3
+arr.lastIndexOf(3) // Returns the index of the last occurrence of 3
+arr.includes(3) // Returns true if the array contains 3
+{content in progress}
JavaScript runs on browsers, as client side code. With Node.js you can run it as a server.
`,69),T={href:"https://nodejs.org/",target:"_blank",rel:"noopener noreferrer"},N=s("Node.js"),E=s("."),A=n("h3",{id:"prompt-sync",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#prompt-sync","aria-hidden":"true"},"#"),s(" prompt-sync")],-1),M={href:"https://github.com/heapwolf/prompt-sync",target:"_blank",rel:"noopener noreferrer"},I=s("prompt-sync"),L=s(" enables you to use "),O=n("code",null,"prompt",-1),C=s(" on the terminal."),D=e(`It requires Node.js.
Run npm install prompt-sync. This will install node_modules and package.json.
On your JavaScript file:
const prompt = require("prompt-sync")();
+let promptData = prompt("Data: ")
+On the terminal, open the folder where your JavaScript file is and run:
node <fileName>.js
Extract Kali and Metasploitable to the same directory.
Inside the directory, locate the files kali-linux-2022.4-virtualbox-amd64.vdi and Metasploitable.vmdk, make sure you know where they are.
New.Machine Folder select the directory you extracted Kali and Metasploitable.Type select Linux.Version select Debian (64-bit).Next.Create a virtual hard disk now.VDI (VirtualBox Disk Image).Dynamically allocated.Create.Now, you need to add the kali-linux-2022.4-virtualbox-amd64.vdi to the new virtual machine:
Settings.Storage.kali-linux-2022.4-virtualbox-amd64.vdi below Controller: SATA.Attributes, you will find a small disk icon. Click on it!Choose/Create a Virtual Hard Disk.kali-linux-2022.4-virtualbox-amd64.vdi.Ok.New.Machine Folder select the directory you extracted Kali and Metasploitable.Type select Linux.Version select Debian (64-bit).Next.Create a virtual hard disk now.VDI (VirtualBox Disk Image).Dynamically allocated.Create.Now, you need to add the Metasploitable.vmdk to the new virtual machine:
Settings.Storage.Metasploitable.vmdk below Controller: SATA.Attributes, you will find a small disk icon. Click on it!Choose/Create a Virtual Hard Disk.Metasploitable.vmdk.Ok.Don't forget to change the network config from NAT to Bridge Adapter on both virtual machines. Otherwise, Metasploitable won't be able to host:
Settings.Network.Attached to select Bridge Adapter.Ok.I guess this is high cyber witchery already...
LaTeX is a powerful typesetting markup language, designed to make beautiful and readable printable documents.
Learn LaTeX is great because its old school, free and stable. You will never need to open shit and slow Google Docs, Microsoft Word and even Adobe inDesign, which are all private softwares.
LaTeX documents have to be written and than compiled. Write content using LaTeX markup syntax and than press it to PDF with the command:
pdflatex fileName.tex
+To Press PDFs using LaTeX you need to have TeX installed.
sudo apt-get install texlive-full
+tex --version
+The syntax is divided by the preamble, the content and bibliographic references.
There are also some reserved characters:
| Character | Definition |
|---|---|
# | Macro key. |
$ | Mathematical environment. |
% | Comment. |
^ | Superscript. |
& | Separation of columns in tables. |
_ | Automatic subscript. |
{} | Scope. |
~ | Space between text that cannot be broken. |
\\ | Command initialization. |
To print then, use \\ before. Example: \\#.
The preamble is where you will define the structure, styles, aditional packages, rules, metadata, and other general configuration. This configurations will apply to the document as a whole.
The first command of the preamble is \\documentclass[]{} that will set the document class and its own parameters.
Here are the preamble commands discovered:
| Command | Definition |
|---|---|
\\documentclass[]{} | Initialize the document. Requires parameters [] and actual document class {}. |
\\usepackage[]{} | Import and use packages with additional functionality. Requires parameters [] and scope {}. |
\\setlength{\\parindent}{0cm} | Set paragraph identation. |
\\setlength{\\parskip}{2em} | Set space between paragraphs. |
\\renewcommand{\\baselinestretch}{1.5} | Space between lines. |
\\title{Document title} | Define title of the document. |
\\author{Document author} | Define author of the document. |
\\date{Document date} | Define date of the document. |
\\documentcalss parameters[], or parameters in genereal, are optionals and will change based on the actual class and command, that can be:
\\documentclass{article}
+\\documentclass{report}
+\\documentclass{book}
+\\documentclass{letter}
+\\documentclass{slides}
+\\documentclass{beamer}
+\\documentclass parameters:
\\documentclass[12pt]{}
+\\documentclass[a4paper]{}
+\\documentclass[twocolumn]{}
+\\documentclass[twoside]{}
+\\documentclass[landscape]{}
+The \\usepackage commands imports aditional packages and features. Here are some examples:
\\usepackage[utf8]{inputenc}
+\\usepackage[portuguese]{babel}
+\\usepackage{graphicx}
+\\usepackage{url}
+Content commands are only allowed in the document scope:
\\begin{document}
+Content and content commands go here! Like \\LaTeX!
+\\end{document}
+
+| Command | Definition |
|---|---|
\\par | New paragraph |
\\\\ | Line break, necessary on blank lines |
\\textbf{Bold example} | Bold text. |
\\textit{Italic example} | Italic text. |
\\underline{Underline example} | Underlined text. |
\\begin{center} | Text align: center. Requires \`\\end{center} |
\\begin{flushright} | Text align: right. Requires \`\\end{flushright} |
\\newpage or \\clearpage | Page break. Needs test, as they work diffrently. |
\\vspace{4cm} | Add vertical space between elements in line. |
\\hspace{4cm} | Add horizontal space between elements in line. |
\\hfill and \\vfill | Fill horizontal and vertical space between elements in line. |
\\begin{itemize} or \\begin{enumerate} | Iniciates unordered or ordered list. Requires \\end{itemize} or \\end{enumerate}. For list item: \\item. |
\\begin{figure} | Iniciates image with standard snippet. Requires graphicx package \\usepackage{graphicx} in the document header. |
\\begin{tabular} | Iniciates image with standard snippet. Requires graphicx package \\usepackage{graphicx} in the document header. |
\\begin{titlepage} | Iniciate title page. Requires \\end{titlepage}. See example below. |
\\tableofcontents | Print table of contents. Nice to have \\newpage after the summary. |
\\listoffigures | Print figures list. |
\\listoftables | Print figures list. |
Content techniques are commands used inside the content scope.
A blank line and \\par after the text represent paragraph.
Paragraph 1
+
+Paragraph 2
+
+Paragraph 3\\par
+Paragraph 4\\par
+For a simple line break, use \\\\ or \\newline at the end of the paragraph, or in a single line.
Simple line break\\\\
+Newline \\newline
+Chapters, sections, and subsections:
\\chapter{Chapter 1}
+\\section{Chapter 1, Section 1}
+\\section{Chapter 1, Section 2}
+\\subsection{Chapter 1, Section 2, Subsection 1}
+\\section{Chapter 1, Section 3}
+\\subsection{Chapter 1, Section 3, Subsection 1}
+\\subsection{Chapter 1, Section 3, Subsection 2}
+Whitespaces after commands are ignored. To print then, type the whitespace inside the commands scope {}. Example: textbf{text }.
\\hfill and \\hspace{3cm} examples:
Grape\\hfill100g
+1\\hspace{1cm}2\\hspace{1cm}3\\hspace{1cm}4\\hspace{1cm}
+For vertical stuff, same thing, but \\vspace{1cm} and \\vfill.
Inline font size and style:
\\tiny{tiny text}\\\\
+\\scriptsize{scriptsize text}\\\\
+\\footnotesize{footnotesize text}\\\\
+\\small{small text}\\\\
+\\normalsize{normalsize text}\\\\
+\\large{large text}\\\\
+\\Large{Large text}\\\\
+\\LARGE{LARGE text}\\\\
+\\huge{huge text}\\\\
+\\Huge{Huge text}\\\\
+
+\\textrm{Roman Serif font}\\\\
+\\textsf{Sans Serif font}\\\\
+\\texttt{Monospaced font (typewriter)}\\\\
+Any text style + any nother text style:
\\underline{\\textbf{\\textit{Underlined, bold, and italic text}}}
+Unordered list:
\\begin{itemize}
+\\item 1
+\\item 2
+\\item 3
+\\item 4
+\\end{itemize}
+Ordered list:
\\begin{enumerate}
+\\item 1
+\\item 2
+\\item 3
+\\item 4
+\\end{enumerate}
+Images are called figures in LaTeX, type \\begin{figure} and it should autocomplete to this:
\\begin{figure}
+ \\centering
+ \\includegraphics[scale=0.5]{imageExample.png}
+ \\caption{Caption text}
+ \\label{fig:enter-label}
+\\end{figure}
+Not gonna lie, tables are complicated.
\\begin{titlepage}
+\\centering
+\\Huge{\\textbf{University of Chaos}}
+\\vfill
+\\huge{My very long article title}
+\\vfill
+\\large{\\textbf{Alum: Guilherme Petry}}
+\\vfill
+\\today
+\\end{titlepage}
+Just call \\tableofcontents where you want it to be printed.
Use * in the end of markup to avoid it beeing indexed by the
\\tableofcontents. Example:\\section*{Chapter 1, Section 1}
Primeiro par\xE1grafo do cap\xEDtulo 1, se\xE7\xE3o 3 e subse\xE7\xE3o 2\\footnote{Nota de rodap\xE91}\\par
+Segundo par\xE1grafo do cap\xEDtulo 1, se\xE7\xE3o 3 e subse\xE7\xE3o 2\\footnote{Nota de rodap\xE92}\\par
+\\begin{quote}
+
+\\end{quote}
+Bibliographic references in LaTeX requires the natbib package and the references file should be in bibTeX, or .bib.
Instanciate the bliblopgraphy:
\\bibliography{referencias}
+\\bibliographystyle{plainnat}
+bibTeX bibliography example:
@book{de1999santa,
+ title={Santa Ifig{\\^e}nia},
+ author={de Athayde Jorge, C.},
+ lccn={99887098},
+ series={S{\\'e}rie Hist{\\'o}ria dos bairros de S{\\~a}o Paulo},
+ url={https://books.google.com.br/books?id=SDgsAAAAYAAJ},
+ year={1999},
+ publisher={Departamento do Patrim{\\^o}nio Hist{\\'o}rico}
+}
+On text, call reference with \\cite{referenceOfBibliography}. The referenceOfBibliography in the example is de1999santa.
Google Books offers bibTeX references like this!
Now!
| Markup syntax | Name | Description & Examples |
+|------------------|---------------------------------|-----------------------------------|
+| # | Heading 1 <h1> | # H1 |
+| ## | Heading 2 <h2> | ## H2 |
+| ### | Heading 3 <h3> | ### H3 |
+| #### | Heading 4 <h4> | #### H4 |
+| ##### | Heading 5 <h5> | ##### H5 |
+| ###### | Heading 6 <h6> | ###### H6 |
+| **bold** | Bold | **Bold** example |
+| *italic* | Italic | *Italic* example |
+| --- | Line <hr> | Line break (*** ___ ) |
+| > | Quote/Comment | > Comment styled line |
+| * | Unordered list item | * List item (- + are alternatives)|
+| 1. | Number ordered list item | 1. Just like this! |
+| a. | Character ordered list item | a. Character styled list |
+| - [ ] text | Unmarked to-do list item | Create to-do lists |
+| - [x] text | Checkd to-do list item | This one is a checked [\u2714] box |
+| \`\`\`code\`\`\` | Code | \`\`\`Code styled line/block\`\`\` |
+| [text](URL) | Hyperlink | [Download here!](URL) |
+|  | Image |  |
+| \\ | Disable Markdown style | Use before \`\`\` * # - + ! | |
+|------------------|---------------------------------|-----------------------------------|
+| |
+| text-align on tables |
+| |
+| | text-align: left | text-align: center | text-align: right | |
+| |:-----------------|:------------------:|------------------:| |
+| | text | text | text | |
+| |
+
+
Tarot cards discovered:
| Name | Icon | Spell relation |
|---|---|---|
| Seven of Cups | \u{1F4DF} | LaTeX PDF press specification |
| The Chariot | \u{1F30C} | API enchantment with JavaScript |
| The Hermit | \u{1F38B} | Set up Kali Linux and Metasploitable on VirtualBox |
| Ace of Wands | \u{1F375} | Intro on web security with Helmet.js |
| Two of Pentacles | \u{1F391} | Bash scriptage |
| The Sun | \u{1F52E} | JavaScript cast specification |
| Ten of Cups | \u{1F359} | GitHub once and for all |
| Four of Cups | \u{1F4DF} | Terminal commands |
| Five of Cups | \u231B | Markdown cheat sheet |
The Linux Terminal is a way to interact with the machine by typing console commands. To use it, you need an interpreter, like:
But, don't worry about it. Most Linux distributions comes with one of those by standard, they all are going to work similarly and can do the job.
Everything starts from the root which is /.
From there:
/bin essential user binaries;/boot boot static files;/dev (devices) device files (disks);/etc system configuration files (servers like Apache and Nginex);/home home directory, which contains users list directory;/media mount points for removable media;/mnt temporary mount directories;/opt optional or third-party software;/sbin binary system files;/tmp temporary files, non-persistent or cleared on reboot;/usr user related programs;/var variable files (logs from OS or servers like Apache, Nginx);/proc virtual and pseudo files;/root home directory of the root user (sudo home).
/and/rootare different things.rootis inside/. This folder is used for system adiministrative tasks/files and contains configuration files specific to the root user (or the sudo command).
| Command | Description |
+|-----------------|-------------------------------------------------------------|
+| pwd | Print working directory |
+| ls | List files and directories (-l, -la, -ls, -lh...) |
+| cd | Change directory |
+| cd .. | Navigate one folder back in the directory hierarchy |
+| cd - | Navigate to the folder you was before |
+| mkdir | Create folder \`mkdir newFolder\` |
+| find | Search inside current folder (case sensitive: find -i) |
+| locate | Need to run \`updatedb\` before \`locate index.html\` |
+| xdg-open . | Open current working directory on Files |
+| xdg-open "path" | Open folder/archive. "xdg-open /home/petry" will open home |
+| xdg-open "file" | "xdg-open index.md" will open index.md form current folder |
+| Command | Description |
+|-----------------|-------------------------------------------------------------|
+| apt update | Updates packages lists. Important before \`apt upgrade\` |
+| apt upgrade | Actually updates the packages (apps). |
+| apt search | Searches for the specific app \`apt search <appName>\`. |
+| apt install | Install app \`apt install <appName>\`. |
+| apt remove | Remove app \`apt remove <appName>\`. |
+| apt purge | Removes app and all dependencies \`apt remove <appName>\`. |
+| dpkg -l | Print all apps from packages. |
+| dpkg -r <app> | Remove <app>. |
+cat /etc/apt/sources.list will print where system search for packages.| Command | Description |
+|-----------------|-------------------------------------------------------------|
+| cp | Copy. \`cp imput.md output.md\` |
+| mv | Move. \`mv file.md /home/petry/Desktop\` |
+| touch index.md | Creates a new file |
+| echo | Print on screen. \`echo "Hello, world!" > hello.md\` to save. |
+| cat file.md | Reads and prints file on terminal |
+| rm / rm -r | Delete file / delete folder (may need to run as sudo) |
+| code . | Open directory on Visual Studio Code |
+| grep | Search keyword in file (grep "keyword" file.md) |
+| egrep | Search with multiple keywords (egrep "zsh|bash" file.md) |
+| cut | Cut selected text inside file |
+| sed | Substitution (sed 's/texto1/texto2' index.md) |
+| Command | Description |
+|-----------------------------|-------------------------------------------------|
+| top | Print system processes |
+| ps aux | Print all system processes |
+| ifconfig | Print network interfaces |
+| ip | Print network interfaces + IP and MAC addresses |
+| systemctl status networking | Print network status |
+| systemctl start networking | Network controls (start, stop, restart) |
+| route | Print system routes (route -n) |
+| netstat (netstat -l [list]) | Print network open doors and active connections |
+| dig +short <url> | Print IP from from domain (dig +short hello.com)|
+cat /etc/network/interfaces will print network configuration files.| Command | Description |
+|-----------------|-------------------------------------------------------------|
+| setxkbmap br | Change keyboard language to <country> |
+| man <app> | Print manual for <application> |
+| clear | Clear terminal window |
+| whereis <app> | Print location if <application> files |
+| file hello.md | Print file type (can be used with file name or file path) |
+| xxd hello.md | Print binaries from file (can be used with path) |
+| curl URL | Send GET request to URL. Try "curl wttr.in" |
+| curl -o URL | Download content (alphabetic "o", not zero) |
+| !$ | Copy and paste last command entry, to command prompt |
+Remember! Those are not spells. We will get there...
Define the output name and file extension after -o. Just like this:
curl -o output.png https://www.thehousedesigners.com/images/uploads/SiteImage-Landing-large-house-plans-1.webp
It works with .webp/.jpeg to .png
Web developers love the .webp/.webm. file format. It is smaller and loads faster. But content creators hate it. .webp/.webm doesn't open on preview apps.
This look shit... Don't worry. I'm working on a cURL post. Maybe after the
digand thetraceroutecommands.
Documentations, writings, spells and other stuff
09 Jan 2024
Ancient tech that works. Feels just like the Gutemberg press.
01 Jul 2023
Computing power and black magic do not come from just one source.
03 Mar 2023
After a hours trying to fix all errors. Yeah. Maybe...
31 Jan 2023
Get to know more about headers, caching, CDN and web vulnerabilities.
01 Nov 2022
Command line scripts. This is starting to look like magic...
20 Aug 2022
JavaScript is, indeed, for the mad.
05 Aug 2022
Just the basics, but it will get you going.
26 Jul 2022
Remember! Those are not spells, yet...
21 Jul 2022
Basic Markdown syntax
Content in progress.
Fetch API GET request:
Request: call fetch(<path>). Response: a stream of data in a format of a file (JSON, plain text, HTML, XML, PNG, JPG, GIF, SVG, PDF, CSV, binary files and error responses [status code]).
Image from the web example:
<img src="" id="rainbow">
+ <script>
+ catchRainbow().then(response => {console.log('all good!')})
+
+ async function catchRainbow(){
+ const response = await fetch('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Double-alaskan-rainbow.jpg/1200px-Double-alaskan-rainbow.jpg')
+ const blob = await response.blob()
+ document.getElementById('rainbow').src = URL.createObjectURL(blob)
+ console.log(blob)
+ }
+ </script>
+.txt file from the same domain example:
<p id="rainbow"></p>
+ <script>
+ catchRainbow()
+
+ async function catchRainbow(){
+ const response = await fetch('/index.txt')
+ const text = await response.text()
+ const printedResponse = String(text)
+ document.getElementById("rainbow").innerText = printedResponse
+ }
+
+ </script>
+Parsing and logging a .csv file from /:
getData()
+
+async function getData(){
+ const response = await fetch('fileName.csv') //ask for it
+ const data = await response.text() //treat the data, in this case text
+ console.log(data) //do something with it
+
+ const table = data.split('\n').slice(1) //spliting it by line break `\n`
+ table.forEach(row => { //array.forEach(splitedProduct => {
+ const columns = row.split(',') //split again separating it by columns}
+ const year = columns[0] //defining what the first column is
+ const temp = columns[1] //defining what the second column is
+ console.log(year, temp) //logging it
+ })
+}
+
+Parsing and logging a .csv file from web server:
getData()
+
+ async function getData () {
+ const response = await fetch('https://raw.githubusercontent.com/petry078/exercicios-javascript/main/planilha.csv')
+ const data = await response.text()
+ const table = data.split('\n').slice(1)
+
+ table.forEach(elt => {
+ const columns = elt.split(',')
+ const year = columns[0]
+ const temp = columns[1]
+ console.log(columns)
+ console.log(year, temp)
+ })
+
+ }
+Bourne Again Shell (Bash) scripts are scripts of commands used on Unix terminals, like the Linux terminal.
It allows you to enter a list of commands (in sequence) just by typing the name of the Bash Script file.
For example, to open Firefox for Developers on Linux systems, you need to open the folder where it is at and double click de file called firefox.
To do it from the terminal, you need:
cd to the folder where firefox is;./firefox.
./means "from this folder where i'm" +/to select file/folder you wish to work with.
To achieve this, you just typed a few commands on the terminal. To do this with a single command, you need a Bash Script.
At your user home folder $ (/home/user), create a file called script.sh.
Your user home folder is usually where your terminal starts. Type
pwdto check. It needs to be/home/petry, for example.
Inside the script.sh write #!/bin/sh on the very first line. This will tell the terminal it is a Bash Script.
The first command of your script will be written above, and so on.
Example:
#!/bin/sh
+cd aurora
+./firefox &
+This is the same as: cd aurora && ./firefox &.
In this case, is just two commands, but this can be used to create complex scripts, with logic operators and all that cool programming stuff.
As you can see on the example, the first command on the script is cd aurora. Aurora is the nickname for the Firefox for Developers, and this folder is actually /home/petry/aurora/.
This is a link. To create one, you will need the ln command. Like:
ln -s [path] [symbolic name]
+Example:
ln -s /home/petry/aurora/ aurora
+This is starting to look like magic...
Git and GitHub, at first, can be a little frustrating. Complex commands, Git running locally and the GitHub platform. I feel you... So, here is the easiest way (I know) to work with Git and GitHub repositories.
Go to the GitHub repository you need work and copy the .git address, which is usually https://github.com/yourUserID/yourRepoName.git and head to the terminal.
Inside the Terminal, browse to the folder you wish to save the repository and type git clone + .git URL. Just like this:
git clone https://github.com/petry078/spellblog.git
Change directory to the repository you just cloned, with: cd + repositoryName.
cd spellblog
And open everything that it is inside the folder on Visual Studio Code, with: code .
Update and change what is needed and go back to the terminal to start the commit process.
First, run git status and read the results. If everything is correct, add every file to the commit, with: git add .
And then git commit -m "commit description" to write the commit.
To upload the commit, just run git push.
It may ask for you to authenticate the access to your GitHub account, with user and password. For this to work, you need to have a token configured and use the token as your password. Learn more about GitHub tokens and how to create one here!
The git push must return a message of success with the link of the repository you just pushed the commit. Click on it and check if it's all there.
Its nice to check. I've losted files in this process before...
git clone URLcd repositoryNamegit statusgit checkout -b NewBranchcode .git add .git commit -m "commit description"git push --set-upstream origin NewBranchThis last command will bring the pull request page ready to pull it to main branch.
git status
+git clone gitURL
+git checkout -b NewBranch
+git add .
+git commit -m "commit description"
+git push
+git push --set-upstream origin NewBranch
+"Helmet helps you secure your Express apps by setting various HTTP headers. It's not a silver bullet, but it can help!", says the developers. It is a middleware (communication software) that deals with HTTP headers and also offers security modules for the Express (Node.js framework) applications.
According to stackshare.io, Express.js is used in more than 1900 companies applications around the world, including Twitter, Accenture, BlaBlaCar and others. Helmet can be also be used with other frameworks.
This documentation is based on (and can help you follow) the Information Security with HelmetJS course on FreeCodeCamp.
Run npm install helmet and in your Express application (app.js):
const express = require("express");
+const helmet = require("helmet");
+const app = express();
+app.use(helmet());
+It is all about headers. Use
curl -v <URL>on terminal, to read headers and confirm Helmet.js is working.
On app.js write app.use(helmet()); to include all manual configurations listed below:
app.use(helmet.hidePoweredBy()); removes the X-Powered-By header;app.use(helmet.frameguard({action: 'deny'})); makes your application break when used inside <frame> <iframe> HTML tags. This can help against Clickjacking attacks;app.use(helmet.xssFilter()); sanitizes user input fields, protecting against Cross-Site Scripting (XSS) attacks;app.use(helmet.noSniff()); tells the browser not to use MIME sniffing and read the file as the Content-Type header says. MIME sniffing is a technique used in browsers to determine the file type by reading some of its data. This can create vulnerabilities.
app.use(helmet.ieNoOpen()); prevents the mighty Internet Explorer to download and execute infected HTML files.app.use(helmet.hsts({maxAge: ninetyDaysInSeconds, force: true})); configures HTTP Strict Transport Security (HSTS), or HTTPS only, avoiding insecure HTTP requests. You also gonna need to instantiate a variable with 90 days in seconds
ninetyDaysInSeconds = 90*24*60*60to check certification expiracy.
app.use(helmet.dnsPrefetchControl()); disables browser DNS Prefetch. To make navigation faster, DNS prefetch resolve domain names before the user tries to click on the link. However, it can cause user data leak, if you serve a malicious website in your application. The attack is the inplantation of this malicious link.
app.use(helmet());:app.use(helmet.noCache()); prevents your user to use cached versions of your application. This can be good when you just pushed a security update.
Content Security Policy:
app.use(helmet.contentSecurityPolicy({
+ directives:{
+ scriptSrc: ["'self'"],
+ styleSrc: ["'self'"]
+ }
+}))
+scriptSrc and styleSrc with "'self'" will restrict the execution of scripts and stylesheets, originated from the same origin as the domain itself. These directives enhance security by mitigating Cross-Site Scripting (XSS) and file injection attacks.
Test repository: https://replit.com/@GuilhermePetry/boilerplate-infosec
Content in progress.
"ECMAScript is an object-oriented programming language for performing computations and manipulating computational objects within a host environment... In ECMAScript, an object is a collection of zero or more properties... Properties are containers that hold other objects, primitive values, or functions"
"...An object is a member of the built-in type Object; and a function is a callable object. A function that is associated with an object via a property is called a method."
In JavaScript we write objects. Objects have properties, that can be:
Everything that is not a primitive value, is an object.
There are several built-in objects in JavaScript:
Object;Function;Boolean;Symbol;ErrorMath;Number;Date;String;RegExp;Array;Typed Arrays;Map;Set;JSON;ArrayBuffer;SharedArrayBuffer;DataView;Promise;Proxy;Reflect.Objects can have methods, wich are functions that will use the object properties data.
"When a function is called as a method of an object, the object is passed to the function as its this value."
Use typeof varName to reveal data type of element at runtime.
A function is a callable object, with a set of commands that will be runned when the function is called. Example function().
Functions can return something and have scope {} defined.
Functions can be called as methods, that will run with the object properties data. Example: object.functionAsMethod() just like console.log().
As like an object it is, functions can have properties and methods.
function(paramenters){
+ commands
+}
+Alternative function syntax for using it as variables, or parameters. Arrow functions dosent have its own this and can't be used as constructor function.
let arrowFunction = (paramenters) => {
+ commands
+}
+Number(varName) coverts to number;String(varName) converts to string;Number.parseInt(varName) coverts to whole number;Number.parseFloat(varName) converts to floating-point number.console.log(Number.isInteger(12)) will check if number is floating-point.let fu = "bar" //string
+let fuu = 123 //number
+console.log(`Name: ${name};`)
+console.log(`Surname: ${surname}.`)
+var jsString = "JavaScript";
+console.log(jsString.toUpperCase());
+console.log(jsString.toLowerCase());
+
+var jsStringLenght = jsString.length
+console.log(jsStringLenght)
+Precedence order:
| Operator | Function |
|---|---|
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| / | Division |
| % | Remainder (resto de uma divisão inteira) |
| ** | Power (Ex: 5² = [5 ** 2]) |
() first priority***, /, %+, - last priority| Operator | Function |
|---|---|
| = | Assignment (recebe) |
| // Auto-assignment | |
| += | Addition (a += 5; // a = a + 5) |
| -= | Subtraction (a -= 2; // a = a - 2) |
| *= | Multiplication (a *= 3; // a = a * 3) |
| /= | Division (a /= 2; // a = a / 2) |
| %= | Remainder (a %= 2; // a = a % 2) |
| **= | Exponentiation (a = 2; // a = a2) |
x++ x = x + 1x-- x = x - 1Pre-increment
++x
Pre-decrement
--x
It returns true or false, comparing only the value.
| Operator | Function |
|---|---|
| > | Greater than (maior que) |
| < | Less than (menor que) |
| >= | Greater than or equal to (maior que ou igual) |
| <= | Less than or equal to (menor que ou igual) |
| == | Equal to (same value) |
| != | Not equal to |
Compares value and type.
| Operator | Function |
|---|---|
| === | Strict equal to (igual restrito) |
| !== | Strict not equal to (desigual restrito) |
Examples:
5 > 2 //true
+7 < 4 //false
+8 >= 8 //true
+9 <= 7 //false
+5 == 5 //true
+4 != 4 //false
+
+// strict equal operator
+2 === 2 // true
+2 === '2' // false
+
+// strict not equal operator
+2 !== '2' // true
+2 !== 2 // false
+| Operator | Function | Example |
+|-----------|----------------|------------------------------------|
+| ! | Not (negação) | `(x < 10 && y > 1)` // true |
+| && | And (conjunção)| `(x == 5 || y == 5)` // false |
+| || | Or (disjunção)| ```!(x == y)``` // true |
+Unary operator ! (not) only deals with one operating, turning 0 in 1 and 1 in 0. True to false, false to true.
Binary operators && and || deals with two operating and returns true or false after analysis. If you ask for a book heavy and && black, it must return true only if the book is heavy and black, but the or || operator will return true if at least one is true.
//Inverts the result
+!true //false
+!false //true
+
+//Both need to be `true` to return `true`.
+true && true //true
+true && false //false
+false && false //false
+false && true //false
+
+//Only one need to be `true` to return `true`
+true || true //true
+true || false //true
+false || false //false
+false || true //true
+It begins with a logic test, if it returns true, it will run the code on the first true slot, and if it returns false, runs the second false slot.
Syntax:
x && b ? true : false
Examples:
// 1.
+let media = 5.5
+let mediaCalculada = media > 6 ? "Aprovado(true)" : "Reprovado(false)"
+
+console.log(mediaCalculada) // Reprovado(false)
+
+// 2.
+var x = 8
+var res = x % 2 == 0 ? 5 : 9 // 5 (true)
+
+//3.
+var age = 18
+var r = age >= 18 ? "Adult" : "Child" // Adult (true)
+The DOM tree:
window.location
+ .history
+ .document.<call to HTML tag (selector)>
+getElementById Select HTML tag by its ID.getElementsByTagName() Select HTML tags.getElementsByName() Select HTML tag by its name.getElementsByClassName() Select HTML tags by its class name.Usage:
<p id = "IdOfP">Old string</p>
+<script>
+window.document.getElementById("IdOfP").innerText = "New string"
+</script>
+Modern aproach of selectors.
querySelector() Select the first HTML TagquerySelectorAll() Creates a list of all elements. Not sure how it works.
querySelector()can be used to select HTML tag + ID/Class (#for ID or.for class)
Usage:
<p>String 1<p>
+<p id = "IdOfP">String 2</p>
+<p class = "ClassOfP">String 3</p>
+<script>
+window.document.querySelector("p").innerText = "Select by HTML tag name"
+window.document.querySelector("#IdOfP").innerText = "Select by ID"
+window.document.querySelector(".ClassOfP").innerText = "Select by Class name"
+</script>
+innerText Write plain text on top of selected element;innerHTML Write HTML on top of selected element;<h1></h1>
+<p></p>
+<script>
+document.querySelector("h1").innerText="Inset only raw text";
+document.querySelector("p").innerHTML="Insert text with <strong>HTML Tags</strong>"
+</script>
+Avoid using
innerHTML, that can represent a risk of Cross-Site Scripting (XSS).
It works alongside with functions(). Events are called with reserved words, inside the .html file, like onkeydown="functionName()" or in the .js file with Event Listeners, like:
<button id="myBtn">Try it</button>
+
+<p id="textField"></p>
+
+<script>
+document.getElementById("myBtn").addEventListener("click", printDate);
+
+function printDate() {
+ document.getElementById("textField").innerHTML = Date();
+}
+</script>
+This can also be done with Arrow Functions:
document.getElementById("myBtn").addEventListener("click", (printDate) => {
+ document.getElementById("textField").innerHTML = Date();
+})
+Mouse events example:
<body>
+ <main>
+ </main>
+
+ <script>
+ let main = document.querySelector("main")
+ //Events
+ main.addEventListener("mouseenter", mouseenterFunction)
+ main.addEventListener("mouseout", mouseoutFunction)
+ main.addEventListener("click", clickFunction)
+
+ function mouseenterFunction() {
+ main.innerText = "mouseenter event"
+ main.style.background = "red"
+ }
+
+ function mouseoutFunction() {
+ main.innerText = "mouseout event"
+ main.style.background = "yellow"
+ }
+
+ function clickFunction() {
+ main.innerText = "click event"
+ main.style.background = "purple"
+ }
+ </script>
+
+ <style>
+ main {
+ width: 150px;
+ height: 150px;
+ background-color: green;
+ }
+ </style>
+</body>
+Hello ${name} example:
This example needs refinement.
<body>
+ <form>
+ <label for="inName">Name:</label>
+ <input type="text" name="" id="inName">
+ <input type="submit" value="print">
+ </form>
+
+ <h1></h1>
+
+<script>
+ let name = document.querySelector("form").inName.value
+ document.querySelector("form").addEventListener("submit", (printName) => {
+ document.querySelector("h1").innerText = `Hello, ${name}`
+ printName.preventDefault()
+ })
+</script>
+</body>
+For complete events list, see MDN Web Docs.
In addition to the Arithmetic operators, math can be done with the Math. functions.
Math.round(num) return the closest number. Example Math.round(4.4) = 4 and Math.round(4.5) = 5;Math.ceil(num) round to bigger number. Example: Math.ceil(4.2) = 5;Math.floor(num) round to lower number. Example: Math.floor(4.2) = 4;Math.random() will return a random number between 0 and 1.
console.log(Math.round(8.4)) //8
+console.log(Math.round(8.5)) //9
+
+console.log(Math.ceil(4.2)) //5
+console.log(Math.floor(4.9)) //4
+
+console.log(Math.random()) //0.7099176926811621
+Programs read data (input), process it, and return something. With conditionals you can have limitations to work with.
The syntax in JavaScript, and most languages, are if...else, switch...case and with ternary operators.
The condition (parameters) must be written with comparison operators. Each comparison will return true or false.
There are situations in which your program must analyze more than one condition. In that case, use logical operators inside the parameter/condition slot. Example: condition == true && condition == true or condition == true || condition != true.
The if...else conditions can be written in three different structures:
if (condition == true){run};if (condition == true){run}... else{run};if (condition == true){run}... else if{run}...else{run}.Multiple conditions can have as many
else ifas necessary.
let n1 = prompt("N1: ")
+let n2 = prompt("N2: ")
+let n3 = prompt("N3: ")
+let n4 = prompt("N4: ")
+
+let average = (n1 + n2 + n3 + n4) / 4
+
+if (average >= 6){
+ console.log("Approved!")
+} else if (average == 5) {
+ console.log("Need recovery")
+} else {
+ console.log("Disapproved")
+}
+Just another structure to make conditionals. Usable when you have a lot of options based on values of a variable, or when you need to return a different case for every value possible of a variable.
Basic example:
let neighborhood = prompt("neighborhood: ")
+let fee
+
+switch (neighborhood) {
+ case "center":
+ fee = 5
+ break
+
+ case "fragata":
+ case "caranda":
+ fee = 7 //Both (fragada and caranda) will return 7
+ break
+
+ case "elysee":
+ fee = 10
+ break
+
+ default:
+ fee = 8
+}
+
+console.log(fee)
+Repetitions, or Loops, (Laços de Repetição, in Portuguese) allows you to run one or more commands in a program or function as many times you need.
Loops need braking points and can be used with Conditional (if...else/switch... case/break/continue).
The for syntax is composed by 3 instructions for (initialValue; conditional; incremental/decremental){command}:
for (let i = 1; i <= 10; i = i + 1){command}
+ || || ||
+ \/ \/ \/
+{INITIAL VALUE}{CONDITIONAL}{INCREMENTAL}
+
+//This means that `i` starts as 1 and, and will run until it grows to 10, since each commands run, it grows by {INCREMENTAL/DECREMENTAL}, in that case 1.
+Incremental short:
i++
The last instruction can also be decremental: i = 1 -1 or i--
Example:
let numbers = 0
+for (let i = 1; i <=4; i++){
+ numbers++
+ console.log(numbers)
+} //It will print numbers from 1 to 4.
+Multiplication table example:
let x = prompt("Number: ")
+
+for (let i = 1; i <=10; i++){
+ let y = x * i
+ console.log(x + " * " + i + " = " + y)
+}
+for (let i = 1; i <1= 10; i++){
+ //command1
+ //command2
+ //command3
+ if (i % 2 == 0){
+ //command4
+ }
+}
+It tests the conditional before, to see if it will run the commands or not.
Examples:
while (condition){
+ command
+} //While this condition is true, run {command}
+let x = prompt("Number: ")
+while (x > 0) {
+ console.log("Oi")
+}
+It executes the command at least once, even if the condition is not true.
Examples:
do {
+ command
+} while (condition);
+let x = 0;
+
+do {
+ x++;
+ console.log(x)
+} while (x < 10)
+The break and continue are two commands that can be used inside JavaScript loops.
break: jumps out of a loop.continue: jumps in the beginning of the loop.while (condition1) {
+ commands
+ if (condition2) {
+ continue //It will test the condition and make the program continue in case of true.
+ }
+ commands
+ if (condition3) {
+ break //It breaks the loop, making the program ignore everything left inside the loop. If there is commands after the break, they will not be executed.
+ }
+ commands
+}
+commands
+Example:
do {
+ const num = Number(prompt("Number: "))
+ if (num == 0 || isNaN(num)){
+ break
+ } else {
+ continue
+ }
+} while (true)
+Counters and accumulators are ways to track how many times a particular action or event has occurred. They are commonly used inside loops to count the number of iterations (iteration is a lap made by the program inside a loop or code block).
However, counters and accumulators are commonly used inside loops, they can also be used outside of loops, to count occurrences of an event or action that occurs multiple times in the program.
In JavaScript, counters and accumulators need to be initiated, usually receiving the value of 0. Since they are used to count cycles, you need to know how many cycles (iterations) it has done already, that is why to start a counter with 0.
Counters represent a variable = a variable + 1 (the count factor), accumulators represent a variable = a variable + another variable, and they can be written with the += operator.
Counter example:
let result = 0 //variable initiation
+result = result + 1 //traditional way
+result += 1 //with the += operator
+Accumulator example:
let result = 0 //variable initiation
+result = result + price //traditional way
+result += price //with the += operator
+Loop with counter example:
let counter = 0
+for (let i = 0; i < 10; i++) {
+ counter += 1
+ console.log(counter)
+}
+Different from variables, that hold only one data entry, arrays can hold many values. Its values can be the same as from the objects, all the JavaScript things.
Arrays can be declared with
consteven when your values may be changed. Whatconstcan't handle being essentially reassigned.
const arr = ["string1", "string2", 12] //Normal array of strings and number
+const newArray = new Array("string1", "string2", 12) //Used as constructor.
+Array values are counted starting from 0 (zero) and the values are selected with its index number. Example:
const arr = ["string1", "string2", 12, 15, "string3"]
+
+console.log(arr[0])
+console.log(arr[1])
+console.log(arr[2])
+console.log(arr[3])
+console.log(arr[4])
+console.log(arr[5])
+
+//Value rewrite:
+arr[0] = "NewValue"
+arr.push() adds one, or more, elements to the end of the array and returns the new array lenght.const arr = ["string1", "string2", 12, 15, "string3"]
+arr.push("one or", "more", "elements")
+arr.pop() removes the last element of the array.const arr = ["string1", "string2", 12, 15, "pop this one"]
+arr.pop()
+arr.shift() removes the first element of the array.const arr = ["shift this one", "string2", 12, 15, "pop this one"]
+arr.shift()
+arr.unshift() adds one, or more, elements to the beginning of the array and returns the new array lenght.const arr = ["string1", "string2", 12, 15, "string3"]
+arr.unshift("zero", "unshift", "test")
+arr.splice() used to remove and replace elements.const arr = ["string0", "string1", 2, 3, "remove 4", "remove 5"]
+arr.splice(4, 2) //Start position, number of elements to delete
+
+
+const arr = ["string0", "string1", 2, 3, "number this 4", "number this 5"]
+arr.splice(4, 2, "quatro", "cinco") //Start position, number os elements to replace, replace value, replace value.
+arr.slice() select elements of an array in a new array.const arr = ["string0", "string1", 2, 3, "quatro", "cinco", 6, 7, 8, 9, 10]
+arr.slice() //Copy the array
+arr.slice(2, 6) // Select elements from index 2 to 6
+arr.map() expects a function as its argument. This function is then called for each element in the array.const arr = [0, 1, 2, 3, 4, 5]
+const mappedArr = arr.map(plus)
+
+function plus(value, index, arr) {return value + 1}
+console.log(mappedArr)
+arr.forEach() used for repetition loops. Run commands in each element of the array and saves results in the same array.const arr = [0, 1, 2, 3, 4, 5]
+arr.forEach(plusFunction)
+
+function plusFunction(item, index, array) {
+ console.log(item + 1);
+}
+
+//with arrow function
+arr.forEach(item => {console.log(item + 1);})
+arr.filter() creates a new array with all elements that pass the test implemented by the provided function.const arr = [1, 2, 3, 4, 5, 6]
+const filteredArr = arr.filter(num => num > 3)
+console.log(filteredArr) // Output: [4, 5, 6]
+arr.reduce() applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.const arr = [1, 2, 3, 4, 5]
+const sum = arr.reduce((total, value) => total + value, 0)
+console.log(sum) // Output: 15
+arr.sort() sorts the elements of an array in place and returns the array.const arr = [5, 2, 8, 1, 4]
+arr.sort()
+console.log(arr) // Output: [1, 2, 4, 5, 8]
+arr.length returns the number of elements.arr.constructor returns the constructor function that created it.arr.prototype don't really know, some cursed stuff.{content in progress}
The methods indexOf(), lastIndexOf(), and includes() are used to locate content inside arrays.
const arr = [0, 1, 2, 3, 4, 5]
+arr.indexOf(3) // Returns the index of the first occurrence of 3
+arr.lastIndexOf(3) // Returns the index of the last occurrence of 3
+arr.includes(3) // Returns true if the array contains 3
+{content in progress}
JavaScript runs on browsers, as client side code. With Node.js you can run it as a server.
prompt-sync enables you to use prompt on the terminal.
It requires Node.js.
Run npm install prompt-sync. This will install node_modules and package.json.
On your JavaScript file:
const prompt = require("prompt-sync")();
+let promptData = prompt("Data: ")
+On the terminal, open the folder where your JavaScript file is and run:
node <fileName>.js
Extract Kali and Metasploitable to the same directory.
Inside the directory, locate the files kali-linux-2022.4-virtualbox-amd64.vdi and Metasploitable.vmdk, make sure you know where they are.
New.Machine Folder select the directory you extracted Kali and Metasploitable.Type select Linux.Version select Debian (64-bit).Next.Create a virtual hard disk now.VDI (VirtualBox Disk Image).Dynamically allocated.Create.Now, you need to add the kali-linux-2022.4-virtualbox-amd64.vdi to the new virtual machine:
Settings.Storage.kali-linux-2022.4-virtualbox-amd64.vdi below Controller: SATA.Attributes, you will find a small disk icon. Click on it!Choose/Create a Virtual Hard Disk.kali-linux-2022.4-virtualbox-amd64.vdi.Ok.New.Machine Folder select the directory you extracted Kali and Metasploitable.Type select Linux.Version select Debian (64-bit).Next.Create a virtual hard disk now.VDI (VirtualBox Disk Image).Dynamically allocated.Create.Now, you need to add the Metasploitable.vmdk to the new virtual machine:
Settings.Storage.Metasploitable.vmdk below Controller: SATA.Attributes, you will find a small disk icon. Click on it!Choose/Create a Virtual Hard Disk.Metasploitable.vmdk.Ok.Don't forget to change the network config from NAT to Bridge Adapter on both virtual machines. Otherwise, Metasploitable won't be able to host:
Settings.Network.Attached to select Bridge Adapter.Ok.I guess this is high cyber witchery already...
LaTeX is a powerful typesetting markup language, designed to make beautiful and readable printable documents.
Learn LaTeX is great because its old school, free and stable. You will never need to open shit and slow Google Docs, Microsoft Word and even Adobe inDesign, which are all private softwares.
LaTeX documents have to be written and than compiled. Write content using LaTeX markup syntax and than press it to PDF with the command:
pdflatex fileName.tex
+To Press PDFs using LaTeX you need to have TeX installed.
sudo apt-get install texlive-full
+tex --version
+Complicate stuff? Overleaf, the LaTeX web editor and compiler got you there.
The syntax is divided by the preamble, the content and bibliographic references.
There are also some reserved characters:
| Character | Definition |
|---|---|
# | Macro key. |
$ | Mathematical environment. |
% | Comment. |
^ | Superscript. |
& | Separation of columns in tables. |
_ | Automatic subscript. |
{} | Scope. |
~ | Space between text that cannot be broken. |
\ | Command initialization. |
To print then, use \ before. Example: \#.
The preamble is where you will define the structure, styles, aditional packages, rules, metadata, and other general configuration. This configurations will apply to the document as a whole.
The first command of the preamble is \documentclass[]{} that will set the document class and its own parameters.
Here are the preamble commands discovered:
| Command | Definition |
|---|---|
\documentclass[]{} | Initialize the document. Requires parameters [] and actual document class {}. |
\usepackage[]{} | Import and use packages with additional functionality. Requires parameters [] and scope {}. |
\setlength{\parindent}{0cm} | Set paragraph identation. |
\setlength{\parskip}{2em} | Set space between paragraphs. |
\renewcommand{\baselinestretch}{1.5} | Space between lines. |
\title{Document title} | Define title of the document. |
\author{Document author} | Define author of the document. |
\date{Document date} | Define date of the document. |
\documentcalss parameters[], or parameters in genereal, are optionals and will change based on the actual class and command, that can be:
\documentclass{article}
+\documentclass{report}
+\documentclass{book}
+\documentclass{letter}
+\documentclass{slides}
+\documentclass{beamer}
+\documentclass parameters:
\documentclass[12pt]{}
+\documentclass[a4paper]{}
+\documentclass[twocolumn]{}
+\documentclass[twoside]{}
+\documentclass[landscape]{}
+The \usepackage commands imports aditional packages and features. Here are some examples:
\usepackage[utf8]{inputenc}
+\usepackage[portuguese]{babel}
+\usepackage{graphicx}
+\usepackage{url}
+Content commands are only allowed in the document scope:
\begin{document}
+Content and content commands go here! Like \LaTeX!
+\end{document}
+
+| Command | Definition |
|---|---|
\par | New paragraph |
\\ | Line break, necessary on blank lines |
\textbf{Bold example} | Bold text. |
\textit{Italic example} | Italic text. |
\underline{Underline example} | Underlined text. |
\begin{center} | Text align: center. Requires `\end{center} |
\begin{flushright} | Text align: right. Requires `\end{flushright} |
\newpage or \clearpage | Page break. Needs test, as they work diffrently. |
\vspace{4cm} | Add vertical space between elements in line. |
\hspace{4cm} | Add horizontal space between elements in line. |
\hfill and \vfill | Fill horizontal and vertical space between elements in line. |
\begin{itemize} or \begin{enumerate} | Iniciates unordered or ordered list. Requires \end{itemize} or \end{enumerate}. For list item: \item. |
\begin{figure} | Iniciates image with standard snippet. Requires graphicx package \usepackage{graphicx} in the document header. |
\begin{tabular} | Iniciates image with standard snippet. Requires graphicx package \usepackage{graphicx} in the document header. |
\begin{titlepage} | Iniciate title page. Requires \end{titlepage}. See example below. |
\tableofcontents | Print table of contents. Nice to have \newpage after the summary. |
\listoffigures | Print figures list. |
\listoftables | Print figures list. |
Content techniques are commands used inside the content scope.
A blank line and \par after the text represent paragraph.
Paragraph 1
+
+Paragraph 2
+
+Paragraph 3\par
+Paragraph 4\par
+For a simple line break, use \\ or \newline at the end of the paragraph, or in a single line.
Simple line break\\
+Newline \newline
+Chapters, sections, and subsections:
\chapter{Chapter 1}
+\section{Chapter 1, Section 1}
+\section{Chapter 1, Section 2}
+\subsection{Chapter 1, Section 2, Subsection 1}
+\section{Chapter 1, Section 3}
+\subsection{Chapter 1, Section 3, Subsection 1}
+\subsection{Chapter 1, Section 3, Subsection 2}
+Whitespaces after commands are ignored. To print then, type the whitespace inside the commands scope {}. Example: textbf{text }.
\hfill and \hspace{3cm} examples:
Grape\hfill100g
+1\hspace{1cm}2\hspace{1cm}3\hspace{1cm}4\hspace{1cm}
+For vertical stuff, same thing, but \vspace{1cm} and \vfill.
Inline font size and style:
\tiny{tiny text}\\
+\scriptsize{scriptsize text}\\
+\footnotesize{footnotesize text}\\
+\small{small text}\\
+\normalsize{normalsize text}\\
+\large{large text}\\
+\Large{Large text}\\
+\LARGE{LARGE text}\\
+\huge{huge text}\\
+\Huge{Huge text}\\
+
+\textrm{Roman Serif font}\\
+\textsf{Sans Serif font}\\
+\texttt{Monospaced font (typewriter)}\\
+Any text style + any nother text style:
\underline{\textbf{\textit{Underlined, bold, and italic text}}}
+Unordered list:
\begin{itemize}
+\item 1
+\item 2
+\item 3
+\item 4
+\end{itemize}
+Ordered list:
\begin{enumerate}
+\item 1
+\item 2
+\item 3
+\item 4
+\end{enumerate}
+Images are called figures in LaTeX, type \begin{figure} and it should autocomplete to this:
\begin{figure}
+ \centering
+ \includegraphics[scale=0.5]{imageExample.png}
+ \caption{Caption text}
+ \label{fig:enter-label}
+\end{figure}
+Not gonna lie, tables are complicated.
\begin{titlepage}
+\centering
+\Huge{\textbf{University of Chaos}}
+\vfill
+\huge{My very long article title}
+\vfill
+\large{\textbf{Alum: Guilherme Petry}}
+\vfill
+\today
+\end{titlepage}
+Just call \tableofcontents where you want it to be printed.
Use * in the end of markup to avoid it beeing indexed by the
\tableofcontents. Example:\section*{Chapter 1, Section 1}
Primeiro parágrafo do capítulo 1, seção 3 e subseção 2\footnote{Nota de rodapé1}\par
+Segundo parágrafo do capítulo 1, seção 3 e subseção 2\footnote{Nota de rodapé2}\par
+\begin{quote}
+
+\end{quote}
+Bibliographic references in LaTeX requires the natbib package and the references file should be in bibTeX, or .bib.
Instanciate the bliblopgraphy:
\bibliography{referencias}
+\bibliographystyle{plainnat}
+bibTeX bibliography example:
@book{de1999santa,
+ title={Santa Ifig{\^e}nia},
+ author={de Athayde Jorge, C.},
+ lccn={99887098},
+ series={S{\'e}rie Hist{\'o}ria dos bairros de S{\~a}o Paulo},
+ url={https://books.google.com.br/books?id=SDgsAAAAYAAJ},
+ year={1999},
+ publisher={Departamento do Patrim{\^o}nio Hist{\'o}rico}
+}
+On text, call reference with \cite{referenceOfBibliography}. The referenceOfBibliography in the example is de1999santa.
Google Books offers bibTeX references like this!
Now!
| Markup syntax | Name | Description & Examples |
+|------------------|---------------------------------|-----------------------------------|
+| # | Heading 1 <h1> | # H1 |
+| ## | Heading 2 <h2> | ## H2 |
+| ### | Heading 3 <h3> | ### H3 |
+| #### | Heading 4 <h4> | #### H4 |
+| ##### | Heading 5 <h5> | ##### H5 |
+| ###### | Heading 6 <h6> | ###### H6 |
+| **bold** | Bold | **Bold** example |
+| *italic* | Italic | *Italic* example |
+| --- | Line <hr> | Line break (*** ___ ) |
+| > | Quote/Comment | > Comment styled line |
+| * | Unordered list item | * List item (- + are alternatives)|
+| 1. | Number ordered list item | 1. Just like this! |
+| a. | Character ordered list item | a. Character styled list |
+| - [ ] text | Unmarked to-do list item | Create to-do lists |
+| - [x] text | Checkd to-do list item | This one is a checked [✔] box |
+| ```code``` | Code | ```Code styled line/block``` |
+| [text](URL) | Hyperlink | [Download here!](URL) |
+|  | Image |  |
+| \ | Disable Markdown style | Use before ``` * # - + ! | |
+|------------------|---------------------------------|-----------------------------------|
+| |
+| text-align on tables |
+| |
+| | text-align: left | text-align: center | text-align: right | |
+| |:-----------------|:------------------:|------------------:| |
+| | text | text | text | |
+| |
+
+The Linux Terminal is a way to interact with the machine by typing console commands. To use it, you need an interpreter, like:
But, don't worry about it. Most Linux distributions comes with one of those by standard, they all are going to work similarly and can do the job.
Everything starts from the root which is /.
From there:
/bin essential user binaries;/boot boot static files;/dev (devices) device files (disks);/etc system configuration files (servers like Apache and Nginex);/home home directory, which contains users list directory;/media mount points for removable media;/mnt temporary mount directories;/opt optional or third-party software;/sbin binary system files;/tmp temporary files, non-persistent or cleared on reboot;/usr user related programs;/var variable files (logs from OS or servers like Apache, Nginx);/proc virtual and pseudo files;/root home directory of the root user (sudo home).
/and/rootare different things.rootis inside/. This folder is used for system adiministrative tasks/files and contains configuration files specific to the root user (or the sudo command).
| Command | Description |
+|-----------------|-------------------------------------------------------------|
+| pwd | Print working directory |
+| ls | List files and directories (-l, -la, -ls, -lh...) |
+| cd | Change directory |
+| cd .. | Navigate one folder back in the directory hierarchy |
+| cd - | Navigate to the folder you was before |
+| mkdir | Create folder `mkdir newFolder` |
+| find | Search inside current folder (case sensitive: find -i) |
+| locate | Need to run `updatedb` before `locate index.html` |
+| xdg-open . | Open current working directory on Files |
+| xdg-open "path" | Open folder/archive. "xdg-open /home/petry" will open home |
+| xdg-open "file" | "xdg-open index.md" will open index.md form current folder |
+| Command | Description |
+|-----------------|-------------------------------------------------------------|
+| apt update | Updates packages lists. Important before `apt upgrade` |
+| apt upgrade | Actually updates the packages (apps). |
+| apt search | Searches for the specific app `apt search <appName>`. |
+| apt install | Install app `apt install <appName>`. |
+| apt remove | Remove app `apt remove <appName>`. |
+| apt purge | Removes app and all dependencies `apt remove <appName>`. |
+| dpkg -l | Print all apps from packages. |
+| dpkg -r <app> | Remove <app>. |
+cat /etc/apt/sources.list will print where system search for packages.| Command | Description |
+|-----------------|-------------------------------------------------------------|
+| cp | Copy. `cp imput.md output.md` |
+| mv | Move. `mv file.md /home/petry/Desktop` |
+| touch index.md | Creates a new file |
+| echo | Print on screen. `echo "Hello, world!" > hello.md` to save. |
+| cat file.md | Reads and prints file on terminal |
+| rm / rm -r | Delete file / delete folder (may need to run as sudo) |
+| code . | Open directory on Visual Studio Code |
+| grep | Search keyword in file (grep "keyword" file.md) |
+| egrep | Search with multiple keywords (egrep "zsh|bash" file.md) |
+| cut | Cut selected text inside file |
+| sed | Substitution (sed 's/texto1/texto2' index.md) |
+| Command | Description |
+|-----------------------------|-------------------------------------------------|
+| top | Print system processes |
+| ps aux | Print all system processes |
+| ifconfig | Print network interfaces |
+| ip | Print network interfaces + IP and MAC addresses |
+| systemctl status networking | Print network status |
+| systemctl start networking | Network controls (start, stop, restart) |
+| route | Print system routes (route -n) |
+| netstat (netstat -l [list]) | Print network open doors and active connections |
+| dig +short <url> | Print IP from from domain (dig +short hello.com)|
+cat /etc/network/interfaces will print network configuration files.| Command | Description |
+|-----------------|-------------------------------------------------------------|
+| setxkbmap br | Change keyboard language to <country> |
+| man <app> | Print manual for <application> |
+| clear | Clear terminal window |
+| whereis <app> | Print location if <application> files |
+| file hello.md | Print file type (can be used with file name or file path) |
+| xxd hello.md | Print binaries from file (can be used with path) |
+| curl URL | Send GET request to URL. Try "curl wttr.in" |
+| curl -o URL | Download content (alphabetic "o", not zero) |
+| !$ | Copy and paste last command entry, to command prompt |
+Remember! Those are not spells. We will get there...
Define the output name and file extension after -o. Just like this:
curl -o output.png https://www.thehousedesigners.com/images/uploads/SiteImage-Landing-large-house-plans-1.webp
It works with .webp/.jpeg to .png
Web developers love the .webp/.webm. file format. It is smaller and loads faster. But content creators hate it. .webp/.webm doesn't open on preview apps.
This look shit... Don't worry. I'm working on a cURL post. Maybe after the
digand thetraceroutecommands.