Frontend Frameworks – Teil 2

Frontend Frameworks – Teil 2

In Teil 1 unseres „Frontend Frameworks“ haben wir euch schon einmal in die Materie eingeführt, wie ihr das richtige Framework für euch speziell ermittelt und was man dabei beachten sollte. Da hieß es, dass man nicht immer die gängigen Frameworks nutzen muss, um ein großartige Webseite zu programmieren. Es gibt so viele neue, alternative Möglichkeiten, die euch – je nach eurem Kenntnis-Stand – besser dienen können.

Unsere Einführung ist angelehnt an die Top 10 Frontend Frameworks aus 2016.
Nach jeder Kurzbeschreibung der Frameworks, wird eingestuft, für welche Entwickler welchen Kenntnisstandes diese geeignet sind. Teil 2 wird sich vorerst mit Coding-Beginnern und Berufseinsteigern in der Entwicklung beschäftigen. Im dritten Teil unserer Beitragsreihe kommen dann die Frameworks für Fortgeschrittene mit mehrjähriger Berufserfahrung. Dran bleiben lohnt sich!

 

Der Korrektheit halber führen wir erst einmal Bootstrap an, das allgemein als gängig gilt und oft verwendet wird. Das von den Twitter-Entwicklern programmierte Framework beinhaltet einige der vebreitetsten Programmiersprachen: HTML, JavaScript und CSS. Bootstrap beinhaltet reaktionsfähige Webdesign Standards, die es dir erlauben Webseiten in jeglicher Komplexität und Größe zu entwickeln. Weil das Framework regelmäßig geupdatet wird, kann es in kürzester Zeit auf neue Features reagieren und sie einbinden.

Das Rundum-Paket ist für Beginner und Diejenigen, die ein robusteres Framework bevorzugen, recht ideal, enthält jedoch den Nachteil, dass durch die für das Web unübliche Größe lange Ladezeiten entstehen können. Das kommt durch die Masse an Klassen zustande, wovon nur ein Bruchteil genutzt wird.

 


Ein absoluter Newcomer mit Potential ist Semantic-UI. Ein Framework, welches sich durch seine Einfachheit auszeichnet und für Beginner sowie für Jene, die ein flinkes und leichtes Framework bevorzugen, geeignet ist.

Man sagt, dass Jene, die ein komplexeres Design und komplexeres Development fordern, dieses Framework Schwachstellen aufweisen kann. Dennoch birgt es den Vorteil von kleinen Dateigrößen, kurzen Ladezeiten und unglaublicher Aufstellung an Bibliotheken, sodass man eigentlich keine anderen Bibliotheken mehr braucht.

 

Materialize beinhaltet Design Besonderheiten von Google und stellt ready-to-use buttons bereit, icons, Karten, Formen und anderen Komponenten. Diese Elemente werden in einer Standardversion und in der Version, die mit SASS läuft, angeboten.

Außerdem umfasst Materialize einen praktischen IZ column grid feature, was man für Website Layouts verwenden kann. Mit Materialize kann man Typographien, Schatten, Farben und andere prägnante Animationen verwenden. Der Vorteil der immensen Auswahl an Klassen ist hierbei definitiv als Vorteil zu nennen. Konträr dazu stehen die großen Dateigrößen, die ebenso lange laden müssen wie bei Bootstrap. Somit ist das Framework ein etwas sperriges.

Als geeignet eingestuft wird es für Entwickler, die noch etwas Orientierung und Anleitung brauchen bezüglich Google’s Material Design Spezifiken.

 

Diejenigen, die kleine Projekte umsetzen wollen, für welche nicht alle Style-Klassen eines großen Frameworks erforderlich sind, ist Skeleton eine nennenswerte Alternative, die nicht jedem geläufig ist.
Skeleton ist ein reaktionsfähiger Textbaustein mit einem 400 Zeilen Code. Dieses Framework ist lediglich dazu gedacht mit der Entwicklung eines Web Projektes anzufangen und bietet daher nur das Minimum an Voraussetzungen wie z.B. Tabellen, Formen, Listen, Buttons, etc. Daher für Berufseinsteiger ideal, die sich mit ersten Projekten profilieren wollen und neu in die Praxis- und Projektwelt eintreten.

Hilfreiche jQuery/Javascript Plugins – Teil 3

Hilfreiche jQuery/Javascript Plugins – Teil 3

Willkommen zum dritten Teil unserer JS/jQuery Reihe. Wie immer gibt es eine Aufteilung zwischen Front- und Backend.

