Kategorie: Webdevelopment

Browsersync.io – Nie wieder den Browser nachladen, wenn man mit CSS/SASS/HTML/JS arbeitet

Hinzugefügt am von Christoph Schade
Geschrieben in - Webdevelopment

Was ist Browsersync.io

Browsersync.io ist ein Modul für den NPM Paketemanager und nimmt euch das Neuladen der Website ab, wenn Ihre eine Änderung im Quellcode abspeichert. Ändert ihr zum Beispiel in HTML eine <h2> in eine <h3> dann müsst Ihr nicht mehr manuell den Browser neu laden. Dies übernimmt Browsersync ab sofort für euch. Ist das nicht fantastisch? Am ende dieses Artikels, sollte ein Bulid stehen, mit welchen Ihr schnell und komfortabel eine einfache Website aufbauen könnt und dieses Bulid leicht erweitern könnt.

Was ist Node.JS und wofür brauch ich es?

Ich habe bereits einen kurzen Artikel dazu veröffentlicht. Ich habe Ihn „NodeJS kurz und knapp vorgestellt“ genannt. Bitte schaut da mal rein. Also installiert Node.JS von https://nodejs.org auf euren lokalen System. Hab ihr dies getan, kommen wir zur Einrichtung und Installation.

Weiterlesen „Browsersync.io – Nie wieder den Browser nachladen, wenn man mit CSS/SASS/HTML/JS arbeitet“

NodeJS kurz und knapp vorgestellt

Hinzugefügt am von Christoph Schade
Geschrieben in - Projekte | Webdevelopment

Was ist NodeJS

Node.js eine serverseitige Plattform zum Betrieb von Netzwerkanwendungen. Insbesondere lassen sich Webserver damit realisieren. Node.js wird in der JavaScript-Laufzeitumgebung „V8“ ausgeführt, die ursprünglich für Google Chrome entwickelt wurde, und bietet daher eine Ressourcen sparende Architektur, die eine besonders große Anzahl gleichzeitig bestehender Netzwerkverbindungen ermöglicht.(1)

NodeJS kann momentan, (Stand August 2016) unter https://nodejs.org heruntergeladen werden und muss installiert werden. Hintergrundinfo: vor kurzen gab es noch Streit mit den Entwicklern der Plattform, sodass nicht klar war, wie die Zukunft um NodeJS aussah.

Weiterlesen „NodeJS kurz und knapp vorgestellt“

Beat the Clock – Lösungen

Hinzugefügt am von Christoph Schade
Geschrieben in - Webdevelopment

Im Artikel Fun zum Freitag #7 habe ich euch das Browser-Game „Beat the Clock …with JavaScript knowledge“ vorgestellt. Heute werde ich euch die Lösungen aufzeigen. Ich finde die Idee dahinter sehr gut und gelungen, auch wenn ich mir mehr Level und Abwechselung gewünscht hätte. Ein weiterer Kritikpunkt ist, dass sich die einzelnen Fragen nicht zufällig (random) anordnen. So muss man nur einen Screenshot machen und in aller Ruhe darüber nachdenken, um auf die Lösung zu kommen. Dank Logik. Seine Lösung kann man dann in der Console des Browsers oder im Game überprüfen. Gut fand ich, dass der Timer, meines Wissens nach, nicht manipuliert werden kann. Gerne mehr davon.

Lösungen:

#AusdruckLösung
1.[1, 4, 6, 5, 7].length5
2.null == undefinedtrue
3.[„neo“, „morpheus“, „trinity“, null, „ghost“][2]trinity
4.„abc“.split(„“)[0]a
5.Object.keys({foo: „bar“, bar: „foo“})[1]bar
6./321/.test(„123“)false
7.Math.round(0.3 + 0.4)1
8.[„foo“, „bar“, „baz“].reverse().join().slice(0,3)baz
9.[null, false, undefined].filter(Boolean)[]
10.Number(„2“) – 1 == 1true
11.(true + false) < 2 – truefalse
12.new Array(2).toString().slice(-1),
13.typeof new String(„What Am I?“)object

Wärt ihr auf alle Lösungen auf Anhieb gekommen? Viel Spaß beim Ausprobieren. Happy Coding!

