From da44c72e9698e172edf123bef91dd584e3c13c0d Mon Sep 17 00:00:00 2001 From: Emil Kovacev Date: Wed, 8 Feb 2023 17:03:41 -0500 Subject: [PATCH] Completed Base Modules for Week 1 * Completed git modules * Made slight modifications to css * Temporarily removed the licensing module * Added an intro-to-unix module --- app.py | 6 +- config.toml | 67 ++++++--- static/css/module.css | 31 +++-- static/css/skill-tree.css | 63 ++++----- templates/base.html | 4 +- templates/editors.html | 55 ++++++++ templates/git.html | 88 +++++++++++- templates/github.html | 126 +++++++++++++++++ templates/index.html | 79 +++-------- ...started.html => intro-to-open-source.html} | 2 +- templates/intro-to-unix.html | 131 ++++++++++++++++++ 11 files changed, 505 insertions(+), 147 deletions(-) create mode 100644 templates/editors.html create mode 100644 templates/github.html rename templates/{getting-started.html => intro-to-open-source.html} (94%) create mode 100644 templates/intro-to-unix.html diff --git a/app.py b/app.py index 87b5f00..04abe44 100644 --- a/app.py +++ b/app.py @@ -37,6 +37,7 @@ def get_unlocked(): @app.route("/") def hello_world(): + print(config) response = render_template("index.html", config=config, unlocked=get_unlocked()) return response @@ -51,7 +52,10 @@ def module_view(module_url): return f"Module \"{module_name}\" not unlocked" try: - response = make_response(render_template(f"{module_url}.html", complete=module_id in get_unlocked())) + response = make_response( + render_template(f"{module_url}.html", + complete=module_id in get_unlocked()) + ) except TemplateNotFound: response = make_response(f"Module \"{module_name}\" not yet implemented") diff --git a/config.toml b/config.toml index e4c32de..e652da9 100644 --- a/config.toml +++ b/config.toml @@ -1,11 +1,31 @@ -columns=3 +# List of rows, each row contains any number of modules +# Add a new row when you want to create a new overarching topic! -[[module]] +[[row]] id=0 name="Getting Started" -url="getting-started" + +[[row]] +id=1 +name="Software" + +[[row]] +id=2 +name="Version Control" + +[[row]] +id=3 +name="Licensing" + + +# List of modules + +[[module]] +id=0 +name="Intro to Open Source" +url="intro-to-open-source" icon="flag-fill" -column=0 +row=0 next=[7] [[module]] @@ -13,15 +33,15 @@ id=7 name="Installing Software" url="installing-software" icon="cloud-download-fill" -column=0 -next=[1] +row=0 +next=[8] [[module]] id=1 name="Version Control" url="version-control" icon="file-diff-fill" -column=1 +row=1 next=[2, 4] [[module]] @@ -29,7 +49,7 @@ id=2 name="Git" url="git" icon="git" -column=1 +row=1 next=[3] [[module]] @@ -37,26 +57,27 @@ id=3 name="GitHub" url="github" icon="github" -column=1 +row=1 [[module]] id=4 -name="Tools" -url="tools" -icon="hammer" -column=2 -next=[5, 6] - -[[module]] -id=5 name="Editors" url="editors" icon="text-left" -column=2 +row=2 +next=[6] + +# [[module]] +# id=6 +# name="Licensing" +# url="licensing" +# icon="person-fill-lock" +# row=3 [[module]] -id=6 -name="Licensing" -url="licensing" -icon="person-fill-lock" -column=3 +id=8 +name="Intro to UNIX" +url="intro-to-unix" +icon="terminal-fill" +row=0 +next=[1] diff --git a/static/css/module.css b/static/css/module.css index 10b1f4c..f527e37 100644 --- a/static/css/module.css +++ b/static/css/module.css @@ -1,8 +1,21 @@ +body { + overflow-y: scroll; +} + p, ul { - font-size: 18px; + font-size: 16px; line-height: 1.6rem; } +ol { + list-style-type: decimal; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + padding-inline-start: 40px; +} + img { display: block; max-width: 600px; @@ -11,7 +24,7 @@ img { } ul { - list-style: inside; + list-style: disc; margin-left: 20px; margin-bottom: 0.67em; } @@ -20,7 +33,7 @@ ul { margin: 30px 0; } -.citation { +.caption { text-align: center; color: grey; } @@ -76,15 +89,3 @@ ul { cursor: pointer; background-color: lightgrey; } - -.module-completion { - -} - -.module-complete { - position: sticky; - text-align: center; - padding: 10px; - top: 0; - background-color: #32d373; -} diff --git a/static/css/skill-tree.css b/static/css/skill-tree.css index f1b6eca..b3dbd9c 100644 --- a/static/css/skill-tree.css +++ b/static/css/skill-tree.css @@ -1,3 +1,7 @@ +body { + overflow-y: scroll; +} + :root { --green: #27db8a; } @@ -5,10 +9,30 @@ .modules { margin: auto; display: flex; + flex-direction: column; +} + +.module-row { + display: flex; +} + +/* +.module-row + .module-row { + border-top: 1px solid black; +} +*/ + +.module { + margin: 10px; +} + +.module-header { + display: flex; + align-items: center; } .module-icon-frame { - border: 2px solid black; + border: 2px solid var(--green); border-radius: 100px; display: flex; justify-content: center; @@ -48,7 +72,7 @@ } .module-icon-link:visited .module-icon-frame { - border-color: var(--green); + border-color: black; } .module-icon-link { @@ -61,38 +85,3 @@ align-items: center; } -.vl { - border-left: 2px solid black; - width: 20px; - height: 20px; - position: relative; - left: 26px; - margin-right: auto; -} - -.vl-locked { - border-left: 2px solid lightgrey; - width: 20px; - height: 20px; - position: relative; - left: 26px; - margin-right: auto; -} - -.hl { - border-top: 2px solid black; - width: 20px; - height: 0; - position: relative; - top: 50%; - float: right; -} - -.hl-locked { - border-top: 2px solid lightgrey; - width: 20px; - height: 0; - position: relative; - top: 50%; - float: right; -} diff --git a/templates/base.html b/templates/base.html index 8ec0121..9470f0f 100644 --- a/templates/base.html +++ b/templates/base.html @@ -29,7 +29,9 @@

