chmod – Lesezugriff für alle Dateien und Unterordner

Das Ändern von Berechtigungen auf *nix Systemen ist für mich nicht immer selbsterklärend. Des öfteren stand ich schon vor dem Problem, dass ich gerne Lesezugriff auf den kompletten Inhalt eines Ordners inklusive Unterordner geben wollte. Zwar kann man das mit chmod -R 755 erledigen – dadurch wird allerdings jede einzelne Datei auch als ausführbar gekennzeichnet. Unschön!

Bei stackoverflow bin ich nun allerdings auf eine komfortable Lösung für dieses Problem gestoßen:

Mit diesem Befehl kann man den Zugriff auf sämtliche Unterverzeichnisse erlauben:

find /opt/lampp/htdocs -type d -exec chmod 755 {} \;

Und hiermit werden Leseberechtigungen für alle »normalen« Dateien erteilt:

find /opt/lampp/htdocs -type f -exec chmod 644 {} \;

Nützlich!

Veröffentlicht am


Unnötiges und Unerlässliches

Mein Beitrag zum Barcamp Fulda

Am 26. April fand sich bei Fulda’s erstem Barcamp eine bunte Mischung an Persönlichkeiten zum Ideenaustausch zusammen. Die offenen und stilvollen Räumlichkeiten der Office Factory lieferten dafür eine geradezu perfekte Bühne. Auch organisatorisch blieben wirklich keine Wünsche offen: Kaffee, Plätzchen, Essen&Trinken – alles da!

An dieser Stelle daher noch ein Mal ein großes Dankeschön an Sieglinde Gränzer vom Jagdschloss Göhrde für die Organisation und Gerhard Fröhlich für die Location.

Getreu dem Barcamp Credo »Keine Zuschauer, nur Teilnehmer« präsentierte ich einen kleinen Leitfaden, der dabei helfen soll wichtige von unwichtigen Website-Features zu trennen.

Ich hoffte mit dem ein oder anderen Punkt eine Diskussion anzuregen und das geschah dann auch. Während beim Thema Flash-Intros noch große Einigkeit herrschte, so gingen bei meiner Empfehlung, keine Content-Karusells auf der eigenen Homepage zu benutzen, die Meinungen auseinander.

Vielen Dank noch Mal an die aufmerksamen Teilnehmer – hat Spaß gemacht!

Hier die Folien vom Vortrag

Veröffentlicht am


Layouts ohne Kopfschmerzen – box-sizing: border-box

Ich weiß nicht genau woran es lag, dass ich die CSS3-Eigenschaft box-sizing so lange ignoriert hatte. Vermutlich daran, dass sie der Internet Explorer 7 nicht unterstützt und keine akzeptablen Polyfills existieren.
Wie dem auch sei, der IE7 ist nun endlich Geschichte — höchste Zeit, sich diese CSS-Eigenschaft etwas näher anzuschauen.

Kurz gesagt:
Mit box-sizing: border-box ist endlich ein leicht verständliches CSS-Box-Model verfügbar, bei dem nicht permanent auf unsemantische Hilfscontainer zurückgegriffen werden muss.

Klassisches Beispiel:
Ein Layout mit einem Hauptbereich und einer Seitenleiste. Man benutzt zwei Divs – das eine bekommt eine Breite von 75%, das andere 25%.

Soweit so gut.

Nun klebt aber der Inhalt direkt am Rand der beiden Bereiche. Also fügt man jeweils einen Innenabstand hinzu – sagen wir padding: 1em. Und da sich im klassischen CSS-Box-Model die Breite eines Elements errechnet aus

Breite des Inhalts + Innen- und Außenabstand + Rand

zerfällt das eigentlich klar definierte Layout in seine Einzelteile.

Beispiel ohne box-sizing

See the Pen Box-sizing demo (without box-sizing) by Mario Fink (@mariofink) on CodePen.

Um dieses Problem im klassischen Box-Model zu beheben, muss der Inhalt jedes Bereiches in einen Hilfscontainer gepackt werden (auch als Gutter bekannt). Wer sein HTML gerne halbwegs semantisch liebt, wird hier die Nase rümpfen.

box-sizing: border-box zur Hilfe!

Um das eigentlich erwartete Ergebnis zu erlangen, genügt es im obigen Beispiel für die beiden Inhaltscontainer box-sizing auf border-box zu setzen. Nun beziehen sich sowohl Breiten- als auch Höhenangaben auf das komplette Element – nicht nur auf den Inhaltsbereich.

