Suche
Close this search box.
Open-Source-Projekte und ihre Anwendungen
Marc Eggert

VIM – Meine Konfiguration

Auf Linux- und Mac-Rechnern benötige ich recht oft einen Editor, um schnell diverse Dateien zu bearbeiten. I.d.R. Regel starte ich dafĂŒr allerdings nicht gleich eine ganze IDE, sondern nutze einen einfachen textbasierten Editor: Vim IMproved.Wie bei jedem StĂŒck Software, welches weniger auf Gewohnheiten und mehr auf Effizienz setzt, ist es auch bei VIM so, dass du als Neu-Einsteiger zunĂ€chst die grundsĂ€tzliche Bedienung von VIM kennenlernen solltest.Darum geht es in diesem Beitrag allerdings nicht. Es geht um ein paar nĂŒtzliche Erweiterungen, wie man den Editor gemĂ€ĂŸ der eigenen AnsprĂŒche pimpen kann.

Weiterlesen »
Open-Source-Projekte und ihre Anwendungen
Marc Eggert

WordPress-Templates mit Roots/Sage entwickeln

Seit einigen Jahren schreibe ich u.a. eigene WordPress-Themes fĂŒr diverse Projekte. Seit einigen Jahren artet dies auch des öfteren in Code-Chaos aus. Wer nicht zu Beginn eine klare Aufteilung und Struktur in sein Projekt bringt, wird schnell unĂŒbersichtlichen HTML-, PHP-, JS und CSS-Code als Ergebnis haben. Vor kurzem habe ich mir dann Sage von roots.io nĂ€her angesehen. Dieses Framework arbeitet von Grund auf bereits mit einigen modernen Dev-Techniken und vereinfacht so Versionierung, Struktur und Wartbarkeit. On Top gibt es noch das Template-System von Laravel, welches ich als PHP-Framework fĂŒr Projekte abseits von WordPress sehr schĂ€tze.Generell finde ich es sehr angenehm, dass sich der gesamte Code in einem WP-Projekt via Sage objektorientiert schreiben lĂ€sst. Sprich: Controller und Views – saubere Trennung zwischen FunktionalitĂ€t und Ausgabe. Wer also schon gewöhnt ist, mit Laravel oder CakePHP zu arbeiten oder grundsĂ€tzlich auf MVC-Basis programmiert, wird sich hier schnell zurechtfinden.

Weiterlesen »
Open-Source-Projekte und ihre Anwendungen
Marc Eggert

Active-Klasse in Bootstrap-Nav via JavaScript

Quick-Tipp: Oft benötigt und oft – je nach Projektanforderung – via PHP aufwĂ€ndig zusammenprogrammiert: Es geht um die „active“-Klasse fĂŒr Bootstrap (oder andere) Navigations-Bars (.navbar). Dies lĂ€sst sich relativ einfach und mit 4 Zeilen Code in JavaScript auf Basis von JQuery erledigen.Im Web-Projekt nutzt man in der Entwicklungsumgebung am Besten eine eigene Script-Datei fĂŒr die eigenen JavaScripts außerhalb der zusĂ€tzlich geladenen Scripts. FĂŒr die Produktionsumgebung werden sĂ€mtliche Scripts i.d.R. sowieso komprimiert („minified“). Im Grunde sind es sogar nur zwei Zeilen Code, da die Entscheidenden Zeilen im obigen Code in Zeile 2 und 6 stehen: In Zeile 2 wird die Variable „url“ definiert und mit dem Wert der aktuellen URL besetzt. Was selbst angepasst werden muss, allerdings fĂŒr Bootstrap-Navbars so bereits passt: Die Klasse („.navbar“) und die Struktur (li->a).

Weiterlesen »
Open-Source-Projekte und ihre Anwendungen
Marc Eggert

CSS und JavaScript mit NPM und Gulp organisieren

