JavaScript: Bibliotheken und Frameworks

Aus dem Hause empfohlen, JS Bibliotheken mit Grundfunktionen zum Weiterentwickeln eigener Scripte:

  1. underscore.js
  2. Lodash

Alternativen:

  1. backbone.js
  2. jquery (Da es sehr umfangreich ist, wurde es vom Fachmann/Profi erst einmal nicht empfohlen. Jquery ist aber weit verbreitet und schon fast ein Standard für jeder Website, was dazu führte dass mittlerweile viele Plugins dafür vorhanden sind.)

Weiterführender Artikel:
Die beliebtesten JavaScript-Frameworks und -Bibliotheken

Eine eigene Icon Schrift generieren mit Node

Der icon-font-generator macht es möglich. Das kleine Programm ist in sekundenschnelle installiert und ebenso schnell ausführbar. Man gibt nur einen Ordner mit SVG-Dateien und einen Ausgabe-Ordner an und der Rest passiert automatisch.

icon-font-generator my-icons/*.svg -o icon-dist

Das Programm erzeugt:

  • eine CSS Datei
  • eine HTML Datei mit einer übersichtlichen namentlichen und bildlichen Darstellung der Icons
  • json File
  • svg,eot,ttf,woff Font

Im Zusammenspiel mit Node.js können Sie Ihre SVG-Icon-Dateien zu einer flexiblen Webfont zusammenfassen, um schließlich die Vorteile einer Webfont zu nutzen:

NPM Icon Font Generator unter Windows mit Node.js Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
NPM Icon Font Generator unter Windows mit Node.js
Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
  1. eine Webfont kann über CSS individuell angepasst werden
    1. Schrift/Icon-Größe
    2. Farbe
    3. Schatten
    4. Transparenz
  2. Schriftart wird einmal zentral eingebunden und kann dann im ganzen Projekt über Klassen eingesetzt werden
  3. Schrift kann einfach verschickt werden
  4. ist übersichtlich

 

Wie die Icons bestenfalls aufgebaut sein sollten ist hier beschrieben, inklusive einer Alternative für die Generierung (habe ich selbst nicht getestet, da ich lieber auf Internet-unabhängige, lokale Lösungen zurückgreife) :

Create an Icon Font Using Illustrator

Schriftzeichen-Übersicht (CharMap) im Browser laden und betrachten

Über die Node.js CharMap-App von Mathew Kurian kann man bereits heruntergeladene Schriften in den Browser laden und sich die Zeichen-Übersicht anzeigen lassen, nützlich wenn man keine Rechte zu Schriften-Installation auf dem Rechner hat oder die Schriften bewusst nicht installieren möchte.

Wie richtet man die CharMap ein?

  1. Code herunterladen https://github.com/bluejamesbond/CharacterMap
  2. Node.js installieren
  3. optional git bash commandline-Tool installieren
  4. In den Projekt-Ordner mit der  package.json file navigieren
  5. npm install  mit demCommandline-Tool im Projektordner ausführen um alle „project dependencies“ zu installieren
  6. mit „node app.js“ die App im local host starten

Ordnerstruktur ausgeben (Windows)

Manchmal ist es hilfreich um Projekte besser schätzen zu können, wenn man eine Liste mit Ordnern, Unterordnen und Dateilisten vorliegen hat.

Unter Windows kann man sich mit dem Kammando-Tool eine Datei mit entsprechender Ordner-Struktur schreiben lassen:

Tree view of a directory/folder in Windows? | stackoverflow

Ordner markieren, von dem man Ordnerstruktur ausgeben haben möchte.
Shift-Taste drücken, rechte Maustaste gedrückt halten und im Menü „Open command window here“ anklicken:

da sollte dann eo etwas stehen:
c:\ordner\unterordner\unterordner\unterordner>

dahinter das eingeben:

tree /f /a > tree.txt

mit Enter Befehl bestätigen.
Es wird nun eine „tree.txt“ im gleichen Ordner angelegt, die sich mit einem beliebigen einfachen Text-Editor (z.B. der „Editor“ von Windows) öffnen lässt.

Workflow CSS mit Compass (Windows 10)

  1. Googel: „ruby windows installer“
  2. rubyinstaller. downloads latest stable Version x64
  3. Git installieren um im Windows Explorer Bash/Command auszuführen
  4. rechts-Klick „Git bash here“
  5. Ruby updaten mit „gem update –system“
  6. „gem install compass“
  7. compass install Anleitung um Projekt anzulegen
  8. config.rb Rubydatei anlegen und im Root-Ordner speichern (wo compass ausgeführt werden soll)
  9. Beispiel um mehrere Dateien mit Unterordnern zu verarbeiten Stackoverflow: Compass with multiple input/output folders
    1. require 'compass/import-once/activate'
      # Require any additional compass plugins here.
      
      # Set this to the root of your project when deployed:
      # http_path = "/"
      # css_dir = "css"
      # sass_dir = "sass/**/*"
      # images_dir = "img"
      # javascripts_dir = "js"
      cid = ARGV[0] || "default"
      cid = cid.sub(/\.scss$/,'').sub(/^.*\//,'')
      puts "making with cid="+cid
      http_path ="/fcss/" + cid + "/"
      css_dir = "public/fcss/"+cid
      sass_dir = "sass"
      images_dir = "sass/img"
      generated_images_dir="public/fcss/"+cid+"/img"
      http_images_path="/fcss/"+cid+"/img/"
      output_style = :expanded #: :compressed
      
      # You can select your preferred output style here (can be overridden via the command line):
      # output_style = :expanded or :nested or :compact or :compressed
      
      # To enable relative paths to assets via compass helper functions. Uncomment:
      # relative_assets = true
      
      # To disable debugging comments that display the original location of your selectors. Uncomment:
      # line_comments = false
      # If you prefer the indented syntax, you might want to regenerate this
      # project again passing --syntax sass, or you can uncomment this:
      # preferred_syntax = :sass
      # and then run:
      # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
      

Website im Browser editierbar machen

zum Beispiel in den Google Developer Tools (durch drücken der Taste F12 bei geöffnetem Browser) in der Console folgendes Script eintippen und mit ENTER ausführen.

Chrome Console Script Edit Content
Chrome Console Script Edit Content

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

oder dieses Script als Lesezeichen (z.B. im Chrome Lesezeichen Manager anlegen) speichern und anklicken, nachdem die zu editierende Seite geöffnet wurde.

Content Edit Lesezeichen
Content Edit Lesezeichen

responsive Raster Layouts mit Scripten umsetzen

Zur Umsetzung komplexer, verschachtelter Layouts, die auf allen Geräten und in allen Auflösungen funktionieren sollen empfiehlt es sich auf JavaScript-basierte Lösungen zurückzugreifen.

Mit folgenden Lösungen habe ich bereits gearbeitet, je nach Layout-Anforderungen ist ein anderes Script zu wählen:

  1. CrazySquirrel CSTiles (sehr umfangreich, für starre Rasterlayouts mit einem festen Seitenverhältnis, Raster-Elemente sind also voneinander abhängig damit sie korrekt dargestellt werden können in Anordnung/Größe)
  2. Masonry (weit verbreitete Lösung, allerdings nur für gewollt chaotisch angeordnete Elemente mit unterschiedlichen Seitenverhältnissen einsetzbar, die nicht exakt aneinander ausgerichtet werden müssen und somit keine festen Seitenverhältnisse haben müssen)
  3. masonJS (für starre Rasterlayouts mit einem festen Seitenverhältnis)

 

Als Grundlage können u.a. auch diverse CSS-Frameworks dienen: http://t3n.de/news/7-grid-systeme-webworkern-leben-437929/