Beiträge mit dem Stichwort: ‘JavaScript̵
Gulp.js Teil 2 – Optimierung durch Taskrunner
Wie bereits im ersten Teil – Einstieg in gulp.js – Optimierung durch Taskrunner – wollen wir nochmals einen Blick auf den Taskrunner gulp.js werfen. Im ersten Teil haben wir uns die Installation, das Anlegen und Initialisieren eines ersten Projekts und die Implementierung eines ersten Taskrunners für SASS angeschaut. Nun wollen wir uns die Möglichkeiten von gulp.js genauer anschauen. Genauer gesagt die Packages, welche uns npm bereits anbietet. In gulp.js Teil 2 wollen wir uns daher zunächst die Packages genauer anschauen und uns anschließend zwei neue Funktionen für unseren Taskrunner überlegen und umsetzen.
WeiterlesenAdd-on für Firefox und Chrome erstellen
Heute lernen wir, wie wir ein simples Firefox- bzw. Chrome-Add-on erstellen. Dieses Add-on soll nichts weiter tun, als auf einer bestimmten Webseite ein Bild einzufügen. In diesem Fall soll auf der SÜDKURIER-Seite ein Bild mit dem Inhalt „I love SÜDKURIER“ am linken oberen Rand ausgestrahlt werden.
WeiterlesenEinstieg in gulp.js – Optimierung durch Taskrunner
Es gibt viele Gründe die dafür sprechen die Dateien einer Webseite zu optimieren. Einer der Hauptgründe dabei ist die Ladezeit. Doch wie können wir unsere Dateien ohne großen Aufwand und am besten automatisiert optimieren und dabei für eine bessere Ladezeit und Verarbeitung im Browser sorgen? Bei solchen Aufgaben können uns Taskrunner wie beispielsweise gulp.js unterstützen.
WeiterlesenDeveloper Playgrounds im Überblick
Als Entwickler steht man oft vor der Frage: Wie setzte ich das am besten um? Aber muss man alles immer gleich an einem bestehenden Projekt testen oder gar ein Testprojekt anlegen? Genau dafür gibt es Developer Playgrounds. Diese bieten jeweils in unterschiedlichem Aufbau und Funktionsumfang die Möglichkeit Code-Snippets anzulegen, zu teilen und sogar kollaborativ daran zu arbeiten. Je nach Playground von kleinen HTML, CSS und Javascript Snippets bis hin zu kompletten Projektarchitekturen mit Angular, Vue u.v.m. Sogar für PHP und SQL gibt es eigene Spielwiesen. Bei der Suche im Netz findet man eine Vielzahl von unterschieden Angeboten. Doch welchen davon sollte ich für meinen Test oder sogar mein Testprojekt verwenden? Um auf diese Frage eine Antwort zu findet kommt es immer sehr stark darauf an, was man gerade erarbeiten möchte.
WeiterlesenDie Suche nach dem passenden Editor
In meinem bisherigen Studium habe ich mich schon öfters auf die Suche nach einem Editor für die Webentwicklung gemacht. In diesem Blogbeitrag möchte ich Euch ein paar Editoren vorstellen die eventuell auch für Euch in Frage kommen. Die Editoren sind für Einsteiger und Fortgeschrittene der Webentwicklung gut geeignet. Für mich als Student ist es natürlich wichtig, dass die Software nichts kostet, damit am Ende vom Monat noch genug Geld für Johannisbeerschorle übrig bleibt.
WeiterlesenHTML5 Canvas – Animation
Im letzten Teil habe ich euch gezeigt, wie ihr eine Zeichnung per JavaScript auf eurem Canvas erstellt. Diese Zeichnung könnt ihr nun als Bewegung auf eurem Canvas bewegen.
WeiterlesenHTML5 Canvas – Eine kleine Einführung
Der HTML Canvas beschreibt eine Fläche in unserem HTML-Dokument, in welcher Pixel frei manipuliert werden können. Das bedeutet wir können auf dieser Fläche Grafiken per JavaScript schnell, einfach und unkompliziert erstellen. Der Vorteil gegenüber statischen Grafiken ist, dass wir jederzeit Linien, Kreise, Farben und mehr verändern und anpassen können. In diesem Beitrag möchte ich euch eine kleine Einführung geben, wie ihr auf eurem Canvas zeichnen könnt.
WeiterlesenWeb Fonts für Halunken – Ladezeit und Einbindung
Wie Milchschrift Kunst ist, so kann auch die passend gewählte Schriftart einer Webseite Kunst sein, oder das auswählen des Entsprechenden Formates. In diesem Beitrag besprechen wir welche Typen (auch Arten genannt) es von Web Fonts gibt (es gibt noch mehr, die hier genannten sind aber die geläufigsten), wie Schriften vom Browser geladen werden und wie Schriften im CSS eingebunden und benutzt werden.
WeiterlesenMinify CSS und JS mit PHP-Storm
Für eine gut Umgesetzte Webseite gehört es dazu Dateien wie CSS und JS zu minifizieren. Doch was genau steckt hinter dem minify von Dateien? Im Grunde ein einfacher Gedanke: alle unnötigen Zeichen werden in einer CSS bzw. JS Datei eingespart. Dabei geht es vor allem um unnötige Leerzeichen und Zeilenumbrüche. Die Lesbarkeit spielt dabei für den Browser keine Rolle. Die Dateien werden lediglich beim Aufruf der Seite geladen und ausgeführt. Als Entwickler möchte man aber meist doch lieber an einem strukturierten und lesbaren Code arbeiten. Wie kann man nun aber eine Brücke zwischen Darstellung und Nutzen schlagen? Genau an dieser Stelle greift der minify Gedanke.
WeiterlesenMit jQuery herausfinden, ob eine Checkbox angewählt ist (oder nicht)
Ich musste einen Weg finden mit jQuery zu überprüfen, ob eine Checkbox ausgewählt wurde. In jQuery ist es möglich zunächst zu überprüfen ob eine Checkbox angewählt wurde, um anschließend je nach Ergebnis eine Aktion auszuführen. So könnte man zum Beispiel ein Formularfeld anzeigen oder verstecken, sobald eine Checkbox ausgewählt wurde.
Weiterlesen