Basics

Technical Activity refers to an interaction with technology, through which we modify and adapt the technology to our own needs or in which we continue the invention of the technology. This does not necessarily mean that we have to program. Adapting existing tools to our own needs is already a form of technical activity.

Operating Systems

Currently the two mainstream OS are Mac and Windows. As an alternative we could use Linux. It’s free, we can use a variety of different hardware and there are a lot of different distributions targeting different hardware, use cases and user preferences. In terms of the seminar we can say that it has a greater adaptiveness than the others.

Keyboard

Common keyboards, especially those of a laptop, are not adapted to the human operator, but to the design of the overall machine (available space).

Some options for modification:

  • alternative layouts like workman or neo

  • an additional layer for coding, etc. (example)

  • split keyboards (examples)

  • create custom shortcuts

Open Source & Alternatives

Floss Manuals – Free Manuals for Free Software

European Alternatives — European alternatives for digital products

Privacy focusing browsers

Ghostery

Mullvad Browser

LibreWolf

Stack Overflow

stackoverflow.com is probably the main site for finding answers to questions about software development.

GitHub

GitHub is a platform for sharing code and collaboratively working on code. We’ll use it when we’ll have a look at external libraries written for p5.js.

Programming Languages

Different programming languages serve different needs and create different possibilities.

Stack Overflow’s annual survey is one source to see what languages and tools are trendy: survey 2023

On github you can see for every software, what languages have been used to create it:

Languages used to write a software.

Developer Tools

General utility

Clipboard Manager — Keep a history of data put to the clipboard

espanso — Text expander

zap — Expand web shortcuts

cheat — Create and view interactive cheatsheets

navi — Interactive Cheatsheet Tool

Editors/ IDEs

Following a short list of text editors for different purposes. Of course you can use any other editor as well.

Atom – A hackable text editor for the 21st Century

Brackets – A modern, open source code editor that understands web design

Kate – Get an Edge in Editing

Sublime Text – Text Editing, Done Right

Spyder IDE – The Scientific Python Development Environment

TextMate – Text editor for macOS

Typora – a markdown editor, markdown reader

Visual Studio Code – Code Editing. Redefined

VSCodium — Same as above but without tracking.

CLI Editors

DoomEmacs — An Emacs framework for the stubborn martian hacker

NeoVim — hyperextensible Vim-based text editor

NvChad — NeoVim config (IDE)

GNU Emacs — An extensible, customizable, free/libre text editor — and more.

Kakoune — Kakoune code editor

micro — A modern and intuitive terminal-based text editor

Terminal Emulator

Cross Platform

Alacritty

Kitty

Tabby

Linux

Terminator

Konsole

Mac

iTerm2

Learn Typing

KTouch Linux

Tipp10 Linux, Windows

aTypeTrainer4Mac Mac

Cloud computing vs. local computing

Cloud

Local

Hardware up to date

Maybe old hardware

Shared hardware

Hardware per person

Software up to date

Software maybe outdated, but more control

Network traffic & energy consumption

No traffic, works offline

Less private

Private

Local development with p5.js

In the Get Started section we’ll find information on how to setup p5js for local development. We’ll use the complete library from the Download page.

Sublime hints

Goto

The Goto command is used to open files (inside the working directory) or to jump to a position inside a file.

Open Goto via Ctrl + p

Search for files, press enter for a file to open it.

Go to a line inside a file:

Open Goto via Ctrl + p, enter : followed by a line number

Go to a symbol inside a file:

Open Goto via Ctrl + p, enter @ followed by a query

Combine queries:

Example query: index@body

Command Palette

Ctrl + Shift + P opens the Command Palette. This can be used to work with packages, to change settings, to rename the file etc.

Key Combinations

Ctrl + Shift + Arrow Up/Down = Move the current line up or down

Ctrl + l = Select the current line. Further ls will append more lines.

Ctrl + d = Select the current word. Further ds will append more instances of the same word.

Ctrl + Shift + k = Delete current line

Preferences

Open settings via Ctrl + Shift + P and type pref..

{

	// Set to true to automatically save files when switching to a different file
	// or application
	"save_on_focus_lost": true,
}


Extending Sublime

Install Package Control

In Sublime: Tools > Install Package Control

This allows you to install packages inside Sublime in general:

Ctrl + P > Package Control: Install Package

Install helpful packages

Bracket Highlighter

AutoFilename

Install LiveReload in Sublime

Via Package Control install the package LiveReload. Follow the steps below or watch this video on YouTube (in french).

Type Ctrl + P. A search bar opens, type and select Package Control: Install Package

A new search bar opens where you search for LiveReload and click on it/ select press enter.

This will install the package. Then go to Preferences -> Package Settings -> LiveReload -> Plugins -> Enable/ disable plugins.

A new search bar with the message LiveReload: Enable/ disable plugins appears. Hit Enter.

Then select Enable - Simple Reload and press Enter again.

You can do the same with the search function of Ctrl + P.

Install LiveReload in your browser

Next you have to install an extension in your browser.

Install »View in Browser« to launch your page from Sublime (optional)

If you wan’t to open your browser directly from within Sublime, you’ll need another Sublime extension for that:

Open the Preferences menu Click Package Control

A search bar opens where you type: Package Control: Install Package

A new search bar opens where you search for View In Browser and click on it.

This will install the package, you can find it under Preferences -> Package Settings -> View In Browser.

To run it, press inside your .html file ctrl+alt+v.