Codewars – so macht Fortbildung Spaß!

Geschrieben: von Matthias Kleine

Eventuell habt ihr schon einmal von Codewars gehört?! Dabei handelt es sich um eine Plattform, auf welcher andere Entwickler Aufgaben (Katas) in Textform stellen können, welche dann gelöst werden sollen. Dabei ist natürlich Kreativität gefragt. Für jede gelöste Aufgabe bekommt man Punkte und erhöht sein Level. Die einzelnen Aufgaben sind in verschiedene Schwierigkeitsgrade gegliedert und man bekommt je nach Komplexität unterschiedlich viele Punkte.

Klingt erstmal simpel und langweilig – aber macht unglaublich viel Spaß! Die Challenge besteht weniger darin, die einzelnen Aufgaben einfach nur zu lösen. Viel mehr will man diese möglichst kurz und intelligent lösen. Nachdem man eine Aufgabe gelöst hat, bekommt man die Lösungen der anderen zu sehen. Hier gibt es schon gewaltige Unterschiede in der Länge des Codes.

Hier ist für mich auch der größte Lerneffekt zu verzeichnen. Man hat sich eine Weile mit einem Problem beschäftigt und ist zu einer Lösung gekommen. Aber ob das nun gut und schlau gemacht ist? Weiß man normalerweise nicht. Bei Codewars beschäftige ich mich dann länger mit den Ansätzen von anderen Entwicklern und lerne so, viel schnelleren und performanteren Code zu schreiben. Weiterlesen…

Kategorien: Development, JavaScript, Sprachen, Web

AngularJS macht Lust auf mehr

Geschrieben: von Matthias Kleine

Das Problem kennt jeder: Man hört von einer neuen Technologie oder einem neuen Framework, und möchte sich damit mal beschäftigen, macht es aber am Ende eigentlich nicht. Oder man macht es nur so Oberflächlich, dass man den Mehrwert für sich nicht so richtig erkennt. So ging es mir mit AngularJS. Es steht schon so lange auf meiner ToDo-Liste, dass Thema einmal genauer anzuschauen, aber erst vor kurzem habe ich mir wirklich Zeit dafür genommen.

Und was ist das Ergebnis? Ich ärgere mich, dass ich das nicht schon viel eher gemacht habe! Dabei habe ich mich schon häufig gefragt, wie manche Web-Apps gebaut wurden. Oder viel mehr: Wie behalten die Entwickler den Überblick in so riesigen UIs? Und ich glaube, dass ich für mich genau diese Antwort in AngularJS gefunden habe! Weiterlesen…

Kategorien: Development, JavaScript, Tools, Web

JavaScript: var vs. let

Geschrieben: von Matthias Kleine

Ich muss gestehen, dass ich bis heute das Schlüsselwort let unter JavaScript noch nie gehört habe. Wie ich jetzt dazu komme? Ich lerne gerade ein wenig Swift und dort gibt es das Schlüsselwort auch – verhält sich aber komplett anders. Ich bin nur über die JavaScript-Lösung gestolpert, als ich Google danach bemüht hatte.

Aber nun zum eigentlichen Thema: Wie unterscheidet sich var von let? Mit beiden Schlüsselworten kann man neue Variablen deklarieren. Weiterlesen…

Kategorien: Development, JavaScript

Ghost unter Mac OS X installieren

Geschrieben: von Matthias Kleine

Ghost ist aktuell in aller Munde. So habe auch ich mir vorgenommen, mir das neue Blog-System mal etwas genauer anzuschauen. Gerade in diesem Moment steht der Download-Zähler immerhin schon auf 127.586. Das ist jedenfalls für mich schon Grund genug, mir einmal eine Testversion von Ghost auf Mac OS X lokal zu installieren. Wie das geht, möchte ich in diesem Beitrag einmal kurz zusammenfassen.

Wie schon in so vielen Beiträgen erwähnt, kann ich nur dazu raten brew zu installieren. Dabei handelt es sich um einen Paket-Manager für Mac OS X, welcher die Installation von neuer Software wirklich super einfach gestaltet. Ich habe kaum Pakete gefunden, welche nicht über brew verfügbar sind (momentan fällt mir sogar nichtmal ein Beispiel ein).