Fun zum Freitag #7

Hinzugefügt am von Christoph Schade
Geschrieben in - Webdevelopment

Heute was Kniffliges für die JavaScript Nerds. Im kleinen Browser Game „Beat the Clock …with JavaScript knowledge“ geht es darum, den Output, der in der Konsole stehen würde, in ein Eingabefeld zu tippen. So wie die Anweisung in der Konsole angezeigt werden würde, wenn man den Befehl manuell, in die Konsole, die unter den Entwicklerwerkzeugen zu finden ist, eingeben würde.

Soweit so gut. Klinkt erst mal recht einfach mit ein wenig JavaScript Wissen. Der Passus ist aber, dass es einen Timer gibt. Dieser läuft naturgemäß ab. Jedoch, wenn man einen Ausdruck richtig beantwortet, wird wieder Zeit aufgefüllt. 5 Sekunden pro richtige Antwort. Die Freie Auswahl hat man auch, welchen Ausdruck beantworten möchte. Einfach drauf klicken. Tab geht leider nicht. Somit verliert man Zeit, da man die Maus benutzen muss. Ziel ist so viele Antworten wie möglich zu geben.

Ich muss zugeben, dass ich noch nicht alle Ausdrücke korrekt beantwortet habe. Somit auch nicht weiß, was Euch am Ende erwartet. Besonders viel habe ich mich auch noch nicht mit dem Spiel auseinandergesetzt. Wenn mal an einem Wochenende Zeit ist, werde ich es angehen. Ich habe da schon einige Ideen wie man das Ganze auch ohne Timer „Abarbeiten“ kann. Ich denke Ihr auch 😉

Hier nochmal der Link zum Spiel: „Beat the Clock …with JavaScript knowledge“

Lokale Entwicklung eines WordPress-Blogs. Einrichtung des lokalen Servers XAMPP + WordPress + Datenbank

Hinzugefügt am von Christoph Schade
Geschrieben in - Content Management Systeme | Webdevelopment

Ich bin mir durchaus bewusst, dass es schon eine Vielzahl von Artikeln über Google zu finden gibt. Dennoch möchte ich der Vollständigkeit wegen einen solchen Artikel auf dem Blog haben. Dieser Artikel spiegelt meine Erfahrung wieder und hat keinen Anspruch auf Vollkommenheit. Wenn Fehler gefunden werden, dann könnt Ihr mir diese gerne in die Kommentare stellen. Gleiches gilt für Vorschläge aller Art.

Weiterlesen „Lokale Entwicklung eines WordPress-Blogs. Einrichtung des lokalen Servers XAMPP + WordPress + Datenbank“

Programmieren für Kids und Interessierte

Hinzugefügt am von Christoph Schade
Geschrieben in - Allgemein | Webdevelopment
Beitragsbild Web-Development

Heute möchte ich Euch ein Projekt vorstellen, welches schon ein paar Jahre existiert. Code.org ist eine Plattform, die spielerisch an das Thema programmieren heranführt.

Auf der Startseite ist zu erkennen, dass es vier „Kategorien“ gibt. Einen Schnupperkurs, den die Macher „Hour of Code“ nennen. Welchen ich als Einstieg, sehr empfehle. Auch für Kids. Allerdings sollte man schon rudimentäres Englisch können. Auf https://code.org/learn kann zwischen zwei Tutorial wählen. Star Wars oder Minecraft. Die Tutorials werden mit einem Video eingeleitet, allerdings auf Englisch. Untertitel kann man über das Zahnrad einstellen, ganz wie auf YouTube. Der eigentliche Kurs ist größten Teils auf Deutsch.

code.org Tutorial Minecraft

Jede einzelne Übung hat ein bestimmtes Ziel, welches sich am Anfang der Übung zeigt und noch mal auf der linken Seite zu finden ist. Das Ziel erreicht man, in dem Bausteine aneinandergereiht werden und das Programm ausgeführt wird. In der ersten Übung, im Star Wars Tutorial zum Beispiel, muss man BB-8 Schrott sammeln lassen.

Das war meine Kurzvorstellung von Code.org.