Javascript on Ulis Notizen

jQuery in 30 Tagen lernen

Wed, 01 Feb 2012 13:46:13 +0100

Der Link

Gerade eben habe ich auf net.tutsplus.com gelesen, dass diese einen Kurs, bei dem man in 30 Tagen jQuery lernt, anbieten. Jeden Tag ein kurzes Video. Vielleicht ja interessant für den ein oder anderen Leser.

Das JavaScript-Framework "jquery" im Überblick

Tue, 18 Mar 2008 15:05:49 +1800

Ich setze bei allen Projekten jQuery als Framework für das Handling aller Javascript-Aktionen ein. Zitat Wikipedia:

jQuery ist ein freies, umfangreiches JavaScript-Framework, das mächtige Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. Zur Navigation unterstützt es große Teile von XPath und vor allem CSS-Selektoren. Hinzu kommen verschiedene Programmierhilfen für Ajax wie vereinfachtes Event-Handling und animierte Effekte.

Beispielweise unterstützt es trotz seiner kleinen Größe von nur 15kb in allen Browsern eine einfach Verarbeitung von JSON-Requests und alle Ein/Überblendungen, die ich mir wünsche. Für einen Einblick in die DOM-Selektion einfach mal durch visualjQuery.com klicken, da sieht man den Funktionsumfang am besten. Auch bei der UserInterface-verschönerung hält sich’s dank “ jQuery UI ” nicht zurück. Eine weitere sehr coole Anwendung ist Flot , ein Plotting-Plugin für jQuery.

Wem Prototype lieber gefällt, kann ja mal einen Vergleich mit jQuery 1.0 finden, jedoch werden auch in den Kommentaren einige Ergebnisse klar gestellt. So ist jQuery beispielsweise bei langen Querys schneller als Prototype und jQuery Version 1.0 war grundlegend sowieso langsamer als die aktuelle Version. Insgesamt ist Prototype deutlich umfangreicher, was sich auch in der Größe abzeichnet. jQuery kann prinzipiell das ziemlich gleiche, muss aber oft durch Plugins erweitert werden.

Ein besseres Bild kann man sich mit einem lokalen Benchmark machen, der hier gegen die jeweils aktuellen Versionen von Dojo , jQuery , MooTools und Prototype selbt durchgeführt werden kann. jQuery räumt da gut ab ;)

Eine Übersicht über viele Frameworks gibt zudem diese Seite, wo man klar eine gute Lernkurve und ein einfaches Handling bei jQuery sehen kann.

In Kürze dürften einige Beispiele, Tipps und Einführungen in jQuery von mir folgen, sofern ich Zeit finde ;)

CouchDB Implementierung in Javascript für Demos im Browser

Sun, 07 Nov 2010 21:38:03 +0700

Seit einiger Zeit beschäftige ich mit NoSQL-Datenbanken, im speziellen mit CouchDB. Gerade habe ich eine nette Idee gesehen, wie man schnell Map-Reduce erlernen kann. MU Dynamics hat einen Emulator dafür geschrieben…

This is a CouchDB emulator/visualizer written in 100% JavaScript, which implements key concepts like collation, map/reduce and incremental reduce. It also acts as a 2-minute CouchDB tutorial. No documents were harmed in this process.

Interactive CouchDB Emulator

Viel Spaß damit!

Zend Framework: Dojo Dialog dijit in Zend_Dojo

Thu, 16 Apr 2009 09:48:08 +1600

Derzeit gibt es keinen Support für das Dialog dijit von Dojo in Zend_Dojo . Matthew Weier O’Phinney (Project Lead Zend Framework) hat auf der Maillingliste einen Workaround gepostet, sofern $content schon vorher gefüllt wurde:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


 $this->dojo()->requireModule('dijit.Dialog');
$this->onLoadCaptureStart(); ?>
function() {
    var dialog = new dijit.Dialog({
        title:   "Cool dialog",
        style:   "width: 300px;",
        content: 
    });
    dialog.show();
}
onLoadCaptureEnd(); ?>

InstaCode für schöne Codefotos

Thu, 14 Feb 2013 08:31:53 +1400

Endlich wieder ein Service, den die Welt braucht! Auf der Startseite des Service “ Instacode ” gibt man den gewünschten Code ein und anschließend kann man wie bei einem berühmten Fotoservice den Screenshot des Fotos verschönern. Schlussendlich kann man dann ein schönes Foto des Code exportieren . Beispielhaft hier der code meiner node-adclient Bibliothek:

error MSB4019: The imported project "C:\Microsoft.Cpp.Default.props" was not found.