Bei den meisten Web-Projekten setze ich auf verschiedene externe Projekte und Frameworks. Sei es Bootstrap, JQuery oder FontAwesome und weitere Klassen oder Plugins. Meistens ist es dann ein Problem, die verschiedenen Versionen und externen Scripts auf einem aktuellen Stand zu halten, zu organisieren oder kontrollieren, welche Version untereinander notwendig ist, um alle AbhĂ€ngigkeiten (auch die des eigenen Projekts) zu erfĂŒllen.Um die jeweils aktuellen oder selbst gesetzten festen Versionen von Bootstrap & Co. zu halten, gibt es Nodejs/NPM. SĂ€mtliche Pakete werden dabei in ein Verzeichnis „node_modules“ installiert. Doch wie sieht eine praktikable Lösung aus, mittels welcher diese Bibliotheken im eigenen Web-Projekt gehalten werden?Genau hier kommt der „Workflow-Enhancer“ Gulp.js ins Spiel. Gulp sorgt dafĂŒr, dass die entscheidenden Scripts aus dem Verzeichnis node_modules in das eigene Web-Verzeichnis gefĂŒhrt werden (beispielsweise /js, /css, /fonts, etc.) und ggf. SASS–Code aus Bootstrap und eigenem Code in CSS kompiliert wird. Dazu ist in der DEV-Umgebung ein File-Watcher aktiv, welcher in Echtzeit geschriebenen SASS-Code kompiliert und ins CSS-Verzeichnis schreibt.Im Anschluss (nicht Teil dieses Beitrags) kann ĂŒber eine Aufgabe via Gulp der gesamte JS- und CSS-Code fĂŒr die Produktiv-Umgebung komprimiert werden. Perfekt!

Weiterlesen »
Open-Source-Projekte und ihre Anwendungen
Marc Eggert

DEV-Umgebung fĂŒr WordPress mit Docker, Gitlab & PhpStorm

In diesem Beitrag zeige ich eine einfache Lösung, wie Du mit Docker, Gitlab und PhpStorm eine schnelle, lokale Entwicklungsumgebung einrichtest. Dies ist vor allem dann ganz gut, wenn Du ein WordPress-Template oder -Plugin entwickeln möchtest. Kurz gesagt: Im Anschluss wirst Du Deine Projekt-Daten fĂŒr Dein Template oder Plugin auf Gitlab.com ablegen und entwickelst dabei dein Projekt lokal auf Deinem Rechner. Der komplette WordPress-Code wird dabei natĂŒrlich nicht via git getrackt. PhpStorm eignet sich fĂŒr die WordPress-Entwicklung sehr gut – Du kannst allerdings auch jeden anderen Editor verwenden. Dabei musst du eben die Docker-Befehle von Hand eingeben. Es ist allerdings so oder so eine gute Idee, die einzelnen Docker-Befehle manuell zumindest kennenzulernen.

Weiterlesen »

Ansible: Server-Updater

Wer Ansible noch nicht kennt: Man kann sich Ansible als eine Art mĂ€chtiges SSH-Werkzeug vorstellen, welches diverse Operationen auf definierten Ziel-Maschinen ausfĂŒhrt (hauptsĂ€chlich fĂŒr Linux-Server genutzt, Windows-Kisten lassen sich damit allerdings ebenfalls ansprechen). Der Vorteil von Ansible? Man benötigt keine Client-Agents oder Ă€hnliche Software – eine funktionierende SSH-Verbindung zum Zielrechner ist ausreichend. Ansible ist hierbei auch der Zustand des Zielrechners egal. Wenn z.B. das Paket „apache2“ via APT auf dem debian-basierten Zielrechner installiert werden soll, wird geprĂŒft, ob auf dem Zielrechner bereits apache2 installiert ist. Ist dies der Fall, wird von Ansible nichts weiter unternommen. Ist dies nicht der Fall, installiert Ansible das Paket.Was ebenfalls ziemlich schick ist: Es wird auch keine Server-Node benötigt. Ansible kann von jedem SSH-fĂ€higen Client oder Server ausgefĂŒhrt werden. I.d.R. geht man dabei so vor, dass die eigenen Configs, bzw. Aufgaben (bei Ansible „Playbooks“ genannt) versioniert werden (Github, Gitlab, o.Ă€.) und bei Bedarf versioniert erweitert und angepasst werden können. 12 Server und auf allen soll „htop“ nachinstalliert werden? Eine Zeile in Ansible und die Sache ist geritzt. 

Weiterlesen »
Open-Source-Projekte und ihre Anwendungen
Marc Eggert

Quick & Dirty Vagrantfile

Ich benötige oftmals mal schnell einen Host, um diverse Dinge zu testen. Aktuell möchte ich Ansible-Playbooks testen und auf die eigenen AnsprĂŒche anpassen. NatĂŒrlich soll dabei der grundsĂ€tzliche Aufwand, eine entsprechende Maschine zu starten, so klein wie möglich gehalten werden. Eine recht einfache und schnelle Methode ist die Nutzung von Vagrant. Man benötigt lediglich eine Vagrantfile-Datei, in welcher beschrieben steht, wie die zu erstellende VM (in meinem Fall Virtualbox) aussehen soll. FĂŒr Ansible ist es gĂŒnstig, eine minimale, aktuelle Ubuntu-Box aufzusetzen, die man dann Ă€hnlich der ĂŒblichen Cloud-VServer via Ansible konfigurieren kann.

Weiterlesen »