Kategorien
JavaScript & jQuery Programmierung

Scrollen, sliden, biegen und mehr: 5 frische jQuery-Plugins aus dem November 2013

Das jQuery-Universum wächst beständig. Es ist schwierig, mit der Entwicklertätigkeit in Sachen Plugins informatorisch Schritt zu halten. Und, seien wir mal ehrlich, vielfach lohnt sich das auch gar nicht. Wir stellen Ihnen heute fünf frische jQuery-Plugins vor, die allesamt im November entstanden sind oder offiziell vorgestellt wurden. Diese zu kennen, lohnt sich auf jeden Fall. Versprochen…

onScreen bearbeitet Elemente beim Betreten oder Verlassen des Viewports

onScreen von Silvestre Herrera arbeitet mit Elementen, wenn sie den Viewport erreichen und/oder aus diesem Verschwinden. Die einfachste Anwendungsmöglichkeit für onScreen ist ein LazyLoad für Bilder. onScreen sorgt hierbei dafür, dass Bilder erst dann geladen werden, wenn sie für die Anzeige im Viewport auch tatsächlich benötigt werden.

onscreen

onScreen kann aber mehr. Herrera stellt verschiedene Demos bereit. So ist onScreen in der Lage, Streamposts erst dann nachzuladen, wenn das Seitenende erreicht wird. Das kann auch bei horizontalem Scrollen erfolgen. onScreen lässt sich zudem auf DOM-Elemente in Containern anwenden, dabei sogar auf mehrere Container einer Seite gleichzeitig.

onScreen steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Slippry: Flexibler Slider auf Basis von HTML5 und CSS3

Slippry von Booncon aus dem finnischen Helsinki ist ein weiterer Slider – allerdings einer, der sich vom Einheitsbrei deutlich absetzt. Denn die Jungs von Booncon hatten aus eben dem Grund, dass es derlei Software massenhaft gibt, grundsätzlich gar nicht vor, selbst einen Slider zu bauen. Auf der Suche nach einem responsiven, für ihre Zwecke tauglichen Exemplar stellten sie nach eigenen Angaben indes fest, dass die verfügbaren Lösungen entweder kaum Flexibilität zeigten oder auf Funktionen fußten, deren Tage gezählt sind.

slippry

Folgerichtig wurde ein nagelneuer Slider auf Basis des aktuellen jQuery und unter Verwendung von HTML5 und CSS3 geschaffen, der dennoch Fallbacks für ältere Browser gewährleistet. Im HTML-Markup werden keinerlei Funktionen versteckt. Das als Slider zu definierende Element erhält eine eindeutige ID, die dann wiederum dem Funktionsaufruf übergeben wird. Parameter zur Anpassung der Optik und weiterer Verhaltensweisen finden im Funktionsaufruf statt. Booncon hält vielfältige Demos bereit.

Slippry steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Bigfoot kümmert sich um die Darstellung von Fußnoten, nicht nur in responsiven Designs

Fußnoten sind grundsätzlich eine schöne Sache und in wissenschaftlichen Arbeiten in jedem Falle unabdingbar. Ich persönlich vermeide den Einsatz von Fußnoten wegen der unschönen optischen Effekte und der schlechten Usability des Hin- und Herspringens im Text. Das neue jQuery-Plugin bigfoot von Chris Sauve aus Kanada könnte mich allerdings überzeugen.

bigfoot

Denn bigfoot bearbeitet herkömmlich erstellte Fußnoten automatisch und macht daraus klickbare Targets, die besonders auf mobilen Geräten die Usability deutlich verbessern. Anstelle eines nummerierten Links zeigt bigfoot ein Touchtarget und – besonders gut – blendet den Text der eigentlichen Fußnote in einem Overlay direkt am Fußnotenlink ein. Chris Sauve hat entsprechende Demos vorbereitet.

bigfoot-2

Bigfoot steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

stickUp hält beliebige Elemente im Scrollbereich sichtbar

Das Plugin stickUp des New Yorkers Liran Cohen tut, was der Name verspricht. Es sorgt dafür, dass ein definiertes Element stets am oberen Rand des Browsers sichtbar bleibt. Die Idee ist der in Mode geratenen Technik des One-Page-Designs entlehnt. Hauptanwendungsfall dürfte demnach die Anwendung auf eine Navigationsleiste oder eine Navigationsbox sein. Grundsätzlich kann stickUp jedoch jedes Element im Scrollbereich sichtbar halten, da sich das Plugin auf die übergebene ID des gewünschten Elements auswirkt.

stickup

Cohen liefert ausführliche Informationen und Anleitungen zur Nutzung, selbst in WordPress, mit. Ein WP-Plugin ist angekündigt. Die Demo zu stickUp ist aussagekräftig.

stickUp steht unter GLGPL-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Circle Type biegt Texte entlang von Kreislinien

Circle Type von Peter Hrynkow aus dem kanadischen Vancouver ist ein schlankes, extrem leichtgewichtiges Plugin, dass sich damit beschäftigt, Texte entlang einer Kreislinie zu setzen. Ob ganz rund, halb rund oder lediglich leicht geschwungen, nach oben oder nach unten – Hrynkows Plugin erledigt den Job. Demos finden sich hier.

circletype

Im Zusammenspiel mit FitText.js kann Circle Type Texte in gegebene Container einbiegen. Circle Type eignet sich hervorragend für responsive Layouts. Mit der Option Fluid passen sich Textkrümmungen dynamisch dem Viewport an. Ebenso wie FitText setzt auch Circle Type das Plugin Lettering.js voraus.

Circle Type steht unter Doppel-Lizenz GPL und MIT zum kostenfreien Download und zur ebensolchen Verwendung auf Github zur Verfügung.