Menu

Licensed under CC BY-NC-SA
- Source Code + Source Code
+ Emil Kovacev +
diff --git a/templates/editors.html b/templates/editors.html new file mode 100644 index 0000000..0447f05 --- /dev/null +++ b/templates/editors.html @@ -0,0 +1,55 @@ +{% extends "base-module.html" %} +{% block module %} + +# Editors + +A programmer's editor can greatly aid in their ability to program. Many modern +editors come with fancy features, like automatic text completion, linting, +built-in version control, and fancy debuggers. Simple editors can be equally as +effective, and often times much more lightweight and versitile. + +Your editor can sometimes vary depending on the details of the project you work on. +Some tools can be built as add-ons for some editors but not others. + +For example, +[VSCode](https://code.visualstudio.com) offers quite a few tools for developers, +including an [extension](https://code.visualstudio.com/docs/languages/rust) +for the programming language Rust, +that adds many of the modern features I detailed earlier. + + +## VSCode + +Developed by Microsoft, VSCode is a relatively lightweight editor with a plethora of +features. Aside from simple text input, you can install any number of extensions to help +you program! It also happens to be open source, check out the repository +[here](https://github.com/Microsoft/vscode/). + +It is available on most platforms, you can install it +[here](https://code.visualstudio.com/Download). + + +## Vim + +Vim is a program that has lasted the test of time. While it has a steeper learning +curve than most other editors, it is incredibly powerful. *It also happens to be +my editor of choice*. + +Most Unix machines (Linux/Mac) will have base vim pre-installed. To start it, open +your terminal application, type `vim`, and hit `Enter`. To exit, type `:` (Shift + ;), +release, type `q`, release, then hit `Enter`. This is typically written +as `:q`. For more instructions on how to use vim, open vim and run `:help tutor`. + +I personally use a newer fork of vim called neovim, if you are curious about it, +here is a link to the [repository](https://github.com/neovim/neovim), +which includes guides and installation instructions. + + +## Emacs + +Emacs is the favorite of a number of professors. Similar to vim, it is an +incredibly powerful tool with a long history and tons of customization. +It also has a fairly steep learning curve, but is equally rewarding. You +can install Emacs [here](https://www.gnu.org/software/emacs/download.html). + +{% endblock %} diff --git a/templates/git.html b/templates/git.html index 70d6d70..84ac401 100644 --- a/templates/git.html +++ b/templates/git.html @@ -8,7 +8,7 @@ capacity, and is able to save the state of programming projects over the course of time, as well as merge the content of two programs. Git is a massive program, and has an extensive list of terminology which is important for understanding how to -use it. This section will provide a glossary at the end, and a list of additional +use it. This section will provide a list of additional resources, for your convenience! ## Installing Git @@ -60,22 +60,96 @@