Die Installation stoßen wir also ganz einfach mit folgendem Befehl an:

brew install node

1	brew install node

Sobald man sich auf ghost.org registriert hat, kann man die Quellen herunterladen. Nachdem diese entpackt sind, findet man die Datei config.example.js. Diese wird einfach dupliziert und config.js genannt.

cp config.example.js config.js

1	cp config.example.js config.js

In dieser Datei ändern wir die Datenbankkonfiguration auf mySQL. Ich nutze mySQL einfach, weil ich lokal MAMP installiert habe – ihr könnt natürlich auch jede andere Datenbank nutzen. Per phpMyAdmin lege ich eine neue Datenbank namens „ghost“ an. Die Konfiguration wird dann wie folgt angepasst:

database: {
	client: 'mysql',
	connection: {
		host: '127.0.0.1',
		user: 'root',
		password: 'root',
		database: 'ghost',
		charset: 'utf8'
	},
	debug: false
},

1

2

3

4

5

6

7

8

9

10

11

database: {

client: 'mysql',

connection: {

host: '127.0.0.1',

user: 'root',

password: 'root',

database: 'ghost',

charset: 'utf8'

},

debug: false

},

Damit mySQL auch lauffähig ist, wird das nötige Paket über npm installiert:

npm install mysql

1	npm install mysql

Danach können wir (im ghost-Verzeichnis) folgenden Befehl ausführen, um alle Abhängigkeiten zu installieren:

npm install --production

1	npm install --production

Nun können wir die Instanz von Ghost auch schon starten:

node index.js

1	node index.js

Die Ausgabe sollte dann in etwas so aussehen:

Ghost is running in development... 
Listening on 127.0.0.1:2368 
Url configured as: http://my-ghost-blog.com

1

2

3

Ghost is running in development...

Listening on 127.0.0.1:2368

Url configured as: http://my-ghost-blog.com

Gibt man nun die IP + Port in den persönlichen Lieblingsbrowser ein, wird man auch schon begrüßt. Das war ja wirklich einfach! Schaut man sich die Datenbank dann an, sieht man auch, dass einige Tabellen erstellt wurden – der Datenbankzugriff funktioniert also super.

Folgt man dem Hinweis, dass man doch bitte /ghost/ aufrufen möchte, dann hat man die Chance einen Admin-Account anzulegen. Nachdem man das getan hat, kann man auch direkt mit dem Schreiben starten. Da ich lokal Postfix konfiguriert habe, bekomme ich auch gleich eine Begrüßungsmail.

Und schon haben wir eine funktionierende Installation von Ghost. Tat doch gar nicht weh, oder? Ich werde mich jedenfalls in Zukunft etwas näher mit node.js und Ghost auseinander setzen. Ich denke, Ghost steht noch ganz am Anfang.

Kategorien: Development, JavaScript, Mac OS X, Tools, Web

jQuery: One-Page Layouts mit OpenSource-PlugIns

Geschrieben: von Matthias Kleine

Anfangs war ich ja etwas skeptisch was OnePage-Layouts angeht. Irgendwie fiel einigen Unternehmen der Start aber auch extrem schwer. So hat man genügend Seiten gesehen, die wirklich absolut schlecht gemacht waren. Mittlerweile lösen manche Landing-Pages aber auch echte WOW-Effekte in mir aus. Unterstrichen von genialen Fotos und tollen Animationen und Grafiken, bekommt man direkt einen positiven Eindruck und hat einfach Lust weiter zu scrollen.

Der aktuelle Trend für OnePages ist allerdings das sogenannte „parallax scrolling“ – das bedeutet, dass sich unterschiedliche Ebenen beim scrollen unterschiedlich schnell bewegen. So entsteht viel mehr Tiefe auf der Seite und alles wirkt einfach lebendiger.

Wer jetzt noch nicht verstanden hat was ich genau meine, der sollte sich durch folgende Links klicken:

Also, was braucht man denn nun um solch ein Layout zu bauen? Im Web existieren verschiedene Frameworks, welche einem alle einen relativ guten Start geben. Ich habe mich vom Bauchgefühl her aber bisher nur auf „cool kitten“ fixiert und bin insgesamt mit den Ergebnissen sehr zufrieden. Bisher konnte ich alles realisieren was ich mir vorgenommen habe. Außerdem bietet es einen einfachen Start in die Materie und man landet relativ schnell da, wo man hin möchte.