Kategorien
Boilerplates & andere Tools Essentials Freebies, Tools und Templates Programmierung

Dreamteam: Texte schreiben mit Sublime Text 2 und Markdown

Sublime Text 2 hat sich im letzten Jahr zum Lieblingseditor vieler Webentwickler gemausert. Dieser Beitrag zeigt, dass Sublime nicht nur für Code, sondern auch zum Schreiben von Webtexten geeignet ist. Idealer Partner ist dabei das in 2004 von John Gruber entwickelte Markdown.

Sublime – Markdown: Zwischen Text und HTML

Markdown vereinfacht Autoren das Schreiben von Texten für das Web und steht zwischen reinem Text und HTML. Im Gegensatz zu reinem Text kann man mit Markdown Überschriften, Zitate, Links und so weiter auszeichnen. Das geht mit HTML natürlich auch, aber Markdown ist einfacher zu schreiben und vor allem besser lesbar. Hier ein paar Beispiele:

  • Überschriften beginnen mit einer Raute: # wird zu h1, ## zu h2 und so weiter.
  • Hervorhebungen sind von *Sternchen* umgeben
  • Zitate haben wie in Text-Mails ein > am Anfang der Zeile

Markdown-Erfinder John Gruber hat eine Syntax-Übersicht veröffentlicht und es gibt auch eine deutsche Übersetzung. Zum Üben der Markdown-Syntax ist übrigens das Online-Tool Dingus echt gut: Markdown schreiben, per Klick in HTML konvertieren und direkt darunter das Ergebnis anschauen.

In Schreibwerkzeugen wie dem iA Writer findet Markdown inzwischen ebenso Verwendung wie im Web. Online-Communities wie Google+, Github, Reddit oder Stack Overflow benutzen zur Formatierung der Beiträge Abwandlungen von Markdown.

Und auch für Sublime Text gibt es ein paar sehr nützliche Markdown-Plugins, die den Editor zu einem richtig guten Prosa-Schreibwerkzeug werden lassen.

MarkdownEditing: Markdown in Sublime Text 2

Man kann in Sublime natürlich wie in jedem anderem Text-Editor auch völlig ohne zusätzliche Werkzeuge ganz normales Markdown schreiben, aber bequemer wird die Sache mit ein paar nützlichen Plugins, allen voran MarkdownEditing.

Am einfachsten ist die Installation über den Package Manager von Sublime. Falls das nicht funktioniert, einfach das ZIP-Paket von Github downloaden, entpacken und in den Ordner /packages/ kopieren. Wo genau der auf Ihrer Festplatte liegt, finden Sie über Preferences - Browse Packages... heraus.

Nach der Installation ist das Plugin automatisch für alle Dateien mit der Endung .md zuständig und sobald Sie eine Markdown-Datei öffnen, sieht Sublime völlig anders aus als vorher:

  • der Hintergrund wird hell und der Cursor hellblau (iA Writer lässt grüßen)
  • Markdown-Auszeichnungen werden zum Teil formatiert
  • es gibt ein Highlighting für die Markdown-Syntax
  • der Text steht in der Mitte des Editorfensters
  • Zeilen werden bei 70 Zeichen automatisch umgebrochen.
Das Sublime-Plugin MarkdownEditing
Das Sublime-Plugin MarkdownEditing mit den Standardeinstellungen

Die genauen Einstellungen des Plugins finden Sie unter Preferences - Package Settings - MarkdownEditing. Besonders im Distraction Free Mode aus dem Menü View lässt es sich so gut arbeiten.

Aber MarkdownEditing sieht nicht nur gut aus, sondern macht das Arbeiten mit Markdown-Dateien mit Syntax-Highlighting sehr viel bequemer und öffnende Klammern werden automatisch geschlossen. Unter OS X wird auch die Erstellung von Links zum Kinderspiel: URL in die Zwischenablage kopieren, Gewünschten Linktext markieren, URL per CMD-ALT-V aus der Zwischenablage einfügen.

Fertig ist der Markdown-Link. Eine Liste der aktuellen Features von MarkdownEditing finden Sie auf der Projektseite bei Github.

Markdown als HTML in der Zwischenablage und im Browser

Die perfekte Ergänzung zu MarkdownEditing sind die beiden folgenden Plugins:

  • Markdown to Clipboard fügt dem Kontextmenü im Editorfenster den Befehl Copy Markdown as HTML hinzu. Dieses HTML kann man dann in den WordPress-Editor oder in einem anderen Sublime-Fenster einfügen und bei Bedarf verfeinern. Das Plugin kann auch über den Package Manager installiert werden, auch wenn das in dem verlinkten Blogbeitrag nicht erwähnt wird.
  • OmniMarkupPreviewer schickt die geöffnete Markdown-Datei als HTML an den Browser. Im Kontextmenü wird dazu der Befehl Preview Current File in Browser hinzugefügt. Das Tastenkürzel ist auf dem MAC CMD+Alt+O (wie Oh, keine Null). Unter Windows mit CTRL statt CMD.

OmnimarkupPreview - Markdown als HTML-Vorschau im Browser
HTML-Vorschau im Browser – OmnimarkupPreview in Aktion

Weitere nützliche Plugins zum Schreiben von Texten in Sublime sind zum Beispiel SmartMarkdown, mit dem man Textpassagen einfach aus- und wieder einblenden kann, oder WordCount, das genau das tut was der Name andeutet.

Fazit: Sublime Text wird durch ein paar Markdown-Plugins zu einem richtig komfortablen Schreibwerkzeug für Webworker. Und das ist insbesondere auf der Windows-Plattform keine Selbstverständlichkeit.

(dpe)