Gulp Basics: Ein Einsteiger Tutorial


Gulp.js ist ein sogenannter „Task Runner“, oder auch, wie sich Gulp selber nennt, ein „streaming build system“. Kurz gesagt: Es übernimmt nervige, immer wiederkehrende Aufgaben in der Frontend Entwicklung, automatisiert und erweitert diese. Typische Tasks können beispielsweise die Optimierung von Bildern fürs Web, minifizieren von JavaScript Dateien oder das Kompilieren von SASS Dateien in CSS sein. All dies kann, wenn ein entsprechender Gulp Task angelegt wurde, mit einem kurzen Befehl auf der Kommandozeile erledigt werden. Bei Bedarf können auch beliebige Tasks kombiniert werden, so dass ein einziger Befehl reicht eine Webseite „ausgeh-fein“ zu machen und auf den Server zu schieben. Was wird benötigt um Gulp zu nutzen? Um Gulp nutzen zu können muss selbstverständlich Gulp installiert sein. Dazu braucht man […]

Weiterlesen…

Web Design Inspiration #5: WordPress Theme Anbieter


Wie bereits erwähnt betreibe ich seit einiger Zeit mein kleines Hobby-/Nebenprojekt „handpickedthemes.com„. Dabei sammle ich im Prinzip einfach nur öffentlich Themes und Templates die mir selber richtig gut gefallen. Auf dem Wege bin ich auf eine ganze Reihe kleiner und kleinster Anbieter von CMS Themes aufmerksam geworden. Insbesondere gefallen mir diejenigen die nicht nur „multipurpose-ich-kann-alles-bling-bling“ Themes mit hunderten von Funktionen, dutzenden verbauter Plugins und natürlich mindestens „600+“ Schriftarten anbieten, sondern eben die kleinen, minimalistischen und klar gestalteten Templates. Eine kleine Auswahl dieser Anbieter die mir am besten gefallen hab ich hier einmal zusammengestellt: elmastudio.de elmastudio.de ist das kleine Designstudio von Ellen Bauer und Manuel Esposito aus Stuttgart welches bereits seit 2009 kleine aber feine WordPress Themes anbietet. Der Stil ist […]

Weiterlesen…

Von Bloggern und Mäusen – Auf der Rock-the-Blog Konferenz


Heute war ich beruflich auf der Rock-the-Block Konferenz im Rahmen der Cebit in Hannover. Das erste Mal das ich auf einer reinen Blogging-Konferenz war. Eben öfter mal was neues… Das Publikum war entsprechend anderes als auf den einschlägigen Entwicklerkonferenzen. Mehr Hipster, weniger Nerds. Mehr Fingerfood, weniger Burger. Auf drei Bühnen wurde zu Themen wie Professionalisierung von Bloggern, Corporate Blogs und „Influenca relations“ referiert (<- Und ja, es stand wirklich „Influenca“ im Programm). Was mir als erstes aufgefallen ist: Erstaunlich wie gut man Mode-Blogger von Travel-Blogger schon rein äußerlich unterscheiden kann. Versucht das mal mit einem JavaScript- und einem PHP Entwickler… Reisende soll man nicht aufhalten Das es da aber noch weitere Untergruppen gibt war mir zunächst nicht bewußt. So ist […]

Weiterlesen…

MySQL rauscht unter Ubuntu ab – Fehler beim Aufbau der Datenbank-Verbindung


Ich bin noch weit davon entfernt ein passionierter Server Admin zu werden. Um ehrlich zu ist es für mich, als eher visueller Mensch, immer noch ein Buch mit sieben Siegeln. Aber langsam fängt es an Spaß zu machen. Updaten, upgraden, überwachen und austesten. Dennoch tauchen immer mal wieder Probleme auf die ich nicht auf anhieb lösen kann und ich mich einige Stunden mit Google und den angebotenen Lösungsansätzen rumschlagen muss. Damit es mir (und anderen) beim nächsten Mal nicht mehr so ergeht, werde ich eine diese Erfahrungen hier festhalten. Das Problem – WordPress konnte keine Datenbank-Verbindung mehr herstellen Vor kurzem hatte ich mein Apache Server samt MySQL auf den neusten Stand gebracht. Alles lief danach ohne Probleme, so dass ich […]

Weiterlesen…

Mit WordPress von einem Shared Hosting Paket in ein anderes umziehen


Mit einer WordPress Seite von einem Server oder Hoster zu einem anderen umzuziehen ist keine Raketenwissenschaft. Den ein oder anderen Stolperstein gilt es jedoch zu umschiffen, oder gleich von vornherein zu vermeiden. Da ich vor kurzem mit meinem Blog hier von einem kleinen Shared Hosting Paket bei 1&1 zu Digital Ocean (<- Achtung! Schamloser Afiliate Link) umgezogen bin, bin ich also noch in Übung. Und da in WordPress Foren und entsprechenden Facebook Gruppen immer wieder die Frage nach einem sauberen Umzug auftaucht, werde ich versuchen dies hier einmal kurz und prägnant zu erleutern. Achtung: Grundsätzlich erkläre ich hier nur das vorgehen wenn komplett von einem Shared Hosting Paket auf ein anderes umgezogen wird und in beiden Fällen phpMyAdmin, aber kein […]

