Tricks und Kniffe

by Niclas W. Popken

VS Code

Tastenkombinationen

VISION Entwicklung, Debugging und Elemente Shortcuts

Schnell eine Elementvorlage erstellen?
Variablen mit einem die() dumpen?
Das geht ganz einfach mit den VS Code User Snippets.

✨ Element Templates einfach innerhalb eines <?php ... ?>-Tags „visElement“ ein und drücke ENTER.

✨ Variable kopieren „prdie“ oder „vardie“ eingeben ENTER und STRG + V drücken und schon ist die Variable gedumpt. 

Installation

F1 drücken, „workbench.action.openSnippets“ eingeben und „php.json“ eingeben. Code ersetzen oder anhängen:

{
  "VISION Element erstellen": {
    "prefix": "visElement",
    "body": [
      "\\$i = 0;",
      "\\$query = <<<SQL",
      "SELECT",
      "    *",
      "FROM",
      "    texte_elemente",
      "WHERE",
      "    id_text='{\\$this->pageOptions[\"pageId\"]}' AND",
      "    typ='${1:ElementTyp}' AND",
      "    showing='1' AND",
      "    lan='{\\$this->pageOptions[\"language\"][\"lan\"]}'",
      "ORDER BY",
      "    reihenfolge",
      "SQL;",
      "\\$result = cube_query(\\$query); ?>",
      "<?php while (\\$row = \\$result->fetch_object()) : ?>",
      "    <?php \\$i++;",
      "    // Einzelnes Bild",
      "    \\$image = unserialize(\\$row->image);",
      "    \\$imageSrc = \"template/elemente/{\\$row->id}/original/{\\$image[0]}\";",
      "",
      "    // Mehrere Bilder",
      "    \\$imageArray = unserialize(\\$row->image);",
      "    \\$imageArraySum = count(\\$imageArray);",
      "    ?>",
      "    <?php for (\\$c = 0; \\$c < \\$imageArraySum; \\$c++) : ?>",
      "        <?php echo \\$imageArray[\\$c]; ?>",
      "    <?php endfor ?>",
      "",
      "    <h2><?php echo \\$row->value2 ?></h2>",
      "<?php endwhile ?>"
    ],
    "description": "VISION Element erstellen"
  },
  "VISION Value": {
    "prefix": "visVal",
    "body": ["\\$row->value$0"],
    "description": "VISION Value"
  },
  "Print Values (print_r() + die())": {
    "prefix": "prdie",
    "body": ["print_r('<pre>') . print_r($0) . die();"],
    "description": "Debug Values"
  },
  "Dump Values (var_dump() + die())": {
    "prefix": "vardie",
    "body": ["print_r('<pre>') . var_dump($0) . die();"],
    "description": "Debug Values"
  }
}

F1 drücken, „workbench.action.openSnippets“ eingeben und „global“ eingeben. Code ersetzen oder anhängen:

{
	"VISION Value <?php ... ?>": {
		"prefix": "visValPhp",
		"body": ["<?php echo \\$row->value$0 ?>"],
		"description": "VISION Value"
	  },
}

Code separieren und mit Anker versehen

How to use?

Überschrift schreiben → Alt + X

Extensions

• Comment Divider
• Comment Anchors
• multi-command

Installieren

Strg + P → keybindings.json öffnen → folgendes einsetzen:

[
  {
    "key": "alt+x",
    "command": "extension.multiCommand.execute",
    "args": {
      "sequence": [
        "cursorHome",
        { "command": "type", "args": { "text": "ANCHOR " } },
        "comment-divider.makeSubHeader"
      ]
    },
    "when": "editorTextFocus"
  }
]

Code in Sections unterteilen

How to use?

Überschrift schreiben → Alt + X

Extensions

• Comment Divider
• Comment Anchors
• multi-command

Installieren

Strg + P → keybindings.json öffnen → folgendes einsetzen:

[
  {
    "key": "shift+alt+x",
    "command": "extension.multiCommand.execute",
    "args": {
      "interval": 30,
      "sequence": [
        "cursorEnd",
        "cursorHomeSelect",
        "editor.action.clipboardCopyAction",
        "cursorHome",
        { "command": "type", "args": { "text": "SECTION " } },
        "comment-divider.makeMainHeader",
        "cursorDown",
        "cursorDown",
        "editor.action.insertLineAfter",
        { "command": "type", "args": { "text": "// Dein Code hier" } },
        "editor.action.insertLineAfter",
        { "command": "type", "args": { "text": "!SECTION Ende " } },
        "editor.action.clipboardPasteAction",
        "comment-divider.makeSubHeader"
      ]
    },
    "when": "editorTextFocus"
  },
]

Codeschnipsel für Jira kopieren und einfügen

How to use?

Schnipsel markieren → Strg + Alt + C → Strg + V in Jira

Extensions

• Copy Code as Markdown

Installieren

Strg + P → keybindings.json öffnen → folgendes einsetzen:

[
  {
    "key": "ctrl+alt+c",
    "command": "copy-code-as-markdown.CopySelectionAsMarkdown"
  }
]

