add

067fc8f5 · nilsl · 992b521e · 067fc8f5 · 067fc8f5 · 067fc8f5
Commit 067fc8f5 authored 3 years ago by nilsl
--- a/linux_toolkit_2021/LICENSE
+++ b/linux_toolkit_2021/LICENSE
+MIT License
+
+Copyright (c) 2021 Nils Leuzinger
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/linux_toolkit_2021/README.md
+++ b/linux_toolkit_2021/README.md
+# Crashcourse personal/course Website
+This is a crash course into web development. Do you want to create your own personal (research?) webpage, customize a theme, or event want to become a web developer? This will help you to get started.
+
+We will introduce HTML, CSS, JavaScript and PHP and add some design / user experience on the way. You need no prior knowledge, and need not to be a programmer. After the course, you can get started with your simple research webpage, or embark on the journey to become a web developer.
+
+## Inhalt
+This course will give you a basic understanding of everything you need to create websites. 
+
+Chapters:
+- HTML: Structure your content.
+- CSS: Design.
+- JavaScript: Functionality in the browser.
+- PHP: Generate content on the server.
+
+For each chapter, we will see easy applications for personal webpage concepts. Further, we will quickly discuss resources & technologies for aspiring developers.
\ No newline at end of file
--- a/linux_toolkit_2021/css/remark.css
+++ b/linux_toolkit_2021/css/remark.css
+body { font-family: sans-serif; }
+h1, h2, h3 {
+  font-family: serif;
+  font-weight: normal;
+}
+.remark-code, .remark-inline-code { font-family: monospace; }
+
+.inverted { color: white; background: black; }
+
+.rectangle {
+  display: inline-block;
+
+  background: #9FCFF8;
+  width: 60px;
+  height: 20px;
+  padding: 50px;
+  margin: 20px;
+  border: 10px solid #FFE599;
+}
+
+.row {
+    display: flex;
+}
+
+.column {
+	flex-basis: 0;
+	flex-grow: 1;
+	max-width: 100%;
+}
\ No newline at end of file
--- a/linux_toolkit_2021/css/remark.print.css
+++ b/linux_toolkit_2021/css/remark.print.css
+@media print {
+  .remark-slide-scaler {
+    width: 100% !important;
+    height: 100% !important;
+    transform: scale(1) !important;
+    top: 0 !important;
+    left: 0 !important;
+  }
+}
\ No newline at end of file
--- a/linux_toolkit_2021/example_01_template.html
+++ b/linux_toolkit_2021/example_01_template.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>Hello, world!</title>
+    <meta name="description" content="A simple HTML document.">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+	<p>This demonstrates a simple HTML document.</p>
+  </body>
+</html>
\ No newline at end of file
--- a/linux_toolkit_2021/example_02_position.html
+++ b/linux_toolkit_2021/example_02_position.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>Hello, positions!</title>
+    <meta name="description" content="A HTML document demonstrating positioning.">
+	<style>
+		.container-outer {
+		  position: relative;
+		  top: 10px;
+		  width: 100%;
+		  height: 90px;
+		  background-color: blue;
+		}
+
+		.container-inner {
+		  position: absolute;
+		  top: 50px;
+		  right: 50px;
+		  width: 100%;
+		  height: 30px;
+		  background-color: yellow;  
+		}
+	</style>
+  </head>
+  <body>
+	<div class="container-outer">
+		<div class="container-inner">
+		</div>
+	</div>
+  </body>
+</html>
\ No newline at end of file
--- a/linux_toolkit_2021/example_03_datatable.html
+++ b/linux_toolkit_2021/example_03_datatable.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>Hello, table!</title>
+    <meta name="description" content="A HTML document with an interactive table.">
+	
+	<!-- jQuery -->
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+	
+	<!-- DataTable -->
+	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
+	<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> 
+	
+	<script>
+		$(document).ready(function () {
+			$('.table-interactive').DataTable();
+		});
+	</script>
+  </head>
+  <body>
+    <h1>Hello, table!</h1>
+	<p>This demonstrates an interactive table.</p>
+	
+	<table class="table table-interactive">
+		<thead>
+			<tr>
+				<th>Name</th>
+				<th>Age</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>Timmy</td>
+				<td>9</td>
+			</tr>
+			<tr>
+				<td>Santa Clause</td>
+				<td>-1</td>
+			</tr>
+		</tbody>
+	</table>
+  </body>
+</html>
\ No newline at end of file
--- a/linux_toolkit_2021/example_04_masonry.html
+++ b/linux_toolkit_2021/example_04_masonry.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>Hello, masonry!</title>
+    <meta name="description" content="A HTML document with a masonry.">
+	
+	<!-- jQuery -->
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+	
+	<!-- Masonry -->
+	<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+	
+	<script>
+		$(document).ready(function () {
+			$('.grid').masonry({
+			  itemSelector: '.grid-item',
+			});
+		});
+	</script>
+	
+	<style>
+		.grid { width: 840px; background-color: #efefef; }
+		.grid-item { width: 200px; height: 20px; background-color: #618b55; margin: 5px; }
+		.grid-item--width2 { width: 410px; }
+		.grid-item--height2 { height: 40px; }
+		.grid-item--height4 { height: 80px; }
+	</style>
+  </head>
+  <body>
+    <h1>Hello, masonry!</h1>
+	<p>This demonstrates a masonry.</p>
+	
+	<div class="grid">
+	  <div class="grid-item grid-item--height4"></div>
+	  <div class="grid-item grid-item--width2"></div>
+	  <div class="grid-item grid-item--height2"></div>
+	  <div class="grid-item"></div>
+	  <div class="grid-item grid-item--height2"></div>
+	  <div class="grid-item"></div>
+	</div>
+  </body>
+</html>
\ No newline at end of file
--- a/linux_toolkit_2021/illustrations.bmpr
+++ b/linux_toolkit_2021/illustrations.bmpr
--- a/linux_toolkit_2021/images/bash.png
+++ b/linux_toolkit_2021/images/bash.png
--- a/linux_toolkit_2021/images/cat.png
+++ b/linux_toolkit_2021/images/cat.png
--- a/linux_toolkit_2021/images/catpipe.png
+++ b/linux_toolkit_2021/images/catpipe.png
--- a/linux_toolkit_2021/images/catpiperedirection.png
+++ b/linux_toolkit_2021/images/catpiperedirection.png
--- a/linux_toolkit_2021/images/polygon.png
+++ b/linux_toolkit_2021/images/polygon.png
--- a/linux_toolkit_2021/images/thealternative-logo.jpg
+++ b/linux_toolkit_2021/images/thealternative-logo.jpg
--- a/linux_toolkit_2021/index.html
+++ b/linux_toolkit_2021/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Linux Toolkit</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <link rel="stylesheet" href="css/remark.css">
+    <link rel="stylesheet" media="print" href="css/remark.print.css">
+<style>
+        img {
+                width: 40%;
+        }
+
+        .remark-inline-code {
+                color: #f18a21;
+        }
+
+        strong {
+                color: #f18a21;
+        }
+
+        body {
+                line-height: 2em;
+        }
+</style>
+  </head>
+  <body>
+    <textarea id="source">
+
+class: center, middle
+
+# Linux Toolbox
+
+<img src="images/thealternative-logo.jpg" width="30%">
+
+---
+
+# We will see
+
+...a short **Bash** introduction, to get the necessary intuition for what most tools in this course do.
+
+...how most classic Linux tools **compose**.
+
+...a wide spectrum of available **tools** and what you can do with them.
+
+---
+
+# Goals
+
+Reduce unknown unknowns (`what's available?`, `what do I search for?`, etc).
+
+Give a rough intuition for what classic Linux tools can do.
+
+Provide pointers for where to learn the tools.
+
+Learn vocabulary.
+
+Non-goal: teach you how to use the tools - I would love to, but we don't have time!
+
+---
+
+
+```bash
+file=$(ls -tp1 ~/Downloads | grep -v "/$" | head -1)
+dirs='Images,Videos,Documents,Documents/books,DELETE,OPEN'
+choice=$(echo $dirs | rofi -dmenu -sep ',' -p "move '$file' where? ")
+[[ "$choice" = "" ]] && exit
+[[ "$choice" = DELETE ]] && rm ~/Downloads/"$file" && exit
+[[ "$choice" = OPEN ]] && xdg-open ~/Downloads/"$file" && exit
+mv ~/Downloads/"$file" "$choice"
+```
+
+safe the above in `/home/nils/filer.sh` and add a few lines of text in `~/.xbindkeysrc`:
+
+```
+"bash /home/nils/filer.sh"
+  control+shift+f
+```
+
+---
+
+# How to use this talk
+
+- pick and choose the tools that seem interesting to you and try to learn them
+- come back to the slides and use them as a glossary for unknown words
+- ...or just be amused with what people come up with
+
+---
+
+# Some philosophy
+
+Many of the classical Linux tools adhere to the "UNIX principle":
+
+<blockquote>Do one thing and do it well.</blockquote>
+
+In a wider, non-programming sense: It's useful to  
+learn things that are small, orthogonal, and compose.
+
+
+# Bash
+
+Related words: terminal, terminal emulator, shell, command line, ...
+
+<img src="images/bash.png">
+
+In a nutshell:  
+Bash is a tool that let's you interact with your computer via text.
+
+**Try it out:** Open a terminal (just search for `Terminal` in your launcher)
+
+---
+
+# Bash Commands
+
+Bash let's you interact with your computer by typing commands.
+
+There are **many** commands. Some examples:  
+`ls`, `pwd`, `echo`, `cd`, `mv`, `sleep`, `alias`, ...
+
+Some commands are built into Bash, others can be downloaded.
+
+Some commands are really just programs: try typing `firefox` and hitting Enter if you have it installed.
+
+---
+
+# TODO ls & cd video
+
+---
+
+# TODO: vocab
+
+---
+
+# Bash For Programming
+
+Bash can even be used as a (terrible) programming language, using commands like `for`, `if`, `while`, `[[` etc.  
+
+It also makes use of special constructs that aren't commands (e.g. arithmetic expansion: `echo $((5+3))`)
+
+We'll only bother with `|` and `>` ("piping" and "redirecting").
+
+---
+
+# | and >
+
+Two incredibly useful Bash features!
+
+Both redirect command output:  
+- `|` redirects to a new command ("piping")
+- `>` redirects into a file ("file redirection" or "redirection" for short)
+
+<img src="images/cat.png" width="30%">
+<img src="images/catpipe.png" width="30%">
+<img src="images/catpiperedirection.png" width="30%">
+
+---
+
+# bash summary
+
+bash is a different way of interacting with your system
+
+bash runs in your terminal.
+
+bash is a shell. there are others: Zsh, fish, Dash, csh
+
+resources: 
+- our bash guide (https://thealternative.ch/guides/bash.php)
+- Lhunath and GreyCat's bash guide (http://mywiki.wooledge.org/FullBashGuide)
+
+---
+
+# bash power
+
+Move all `.png` files from Downloads to Images:  
+```bash
+mv ~/Downloads/*.png ~/Images`
+```
+
+go to our images, make a new directory, and move newest five images there:
+```bash
+cd ~/Images
+mkdir newImages
+ls -1t *.png | head -5 | xargs -I {} mv {} newImages
+```
+
+rename all images in a folder to `*_with_family`:  
+```bash
+for file in *.png; do
+        mv "$file" "$file_with_family"
+done
+```
+
+---
+
+# Tool Galore
+
+We will now talk about multiple tools and how to combine them using bash (mostly).
+
+---
+
+# Scripting Languages
+
+bash is not ideal as a programming language.for more complex jobs,a real programming language is needed.
+
+two main choices:  
+- Python (recommended for beginners)
+- Ruby (only if you already know programming; compact syntax)
+
+these fill niches that bash doesn't, but are still close to the system.
+
+<img src="images/polygon.png">
+
+---
+
+# Notifications
+
+typically linux has a notification demon integrated.
+
+```bash
+notify-send "Hello"
+```
+
+this is often useful for things that you want to run in the background.  
+Example: Timer
+
+```bash
+sleep 300; notify-send "Time is up!"
+```
+
+---
+
+# Rofi
+
+can be used to display a list of things  
+and then let's us choose one of them.
+
+```bash
+echo "one\ntwo\nthree" | rofi -dmenu
+```
+
+on its own is not useful, but can serve as a powerful launcher when combined with other things:  
+
+```bash
+ls -1 ~/Documents/books/*.pdf | rofi -dmenu | xargs -I {} evince {}
+```
+
+https://github.com/davatorium/rofi
+
+---
+
+# xbindkeys
+
+A **keydeamon**! Let's us configure keyboard shortcuts.
+
+in file `~/.xbindkeysrc`:
+
+```bash
+"notify-send test"
+  control+t
+
+"ls -1 ~/Documents/books/*.pdf | rofi -dmenu | xargs -I {} evince {}"
+  control+Mod1+b
+```
+
+<img src="images/booklauncher.png">
+
+---
+
+
+```bash
+file=$(ls -tp1 ~/Downloads | grep -v "/$" | head -1)
+dirs='Images,Videos,Documents,Documents/books,DELETE,OPEN'
+choice=$(echo $dirs | rofi -dmenu -sep ',' -p "move '$file' where? ")
+[[ "$choice" = "" ]] && exit
+[[ "$choice" = DELETE ]] && rm ~/Downloads/"$file" && exit
+[[ "$choice" = OPEN ]] && xdg-open ~/Downloads/"$file" && exit
+mv ~/Downloads/"$file" "$choice"
+```
+
+safe the above in `/home/nils/filer.sh` and add a few lines of text in `~/.xbindkeysrc`:
+
+```
+"bash /home/nils/filer.sh"
+  control+shift+f
+```
+
+---
+
+
+# grep
+
+a command to look for **regular expressions**.
+
+think of regular expressions as being text patterns on steroids:
+
+`grep "^[0-9]" data.csv` prints all the lines starting with a number
+
+we can try a multiple greps together to chain filters:
+
+<img src="images/">
+<img src="images/">
+<img src="images/">
+
+---
+
+# sed
+
+**s**tream **ed**itor
+
+this tool can search for regular expressions like we did with `grep`,  
+and perform various operations on each output line separately
+
+---
+
+# find
+
+a general purpose tool for finding various files according to search filters.
+
+especially nice if used with xargs-style option or regular expressions:
+
+Remove all files (`-type f`) that end in .php (`*.php`):  
+```bash
+find . -type f -name "*.php" -exec rm {} \;
+```
+
+Display all files that contain a comment that contains `TODO`:  
+```bash
+find ~/Documents -type f -exec grep -l "//.*TODO" {} \; 
+```
+
+---
+
+# file conversion
+
+sometimes you want to convert between similar file formats. there are a lot of tools for this.most are specific for some kind of file content.here are some common ones:
+
+- `ffmpeg` for audio and video
+- `pandoc` for many hierarchical text formats (mark down, html, latex)
+- `pandoc` for image files
+
+<hr>
+
+Using a bash for-loop, convert all `wav`-files to `mp3`:  
+```bash
+for file in *.wav; do
+        ffmpeg -i "$file" "${file%.*}.mp3"
+done
+```
+
+(what `ffmpeg` sees: `ffmpeg -i song.wav song.mp3`)
+
+---
+
+# Downloading stuff
+
+
+    </textarea>
+    <script src="js/remark.min.js" type="text/javascript"></script>
+    <script src="js/remark.driver.js" type="text/javascript"></script>
+  </body>
+</html>
--- a/linux_toolkit_2021/js/remark.driver.js
+++ b/linux_toolkit_2021/js/remark.driver.js
+var slideshow = remark.create();
\ No newline at end of file
--- a/linux_toolkit_2021/js/remark.min.js
+++ b/linux_toolkit_2021/js/remark.min.js