Weiterlesen…

Mit dem Google Tag Manager Google Analytics einbinden


Seit kurzem beschäftige ich mich beruflich intensiver mit dem sauberen einbinden und managen von unterschiedlichen JavaScript Dateien von Drittanbietern in unterschiedlichen Seiten. Genau hierfür bietet Google den sogenannten Tag Manager an. Jeder Webentwickler/Designer kennt das Problem bei größeren Internetseiten: Es soll ein Tracking geben um den Nutzerfluss auf der Seite zu erfassen. Natürlich muss noch ein Tool für das A/B Testing eingebunden werden. Die Marketingabteilung will Affiliate Marketing betreiben, die Entwickler wollen den Server überwachen usw. usw. Das Problem Eine Lösung wäre es nun einfach die von den Drittanbietern gelieferten JS Schnipsel manuell einzubinden. Die Pflegbarkeit und Wartbarkeit ist dann aber denkbar schlecht. Warum sollte man z.B. das A/B Testing Tool auf allen Seiten einbinden, wenn aktuell nur eine Unterseite […]

Weiterlesen…

Individuelle Theme Einstellungen – Der WordPress Theme Customizer


Bereits seit WordPress 3.4 gibt es die Möglichkeit ein Theme-abhängiges Options Menü zu hinterlegen. Hier können die verschiedensten Einstellungsmöglichkeiten vorgegeben, und dem Theme Nutzer dann im WordPress Backend unter „Appearance -> Customize“ bzw. „Design -> Anpassen“ zur Verfügung gestellt werden. So können beispielsweise Texte hinterlegt, CSS Klassen oder ganze CSS Dateien individuell aktiviert oder deaktiviert , Farben ausgewählt werden etc. Und das alles ohne das der Quellcode bearbeitet werden muss. Insbesondere wenn man ein Theme einem größeren Publikum zur Verfügung stellen will, zum Beispiel auf WordPress.org oder als Premium Theme, gibt man damit dem Anwender damit eine elegante Möglichkeit an die Hand alle wichtigen Einstellung bequem vom WordPress Backend aus vorzunehmen. Im folgenden möchte ich an einem einfachen Beispiel zeigen […]

Weiterlesen…

Externe Links als solche kennzeichnen – Mit JavaScript und CSS


„Verwirre den User…NICHT!“ So oder so ähnlich lautet einer der obersten Grundsätze des User Interface Designs. Wir sind Gewohnheitstiere. Wir wollen das etwas so funktioniert wie es das schon immer getan hat. Bei den meisten UI Elementen ist das relativ klar. Gerade jedoch ein einfacher externer Link kann da Überraschungen bergen. Klickt man drauf kann man entweder auf einer gänzlich anderen Internetseite landen, oder innerhalb der gerade besuchten Domäne hin und her springen. Was genau passiert weiß man erst hinterher. Um eben diese Verwirrung des Users zu vermeiden gehen viele Seitenbetreiber den Weg, einen externen Link eben auch als solchen zu kennzeichnen. Zum Beispiel mit einem kleinen Icon dahinter. Auf meiner Seite sehen externe Links z.B. so aus: Link auf […]

Weiterlesen…

_s Starter Theme + Bootstrap SASS = UnderStrap


Bei der Entwicklung eines WordPress Themes fallen zum großen Teil Arbeiten wieder und wieder an. Arbeiten die man bereits bei der Entwicklung frührer Themes erledigt hat. Bugs die bereits behoben wurden, Features die sich bereits als sinnvoll erwiesen haben, Funktionen die man lieb gewonnen hat usw. usw. Was liegt also nähere als eines der vielen Theme Frameworks zu nutzen? Genau, ein eigenes Theme Framework zu entwickeln: UnderStrap Theme Framework WordPress _s theme + Bootstrap SASS Download & mehr Info´s gibt es hier: UnderStrap.com besuchen Key Features: Basiert auf dem _underscores (oder auch _s) Starter Theme von Automattic Implementiert Bootstrap 3 Bootstrap 4 Verwendet das Owl Carousel 2 (beta) script Font Awesome Icon Font ist integriert Eigener JS Code läßt sich […]

Weiterlesen…

Beitragsbild als Hintergrundbild ausgeben – WordPress Basics


Bereits seit der Version 2.9 von WordPress gibt es die „Beitragsbild festlegen“ Funktion im Backend. Mit dieser kann einem bestimmten Beitrag oder einer einzelnen Seite ein individuelles „Featured Image“ zugeordnet werden. Unterstützt das genutzte WordPress Theme diese Funktion kann damit an geeigneter Stelle das jeweilige Bild ausgegeben werden. Ob das eigene Theme die Funktion untersützt kann man am einfachsten mit einem Blick in die functions.php überprüfen. Findet sich folgender Code: add_theme_support( ‚post-thumbnails‘ ); in der Datei, ist die Funktion unterstützt. Beim schreiben eines Beitrages oder einer Seite kann man dann in der rechten Spalte ein entsprechendes Bild festlegen bzw. hochladen. Sollte die Funktion noch nicht in der functions.php vorhanden sein, einfach den oberen Code-Schnipsel per „Copy&Paste“ einfügen. Ausgegeben werden kann […]

Weiterlesen…