Web Entwicklung

Firefox Developer Edition

Mighty Farbpipette

Tastenkombination

Ales nacheinander, nicht gleichzeitig:
Deutsches Firefox → Alt + X + B + F
Englisches Firefox → Alt + T + B + Y (Eselsbrücke “Alter Toby”)

Responsive Mode für Firefox

Tastenkombination

Strg + Shift + M

ClickUp

Tasks schneller erstellen

Mit diesen Anleitung arbeitest du doppelt so schnell!

Tasks in ClickUp zu erstellen ist manchmal sehr zeitaufwendig und zum Teil sehr nervig, vor allem mit der vorgesetzten Aufgabenvorlage für ClickUp.
Für eine deutliche Zeitersparnis habe ich mir einen AutoHotkey Programm zur Hilfe genommen.

HotStrings

Installation für Windows

In der folgenden Anleitung erkläre ich euch die Installation:

1. Downloade und installiere die Software AutoHotkey unter https://www.autohotkey.com/.

2. Erstelle eine AutoHotkey Script Datei an einem beliebigen Ort auf deinen Computer und benenne ihn zum Beispiel ClickUpHotkey.ahk, wichtig ist hierbei das .ahk. Rechtsklick auf den Desktop zum Beispiel →œ Neu →œ AutoHotkey Script.

3. Rechtsklick auf die erstellte Datei → Edit Script

4. Setze folgenden Code ein:

#NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
; #Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.

::->::➜
return

:CR:TEL::
FormatTime, CurrentDateTime,, dd.MM.yy
SendInput 📞 %CurrentDateTime% |
return

:CR:MAIL::
FormatTime, CurrentDateTime,, dd.MM.yy
SendInput 📧 %CurrentDateTime% |
return

:CR:MEETING::
FormatTime, CurrentDateTime,, dd.MM.yy
SendInput 🎧 %CurrentDateTime% |
return

:CR:USER::
FormatTime, CurrentDateTime,, dd.MM.yy
SendInput 👤 %CurrentDateTime% |
return

:CR:DATUM::
FormatTime, CurrentDateTime,, dd.MM.yy
SendInput %CurrentDateTime%
return

:CR:LOREM::
(
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
)
return

:CR:MOVED::
FormatTime, CurrentDateTime,, dd.MM.yy
SendInput 🕒 %CurrentDateTime% | Verschoben, weil
return

:CR:PROJEKT::
SendInput .projekteverwaltung.de
return

:CR:VORSCHLAG::
FormatTime, CurrentDateTime,, dd.MM.yy
SendInput ✨ VORSCHLAG %CurrentDateTime% | X Std. |
return

5. Starte das Script mit einem Doppelklick!

6. Probiere es in ClickUp aus.

Autostart

Befolge folgende Anleitung → https://www.autohotkey.com/docs/FAQ.htm#Startup

Installation für Linux

1. Installiere Hotkey → https://github.com/autokey/autokey/wiki/Installing

2. Öffne das Terminal mit STRG + ALT + T und gebe folgendem Befehl ein:

$ git clone https://github.com/agentur77/a77-autokeys.git .config/autokey/data/a77-autokeys

3. AutoKey starten

4. Gegenfalls AutoKey zum Start-up hinzufügen

5. Probiere es in ClickUp aus.

Installation einer Alternative zu Hot Strings für MacOS

Da eine direkte Version von Hot Strings für MacOS nicht verfügbar ist, empfehlen wir zwei leistungsstarke Alternativen zur Automatisierung und Textersetzung:

Option 1: Alfred 5 Workflows

• Alfred 5 herunterladen und installieren: Besuchen Sie die offizielle Alfred-Website und laden Sie die neueste Version herunter.
• Einrichtung: Öffnen Sie Alfred 5 und navigieren Sie zu den Workflows.
• Workflow-Erstellung: Klicken Sie auf das +-Symbol, um einen neuen Workflow zu erstellen. Hier können Sie benutzerdefinierte Automatisierungen und Textersetzungen nach Ihren Bedürfnissen konfigurieren.
• Nutzung: Aktivieren Sie den Workflow und nutzen Sie die erstellten Automatisierungen und Textersetzungen.

Option 2: Systemeigene Textersetzung

• Zugang zu Systemeinstellungen: Öffnen Sie die Systemeinstellungen auf Ihrem Mac.
• Tastatur-Einstellungen: Wählen Sie Tastatur und navigieren Sie zum Tab Textersetzung.
• Textersetzungen hinzufügen: Klicken Sie auf das +-Symbol, um neue Textersetzungen hinzuzufügen. Geben Sie dabei die Abkürzung und den entsprechenden Ersatztext ein.
• Anwendung: Die erstellten Textersetzungen werden systemweit angewendet und automatisch ersetzt, sobald die Abkürzung getippt wird.

Beide Methoden bieten eine effiziente Möglichkeit, die Funktionalität von Hot Strings auf einem MacOS-System zu replizieren und zu erweitern.