Homebrew

## Initializing a Git Project +In this tutorial, we will be assuming you have a complete UNIX setup. + +To start, create a new directory and enter it, as follows: + +``` +$ mkdir git_project; cd git_project +``` + +Git initializes an environment in an existing directory. An initialized git directory +is called a **repository**. To initialize your repository, run the following command: + +``` +$ git init +``` + +You should see a message that looks like this: + +``` +Initialized empty Git repository in /Users/username/git_project/.git +``` + +This means that git worked successfully! Git created a directory within `git_project/` +that will store + + ## Basics of Git -## Advanced Git Techniques +Remember the module about version control systems? The purpose of Git is to save +the state of our code, and help with collaboration! To save state, there are two +major steps: -## Module Activity +1. Staging: Tell git exactly which files you want to save. - +2. Committing: Save the state of the files you staged. -## Glossary +### Staging -## Additional Resources +To stage `filename.txt`, run the following command: + +``` +$ git add filename.txt +``` + +You can stage multiple files too, just add spaces in between like so: + +``` +$ git add fileA.txt fileB.txt +``` +### Committing + +Commits come with messages +so that developers can identify which changes were made for what reasons. To commit +your changes, run + +``` +$ git commit -m "message" +``` + +where `message` is a description of the changes you made. **Don't forget to include +the** `-m "message"` **!** + +### Other Commands + +* `$ git diff`: Shows you the lines you changed since your previous commit. +* `$ git log`: Shows you a log of the commits you made thus far +* `$ git status`: Shows the "status" of your current commit. More specifically, +it shows which files you added in the *staging* process! + + + +*Up to this point, we covered all the essential git commands for using **locally**. +In future modules, we will discuss GitHub, open-source git commands, and more +advanced git techniques.* + + + +## Additional Resources +* [git-scm](https://git-scm.com) +* [atlassian git tutorial](https://www.atlassian.com/git/tutorials) ## References -[1] "Git," git-scm.com. https://git-scm.com +[1] "Git," *git-scm.com*. https://git-scm.com {% endblock %} diff --git a/templates/github.html b/templates/github.html new file mode 100644 index 0000000..cc10149 --- /dev/null +++ b/templates/github.html @@ -0,0 +1,126 @@ +{% extends "base-module.html" %} +{% block module %} + +# GitHub + +GitHub is an online platform that allows users to **store Git repositories** (repos) +online. It is convenient for developers to be able to place their git repos +elsewhere for a number of reasons: + +1. Backups: If your computer bursts into flames, you will lose your local git repo. +If you store it on GitHub, it is hosted in a secondary location. + +2. Shareability: Especially for open-source development, hosting openly-available +repositories makes for easier collaboration between developers. + +3. Convenience: GitHub provides a few features that make developing applications +easier in a select few cases. + + +*Since GitHub is proprietary technology, we cannot conveniently give tutorials without +the chance of them changing easily in the future. However, we will attempt to supply +you with a short guide about what to set up, and where to find that documentation.* + +To begin, [create an account](https://github.com/signup). Once you create an account, +you will be able to create new repositories, or view other repos. + +## Setting up SSH + +I suggest to start by [creating an ssh key](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account). +SSH is a method of authentication. When you retreive a github repo, GitHub will check your +ssh key to verify your identity. + +## Git Commands + +As a user, you can use a few git commands to interact with GitHub. Remember, git is +local to your computer. It is the version control software used to keep track of your +file's history. + +### Cloning a Repo + +The term "cloning" refers to a **git** command (NOT GitHub) for copying a remote repo +onto your computer. In our case, a GitHub repo is the remote repo, meaning the repo is not +stored on our computer. To clone a repo, we use the following command: + +``` +$ git clone remote-url +``` + +where `remote-url` is the remote url for the github repo you would like to clone. +When you clone a repo, you may see some text: + +``` +Cloning into 'Classic-RPG'... +remote: Enumerating objects: 1232, done. +remote: Counting objects: 100% (519/519), done. +remote: Compressing objects: 100% (325/325), done. +remote: Total 1232 (delta 214), reused 399 (delta 178), pack-reused 713 +Receiving objects: 100% (1232/1232), 931.60 KiB | 9.51 MiB/s, done. +Resolving deltas: 100% (556/556), done. +``` + +This means that the clone was successful! If you type `$ ls`, you should see a +new repo with the name you cloned. See +[here](https://github.com/git-guides/git-clone#git-clone-with-ssh) for more details. + +### Push + +When you clone a repo, you may want to make some changes. Once you make the changes +you want, make a commit like we covered in the GitHub module, using `git add` and +`git commit`. When you want to update GitHub as well, use the command + +``` +git push +``` + +to push to the repo. Note, this will only work if you cloned a repo from +GitHub, or if you do some additional config first. Read more about that +[here](https://docs.github.com/en/get-started/using-git/pushing-commits-to-a-remote-repository) + +### Pull + +Lets say you share a public GitHub repo with me. In that case, either you or I +could push to it. If I pushed some changes, you may want to get those changes +onto your computer. To do so, type + +``` +git pull +``` + +Sometimes, it will ask to merge, and open up an editor, usually vim. For +more information on pulling a commit, see [here](https://github.com/git-guides/git-pull) + +## GitHub Features + +GitHub is a remote-repository host, meaning a place where you can store git repos. +The following are features that are exclusive to **github**, and are usually done +through their website. + +## Forks + +Lots of code is openly shared on GitHub, available for anyone to see. However, most +people do not have direct write permissions to those repos (only read). To grab +those repositories, GitHub has a feature called `forking`, which allows you to copy +the repository into your GitHub account, almost as if it was yours. + +See [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) +for details on how to fork a repository. + +### Pull Requests + +Do not be fooled by the name. Pull requests are requests to add code to a GitHub +repo. This is *especially* prevelant in open-source software development, when +developers are welcoming revisions, but also want to check the provided code for +quality. + +To learn more about pull requests, see [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/about-pull-request-reviews) + +For a more generalized view at contributing to open-source projects, see +[here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests). + +## Additional Resources + +* [GitHub Collaborating With Pull Requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests) +* [GitHub Get Started](https://docs.github.com/en/get-started) + +{% endblock %} diff --git a/templates/index.html b/templates/index.html index a0508e1..6e20935 100644 --- a/templates/index.html +++ b/templates/index.html @@ -16,73 +16,28 @@