Frontend

  • Hamburgers

    null
    Hamburger, Cheeseburger, Big Mac! Hamburgers ist ein JS Plugin, das einem verhilft den berühmten Hamburger Button zu erstellen. Man hat eine große Vielfalt an vordefinierten Buttons mit schönen Animationen. Alles ist CSS basierend und somit gut anpassbar. Das Beste daran ist die Länge und Komplexität des Codes:

  • superplaceholder

    superplaceholder
    Sehr schönes Plugin, womit man mit wenig Code das Befüllen von Feldern animieren kann. Es ist sehr gut animiert und dazu kleiner als 1 kb. Ein nützliches Gimmick für Seiten mit Suchfunktionen.

  • vivus

    vivus
    Wir haben zwar bereits ein SVG Plugin vorgestellt, doch dieses ist einfach genial. Es besitzt 3 verschiedene Animationstypen (Delayed, Asnyc und OneByOne), die jede Darstellung von SVGs zu einem Erlebnis machen. Sogar das Problem, des richtigen Timings wird von dem Plugin gelöst. Es gibt diverse Timing Funktionen, die sich an das SVG anpassen lassen und die Animation perfekt aussehen lassen. Ein Blick darauf lohnt sich!

  • A-FRAME

    A-Frame
    Virtual Reality, eine Technik die in aller Munde ist. Mit A-Frame kann jeder VR auf seine Seite integrieren, und das so unglaublich simpel. Es gibt eine große Anzahl an vordefinierten 3D-Formen, die man mit zwei Zeilen Code einbinden kann. Weiterhin kann man selbst Formen erstellen, 3D Bilder animieren und, und, und. Mit diesem Plugin kann man definitiv Aufmerksamkeit erregen.

Backend

  • clipboard.js

    clipboard.js
    Die wirklich einfachste Methode dem Benutzer einen „Copy to Clipboard“ Button zu geben. Der User muss nicht immer und immer wieder Texte markieren, alles per Knopfdruck, direkt in seine „Clipboard“. Sehr nützlich für Seiten, bei denen die Markierfunktion unterdrückt wird.

Hilfreiche jQuery/Javascript Plugins – Teil 2

Hilfreiche jQuery/Javascript Plugins – Teil 2

Heute geht es weiter mit der JQuery/JS Plugin Reihe. Der Beitrag ist wieder in Frontend und Backend unterteilt.

Frontend:

  • JinvertScroll

    Adieu langweiliges Scroll-Down, ahoi innovatives Side Scrolling. Das Plugin ermöglicht es einem mit wenig Aufwand einen Sidescroll Effekt zu erzeugen, der etwas an das Metro Menü in Windows 8 erinnert. Das Ganze hat auch einen Parallax Effekt und wirkt somit umso schöner.

  • Animsition


    Ihr habt es satt auf einen Link zu klicken und einen normalen Seitenaufbau zu sehen? Animsition tut etwas dagegen. Mit diesem kleinen Plugin ist es möglich Webseiten beim Laden einen CSS Effekt ausführen zu lassen. Derzeit sind 58 Effekte vordefiniert, die verschiedene Fade Effekte beinhalten, als auch Rotate und Flip. Es lohnt sich reinzuschauen!

  • Photopile JS


    Jeder kennt sie, jeder nutzt sie aber will sie auch jeder? Es geht um die Imagegallery, meistens ein Grid mit mehreren Bildern. Photopile schafft diese Mechanik ab und erstellt einen zusammengewürfelten Haufen aus Fotos, der schön animiert ist. Sehr empfehlenswert für unkonventionelle Fotoausstellungen.

  • Splitchar


    Einfarbige Fonts sind gestern gewesen. Splitchar erlaubt es euch euren Fonts mehrere Farben zu geben und das sowohl vertikal als auch horizontal.

Backend

  • BttrLazyLoading


    Dieses Plugin ist schwer in einem der beiden Bereiche einzuordnen. Die Hauptfunktion ist ein verzögertes Laden von Bilder. Diese werden erst dann geladen, wenn sie in den Viewport kommen. Das hat den Vorteil, dass Webseiten sich viel schneller aufbauen und bei mobilen Endgeräten das Datenvolumen gespart werden kann. Es ist komplett responsiv und Retina ready. Weiterhin gibt es diverse Einstellungen, die man tätigen kann um die Effekte von der Bildanzeige anzupassen. Sehr gelungenes Plugin!

  • Face Detection


    Facetagging gesucht, Facetagging gefunden! Mit Face Detection könnt ihr mit extrem wenig Code die Gesichter auf Bilder auslesen. Das Plugin liefert euch ein „Face“ Objekt mit Koordinaten, Höhe und Breite. Diese können für verschiedene Dinge genutzt werden, wie im Bild zu sehen ist.

  • SVGMagic


    SVGMagic ist zwar sehr simpel aber trotzdem sehr mächtig. Es ist ein Muss für Webseiten, die ältere Browser supporten sollen. Das Plugin checkt ob der Browser SVG Bilder unterstützt, wenn dem nicht so ist wandelt es alle Bilder direkt in PNG Bilder um und das im Grunde genommen ohne Qualitätsverlust.