Mon, 17 Sep 2012 12:37:19 +1700

Heute hatte ich einen nervigen Fehler auf meinem Rechner. Ich wollte mit node-gyp das Paket bcrypt kompilieren, was bei mir zu folgendem Fehler führte:

C:\Project\node_modules\bcrypt\build\bcrypt_lib.vcxproj(1,646): error MSB4019: The imported project "C:\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the declaration is correct, and that the file exists on disk.

Die Lösung war einfach: Ich habe den Windows SDK 7.1 installiert und dabei vor allem die “Visual C++ compilers” mitinstalliert.

Plugin Mongoosastic für die Verbindung zwischen Mongoose ODM und Elasticsearch

Thu, 21 Jun 2012 08:13:58 +2100

Kurzhinweis: James Carr hat gestern ein Plugin namens Mongoosastic für Mongoose ODM veröffentlicht , welches eine Verbindung eines Mongoose Models zu Elasticsearch erlaubt. Es fügt eine neue Methode “search” in ein Model ein, welche im Hintergrund auf Elasticsearch zugreift. Die Indexierung des Models erfolgt parallel im Hintergrund. Bei Bedarf kann man dann dann auch nur bestimmte Felder indexieren lassen und über ein Feature namens “Hydration” die Daten mit Daten aus der MongoDB vervollständigen lassen. Einfach die Doku lesen für weitere Infos.

Mongoose ODM 2.7.0 ist erschienen

Thu, 21 Jun 2012 06:53:27 +2100

Vor ein paar Tagen wurde Mongoose 2.7.0 freigegeben. Es wird von den Machern als das letzte Release von 3.0 gesehen. In diesem Release soll ein Cleanup der API erfolgen, damit diese näher an der originalen MongoDB-API ist. Daher wird jetzt als Vorbereitung in 2.7.0 schon aufgeräumt. Hier die Übersicht der veralteten (Spalte “Deprecated”) Methoden und welche Alternativen es gibt (Spalte “Alternative”):

Deprecated                    Alternative
Query#$or                     Query#or
Query#$nor                    Query#nor
Query#$gt                     Query#gt
Query#$gte                    Query#gte
Query#$lt                     Query#lt
Query#$lte                    Query#lte
Query#$in                     Query#in
Query#$nin                    Query#nin
Query#$ne                     Query#ne
Query#$all                    Query#all
Query#$regex                  Query#regex
Query#$size                   Query#size
Query#$maxDistance            Query#maxDistance
Query#$within                 Query#within
Query#$box                    Query#box
Query#$center                 Query#center
Query#$centerSphere           Query#centerSphere
Query#$slice                  Query#slice
Query#run                     Query#exec
Query#notEqualTo              Query#notEqualTo
Query#wherein                 Query#within
Query#fields                  Query#select
Query#asc                     Query#sort
Query#desc                    Query#sort
Query#only                    Query#select
Query#exclude                 Query#select
Query#each                    Query#stream
MongooseArray#$push           MongooseArray#push
MongooseArray#$pull           MongooseArray#pull
MongooseArray#$pushAll        MongooseArray#push
MongooseArray#pushAll         MongooseArray#push
MongooseArray#$pullAll        MongooseArray#pull
MongooseArray#pullAll         MongooseArray#pull
MongooseArray#$unshift        MongooseArray#unshift
MongooseArray#$addToSet       MongooseArray#addToSet
Document#commit               MongooseArray#markModified
Mongoose#connectSet           MongooseArray#connect
Mongoose#createSetConnection  MongooseArray#createConnection
MongooseNumber#$inc           removed
MongooseNumber#increment      removed
MongooseNumber#decrement      removed

Die gesamte Diskussion zum Release 2.7.0 findet sich hier .

Snippet: Anzeige aller Funktionen eines Javascript Objekts

Wed, 21 Mar 2012 09:18:14 +2100

Gerade eben habe ich auf Teufel komm raus nicht verstanden, warum eine Funktion meines Javascript-Objekts nicht korrekt funktionieren mag. Daraufhin habe ich eine möglichkeit gesucht, wie ich mir die Funktionen des Objektes “obj” ausgeben kann. Hier wurde ich fündig und so sieht das Snippet aus:

1
2
3
4
5
6
7


var methods = [];
for (var m in obj) {
    if (typeof obj[m] == "function" && obj.hasOwnProperty(m)) {
        methods.push(m);
    }
}
console.log(methods.join(","));

Und das Snippet erklärte mir es dann auch. Meine Funktion hatte im Namen am Ende noch ein “s”, welches ich nicht eingefügt hatte ;) Dankbarerweise nur ein Tippfehler.

