Desktop Apps erstellen mit Node-Webkit

Node-Webkit ist ein Framework (oder eher eine App) mit der man Desktop-Applikationen in HTML und Javascript erstellen kann.
Ja, es gibt einige dieser Frameworks, aber Node-Webkit bietet den entscheidenden Vorteil, dass es ganz nativ NodeJS in den Dateien ausführen kann. Man kann also sogar ein Client/Server-Konstrukt für Multi-Clients bauen, wenn man kreativ ist.

Beim CSS und HTML kann man getrost auf die aktuellen Standards setzen und muss sich in der kompilieren Form keine Sorgen machen, dass da was nicht kompatibel wäre.
Mit Flexbox-Grid kann man wunderbar eine Full-Window-UI umsetzen.

Das Repo wird regelmäßig geupdated, die App weiterentwickelt und der Entwickler reagiert auch sehr schnell auf Anfragen oder Probleme.

Für Grunt-User gibt es auch einen entsprechenden Build-Task

Artikel miteinander verknüpfen in modx

Beziehungen in modx

modx ist sehr flexibel, aber leider an einigen Stellen auch sehr schlecht dokumentiert. Wer nicht gerade Lust und Zeit hat, hier in den APIs zu graben, oder zig Forenbeiträge zu bemühen, der hat in der Regel Pech gehabt. Oft scheitert es dabei an ganz alltäglichen Dingen, wie dem Verknüpfen von mehreren Artikeln.
Ich selbst habe ein wenig testen und suchen müssen, um eine zufriedenstellende Lösung zu finden. Zufriedenstellend ist es für mich dann, wenn ein Redakteur hinterher keine wilden Zeichenfolgen tippen muss, sondern bequem und einfach auswählen kann. Ich brauchte die Funktion, um individuelle Inhaltsboxen in der Sidebar zu füllen, habe aber der Übersichtlichkeit halber hier eine einfachere Verknüpfung gewählt.

Weiterlesen...

HTML5 - Schnellstarter

Quickstart HTML5

Quickstart-Templates erleichtern die Arbeit eines Webdesigners oftmals ungemein. Damit sich nicht alle doppelt und dreifach die Arbeit machen müssen, stelle ich euch meine HTML5-Lösung hier kostenlos zum Download zur Verfügung

Weiterlesen...

Look ma, no graphics!

neues HTML5-Design

Kennt ihr folgende Situation?

Ihr habt etwas wunderbares fertig gestellt, genügend Schweiß und harte Detailarbeit hineingesteckt und dann – ganz plötzlich – habt ihr auf einmal einen Ansatz, der euch um so vieles besser gefällt…

Weiterlesen...

Barrierefreie Webseiten beginnen im Kopf

Navigationsleiste im Opera

Leider sieht man sie nur selten bis nie: die mit HTML4 eingeführten Links im Kopfbereich einer Seite. Ich meine damit nicht etwa die Skip-Links, die man ja meist wunderschön durch ein unsichtbares »div« versteckt, sondern die Relationslinks im <head>-Bereich einer Seite.

Weiterlesen...

Zen Coding für besseres Karma

Hinter dem Zen Coding verbirgt sich nicht etwa eine besonders meditative Art des Quelltextes, sondern vielmehr ein Standard für das schnelle erstellen von Quelltexten.
So wird aus div#content.foo>p*3 sehr schnell


<div id="content" class="foo">
    <p></p>
    <p></p>
    <p></p>
</div>

Das Plugin gibt es für Coda, Textmate, Espresso und andere (das Plugin für Espresso ist im TEA enthalten).

mileandra 2.0

mileandra 2.0
mileandra 2.0

Im Moment wird gerade ganz viel gebaut hier und so einiges habe ich dabei auch wieder verworfen. Ich habe lange Zeit überlegt, wie ich diese Seite in Zukunft strukturiere und bin zu dem Entschluss gekommen, dass es zwei Blogs geben wird. Zum einen den »Weblog« und zum anderen den privaten »Sideblog« oder wie auch immer ich ihn nennen werde. Dieser bekommt dann ein eigenes Design und eine eigene Subdomain.

In der Zwischenzeit habe ich ein nettes neues Design für diesen Blog entworfen, möchte es aber erst hochladen wenn alles so weit eingerichtet und überarbeitet ist. Da die neue Seite wieder mit Textpattern laufen wird, habe ich vorerst auch wieder umgestellt — auch auf das alte Design. Wordpress ist ein schönes System, aber leider sehr unflexibel. In Textpattern kann ich alles nach meinen Wünschen anpassen und wenn nicht, dann ist schnell ein entsprechendes Plugin geschrieben.