Wie immer, wenn ihr weitere gute Plugins kennt einfach in die Kommentare schreiben.

Hilfreiche jQuery/Javascript Plugins – Teil 1

Hilfreiche jQuery/Javascript Plugins – Teil 1

Heute fange ich eine neue Beitragsreihe an, in der ich euch ein paar handverlesene jQuery/Javascript Plugins vorstelle. Es sind Frontend- , als auch Backend-Plugins dabei, die einem das Leben viel leichter machen.

Frontend:

  • Menu-Aim

    Menu Aim ist ein kleines Plugin, mit großem Nutzen. Wer kennt das nicht? Man klickt auf ein Dropdown Menü, geht dann auf einen Menüpunkt und es öffnet sich ein seitliches Submenü. Will man nun einen Menüpunkt im Submenü anklicken und rutscht mit der Maus etwas zu weit nach oben oder unten, dann ist das Submenü weg. Dieses Plugin ist genau für diesen Fall entwickelt und löst ihn auch tadellos.

  • Scroll Path

    jQuery Scroll Path erlaubt es euch eigene Scroll Pfade zu erstellen. D.h. man ist nicht mehr an das altbekannte Hoch- und Herunterscrollen gebunden. Es entstehen Effekte, die bspw. Text beim Scrollen von links nach rechts wandern lassen. Bilder drehen sich in einem bestimmten Winkel oder bewegen sich einen bestimmten Pfad entlang. Das Plugin ist sehr gut für kreative Köpfe geeignet.

  • tubular

    Richtig eingesetzt ist tubular ein Schmankerl für die Augen. Dieses Plugin gibt euch die Möglichkeit auf eine einfache Art und Weise YouTube Videos als Background für eure Seite setzen. Beispielsweise YouTuber, die bloggen, könnten somit sehr einfach ihre Videos präsentieren. Schaut euch einfach die gelungene Demo an!

  • turn.js

    turn.js ist ein schmales Pulgin (10 Kb) und es erstellt aus HTML Seiten Touch-optimierte Magazine. Das Ganze geht auf eine unglaublich simple Art und Weise und sieht dennoch sehr professionell aus. Man kann den Aufbau der Seiten selbst in HTML konfigurieren und büßt somit nicht an Flexibilität ein. Sehr empfehlenswert für Restaurants oder jegliche Art von Unternehmen, die einen Katalog haben.

  • Animate Plus

    Animate Plus ist eine starke Javascript Bibliothek zur Erstellung von Animationen. Es ist auf CSS und SVG basierend und bietet eine Vielfalt von Einstellungsmöglichkeiten, um eigene Animationen zu erstellen. Von sich wandelnden Buttons, bis hin zu 3D animierten Elementen: alles kein Problem!

Backend:

  • Long Press

    Long Press ist ein praktisches Plugin, das die Texteingabe für den Benutzer sehr erleichtert. Hält man während einer Texteingabe eine bestimmte Taste gedrückt, so erscheint eine Auswahl an Special Characters, die man unkompliziert einfügen kann. ASCII Code Eingabe über ALT+CODE war gestern!

  • Complexify

    Goodbye langer Algorithmus zur Passwortsicherheit, Hello Complexify! Mit diesem Plugin kann man ganz einfach mit Attributen einen Mindestwert von Passwortsicherheit einsetzen, alles andere regelt das Plugin und zeigt es auch dem Benutzer an.

  • jQuery-Tabledit

    Tabledit ist ein praktisches Plugin, mit dem man Live Tabelleneinträge editieren kann. Es bedarf nur sehr wenig Codeaufwand und man erhält komplett editierbare Tabellen. Sehr praktisch für das Verwalten von kleineren Datenbanken durch mehrere User.

     

Ihr habt weitere Plugins, die ihr erwähnenswert findet? Nennt sie doch in den Kommentaren, dann kommen sie vielleicht in den nächsten Teil dieser Reihe!