NodeJS: Twitter Bootstrap alerts in ExpressJS einbinden mit express-messages-bootstrap

Fri, 16 Mar 2012 13:13:01 +1600

Momentan experimentiere ich mit NodeJS herum und teste dabei wie man am schnellsten eine schöne Seite produziert. Ich bin dabei auf Twitter Bootstrap gestoßen, was eine Kombination von CSS-Eigenschaften und Javascripts darstellt, welche es erlauben schnell ein Layout zu erstellen. Zudem bietet dieses Framework auch vorgefertigte Alerts , die dem User Nachrichten deutlich anzeigen können:

Gerne wollte ich dies nun in dem MVC-Framework ExpressJS verwenden, sodass ich daraus direkt die Alerts erstellen kann. Hierzu habe ich express-messages-bootstrap (NPM: express-messages-bootstrap) entdeckt. Seit gestern kann dieses auch mit Twitter bootstrap 2.0 umgehen, welches vor kurzem released wurde. Mit einem pull request von mir habe ich zudem angeregt, mehrere flash messages voneinander sauber zu trennen (siehe oben). Mal sehen ob dieser angenommen wird.

Wenn man das nun verwenden will, so muss man es zunächst per npm installieren:

1

npm install express-messages

Und anschließend in der Express-Configuration einbinden:

1

app.dynamicHelpers({ messages: require('express-messages-bootstrap') });

Nun muss man es noch im Template einbinden:

EJS:

1

<%- messages() %>

Jade:

1

!= messages()

Alerts erstellt man im Controller wie folgt:

1
2
3
4