Modules

-{% for module in config.module | selectattr("column", "equalto", 0) %} - {% if module.id in unlocked %} - -
- -
- -
- -
- -
- - {% else %} - -
+
+{% for row in config.row %} +
+ + {% for module in config.module | selectattr("row", "equalto", row.id) %} +
+ {% if module.id in unlocked %} + +
+ +
+ + {% else %}
-
+
+ {% endif %}
-
- - {% endif %} -{% endfor %} - -
- {% for column in range(1, config.columns + 1) %} -
- {% for module in config.module | selectattr("column", "equalto", column) %} - {% if module.id in unlocked %} - -
- -
- -
- - {% if column < config.columns and loop.first %} -
- {% endif %} -
- - {% if not loop.last %} -
- {% endif %} - - {% else %} - -
-
- -
- {% if column < config.columns and loop.first %} -
- {% endif %} -
- - {% if not loop.last %} -
- {% endif %} - - {% endif %} - - {% endfor %} -
{% endfor %} +
+{% endfor %}
diff --git a/templates/getting-started.html b/templates/intro-to-open-source.html similarity index 94% rename from templates/getting-started.html rename to templates/intro-to-open-source.html index f9ebe0e..013b63d 100644 --- a/templates/getting-started.html +++ b/templates/intro-to-open-source.html @@ -21,7 +21,7 @@
-
The map of ARPANET in March 1972 by UCLA and BBN
+
The map of ARPANET in March 1972 by UCLA and BBN
Arpanet, shown above, paved the way for the modern day internet, and allowed developers diff --git a/templates/intro-to-unix.html b/templates/intro-to-unix.html new file mode 100644 index 0000000..114cbca --- /dev/null +++ b/templates/intro-to-unix.html @@ -0,0 +1,131 @@ +{% extends "base-module.html" %} +{% block module %} + +# Intro to UNIX + +In the previous section, Installing Software, you installed and opened a terminal +application. In this section, you will learn how to use it! + +## A Brief History + +Before we get into the details, a brief history lesson! In the 1960s, computers +did not look the way we know now. As opposed to the displays of today, the teletype, +pictured below, fed in a large scroll of paper which printed computer output. +Other computers had a small, boxy screen, typically called a **terminal**. +Even the simple act of typing was a grueling task, since teletype keys were much +deeper and much slower. + +
+ +
Teletype Machine
+
+ +This meant a few things: + +1. Computers could not process graphics, only simple commands + +2. Those commands were simple to type, and usually abbreviated + +3. Commands were smaller and simpler so that the computer could process them + + +The advent of UNIX was very much intertwined with the early advent of the internet – +ARPANET. UNIX was an operating system built in the early 60s by developers at +AT&T Bell Labs. As opposed to other operating systems, it was designed around +a suite of very small, easily reusable programs. This is the bedrock of what is known +as the "UNIX Philosophy" [1]. You can read a much more comprehensive (and super interesting) +history [here](https://www.britannica.com/technology/computer/Time-sharing-and-minicomputers)! + +Needless to say, while UNIX is no longer supported, it branched into two implementations +that **are**: BSD, and more popularly, Linux. If you use MacOS, you are running a version +of BSD called [Darwin](https://en.wikipedia.org/wiki/Darwin_(operating_system)). *Notice, Windows +is **not** UNIX-based*. + + +## A Short Prefix + +Remember how I referenced the **terminal** earlier? The terminal you installed is +(in technicality) a terminal **emulator**, meaning it mimics the behavior of a terminal! +Similar to terminals of old, the only way to interface with the computer is with your +keyboard, with a set of commands. + +Every terminal uses some language for its commands. Not all computers, including UNIX-based +computers, use the same language. However, *many* behave the same. The language a terminal +uses is called its **shell**. + + +## UNIX Filesystem + +One thing that UNIX standardized at the time of its creation was a modern filesystem. +Regardless of what system you have now, you should be relatively familiar with how it +is structured. On your computer, you have files, and folders which can store files. +UNIX similarly has files, and directories that store files. From now on, we will use +the term **directory**. + +There are a few super important directories that have shortcuts. + +* Home: The shortcut for home is `~`. You typically create files and directories here + +* Current: The shortcut for the current directory is `.` +* Parent: The shortcut for the parent directory is `..` + + +## UNIX Commands + +UNIX command instructions are formatted like this: `$ command`. +Note that the `$ ` is NOT included in the command. +Whenever you see documentation about shell commands, they will most often begin with `$ ` +to indicate it is a shell command. + +Try typing the following command: + +``` +$ ls +``` + +What do you notice? The command `ls` is short for **list**, and it lists the contents of your +current directory. `ls` is an example of a command that has a return value, meaning that after +you hit `Enter`, text prints out. My output looks like this: + + + LICENSE app.py plugins.py static
+ README.md buildme.sh requirements.txt templates
+ __pycache__ config.toml runme.sh
+ + +This is the directory structure of the Modules project! Notice that each item is +separated by spaces. In this case, templates is a directory, while plugins.py is a file. + +Part of the UNIX philosophy, is that **commands do not show anything if they succeed.** +One example is the command `cd`, which is short for **change directory**. Try changing to one +of the directories that `ls` printed earlier. Try the following command + +``` +$ cd +``` + +where `` is the name of the directory you want to enter! For example, if I want +to enter templates, I would type `$ cd templates`. + + + +Here is a list of other useful commands: + +* `man`: Short for manual, man shows the manual for the command! Try `$ man ls`. +*To exit a man page, hit `q` on your keyboard*. + +* `cat`: Short for concatenate, it concatenates the file and prints it out! +Try `$ cat filename.txt`. + +* `pwd`: Short for "Present Working Directory". It shows you where you are in the filesystem! Try +`$ pwd`. + +Congratulations, you know the basics on how to use a UNIX-based terminal! For a more in-depth +tutorial and reference, click [here](https://missing.csail.mit.edu/). + + +## References + +[1] "Time-sharing and minicomputers," *www.britannica.com*. https://www.britannica.com/technology/computer/Time-sharing-and-minicomputers + +{% endblock %}