Bis es so weit ist, wird es hier wohl erst einmal etwas ruhiger werden, damit ich hinterher nicht mehr so sehr viel importieren muss.

Eclipse für die Webentwicklung

Für diejenigen, die Eclipse unter anderem für die Webentwicklung nutzen möchten, gibt es nun Easy Eclipse for LAMP, das bereits so ziemlich alle benötigten Plugins mitbringt.
Alternativ kann man sich natürlich auch durch den Plugin-Dschungel wühlen und alles benötigte selbst installieren (z. B. wenn man nur das PHP-Plugin benötigt).
Ein paar nette und nützliche Plugins haben bisher leider noch keinen Weg in die Distribution gefunden:

Clay

ein grafischer Datenbankdesigner, der dann vom fertigen Diagramm auch SQL-Dumps erstellt.
Ausdrucken des Diagramms geht leider nur in der Pro-Version.
Für den Remote-Zugriff muss man die entsprechenden jdbc-Treiber installiert haben.

Quantum DB

für mich unverzichtbar! Ein SQL-Admin für verschiedenste Datenbanken, der auch über einen Query-Browser verfügt und die jeweils letzten Queries zum späteren Benutzen speichert.
Die jeweiligen jdbc-Treiber für die Datenbank müssen jedoch installiert sein.

QuickRex

Reguläre Ausdrücke testen, speichern und wieder verwenden. Für das Testen kann entweder ein Text eingegeben oder geladen werden (auch Dateien).
Mit dabei ist eine Bibliothek mit häufig genutzten Ausdrücken (z. B. Auffinden von HTML-Tags).

Transparenz für alle!

Mit der CSS-Eigenschaft filter klappt’s im IE schon lange mit der Transparenz, Mozilla hatte dafr die eigene Eigenschaft -moz-opacity. Mit CSS3 kommt nun noch opacity hinzu, was bereits von Gecko- und KHTML-basierten Browsern (Konqueror, Safari) unterstützt wird.
Übrig bleibt da nur der Opera, der wohl erst mit den nächsten Versionen Transparenz von Objekten unterstützen wird. Hier bleibt dann nur der Umweg über eine Browserweiche und ein entsprechendes PNG für den Opera—vielleicht nicht der schönste Weg, aber immerhin funktioniert es. Auf der Strecke bleibt man dann nur mit Browser-Dinosauriern wie Netscape 4, auf die man aber mittlerweile wohl nicht mehr unbedingt Rücksicht nehmen muss.

Beispiel


Das Original-Bild

mit 50% Transparenz und Browserweiche für den Opera

Im “Live-Betrieb” sollte man natürlich nicht unbedingt auf Inline-Styles zurückgreifen.
Um eine Deckkraft von 50% zu erreichen, wurden hier gleich 3 CSS-Eigenschaften angegeben, um auch alle unterstützenden Browser abdecken zu können:

  • opacity: .5 nimmt eine Dezimalzahl für die Deckkraft entgegen
  • -moz-opacity: .5 deckt die älteren Gecko-Browser ab
  • filter: alpha(opacity=50) ist nur für den IE gedacht

Die Mini-Browserweiche gilt nur für den Opera und liefert diesem ein entsprechendes PNG mit 50% Transparenz.

Der div-Container um das Bild muss leider sein, da einige Browser Probleme haben, wenn es sich bei dem transparenten Element nicht um einen Listenpunkt oder ein div handelt.
Das Ganze funktioniert natürlich auch mit Hintergrundfarben und Text. Bei letzterem hat man natürlich mit dem Opera ein Problem bei längeren Texten.

Firebug für schnellere Web-Ergebnisse

Firebug ist eine Extension für Firefox, die sich sehen lassen kann.
Die Erweiterung bietet nicht nur die Möglichkeit, Quelltext (vor allem einzelner Elemente) schnell zu analysieren, sondern auch eine Console, mit der man Fehler im HTML, XML, CSS und Javascript direkt angezeigt bekommt.
Im „Inspektionsmodus“ bekommt man sogar direkt den Quelltext eines Elementes angezeigt, sobald man mit der Maus über das Element „hovert“. Umgekehrt wird direkt das Element zum Quelltext durch einen Rahmen hervorgehoben.
firebug
In Verbindung mit der Web Developer­Toolbar ist man dann wohl bestens für die nächste Seite gerüstet ;)