req.flash('error', 'Dies ist ein Test mit Typ error');
req.flash('info', 'Dies ist ein Test mit Typ info');
req.flash('warning', 'Dies ist ein Test mit Typ warning');
req.flash('success', 'Dies ist ein Test mit Typ success');`

Nodemon - Automatischer Restart von node.js bei Dateiänderungen

Fri, 20 Jan 2012 15:59:46 +2000

Ich beschäftige mich momentan ein wenig mit node.js . Was mich als PHP-Developer am meisten gestört hat, war dass ich bei jeder Dateiänderung node.js durchstarten muss, um das Ergebnis meiner Änderung zu sehen. Doch das Problem habe wohl nicht nur ich, soeben habe ich “ nodemon ” gefunden, welcher eine Überwachung des aktuellen Verzeichnisses vornimmt und bei Bedarf node neu startet. Das funktioniert übrigens aber nicht auf Windows. Installiert wird er so per npm :

1

npm install nodemon

oder global:

1

npm -g install nodemon

Sobald dieser installiert ist, muss man nur statt dem Aufruf:

1

node server.js

einfach:

1

nodemon server.js

aufrufen. Das sieht dann so auf der Kommandozeile aus:

Weitere Funktionalitäten wie CoffeeScript -Überwachung oder Ignore-Patterns sind auf der GitHub-Seite von nodemon erläutert .

jQuery Tablesorter für das deutsche Datumsformat dd.mm.yyyy

Tue, 05 May 2009 19:02:19 +0500

Soeben habe ich für einen Kumpel einen Parser für den jQuery Tablesorter geschrieben, welcher das deutsche Datumsformat im Format dd.mm.yyyy verarbeiten kann. Der Parser an sich ist relativ einfach, da man einfach das Datum in einen Timestamp umwandelt und dann sortiert.

Erstmal nur der Sorter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


$.tablesorter.addParser({
  id: 'germandate',
  is: function(s) {
          return false;
  },
  format: function(s) {
    var a = s.split('.');
    a[1] = a[1].replace(/^[0]+/g,"");
    return new Date(a.reverse().join("/")).getTime();
  },
  type: 'numeric'
});

Das komplette Beispiel sieht dann so aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61


<html>
    <head>
        <script type="text/javascript" src="jquery-latest.js"></script>
        <script type="text/javascript" src="jquery.tablesorter.js"></script>
        <script type="text/javascript">
      $(document).ready(function(){
          $.tablesorter.addParser({
              id: 'germandate',
              is: function(s) {
                      return false;
              },
              format: function(s) {
                var a = s.split('.');
                a[1] = a[1].replace(/^[0]+/g,"");
                return new Date(a.reverse().join("/")).getTime();
              },
              type: 'numeric'
            });
        $("#example").tablesorter({
                headers: { 1: { sorter:'germandate' }}
        });
      });
        </script>
  </head>
  <body>
        <table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
        <thead>
            <tr>
                <th class="header">Event</th>
                <th class="header">Datum</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>Event 1</td>
            <td>06.06.2000</td>
        </tr>
        <tr>
            <td>Event 2</td>
            <td>06.06.1992</td>
        </tr>
        <tr>
            <td>Event 3</td>
            <td>05.09.2009</td>
        </tr>
        <tr>
            <td>Event 4</td>
            <td>01.04.2002</td>
        </tr>
        <tr>
            <td>Event 5</td>
            <td>20.05.2014</td>
        </tr>
        <tr>
            <td>Event 6</td>
            <td>30.01.2001</td>
        </tr>
        </tbody>
        </table>
    </body>
</html>

Und das Beispiel nochmal gezeigt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


<script type="text/javascript" src="https://wolf-u.li/upload/blog/2963/jquery.tablesorter.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery.tablesorter.addParser({
      id: 'germandate',
      is: function(s) {
              return false;
      },
      format: function(s) {
        var a = s.split('.');
        a[1] = a[1].replace(/^[0]+/g,"");
        return new Date(a.reverse().join("/")).getTime();
      },
      type: 'numeric'
    });
  jQuery("#example").tablesorter({
          headers: { 1: { sorter:'germandate' }}
  });
});
</script>
<table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
    <tr>
        <th class="header">Event</th>
        <th class="header">Datum</th>
    </tr>
</thead>
<tbody>
<tr>
    <td width="150">Event 1</td>
    <td>06.06.2000</td>
</tr>
<tr>
    <td>Event 2</td>
    <td>06.06.1992</td>
</tr>
<tr>
    <td>Event 3</td>
    <td>05.09.2009</td>
</tr>
<tr>
    <td>Event 4</td>
    <td>01.04.2002</td>
</tr>
<tr>
    <td>Event 5</td>
    <td>20.05.2014</td>
</tr>
<tr>
    <td>Event 6</td>
    <td>30.01.2001</td>
</tr>
</tbody>
</table>

So einfach is dat :)

Minify / Minimize Javascript (JS) und Cascading Stylesheets (CSS) online durchführen

Sun, 05 Oct 2008 10:31:16 +0500

Heute habe ich meine Kommentarfelder ein wenig aufgepeppt und ein Javascript, welches ein paar HTML-Tags einfügen kann eingefügt. Blöderweise hat dieses nochmal 6kb mehr zu meiner eh schon relativ großen Seite hinzugefügt. Ich habe mich daher entschieden, dieses JS ein wenig zu komprimieren. Der Fachbegriff dafür heißt “Minify”, wofür die englische Wikipedia sogar eine eigne Seite hat, von der auch das folgende Zitat stammt:

Minify, in computer programming languages, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments and sometimes block delimiters; which are used to add readability to the code, but are not required for it to execute. Minified source code is specially useful for interpreted languages deployed and transmitted on the Internet (such as JavaScript), because it reduces the amount of data that needs to be transferred.

Es gibt zwar viele Tools dafür, aber eigentlich wollte ich mir für ein JS nicht gleich ein Tool herunterladen und installieren müssen. Auf meiner Suche bin ich auf eine Webseite gestoßen, die das dankbarerweise anbietet. Auf jscompress.com werden zwei Möglichkeiten angeboten: JSMin , was nur überflüssige Leerzeichen, Linkbreaks usw. entfernt und Packer , welcher das ganze noch mehr komprimiert. So sind aus 6kb mittels JSMin nur noch 5kb geworden und mittels des Packers dann 3kb. Zu beachten dabei ist, dass der Packer etwas mehr Rechenzeit auf der Clientseite braucht, da sich das Script erst noch “entpacken” muss ;)

jQuery bekommt große Unterstützung durch Microsoft und Nokia

Mon, 29 Sep 2008 10:23:33 +2900

Ich bin seit Ewigkeiten ein großer Fan der Javascript-Bibliothek jQuery und habe auch schon einige Beiträge darüber verfasst. Gerade lese ich bei golem.de , dass diese Bibliothek nun große Unterstützer in Microsoft und Nokia gefunden haben. Die beiden Firmen wollen jQuery aktiv unterstützen und vorantreiben (und natürlich auch komplett in ihren Browsern unterstützen). Nokia will seine Applikationen, also z.B. die zur Kartendarstellung, auf jQuery umstellen, Microsoft wird das VisualStudio und ASP.NET mit jQuery verbundlen. Momentan setzen diese schon Firmen wie Google, Intel, IBM, Intuit und Reuters ein und wird bei Software wie Wordpress (z.B. dieses Blog!) mitgeliefert. Sehr coole Neuigkeiten, ich bin mal gespannt!