So habe ich als erstes eine Landing-Page für die Neugeborenen-Shootings meiner Freundin ins Leben gerufen, um mich mit der Materie etwas genauer auseinander zu setzen. Und ich muss sagen, dass ich mit den Ergebnissen sehr zufrieden bin. Leider unterstützen Mobilgeräte die Funktion noch nicht wirklich, und so muss man die Seite nebenbei nochmals für Mobilgeräte optimieren. Bisher habe ich auch noch keine Lösung gefunden, um diesen Effekt auf Mobilgeräten zu realisieren.

Kategorien: CSS, Design, Development, JavaScript, Ressourcen, Web

Frames vergessen Namen nach AJAX-Request

Geschrieben: von Matthias Kleine

In einem älteren Projekt mit Framesets hatte ich ein seltsames Problem. Die Seite ist in zwei bereiche unterteilt – Navigation/Menu und einen Content-Bereich. Die Links im Menu wurden mit entsprechenden target-Attributen versehen um anzugeben, dass diese in dem anderen Frame geöffnet werden sollen. Das hat auch alles sehr gut funktioniert – solange man keinen Ajax-Request im Content-Frame ausgelöst hat. Scheinbar verstehen sich die beiden Technologien nicht so richtig.

Das komische daran ist, dass es im Firefox seit Ewigkeiten korrekt funktioniert hat – nur Chrome ging nicht so richtig. Seit den neueren Firefox-Versionen trat dann das selbe Problem auf. Nach einem Ajax-Call sind die Links im Menu in neuen Tabs geöffnet worden anstatt direkt in dem anderen Frame.

Ich habe viel ausprobiert um das Problem zu lösen – das erneute setzen des Frame-Namens nach jedem Request (per JavaScript) hat das Problem schließlich gelöst.

self.name = "content";

1	self.name = "content";

Am besten man nutzt einfach keine Frames mehr und geht solchen Problemen direkt aus dem Weg.

Kategorien: Development, JavaScript, Kurztipps, Sprachen, Web

Alternative: jQuery von Google hosten lassen

Geschrieben: von Matthias Kleine

Einleitung

Ich habe mich schon öfter gefragt, welche Vorteile es wohl hat, wenn man jQuery von Google hosten lässt statt sich einfach eine Version zu laden und diese einzubinden. An Traffic-Ersparnissen oder gar Speicherplatz kann es ja nun wirklich nicht liegen. In diesem Artikel möchte ich Vor- und Nachteile beleuchten.

<script type="text/javascript" src="/jQuery.min.js"></script>

1	<script type="text/javascript" src="/jQuery.min.js"></script>

Ja, auch ich habe bisher meistens (eigentlich immer) eine Kopie von jQuery geladen und auf dem eigenen Server deponiert. Aber warum sollte man die entsprechenden Daten nicht aus dem CDN (Content Delivery Network) von Google beziehen? Google ist schließlich für schnelle Server und hohe Erreichbarkeit bekannt. Einen Ausfall der Server kann man also beruhigt ausschließen denke ich. Bei mir lag es immer an einem anderen Grund: Ich habe einfach kein gutes Gefühl dabei, wenn essentielle Teile meiner Webseiten irgendwo im Internet verstreut liegen. Außerdem kann ich die Webseite dann nicht offline weiterentwickeln (ok, das ist wirklich etwas konstruiert).

Als letzter und wichtigster Punkt: Das Google CDN ist kostenlos und für jeden ohne Anmeldungen oder Restriktionen verfügbar! Weiterlesen…

Kategorien: Development, JavaScript, Sprachen, Web

Kategorie-Archiv: JavaScript

Codewars – so macht Fortbildung Spaß!

AngularJS macht Lust auf mehr

JavaScript: var vs. let

Ghost unter Mac OS X installieren

jQuery: One-Page Layouts mit OpenSource-PlugIns

Frames vergessen Namen nach AJAX-Request

Alternative: jQuery von Google hosten lassen

Einleitung

Über mich

Neue Beiträge

Archiv