Gerade bei komplexeren Layouts erspart das den ein oder anderen Knoten im Gehirn.

Beispiel mit box-sizing: border-box

See the Pen Box-sizing demo (border-box) by Mario Fink (@mariofink) on CodePen.

border-box all the things!

Für zukünftige Projekt sollte man sich an die Empfehlung von Paul Irish halten und sämtlichen HTML Elementen border-box verpassen:

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Hilft besser als jede Kopfschmerztablette – versprochen!

Links

* { Box-sizing: Border-box } FTW von Paul Irish
Can I use: CSS3 box-sizing Kompatibilitätstabelle

Veröffentlicht am


GRUNT – Zeit sparen mit JavaScript

Keine Lust ständig die gleichen langweiligen Dinge zu erledigen?

Sollte es sich um Aufgaben aus dem Bereich der Webentwicklung handeln, dann könnte Grunt Abhilfe schaffen. Damit lässt sich folgendes automatisieren:

  • CSS und JavaScript Dateien zusammenkleben und minifizieren
  • Kompilierung von LESS, SASS, CoffeeScript etc.
  • Unit Testing
  • eine Menge mehr

Installation und erste Schritte

Voraussetzung: Installation von Node.js

Grunt in der Kommandozeile installieren

npm install -g grunt-cli

Dadurch wird das Grunt Kommandozeileninterface global installiert – möglicherweise sind hierfür Admin-Rechte erforderlich (sudo bzw. unter Windows die Eingabeauffordung als Administrator ausführen)

Für dieses Beispiel richte ich ein Demoprojekt ein. Dafür einen Ordner anlegen und darin ein neues Node-Projekt initialisieren:

mkdir grunt-demo
mkdir grunt-demo/js
mkdir grunt-demo/css
cd grunt-demo
npm init

Die Abfragen nach npm-init alle mit Enter bestätigen. Dadurch wird eine initiale package.json Datei erstellt. Der nächste Befehl fügt dieser Datei eine Abhängigkeit hinzu und installiert sie automatisch:

npm install grunt --save-dev

Die grundlegende Installation vom Grunt JavaScript Task Runner ist damit abgeschlossen. Damit nun tatsächlich Aufgaben erledigt werden können benötigt man Plugins.

Plugins installieren

Eine typische Aufgabe, die sich leicht mit Grunt erledigen lässt, ist das zusammenkleben von JavaScript und CSS Dateien. Dafür muss das grunt-contrib-concat Plugin installiert werden:

npm install grunt-contrib-concat --save-dev

Fast fertig. Nun muss man Grunt nur noch mitteilen, was erledigt werden soll. Dies wird im Gruntfile.js definiert. Im Projektordner also folgende Datei erstellen:

Gruntfile.js

module.exports = function(grunt) {
  // Grunt Konfiguration:
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // Konfigurieren des concat Tasks
    concat: {
      js: {
        src: [
          // Alle JavaScript Dateien in diesem Ordner
          'js/*.js',
        ],
        // werden in dieser Datei zusammengeführt
        dest: 'scripts.js',
      },
      css: {
        src: [
          // Alle CSS Dateien in diesem Ordner
          'css/*.css',
        ],
        // werden in dieser Datei zusammengeführt
        dest: 'styles.css',
      }
    }
  });
  // Diese Plugins sollen geladen werden:
  grunt.loadNpmTasks('grunt-contrib-concat');
  // Was beim Aufruf von "grunt" passieren soll:
  grunt.registerTask('default', ['concat']);
};

Grunt ausführen

Die Vorarbeit ist erledigt.
Um Grunt nun die oben beschriebenen Aufgaben erledigen zu lassen, ist nur noch folgender Befehl auf der Kommandozeile im Projektordner auszuführen:

grunt

Viel einfacher geht’s kaum.
Nun sollte sich der Inhalt sämtlicher JavaScript bzw. CSS Dateien in den Dateien scripts.js und styles.css wiederfinden.

Und nun?

Veröffentlicht am


Barcamp Fulda vom 25.-26. April

barcampfulda_banner_1000

Durch Thomas erfuhr ich Anfang Februar davon, dass am 25. und 26. April das erste Barcamp in Fulda stattfinden soll.
Da ich selbst schon gute Erfahrungen mit dieser Art von Konferenz auf dem UXcamp Europe gemacht hatte, war ich spontan angetan und klickte während meiner Mittagspause mal schnell ein passendes Logo zusammen.

Was nun?

Hier ein paar Vorschläge:

Kurz gesagt: Man sieht sich.

Veröffentlicht am