DreamFreely/Library
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
canin carlos
2026-01-09 23:05:52 -05:00
commit dec0c8e4e4
4203 changed files with 824454 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
docs/rebel_coding/appendices.md Normal file
View File

@@ -0,0 +1,104 @@
# Appendix A: Additional Resources
--------
[Coding Entrepreneurs](https://www.youtube.com/channel/UCWEHue8kksIaktO8KTTN_zg)
Learn Python the Hard Way
The Complete Unix History
# Appendix B New GitHub Repo:
------------------------------------------------------------
# Appendix C Man command:
----------------------------------------------------
Provide an example
# Appendix D Powershell:
--------------------------------------------------
# Appendix E ls -l Explained:
-----------------------------------------------------------
Chmod, chown and more
# Appendix F Version Numbers:
------------------------------------------------------------
Version 1.12.5
5: numbers in this position indicate non-breaking changes made
12: changes in this version may break your code
1: this number will often only change when new features are added
# Additional Material
---------------------------------------------
Setting-up SSH, Github
Using Github.io
Your First Pull Requests
Up & Running with Vi
Up & Running with Django
Up & Running with VueJS
Web Scraping with Selenium
How-To: Web to Mobile App
How-To: Windoze DevEnv
# Bonus Material
-----------------------------------
Up & Running with Keepass
Up & Running with Blender
Up & Running with Audacity
Up & Running with Glimpse
Up & Running with GNUCash
Up & Running with Discord
Up & Running with LaTeX
Why FireFox? Which Extensions?
Up & Running with Thunderbird
Up & Running with Sublime
Why Linux? Why Arch?
Up & Running with zsh
Intermediate Command-Line
Up & Running with tmux
### Secret Script Stash
Scripted Google Search
Parallax HTML Template
Django Social Post BreakDown
Python Email AutoSend
ytube-yanker
custom zshrc file
LaTeX Example Article

30
docs/rebel_coding/index.md Normal file
View File

@@ -0,0 +1,30 @@
# Everything You Need to Know
::: tip Welcome, te aviso ...
This too is still a work in progress - there is an email course that may become available, though I'm still checking to make sure the content is complete enough to feel comfortable selling.
:::
### To Start Coding & Grow Beyond
Last things first!
When you think of technology, is there anything that comes to mind that you want to exist?
Anything at all, that you might want to make? (We're thinking web / mobile apps.)
If there is something, what is it?
You want to have a semi-solid project in mind ... a direction with a goal; that can change.
Though in the interest of learning, especially technology, repetition will be key; so in effect, you just need to have one project that you can walk through to completion.
This will serve as your first foundation for asking questions and building the answers.
> * * *
A huge part of learning is your own internal drive; and we need to make sure that before we begin we have a nice shiney light at the end of our educational tunnel.
When we reach it, you’re going to have the tools to continue your tech journey beyond the light; wherever it may take you!
And whatever you had thought of, by the end of this course, you'll have the knowledge and tools to bring you idea into reality.
Vamos pues!

175
docs/rebel_coding/orientation.md Normal file
View File

@@ -0,0 +1,175 @@
# What to expect
-----------------------------------
A direct guide to the basics of web-development and coding; but you already knew that.
Though we’ll go quickly, providing a foundation upon which you are expected to explore.
First by building your own website using HTML, CSS, soon adding JavaScript to make your website responsive; lastly by web building scrapers using Pyton.
After this you will be introduced to examples of web servers and web clients; along with templates to build your own.
You are encouraged to use these as models and building blocks for your own ideas. Though this will conclude the Rebel Coding material.
:::tip QN: the purpose of first building an HTML, CSS & JavaScript website is not for this to be your end portfolio site. Rather, it is meant as a first step toward understanding how web sites, web applications, and the internet, work.
:::
:::warning QN: About cheating.
Copying parts of code, then implementing them in your project is an unspoken path to learning to code. Copy the code, try to apply it, see how it breaks, and then fix your own implementation.
What we want to avoid is what is known as kitty-scripting; which is copying entire chunks of code, or entire applications, with no idea how the code works, changing a few parameters and then unleashing. Beyond lacking integrity, it does nothing for one’s learning.
:::
# Course Objectives
-----------------------------------------
* **An introduction to the Linux command-line environment**
* **Building websites with HTML, CSS & JavaScript**
* **Using Python to build web scrapers**
* **Comprehending the complete web-app stack**
We walk you through every one of these objectives.
Then you need to be able to put things together.
_What if web-development isn’t your passion?!?_ Yet something tech related is ..?
We just want you to get your foundations grounded.
There is a final project, which can be on anything you wish. Through the community, or coaching, we gladly help you get closer to your tech goals; even if that just means beinga ble to better define what those goals might be.
The demonstration of aptitude is all one needs to get into the tech market; we want to give you tools to find your start in a niche, and enable you to grow beyond!
# How does this work?
--------------------------------------------
Outlined below are four primary steps that will be taken to attain a basic foundation of web development knowledge.
Each step is built on the steps before it; while from the first step you begin coding your personal website!
**Step 1:** HTML & CSS
**Step 2:** JavaScript
**Step 3:** Python / Scrapers
**Step 4:** The Full-Stack
~~ By the end of our first four steps, you have all the knowledge and practice needed to begin learning _the full-stack_. And from here we will dive deeper into the specifics using the Activist Project as an example.~~
~~**Step 5:** Django Servers~~
~~**Step 5:** Vue (or React?) Clients~~
~~**Step 7:** The Job Market~~
~~**Step 8:** Complete Full-Stack Overview~~
~~After completing the eighth step you will have a complete foundation of web-development and the knowledge necessary to continue your coding journey wherever you might wish it to take you!~~
# Personal Project
---------------------------------------
Your personal project is meant to demonstrate your ingenuity, passion and interests. It doesn’t have to be a full-stack application either!
Though you need some mechanism, beyond your resume, to show aspects of your interests and capacity; as resumes are getting tiresome. Yes, they still have their use, though personal projects and network matter almost more.
While it's your personal projects, and social discussions that get someone to read your resume in the first place 😉
The best part is, as was said, you don’t need to build a full-stack application if you don’t want to!
We just want you to identify an area of interest, begin exploring it, and provide some insight for others.
Do some research, and prepare a summation of what you’re learning; make it into a series of blog posts? Or maybe you want to learn about machine learning? Or Security?
Rebel Coding has the tools and community to get you started on either of those tracks; and we’re happy to do so.
This book is about getting started; and even for those interested in Security, knowing how the full-stack operates, and being familiar with Linux command line will put you leaps and bounds beyond your peers!
So let’s dig in!
# A Brief History of Computing
---------------------------------------------------------------
One of the best resources for learning about the history of computers, is the history of the Unix machine! Classy name, right?
Computers started by reading punchcards; though eventually a language was developed to make their processes more automated. That language was C, or the seed that would grow into the C language. The system it was designed to build and maintain was call Unix.
A gentleman named Bill Gates soon started developing another system using the BASIC language; and this is how Microsoft as we know it, began.
It is important to note that C and Unix were originally created through the funding of Bell South Atlantic Labs and various US Universities researching computer engineering. Through a few coincidences, and convenient mishaps, C & Unix were made *open-source*; anyone could read the source code!
Early on, Microsoft differentiated itself from this trend, opting to be built on proprietary, or closed-source, code. And now open-source software is a growing norm, with open-source software available for most any application one might like to pursue. While the use of computers so common that a new problem has arisen.
What if one computer isn’t enough?
Enter Kubernetes, and distributed systems!
But this is a conversation for another book.
# Low vs High Level Languages
-------------------------------------------------------------
High versus low level languages refers to the proximity to the assembly code.
What is the assembly code; it's the layer right above the 1’s & 0’s … the machine’s language.
We focus on some pretty high-level languages, Python (and bash, if you count it) are the lowest we will go in this book.
Though Harvard’s EdX course introduces one to C as well, for those interested.
A primary difference between languages levels is their operational efficiency.
Because the C language is closer to the assembly code, greater precision of action can be defined; creating more resource efficient processes.
For a higher-level language such as Python, many of the processes “under-the-hood” are already defined and can’t be easily adjusted. Interestingly enough, there are some efforts to improve this, see package Cython.
# Registering a GitHub Account
---------------------------------------------------------------
While there are concerns with Github's contracts with ICE, it remains the largest network of open-source projects and developers; hence it is utilized by the Rebel Coding curriculum. Albeit for a very specific reason, Github allows users to also host a website using their service, which is located at https://username.github.io.
Though first we need to sign-up for a Github account ...
![alt_text](/assets/img/github.sign-in.42221568.png)
In the following section, I'll walk you through the sign-in process, and we'll make your first repository; all this is necessary prep for getting your own website built and hosted using Github.
After choosing your username, submitting your email address and password, you'll be asked to verify that you are a real person.
![alt_text](/assets/img/github.captcha.9b563c85.png)
Next up is a survey that you _do not_ need to complete, if you don't want to.
![alt_text](/assets/img/github.survey.fc3f8197.png)
And finally you'll be asked to verify the email addres that you provided.
![alt_text](/assets/img/github.verify.d4a84b3a.png)
Now we start getting to the good stuff, let's create your first repository.
![alt_text](/assets/img/github.create-repo.d5651907.png)
The trick of this process is three-step. First we need to use a very specific name for this repository by repeating the Github username, followed by '.github.io'; don't forget the dots!
Next we need to make sure **not** to _initialize this repository with a README_.
And lastly, make sure that the repository is _Public_.
![alt_text](/assets/img/github.repo-details.0410823c.png)
Now that we have created our repository we have one final step, and that is to take note of the code we will use to connect our newly minted repository with code will later obtain.
Since we will be importing our code from elsewhere we will want to make note of the following `git remote add origin` command.
I suggest just leaving this tab open while you complete [Intro to CLI](/rebel_coding/termintro.html)
If you choose to either close the tab, or navigate elsewhere, this information will remain available to you when you return to view the repository.
For those seeking access to Rebel Labs, please send us your Github username so we can complete you account set-up.
![alt_text](/assets/img/github.push-repo.7cffe2e2.png)

294
docs/rebel_coding/step1.md Normal file
View File

@@ -0,0 +1,294 @@
# HTML & CSS
---
HTML & CSS are the basic building blocks for most web-pages, and dare I say mobile applications. In the following example we compare building a webpage to building a house or similar structure.
HTML code determines the structural look of a web page. This is the layout, walls, stairs, and open spaces for doors, windows, outlets, and the like. CSS is the paint colors, motifs and patterns that will decorate our structure, while also able to influence structural aspects (think mobile designs).
HTML also introduces us to our first basic pattern in coding.
`<html><head></head><body></body></html>`
HTML uses _tags_, enclosed by arrows (<>), to contain information. Notice how each tag has an explicit beginning and an explicit end. We gotta make sure we finish what we start!
Below is a code example containing, _nearly_, the least amount of code needed to display a webpage using HTML.
```
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>Welcome to Rebel Coding</h1>
</body>
</html>
```
That's it! It’s our little dollhouse of a webpage!
Granted ... all the webpage has, is a headline that says "Welcome to Rebel Coding".
[#](#html-page-structure) HTML Page Structure
---------------------------------------------
So what’s going on with these first HTML tags?
`<html><head></head><body></body></html>`
**HTML:** Declarative containers to announce what language we're using; you might also you see a DOCHTML tag.
**Head:** Unseen information, pulling in files.
Later on we’ll be getting our own set of files to start with; and in the `<head>` tag you’ll see a bunch of `<link>` tags that have links to other files. This is like the brain gathering all the information the `<body>` below will need to carry out its prescribed operations.
**Body:** Where all the visible action happens!
[#](#nested-properties-attributes) Nested Properties / Attributes
-----------------------------------------------------------------
**Basic coding concept #2:** nested properties, attributes and objects.
Let’s introduce the `<h1>` tags with this topic.
```
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
```
But what if I want Header 1 to be the color green??
`<h1 style=”color: green;”>Header 1</h1>`
Important to notice how deeply nested structures can become.
Here we have a property `color` within a property `style` within a tag `h1`!!
And this is just the beginning of the idea; how objects can contain other objects, be they variables, functions or entirely other objects themselves ~ in JavaScript everything is an object though ~~ eeks, more later!
[#](#basic-html-tags) Basic HTML Tags
-------------------------------------
As we’ve just noted, HTML tags have a beginning and an end:
```
<title>Home: Rebel Coding</title>
```
This title tag is an excellent example; it defines the title of our webpage.
HTML tags also have properties, or attributes, of their own.
Another common HTML tag is the `<a>` tag, or anchor tag.
The HTML tag is what connects the web, using its _property_ ‘href’.
```
<a href=”http://www.duckduckgo.com”>DuckDuckGo</a>
```
And tags can have more than one attribute, or property; an important one is the class property:
```
<table class=”table”></table>
```
As we’ll see later, classes (and id’s) can be used to modify a group of components in our webpage/application.
Lists are just good to go over; both ordered, and unordered lists; can you tell the difference?
```
<ul><li></li></ul>
<ol><li></li></ol>
```
These HTML tags don’t seem to end, or do they?
```
<img/>
<br/>
```
That’s because the ending is embedded at the tailing slash :0)
Some tags have no information to include between a start and end point, such as images or line breaks. And so, the exception is mended by placing an end slash as such.
Remember our `<link/>` tags within the `<head>` tag? Same thing; no info needed to be included between the tags; all of the info is gathered through the tag’s properties.
[#](#css-cascading-style-sheets) CSS - Cascading Style Sheets
-------------------------------------------------------------
**Cascading Style Scripts** are _scripts that style our code_; we'll explain the cascading part in a moment.
If I want to change the color of an item, I would use CSS; utilizing the style attribute of the header HTML tag. We saw this earlier.
```
<h1 style=”color: #FE23DD;”>Rebel Coding</h1>
```
There are many different ways to use CSS, and like JavaScript, the number of CSS libraries seems to always be growing.
Regardless, the basics are as follows:
### [#](#inline) Inline
Here we add the styling code directly within the tag to which it is to be applied; as shown above.
We add a _style_ property to the tag we’re modifying, and then include our preferred augmentation. We are changing the color, and size of our `<h1>` text.
```
<html>
<head>
<title>Home</title>
</head>
<body>
<h1 style="color: #42FD23; font-size: 5em;">Welcome to SF</h1>
</body>
</html>
```
### [#](#embedded) Embedded
As we alluded to earlier, what makes CSS so useful is how we can use it to make adjustments to a whole groups of tags!
Instead of including a _style_ property on the `<h1>` tag, we use the `<style>` tag up in the header! Now we are able to list the tags we want to affect, and define our preferences.
```
<html>
<head>
<title>Home</title>
<style>
h1 {
color: #42FD23;
}
</style>
</head>
<body>
<h1>Welcome to Rebel Coding</h1>
</body>
</html>
```
### [#](#embedded-class) Embedded + Class
What if you don't want to affect every `<h1>` tag?
We use classes! Classes are heavily used in CSS and styling libraries.
Notice how the _class_ attribute, in an HTML tag, allows for more than one parameter, separated by a space. Notice that the class attribute can contain more than one class.
```
<html>
<head>
<title>Home</title>
<style>
h1 {
color: #42FD23;
}
.headline {
text-decoration: underline;
}
</style>
</head>
<body>
<h1 class="headline other-class">Welcome to SF</h1>
</body>
</html>
```
Within our `style` tag, we use the `.` notation to indicate that an item is a class; `#` is used to denote ids.
### [#](#imported) Imported
Lastly we must realize that for an entire application there will be a whole heap of CSS code. And having it all in the same file as the base index file would be ridiculous!
So, we are going to write a completely separate file, and _import_ it into our index file.
We do this using a `<link>` tag, that contains two properties, _rel_ and _href_. _rel_ defines the relationship of the file being consumed; and _href_ provides the address at which the file can be found, _hyperlink-reference_.
```
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<h1>Welcome to Rebel Coding</h1>
</body>
</html>
```
### [#](#so-what-does-cascading-styles-sheets-mean) So what does Cascading Styles Sheets Mean ?
**Cascading** refers to how instructions are interpreted.
What if the _style.css_ scripts says `<h1>` tags should all be green, but a style property on the page specifies that this specific `<h1>` tag should be blue?? Which will take precedence?
And what if a style attribute is on a specific `<h1>` tag, saying it should be yellow?
_Most of the time_ the page, or component, specific parameter/property/attribute will take precedence in styling the tag. And this is attributed to the cascading nature of style scripts 😃
1. Inline CSS modifications
2. Mods in the `<head>` tag
3. Imported Scripts in descending order (last to load take precedence.)
[#](#wireframing) WireFraming
-----------------------------
Now you need to start designing your website!! And the first step is to draw a picture.
Yup, you heard me -- bust out the crayon and markers, we gotta draw!
That’s what wireframing is -- drawing a rough outline of how you want your webpage to look -- deciding where you want certain sections to appear; heck deciding what sections you want to have in the first place!
How do you want your menu to operate?
Are you wanting to make a single, or multi-, page site?
These are the questions wireframing helps us to answer; and when we’re ready, we simply transcribe our drawings into an HTML/CSS structure.
[#](#your-website-build-out) Your Website Build-Out
---------------------------------------------------
You’ve got a few options to start with - you can start with a blank page or use one of the templates provided!
### [#](#basic) Basic
Displays paragraphs, links, lists and tables.
### [#](#basic-2) Basic +
Implements JavaScript
<!-- ### [#](#parallax) Parallax
Fancy pantalones, with sprinkles! -->
[#](#templating-with-bootstrap) Templating with Bootstrap
---------------------------------------------------------
One of the first CSS libraries was called Bootstrap which uses a grid system to create mobile-friendly web pages.
Let’s dig into how it does that.
After pulling in our necessary libraries, Bootstrap uses a collection of classes to define various parameters. The grid-specific classes are best paired with `<div>` & `<span>` tags; while it being important to note, tags can have multiple classes.
<div class=”col-lg-6 col-md-8 col-sm-12 col-xs-12”></div>
Bootstrap operates off of a 12 block grid system with four adjustable display size categories: large, medium, small, extra-small.
In the previous line of code we said that we wanted the contents of that `<div>` tag to occupy six blocks on a large screen, eight blocks on a medium-sized screen, and 12 blocks, or the entire page, on smaller screens.
[#](#css-more-in-depth-sass-less) CSS More In-Depth (SASS/LESS)
---------------------------------------------------------------
What is this all about? CSS Preprocessor language that is compiled into CSS.
Variables, mixins, etc --
[https://en.wikipedia.org/wiki/Sass\_(stylesheet\_language)](https://en.wikipedia.org/wiki/Sass*(stylesheet_language))
[https://en.wikipedia.org/wiki/Less\_(stylesheet\_language)](https://en.wikipedia.org/wiki/Less*(stylesheet_language))
# Looking Ahead to Mobile
-----------------------------------------------------
Back to the grid structure --- what are apps?
**Using an inspector.** If you’re using Firefox or Chrome, right click on any browser window and choose the Inspect Element option.
In the upper bar of the new window that appears will be an option to toggle between full-screen and alternate view.
You can do this to see how the mobile friendly design you created using Bootstrap, will appear on various-sized screens.

291
docs/rebel_coding/step2.md Normal file
View File

@@ -0,0 +1,291 @@
# Introducing JavaScript
---
If HTML is the framing of our building, and CSS provides the aesthetic; JavaScript is the plumbing and electrical ~ the gadgetry!
JavaScript is HUGE ~ there is no way that we could even give you a preview of everything. Instead we cover the basic uses for building preliminary interactivity, and the basics of consuming APIs.
So now let’s get into the muck and mire of coding, and start by learning some of the basic tools in our cache!
[#](#variables) Variables
-------------------------
Variables are the building blocks of code. They help us store information, and allow us to retain information changes while interacting with other variables and code chunks.
You can see variations of the following _objects_ in almost all of the computer languages you ever investigate.
So let’s begin!
### Integers & Floats
Integers are whole numbers, and they can be positive or negative.
Floats, on the other hand, are numbers that contain decimals, i.e. `12.4241.`
We’ll see a bit later how this distinction is used, though it is an important delineation of which to be aware!
### Strings
Strings are _a collection of alphanumeric characters and symbols enclosed by quotations_, single or double, it doesn’t matter which.
```
var item = 'some string';
let item3 = 'some other string';
const newItem = 'new string';
```
The first two lines, using _var_ and _let_, have the same meaning. Each set a variable that can later be changed, or is _mutable_.
Opposingly, _const_ sets a variable that _can not_ be changed, or is _immutable_.
### Boolean
Boolean values are _true/false_ values.
Translated into machine code, values are either a 0 or 1.
`var target = true;`
**or**
`var target = 1;`
Notice that in JavaScript the true or false values are spelled with a lower-case first-letter; this too is specific to JavaScript.
In Python the True & False need to be capitalized to be treated as boolean variables.
### Lists
Lists are a collection of objects separated by commas and enclosed by square brackets \[\].
```
let newList = ['some', 'list', 'of', 'strings', ['with another list', 'within', 235], true,];
```
The objects do not all need to be of the same type.
##### List Indexes
At times, one may wish to obtain an object by its position in a list, or an operation of similar effect.
This would mean, to obtain objects by their list index number.
In both JavaScript and Python, lists begin at 0.
In our example newList from above, if I wanted to get the first object in the list I would use the following code:
`let specificItem = newList[0]`
**If we wanted the third object**
`let item3 = newList[2]`
Why is that?
Notice that we are not using quotations around this number, and that it is placed with square-brackets.
How would you get the second item of the list within our example list?
### Dictionary
Dictionaries are a collection of _key-value pairs enclosed by curly brackets_.
```
var target = {'text': 'some string', 'published': false, 'colors': ['red', 'blue',],};
```
Breaking this code down, the _key_ is defined by a string, and separated from the _value_ by a colon.
Each _key/value pair_ is then separated by a comma.
This is all enclosed within _curly brackets_ {}.
Notice again how the value can be any type of variable.
[#](#the-moving-parts) The Moving Parts
---------------------------------------
### If-Else Statement
```
if (x < y) {
var display = "Welcome to Rebel Coding 101";
} else if (x < z) {
var display = "Welcome to Rebel Coding 102";
} else {
var display = "We haven't planned this far ahead yet :/"
}
```
Read it out-loud:
If _x is less than y_, the variable _display_ equals a certain string.
_Else, if x_ is not less than _y and is less than z_, _display_ equals a different string.
If _x is larger than them all, using the else_ statement, _display_ is set to equal a third string.
### For-Loop
```
for (var i = 0; i < 9; i++) {
console.log(i);
// more statements
}
```
Read it out:
For _variable i_ that equals zero, when _i is less than 9, i_++. _console.log(i);_ ?
console.log() prints out whatever is contained in the parentheses.
In JavaScript the shortened version to increment a value by 1 is _++_.
It’s different in Python (+=1).
Search for other variations; also what sequence of numbers does this for-loop print do you think?
### Functions
Functions are where it all comes together, in a sense.
First we define an object that consumes other objects, and uses them to create an output.
```
var blump = function(prop1, prop2){
var a = prop1
var b = prop2
var c = a/b
return c
};
blump(5, 3)
```
So let's read this out-loud:
Variable _blump_ is a function that consumes/uses two objects, _prop1_ and _prop2_.
Within our function these two objects are made into variables _a and b_, which are then used to create a third variable _c_.
This last variable _c_ is then returned by our function.
> QN: Mathematical operators Review
Remember when we made the distinction between integers and floats ?
Here is where it comes into play; arithmetic operations are not notated as you may have learned them in school.
Sure addition still uses the “+” sign.
Subtraction still uses the “-” sign, and division still uses the “/” sign.
But multiplication uses an asterisk “\*”.
While exponentiation uses the double-asterisk “\*\*”.
We also have another operator we can use to find the remainders of division.
This is called the modulus operator, “%”.
Pretty nifty, eh.
# jQuery & the DOM
-------------------------------------
We have seen with CSS that we can modify the aesthetics of our webpages. Be this by adding colors, changing font sizes, and other modifications. But what if you could "automate that"? How would you do such a thing?
First things first, we need to import a few libraries:
```
<script src="bootstrap.min.js"></script>
<script src="jquery.min.js"></script>
```
Then, we need to _hook into_ the HTML structure, or the DOM, Document Object Model.
We do this using the dollar-sign notation, which is specific to jQuery, that allows us to reach into the HTML code and make changes!
```
<script>
$(".jobLabel a").on("click", function(){
var target = $(this).attr("rel");
$("#"+target).show().siblings("div").hide();
});
</script>
```
While this may appear to be a complex-looking function, let's disassemble it and see what's going on:
### The $
The dollar-sign allows us to access the DOM.
Once inside the DOM, we can identify specific elements and change them!
Parenthesis contain things (_duh_), and contained in these first parenthesis are set of items separated by a space, _.jobLabel_ and _a_.
We recognize the syntax of _.jobLabel_ from CSS, and determine that it indicates a class, while the _a_ is an html tag!
So now we have identified a specific set of objects on the webpage/DOM with which to work!
`$('.jobLabel a')` which means all of the _a_ tags with the class 'jobLabel'.
### Interactivity
Now that we have the objects discerned, what do we do with them?!
There is a period after our parenthetical statement, followed by the word _on_, and another set of parentheses.
This is called "chaining" operations.
We have an action, or set of actions: .on('click',function(){});
To translate, what we have so far $('.jobLabel a').on('click', function(){});:
For all _a_ tags with the class "jobLabel" ... when the element is clicked perform the following function.
### Acting
```
var target = $(this).attr("rel");
$("#"+target).show().siblings("div").hide();
```
Within this function we declare and define a variable called _target_.
Next, we set this variable using our dollar-sign, while specifying a specific property attribute, _rel_.
This attribute value is then used to identify a third object.
Finally, we have our action.
To _show_ our selected item, while _hiding_ all of its _siblings_.
Within the function we are able to affect,and change, the DOM.
```
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
```
Notice how each line ends with a semicolon.
And how each parenthetical statement, or bracketed statement, is closed.
Lastly, I want us to notice the use of show() and hide().
While other parentheses have items within them, these parentheses are left empty ...
In this instance the parenthesis are identifying a function that is to be performed, and requires no parameters
# Importing External Scripts & CDN’s
-------------------------------------------------------------------------
Earlier we just pulled in Bootstrap and jQuery from our local folders … this was easy.
Though most of the time we will need to, or want to, pull scripts from external sources, one type of which are called CDN’s, or content delivery networks.
These are locations that contain our necessary files pre-packaged and ready to be expedited, super-quickly, to our production websites.
[jQuery CDN](https://code.jquery.com/)
[Bootstrap CDN](https://www.bootstrapcdn.com/)

239
docs/rebel_coding/step3.md Normal file
View File

@@ -0,0 +1,239 @@
# Python
---
What if you could automate processes in your building … but not just simple processes - intensive analysis and creation ?
Enter Python!
Python has access to systems level functionality allowing it to interact with the hardware in a larger variety of ways!
And though this is a bit more of a detailed tutorial, compared to what we've already done; we'll still stay in the shallow end of the pool for writing our first scraper.
There are few tools that one can use to bypass the method outlined belows; Beautiful Soup is one such tool. Though we're gonna opt for directly using the toolset around which Beautiful Soup is built.
> QN: A quick note about Package Managers
Package managers ... manage the packages, libraries and software our systems use.
If you are using Ubuntu, you will likely be using a package manager called `apt`, Mac users may be using one called `homebrew`, while Windows users can use one called `chocolatey`.
Individual languages can also have their own package managers.
NodeJS has `npm`, Ruby uses a tool called RubyGems, and Python uses `pip`.
Depending on your chose operating system, you will need to learn how to use your operating systems package manager, and subsequently acquire `pip` for Python.
For those wanting to dive in head first, you can check out the official `pip` documentation: https://pip.pypa.io/en/stable/installing/.
Make sure to read the warnings.
Alright, let's dig in!!!
#Your First Python Scraper
---------------------------------------------------------
### Prep Virtual Environment
Now that we've got `pip`, we want to the ability to make Python _virtual environments_.
The reason we want to use a _virtual environment_ is to keep our systems _clean_.
We will be downloading quite a few Python packages that may not be necessary afterwards; or that may interfere with packages we want to use later.
In short, uing virtual environments allows such keep the packages utilized for each project we pursue compartmentalized.
The command to run is `pip install virtualenv`; bells will ring, whistles will be blown, and when it's all done; you'll have Python Virtual Environments accessible on your computer!
### Start VEnv & Install LXML
Next week need to create a virtual environment.
In order to spin-up our virtual environment we run the following command:
```
virtualenv pickYourOwnName
```
More bells and whistles will sound, and when it's all down we'll have a new folder into which we will `cd`.
There are three folders that are created within our new folder; though for the sake of introductions and brevity, I will only highlight the following two:
`bin` - this is where the commands for our virtual environment reside. `lib` - here is where all of our environments packages will reside.
In order to activate our virtual environment, from within our newly created folder run the command `source bin/activate`.
And next we will acquire the base packages we need to begin scraping:
```
pip install requests
pip install lxml
```
Error: If you get an error when trying to install LXML, that is totally natural and reasonable. Sometimes, some may say, that's the benefit of using a tool such as Beautiful Soup, it manages many dependencies, so that new users don't have to.
Though in truth, the effort required to supply LXML's dependencies are relatively minimal.
The package depends on a series of `c` files; for Mac users, admittedly, this may require acquiring and updating XCode to include their Command Line Tools package.
For Windows users may have their own issues, regarding Visual C++ components; notice that LXML is dependent on C-language packages.
If you run into any issues, this is your chance to check out what solutions others have found using your favorite search engine.
And if still unable to resolve the errors you receive, please reach out to canin@dreamfreely.org!
### Create New Python File
Phew! We got through that entire process.
Congratuluation!!!
You've done some great work so far; we're navigating the command-line to build a custom toolset.
That is no small accomplishment!
Next up, we start building.
Open up Notepad, or your favorite text editor, and create new file; naming it however you like, though with the `.py` extention at the end.
### Import Libraries
Our process for building our scraper file is very similar to the steps we took when building our webpage.
First we need to gather our necessary tools.
On the first line of our file we will import our first package by typing the command `import requests`.
Yup, it is that easy; so next we will import the tools we need from LXML with the following command:
```
from lxml import html
```
Feels almost magically simple doesn't it ?
Lastly, lets grab one more toolset by adding the line
```
from pprint import pprint as ppr
```
This is a tool that will allow us to print our data in a more readable format.
So let's get to scraping!!
### Get Site (requests)
What website do you want to scrape?
Mind you, some websites load their data using JavaScript (many websites do, in fact.)
And these websites will require additional tools to scrape.
Nonetheless, the command to _scrape_ a website is as follows:
```
root = requests.get('https://www.linux.org')
```
Operations will happen in the background, and when all is said and done, we will have a variable called `root` which contains our webpage.
But it's a Python object, and there's a bunch of other info attached to the variable that we don't need right now ...
### Extract Code (lxml.html)
Huzzah, this is where we will use the `html` tool we brought in from `lxml` by running the following command:
```
base = html.fromstring(root.text)
```
What we are doing is using the `html` tool to transform the `text` of the website's code into elements we can parse using another LMXL tool set.
### Parse Code (xpath)
Enter XPATH!
> QN: Notice how HTML & LXML both have the same two letters at the end of them; they stand for _markup language_. And yes they are related.
XML stands for _Extensible Markup Language_; and XPATH is a tool we can use to traverse and parse code written in this language.
Our previous command `html.fromstring` transformed the text of our code into XML elements, with which we can use their `xpath` property to navigate and extract specific data.
A fun command to run is `base.xpath('.//*')` as this will show us all of the root elements of the code we transformed using `html.fromstring`; any of it look familiar?
Now let's dig a bit deeper.
In the example available in the [Rebel Coding startScraping repository](https://github.com/RebelCoding/startScraping/blob/master/startScraping.py) the example code runs the following command:
```
items = base.xpath('.//*[@class="rgMasterTable"]/tbody/tr')
```
What we are doing here is traversing our `base` element to find _any_ object with the `class` of `rgMasterTable`.
Within that element we want to dig a bit further to our `tbody` element, and finally, we want to grab _all_ of the table rows contained!
We put all of these rows into our variable called `items`; and now we have a list of row elements we can cycle through to extract more specific data.
### Organize & Display Code
In our example script from RebelCoding/startScraping we use the following code to process our newly acquired items:
```
for i in items[:5]:
d = {}
title = i.xpath('.//td[1]/*/a/font/text()')
d['title'] = title[0].strip()
d['link'] = i.xpath('.//td[1]/*/a/@href')[0]
ppr(d)
```
We use a _for-loop_ to run through the first 5 items in our list of items; and the first thing we do is create an empty dictionary in which to store our desired information.
We do this so that we can more easily access this information later.
Next, we use XPATH to specify the information we're after.
XPATH returns a list of elements by default; and if there are not items, it will return an empty list.
If there is one item, it will return a list with one item; and so in our next line, we extract that singular item and apply the `strip()` method to remove any excess empty space on either side of our news acquired `title`.
On the next line we shorten this process a bit, by simply adding the index position `[0]` to the end of our `xpath` command.
Lastly we use the Python tool _pretty print_ to display our newly acquired data.
In order to run our code, we navigate to our file's location; hopefully you've saved it in our Virtual Environment's folder for ease of use.
And with our virtual environment activated we will run the command `python myFirstScrape.py`.
Though using whatever name you save your file as; having remembered the `.py` extension at the end.
Y'all just wrote your first web scraper!!!
Pour your a delicious glass of your favorite beverage or commence any other suitably celebrative action ~ cause y'all just did that!
# More About Python
-----------------------------------------
We've glossed over quite a bit just to get ourselves up and running.
The example script provided in the Rebel Coding startScraping repository goes a bit deeper; so definitely check that out.
Though now you know how to use the Python `requests` package to mechanically grab websites; and you know how to use LXML to read the code from those sites!
Now let's wrap up by learning about the _full stack_, by which many of these sites are built and run.
# Python Classes & JS Objects
-----------------------------------------------------------
# Python DateTime Structure
---------------------------------------------------------
```
for i in items[:5]:
d = {}
title = i.xpath('.//td[1]/*/a/font/text()')
d['title'] = title[0].strip()
d['link'] = i.xpath('.//td[1]/*/a/@href')[0]
date = i.xpath('.//td[2]/font/text()')
time = i.xpath('.//td[4]/font/span/font/text()')
time_complete = " ".join(date + time)
format_date = '%m/%d/%Y %I:%M %p'
d['real_date'] = datetime.strptime(time_complete, format_date)
ppr(d)
```
# Reading & Writing CSV/JSON
---------------------------------------------------------

407
docs/rebel_coding/step4.md Normal file
View File

@@ -0,0 +1,407 @@
# The Full Stack
---
Let’s take a moment to reflect on what the "full-stack" actually is.
How does it all connect?
**If the full-stack were a restaurant:**
The **database** is our walk-in’ cooler, and deep freeze; holding all the data that changes, or the food that will be used to prepare meals for our guests/visitors.
The **server** is the kitchen; using the contents of the cooler/freezer to fulfill our data requests, or orders, as made by the client …
And the **client** is more like the waitstaff; taking the orders, and fulfilling requests.
If you still have confusion, don’t hesitate to ask in the Discord server!
Though now let’s review each component further in-depth.
# The Database
-------------------------------
The _classic_ database is the SQL database; a relational-database.
What does relational database even mean?
Tables, with columns and rows; spreadsheets of data; which are enabled to connect between multiple tables/sheets through _joins_.
Say you’ve got a list of users, and a list of their posts, their likes, their pictures, their videos and their user history!
That would be a giant table!!!
I mean, because each of those items has their own properties; what’s worse, some of the items aren’t really related, or some of them might be related to items from other users !?!
It is much easier if we can have a separate table for each one of these item-sets; and for our users, have a unique and static ID by which we can connect them to other tables.
Welcome to the wondrous magic of SQL laid out before you, a child of royalty looking out across a vast and unknown wilderness that will one-day be yours.
Though there are more than just relational databases.
Now we also have NoSQL databases, which come in four primary flavors: document, graph, key-value, and wide-column.
We won’t get into all of these nuances right now; though we will introduce you to many of these topics in adjacent materials.
### DB Operations
The reasons for databases are not just to contain information but to perform CRUD.
**Create**, **Retrieve**, **Update**, & **Delete**.
Databases have these four primary functions to maintain data and allow for its _creation_, _retrieval_, _update_ and _deletion_.
This is often shortened to be called CRUD procedures.
Within the past two decades, the commercially available database technology has grown to include products called no-SQL products.
SQL stands for “Structured Query Language” and is the language used to create and maintain relational database management systems (RDBMS).
These are our dynamically linked rows and columns.
NoSQL arose for two reasons, to diversify the storage format for databases, and reduce the number of database calls necessary to retrieve dynamic information.
It would be easy for us to get lost describing these differences and nuances, so I leave further investigation to your own interest; save the information provided below to help you get started.
### Relational Database
Onwards to Relational Databases! The primary relational-databases you will run into are MySQL/MariaDB, PostgreSQL, and MSSQL; MariaDB being the open-source version of the Oracle product MySQL. While MSSQL is Microsoft’s own proprietary version of SQL.
Thankfully the foundations of SQL syntax are consistent across all SQL versions; in fact, it is the SQL language which unifies them.
```
SELECT id,name,email FROM user_table;
```
As alluded to earlier, each variation has their own nuances; Microsoft has it’s propriety features, as does MySQL; some of which MariaDB seeks to mimick or improve.
In this course, we will focus on PostgreSQL, or Postgres.
It remains at the top of it’s class, pushing the envelope of feature development; while maintaining a robust community and stable codebase.
As shown in our previous model; both the column and the table name are identified.
The theory is that you are in the correct database to begin with; though if you are not … ‘db name’, replacing ‘name’ with the name of your desired database.
##### SELECT
We’ve already seen this in action; this is a basic
##### Conditional SELECT WHERE
Using filters to find specific data
```
SELECT id,name,email FROM user_table WHERE email=”*edu”;
```
This command will return all of the requested data, but only for email addresses that end with “edu”.
This command is made more dynamic with the addition other commands such as AND, OR , DISTINCT, ORDER BY and more.
##### JOINs
We spoke about being able to connect tables; and we do this through JOINs.
```
SELECT Users.id, Posts.id, Posts.title, Posts.content
FROM Posts JOIN Users ON Users.id, Posts.user;
```
Can you see the logic? We need to identify the column that we are going to use for matching; and then ‘join on’ that match.
### NoSQL
MongoDB, others …
key-value store
document store
column-oriented database
graph database
# The Server
---------------------------
CMS Content Management System ~ A place to put digital stuff.
There are different computer languages, and thus different platforms built using these varied languages.
What does the server do?
Often times, the server serves an API (Application Programming Interface)
The basis of a CMS is the ability to create, maintain and modify digital assets; though this says very little about how they are displayed.
And it is on this point that many CMS’s vary.
For example, whereas WordPress provides a variety of themes Django provides next to nothing for initial user-facing displays; Node/ExpressJS, even less.
Though technically Node is more of a framework, as is Express; with which Client’s interact.
For the sake of education, let’s review some of the most popular CMS’s.
### PHP
#### Wordpress
WordPress is built using the PHP language, and is one of the most popular Content Management Systems on the web.
There is a massive variety of free, and paid, themes available; and even more plugins one can use to extend its functionality.
With regard to our server / API-layer, there are two primary categories utilized by Wordpress, posts and pages.
So in our database there are essentially four tables, or content types, beyond the User table:
Posts, Pages, Tags and Categories.
Mind you this is a highly simplified instance of a Wordpress site.
All the basics need to begin building a basic website for blogging; which is what makes WordPress so popular: its simplicity.
#### Drupal
Getting a bit more complicated, yet still built in PHP, we have Drupal.
Considered an Enterprise-level CMS, Drupal provides a level of customization that Wordpress does not.
Remember how Wordpress provided only two initial content-types: Post and Page?
Drupal expands upon these options enabling users to easily manage a blog, forum, and polls, if they choose.
These modules use generic "nodes" as a basis for pieces of content which are divided into "Content types".
In turn, these new content-types can have fields such as images, videos, polls, or other custom data types attached to each one.
In this fashion a website with many different types of content can be created, making Drupal a common choice for media companies and governments that require complex displays
It should be noted that while Wordpress refers to its add-ons as _plug-ins_, Drupal refers to these components as _modules_.
If you, the developer, choose to enable the blog, forum, book and poll modules in Drupal, these additional, pre-baked, content-types are made immediately available to you.
As well, Drupal is lauded for its robust security!
Though the price paid it, is its barrier to entry, Drupal is a beast; and requires an advanced awareness to develop and maintain.
### Python
Let’s start with why not Django - it’s a rather large framework from the outset.
You need to have a functional concept of the entire platform in order to work on it.
You need to know Python to work on it.
So why are we using Django?
Because it’s a large framework that will give us a concise overview of all of the working parts of a server.
And it gives us a chance to learn Python, one of the most versatile and in-demand coding languages in the world.
A better question could be why Python?
#### Django
Now we are transitioning to more formal server-based frameworks, that are less, content management systems, and more web-application frameworks.
Both Wordpress and Drupal come with predefined content-types.
Django, and Ruby on Rails, allow you to define your content types!
Django is built using the Python language, and is often appreciated for the built-in Administrative interface it provides.
This is how it blurs the line between a web-application interface and a more formal CMS.
Django also provides a templating mechanism, by which user interfaces can be built.
Able to interact with multiple database types, Django allows you fine-grain tuning for each and every database table, row and interaction.
If you need 15 different content-types, Django provides the tools to specify each aspect of them all.
Another, lighter framework, built using Python is called Flask.
#### Flask
### Ruby on Rails
Ruby on Rails, or Rails, is built using the Ruby language, and provides many of the same features as Django, f_or the sake of our introductory conversation_.
Wikipedia provides a most accurate description:
**Ruby on Rails**, or **Rails**, is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages.
Again, Rails focuses less on the aesthetics of the user interface, only providing the bare necessities required.
This being where the Client, of which we speak about soon, comes into play.
Though let’s take a moment to talk about this MVC framework that has been mentioned.
### NodeJS
NodeJS has gained popularity; due to JavaScripts ubiquity amidst client frameworks.
NodeJS give JavaScript developers access to server side operations previously inaccessible to the JavaScript language.
### Go
Is a new language, combining elements of lower level process with higher-level behavior.
# Model-View-Controller
-------------------------------------------------
MVC is a design pattern meant to simplify “program logic into three interconnected elements.” Thank you Wikipedia!
### Model
Remember all of those content-types we had mentioned earlier? The tables in our database?
We were given two in Wordpress, an additional four in Drupal, and using Django or Rails, we could make as many as we need!
These are considered our Models, or object-models, if you will.
Each table in our database houses a different object, which is loosely defined by the parameters determined by its model.
### View
Next, our models do us little good if they are just sitting in the database, and so we need a mechanism to define how they can be viewed.
And our Views provide this template.
The semantic magic is astounding I know.
### Controller
Though now does one get the information from the database to the View?
We know that servers operate in this role for our full-stack ecosystem, though what part of the server actually controls this process.
Eureka, our controllers!
When a View asks for blog posts, sometimes you only want the 10 most recent posts.
Or you only want posts with a certain tag.
Here is where Controllers are used to fulfill a Views request, and augment what is retrieved from the database per the Views specifications.
It should be noted that while the terminology used here was rather straightforward, Django, the framework with which we work with in Everything You Need to Know, subverts some of these words.
Some call Django a Model-View-Template framework, as the Views in Django act more like controllers, while templates provide the function we previously allocated to Views.
Mind you, I said that Views act _more like_, not _exactly like_, controllers.
Developers can be an opinionated group of folks, and this can be one-point of heated debate.
Though this is also too much minuta for our introductory purposes here, so let’s move on to the Client!
# The Client
---------------------------
The Client component of the full-stack ecosystem consumes an API, to populate an interactive user interface.
And this space is dominated by JavaScript!
JavaScript allows us to create SPA’s ~ single-page applications; but interacting without servers, while never needing to reload our web-page.
Remember how we used jQuery earlier to _show sibling divs_, while hiding all of the others?
That is just the beginning of what JavaScript enables us to do!
Using the technology of AJAX, asynchronous JavaScript and XML, we can make calls to our server, retrieve our data, and display it, all without having to reload our web page.
We can make adjustments to these calls, and even respond to user input to customize these calls.
Again, all without ever having to reload our web-page.
This is how websites like Netflix seem to operate so fluidly.
#### React vs Angular
There are two main competitors ReactJS vs AngularJS.
Besides one being the creation of Facebook, and the other a creation of Google; they have other distinct differences.
AngularJS is similar to Django, in that it provides everything needed right out of the gate! Routers, BAM! Modules, BAM! Components, BAM!
Everything and the kitchen sink, as they say ---
Conversely React is more minimal, providing the core of what is needed, and enabling you to add only what is necessary.
In Everything You Need to Know, we introduce you to a third framework, called Vue.
JavaScript is a vast and ever-expanding collection of technologies; and we’re only going to acquaint ourselves with the basics ~ all of which we’ve already covered.
Each framework has its own nuances to accomplish the basic task of retrieving information, either from our server, or from the user, and then adjusting what is displayed accordingly.
And there are numerous books, websites, videos and platforms dedicated to explaining, and debating, the nuances of each.
Now, hopefully, you have a solid foundation upon which to better comprehend what these folks are talking about!
#### Why Vue?
# So in conclusion ...
-------------------------------------------
We know that while websites are most often built using HTML, CSS and JavaScript, there is a ton more that is happening behind this layer to bring us the data and information with which we interact.
Databases are used to store information, and servers are used to define and modify the information.
It is this last layer of interaction that is governed by HTML, CSS and JavaScript.
Though that brings us to an interesting question … how exactly does the information get from the database/server/client stack to our browser?
Do you remember what we said earlier ?
## The Brief History of the Internet
Thank you to the [Internet Society](https://www.internetsociety.org/internet/history-internet/brief-history-internet/) for providing the more in-depth summation from which much of this information is gleaned.
Telephones and radios were cool, but they relied on circuits.
What if you could send _packets_ of information ?
Attempting to answer this question ARPANET, or Advanced Research Project Agency Network, was born; and in 1969 the first host computer was connected at the University of California Los Angeles.
A second _node_ was installed at the Stanford Research Institute, and soon other nodes we added as well.
In 1972 the technology now known as email, or electronic mail, was introduced and the internet as we know it today was well on it’s way out of infancy!
ARPANET was a closed system, mostly used by university researchers and their corporate counterparts.
It was a network small enough to be nearly “error-proof”; as in packets were rarely, if ever, dropped. Each node architected to specific, if not exact same, specifications as each other.
Thus Bob Kahn was inspired to create a protocol that would be more robust in an open-architecture environment, and so devised what would become known as the Transmission Control Protocol / Internet Protocol (TCP/IP).
What’s your IP number?
Have you ever searched the question?
It’s like your computer’s address on the internet.
Except this address can change depending on where from you are connecting.
<!-- ![alt_text](images/ipv6_header.png) -->
This is simplified picture of what an internet packet looks like.
We have a source address, and a destination address; your computer’s IP address being the destination address.
Servers are located on computers, attached to the internet, and have an IP address as well.
In-between sit a series of other computers that translate these numerical addresses into namespaces and URLs, uniform resource locators.
And so, when you visit a website, your computer sends out a request packet, that travels by a series of numerical addresses to a specified destination.
Once the destination address is found, hopefully the request is fulfilled; and the response returned to your computer.
Thus, you were able to download this book!
Thank you for your time and attention.
I hope this information has been helpful.
Remember, if you have any questions feel free to visit our Discord server, or contact me on the web.
You can find me as Culture Clap on most social platforms, or send me a piece of electronic mail at [canin@dreamfreely.org](mailto:canin@dreamfreely.org).
Happy packeteering fellow coder!
May your data be well based, and your clients always well-served.

135
docs/rebel_coding/step5.md Normal file
View File

@@ -0,0 +1,135 @@
# Servers and more
---
We introduced Databases in Step 4; now we're going to take the scrapers we've built, and add them to an in-production Django server application!
# MVC - Model View Control
-----------------------------------------------------
[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) is a way to divide the components of a full-stack website into smaller parts; more technically known as a _software design pattern_.
**Models** define the data that forms the software's content. Blog posts, images, etc; anything and everything that sits in a database is defined by the models.
**Views** control the presentation of software's content; when a web-page is visited, views determine how the content is presented.
**Controllers** do the heavy lifting between models and views, by retrieving the data and responsing to user input.
### How does Django differ?
The server system that we focus on in Rebel Coding is Django with puts a bit of a twist on the ol' MVC model; namely by switching out Views for Templates and referring to Controllers and Views ...
If it sounds confusing, you won't be the first to be befuddled; and it is easily comprehended once you start working with the toolset.
As a matter of fact, we don't even bother with the Template part in the remainder of this course, as we pass that task off to a JavaScript client instead.
# Why Django?
----------------------------
Because Django pre-packages as administrative interface, pure, plain and simple.
### Models.py
class Post(models.Model):
title = models.CharField(max_length=255)
pub_date = models.DateTimeField(auto_now_add=False)
content = models.TextField()
slug = models.SlugField(unique=True, max_length=255)
published = models.BooleanField(default=False)
# category = models.ForeignKey(Category, blank=True, null=True, on_delete="PROTECT")
# tags = models.ManyToManyField(Tag, blank=True)
class Meta:
ordering = ['-pub_date']
def __unicode__(self):
return u'%s' % self.title
def __str__(self):
return u'%s' % self.title
### Views.py
@permission_classes([])
@authentication_classes([])
class VideosAPIView(generics.ListAPIView):
serializer_class = VideoSerializer
def get_queryset(self):
queryset = Video.objects.all()
lang = self.request.query_params.get('q', None)
if lang == None:
# lang = 0
queryset = Video.objects.filter(published=True).all()
else:
queryset = Video.objects.filter(published=True, target_language=lang).all()
return queryset
### URLS.py
urlpatterns = [
url(r'^api/searchvids$', SearchVideosAPIView.as_view(), name="search-vids"),
url(r'^api/imenu$', SocialAPIView.as_view(), name="social"),
url(r'^api/iposts$', PostsAPIView.as_view(), name="posts"),
url(r'^api/ivids$', VideosAPIView.as_view(), name="videos"),
url(r'^api/ivid/[-@\w]+/$', VideoAPIView.as_view(), name="video"),
url(r'^api/iverse$', VerseAPIView.as_view(), name="verse"),
url(r'^api/ividask$', RequestAPIView.as_view(), name="videoask"),
url(r'^api/songsubmit$', UserAvatarUpload.as_view(), name="songsubmit"),
url(r'^api/getidiokers$', GetIdiokersAPIView.as_view(), name="idiokers"),
url(r'^api/getgenres$', GetGenreAPIView.as_view(), name="musicgenres"),
]
# APIS & the Django REST Framework
---------------------------------------------------------------------
As mentioned earlier, we aren't bothering with Django Templates, rather all of our data will be consumed by a JavaScript client created using the VueJS framework.
Our Django server's duty is to serve API endpoints, and we do this using the [Django REST Framework](https://www.django-rest-framework.org/) .
**REST** stands for [Representation State Transfer](https://en.wikipedia.org/wiki/Representational_state_transfer) ; and it is a style of software architecture to define how data is transferred between web services.
Other architectures include [SOAP](https://en.wikipedia.org/wiki/SOAP) and [GraphQL](https://en.wikipedia.org/wiki/GraphQL) .
### Serializers.py
RESTful frameworks operate by serializing, or conforming, data into a known structure and transferring this known structure between web services. And to do that we use what is called a serializer.
Just as our models define how the data is stored in our databases, serializers define the forme and shape of data that is transferred via API calls to our RESTful API endpoints.
class PostSerializer(serializers.ModelSerializer):
class Meta:
model = Post
fields = '__all__'
# fields = ('id', 'name',)
# Clone SF Project
---------------------------------------
git clone
git clone
# Writing your first web-scraper
-------------------------------------------------------------------
# Attach Scraper to ORM
-------------------------------------------------
Learn pupa etc …
pupa init NewCity
# Your First Pull Request
-----------------------------------------------------
Fork the project
# Exploring the SF Project
-------------------------------------------------------

37
docs/rebel_coding/step6.md Normal file
View File

@@ -0,0 +1,37 @@
# Clientside UI
---
### Overview - APIs & User Interaction
How APIs work, and why we use them.
### Why Vue?
Because it’s minimal while working with a VirtualDOM similar to ReactJS.
### Vue Template Page
Template. Script. Style. Any of it look familiar?
### Consuming the APIs
How does it happen
### Routing in Vue
We’ve got our Vue Template pages, now what?
### Vue Store
Just a sneak peak
### Module Templating
Let’s put some of this together …
What if we …
### Styling Frameworks / ElementUI
We can add some additional styling as well; by bringing in another library.

47
docs/rebel_coding/step7.md Normal file
View File

@@ -0,0 +1,47 @@
# Getting a Job ?
---
This week we focus on the Job Hunt, Networking, and building our best resumes for tech! Maybe ... might be changing this theme
### Overview - Where Are You Going?
Have a solid idea of what you’d like to do!
### Resume - What Do You Need?
You need to display aptitude and passion; while deciding her personal comfortability with proximity to whiteness.
### Cover Letter - What is it good for?
Introduce your self YOUR way!
### Building Your Portfolio
Back up what you’ve said!
### Interviews - What to prep for
Tech interviews are fading away.
### Your Project - Why you need one
Same reason you need a portfolio.
### YP: How's & Why's
Your project should be supported by your interests; so that your how’s and why’s can have _some_ connection to your career aspirations.
### Presenting Your Project
Organize a small group for whom you can present your project.
### LinkedIn, really?
It has it’s benefits.
### The Complete Picture
Social media (Twitter, Facebook, LinkedIn), in-person networking, your own personal webspace (build your own brand).
Be very cognizant of cultural tides and undertows.

58
docs/rebel_coding/step8.md Normal file
View File

@@ -0,0 +1,58 @@
# Mobile, Scaling and More
---
Last week ~ We're going to cover the history of computing all the way to current methods of deployment (k8s, Terraform, etc!)
### Overview
What are operating systems - Window Manager, Program manager, Package Manager - etc -- collects all of our necessary tools into one.
### Linux vs Mac vs Windows
We learned a bit about how it all started. What’s up with Windows?
Linux & Mac are nearly the same.
### Others OSes (BSD)
And what else and why?
### Nginx vs Apache
How do you actually serve the website?
### What About Caching?
Too many questions-- need to store some of it for quick responses, caching
### Containerization
Easy way to create multiple instances of the same
### Distributed Systems
Coordinate your containers
### Let's Talk About Firewalls
Intro to Security
### The Path of a Packet
What is an IP address?
### And We're Off!
Great Work!!!!
# So Now What?
------------------------------
How the trick is for you to build your own application!
Start with the basic Django tutorial!
Then add a serializer
Build a client to consumer the data ~

196
docs/rebel_coding/termintro.md Normal file
View File

@@ -0,0 +1,196 @@
# Intro to Terminal
-----------------------------------------
If you are using a Mac, use Spotlight to search for the Terminal program. Open it up and begin following along; all of these instructions will work the same for you. If you are using Windows, I’m sorry, but we won’t delve into the differences Powershell employs. Rather I recommend you purchase a one month subscription to Rebel Labs, where you can use the Linux terminal provided.
`whoami` & `pwd` are two of the first commands one ought learn. Type each command into the terminal and press Enter.
```
$ whoami
Username
$ pwd
/home/Username
```
The first command provides an obvious answer, and the second is obvious enough once you know that it stands for “print work directory”.
Though for a long time, I thought it meant “present working directory”, because that just seems so much more descriptive to me.
Nonetheless, we answer the question, “Where am I?”
In all likelihood, you should be in your “home/{username}” directory.
And if you’re in Rebel Labs (RL), that’s where you will start!
Next, let’s take a look around ~ by typing the command `ls` and pressing Enter.
The `ls` command lists the items in our _present working directory_.
Cool, if we are in the RL we should see a notebooks folder. But let’s back up one moment ~
I want to tell you about **command flags**.
We just used three commands, `whoami`, `pwd`, and `ls`. The last of which has some other capabilities that can be accessed using command properties, indicated by _flags_.
Instead of just typing `ls` into the terminal, type `ls -l` and press Enter!
Huzzah ~ more details.
What do they all mean?!? We’re not going to cover that now, peep the appendix.
We’re gonna keep movin’ along. The important thing to note is that this is how command flags work, they need at least one-dash, sometimes two, to precede them.
Next command: `cd`
If you just typed that in and pressed Enter, nothing will happen.
We need to add a destination, as `cd` stands for _change directory_ … type `cd notebooks` and press Enter.
Let’s use `ls` or `ls -l` again, to take a look at what we got …
If you’re in the RL, then you ought to see nothing. And if you’re following along on your own computer … from your home directory lets first use the `mkdir` to make a new directory called RCNotebooks, or whatever name you like.
`mkdir RCNotebooks` and press Enter.
Just like `cd` we needed to provide a name for the directory to be made.
Then we can `cd` into RCNotebooks as shown above, and onward we continue.
![alt text](/assets/img/image_0.7969aea8.png)
# SSH & Hidden Folders
---------------------------------------------
I made a funny, we need to reverse … which is a great chance to learn how we do this in the command line??
Though first off, let’s make a mental model.
I like to consider the file system like chutes and ladders; up and down.
We often start right in the middle. in our home directory /home/user. And everything we initially access is _down_ the file system from this location: /home/user/notebooks. /home/user/Desktop, /home/user/Downloads, etc.
Reversing directions would mean to travel back _up_ the file stack. We use double-dots to do this, as follows:
`cd ..` and press Enter.
Don’t forget _both dots_!
And we should now be back in our home directory, if we use the command `ls` we should see our Notebooks directory; or use the `pwd` command to confirm your location.
Now we make an SSH key, but what does that even mean?
![alt text](/assets/img/image_1.9cd6feb9.png)
**SSH - Secure Shell**
Right now we’re using the terminal, or command line interface, and your account is considered a _shell_ account; while you have _shell_ access. Shell being another word for the _terminal_.
Presumably your account is protected by a password; and it’s a really good one, or it isn’t; that’s not immediately the point.
The point is that every single time you want to get or send project files to a repository; you don’t want to have to retype a password. Plus now you will actually have a super super-secure password!
# How to make an SSH key
---------------------------------------------------
Last things first, we will be making an ssh key _pair_; one file will remain on your computer, and another file will have a ‘.pub’ extension, to be shared.
The security comes through the “handshake” these two files make when connecting between two systems.
We’ve got our terminal open, and we’re in our home directory. Make sure to double check that!
First command: `ssh-keygen`
We will be asked where we want to save the file … look at the file address, what seems weird?
Take note, press Enter and continue.
Next we are asked if we want to attach a passphrase to our SSH key; I humbly suggest it is not necessary at this juncture of your development; and is precisely what we’re trying to avoid, having to type in password.
Leave it blank and press Enter. Then press Enter again to confirm.
Now you will be presented with ‘randomart’. I dunno ...
![alt text](/assets/img/image_2.55b290f6.png)
So where are our keys !?
Type in the command `ls -la` and press Enter.
See what I did there? I combined command flags!!!
What’s that folder with the dot in front of it?
That’s a _hidden_ folder, were we viewing this location with a GUI (Graphical User Interface) we might be able to _see_ the .ssh folder.
Yup, the single dot is what denotes a hidden folder … let’s cd into the hidden .ssh folder, `cd .ssh`; followed by `ls -l`. What do we see?
There ought to be at least two files, one called id\_rsa, and another called id\_rsa.pub. And it is this file that we will share with others who wish to grant us access to their systems.
You can type `cat id_rsa.pub` to view the files contents.
# Have you made a GitHub account yet?
----------------------------------------------------------------------------
In order to most seamlessly complete the next step, we need to make sure you have a GitHub account _with_ an SSH key set-up.
I’m going to presume you have figured out how to make an GitHub account, though the following screenshots show you how to register your newly created SSH key!
Once you’re in your GitHub account, click on your profile picture in the upper right-hand corner, and menu will drop down.
Choose the Settings option.
![alt_text](/assets/img/image_3.b7d4b2b3.png)
Now that we’re in the Settings menu, we have a set of Settings Categories available to us on the left side of the screen.
Choose the SSH and GPG keys Category.
![alt_text](/assets/img/image_4.66934a38.png)
Remember how we used the `cat id_rsa.pub` to view the contents of our public key earlier?
We did that so we can copy the contents, by highlighting the output, and using a right mouse click to open up an options menu, then choosing copy.
And we will paste that content right into the field, as shown below.
Make sure to give your key a memorable, and descriptive name as well.
![alt_text](/assets/img/image_5.d95766c8.png)
Now we’re ready to continue!
# Cloning the Basics
-------------------------------------------
Alright, now that we’ve got all of that taken care of; let’s get our starting materials.
Open up a browser and navigate to [https://www.github.com/rebelcoding/Classwork](https://www.github.com/rebelcoding/Classwork/) .
There is a green button near the upper-right corner of the display which reads “Clone or download’. Click this button; if you are signed in and have shared your SSH key with Github choose ‘Use SSH’, otherwise use HTTPS.
Copy the code that is provided for you, and return to the terminal; here we will change directories, back into our notebooks directory:
`cd notebooks`.
Now we will use a _git_ command:
git clone git@github.com:rebelcoding/Classwork.git
Last command, make sure to use your GitHub username:
cp -r Classwork/username.github.io {username}.github.io
Can you tell what you just did?
![alt_text](/assets/img/image_6.78b0caef.png)
# Additional Support
-------------------------------------------
The remainder of this book builds off of the material in this repository. If you are having ANY trouble, please reach out to canin@dreamfreely.org ~
The last command we ran copied template files for your HTML website. If you’re using GitHub.com you can publish your website to a github.io address that uses your username.
We'll cover this process after we've been introduced to HTML & CSS.

3
docs/rebel_coding/v2.md Normal file
View File

@@ -0,0 +1,3 @@
# Rebel Coding 102
_Coming Soon_

3
docs/rebel_coding/v2Orient.md Normal file
View File

@@ -0,0 +1,3 @@
# Rebel Coding 102
App Planning, because you're going to be making an app.