Share
Wenn Sie darüber nachdenken, ist der Ausdruck "moderne Front-End-Entwicklung" eine relativ neue Sache! Im Vergleich zu konkurrierenden Plattformen und Branchen befindet sich das Web noch in den Kinderschuhen. Allerdings muss man nur einen entwicklungsspezifischen Twitter-Feed lesen oder auf einigen geeigneten IRC-Kanälen Hallo sagen, um zu erkennen, wie schnell unsere Techniken und Prozesse in ein modernes Zeitalter der Front-End-Entwicklung vordringen.
Etwas HTML-Code (natürlich in Großbuchstaben) muss manuell codiert werden, Sie können einen Inline-CSS-Code hinzufügen, Ihre Lieblings-Animations-GIF einfügen und fertig!
Es macht Spaß, sich an die Tage zu erinnern, vor nicht allzu langer Zeit, als der Aufbau einer einfachen Website etwas mehr als nur einen Texteditor (möglicherweise sogar Notepad) und ein wenig Verständnis für HTML und CSS beinhaltete. Kein Fan von Internet Explorer 7? Damals, Ende der neunziger Jahre, haben wir den Internet Explorer 3 in Form gebracht, wenn Sie sich vorstellen können! Obwohl das Ökosystem bei weitem nicht so ausgereift war wie heute, war der Prozess einfacher. Etwas HTML-Code (natürlich in Großbuchstaben) von Hand programmieren, Inline-CSS hinzufügen, animierte GIFs einfügen und fertig! Laden Sie diesen Bad Boy auf Geocities hoch und warten Sie, bis der Datenverkehr rollt!
Ahh, das waren die Tage. Glücklicherweise ist das Web seitdem enorm gewachsen. Tatsächlich haben wir uns als Community auf eine Fülle von Best Practices und Werkzeugen geeinigt. Wir verwenden die Versionskontrolle, um bei Open Source-Projekten zusammenzuarbeiten. Wir befürworten eine testgetriebene Entwicklung für JavaScript (mit Tools wie Mocha und Jasmine). Wir verhindern "Neuerfindung des Rades" -itus, indem wir stattdessen unsere Bemühungen dazu nutzen, zu hoch getesteten Bibliotheken wie jQuery beizutragen. Wir haben uns von unüberprüfbaren Spaghetti-Codes befreit, indem wir die Notwendigkeit von speziellen Frameworks wie Backbone und Ember evangelisierten. Wir haben sogar die Prinzipien der objektorientierten Programmierung auf unser CSS (OOCSS) angewendet! Ja, meine Damen und Herren, es ist ein sehr guter Zeitpunkt, um ein Front-End-Entwickler zu werden!
Welche Tools, Bibliotheken und Frameworks sollten Sie verwenden??
All dies mag auf den ersten Blick überwältigend erscheinen (machen Sie sich keine Sorgen, wir sollten uns alle schon so oder so gefühlt haben), aber alle oben aufgeführten Elemente sind Voraussetzungen für die Erstellung moderner, browserübergreifender Anwendungen. Die einzige Frage ist: Welche Tools, Bibliotheken und Frameworks sollten Sie in einem Meer von Ozeanen verwenden? Oder, direkter gesagt, wie trennt man die Verzichtware von der Ernte der Ernte? In diesem Artikel werden Sie ein wenig über die zu verwendenden Werkzeuge und einige Alternativen für jede Kategorie informiert.
Sagen wir es so: Wenn Sie die Besonderheiten Ihres Code-Editors nicht kennen, machen Sie es falsch. Wenn Sie eine Position innehaben, die praktisch acht Stunden Arbeit pro Tag innerhalb eines Code-Editors erfordert (lass uns ehrlich sein; es ist viel mehr als das), sollten Sie dann nicht die erforderlichen Ressourcen einsetzen, um Ihren Workflow so weit wie möglich zu optimieren? Sogar eine Reduzierung von fünf Sekunden auf eine Aufgabe in Ihrem täglichen Arbeitsablauf kann im Laufe eines Jahres zu erheblichen Zeiteinsparungen führen.
Wenn Sie sich im letzten Jahrzehnt im selben Editor stagnierend auf Ihren Lorbeeren ausgeruht haben, ist es vielleicht an der Zeit, einige Alternativen in Betracht zu ziehen.
Vor einigen Jahren hatten Sie Schwierigkeiten, einen Entwickler zu finden, der wusste, was Sublime Text war. Schneller Vorlauf bis heute und es ist mit Abstand der am meisten evangelisierte Code-Editor in unserer Branche. Der Grund dafür ist offensichtlich; Während konkurrierende Redakteure wie TextMate und Coda entweder auf der Strecke geblieben sind oder ihre Userbasis mit unfassbaren Updates enttäuscht haben, konzentriert sich das Sublime Text-Team (bestehend aus einer Person, ob Sie es glauben oder nicht) auf den wichtigsten Aspekt Ihres Entwicklungsworkflows: Geschwindigkeit. Und, Junge, Junge, Sublime ist schnell. Mit einem einfachen Tastendruck wechseln Sie so leicht und fein von Datei zu Datei, dass Sie bei dem Gedanken, manuell durch einen Dateibaum zu blättern, wie Sie es früher einmal selbst getan haben.
Wie bei den meisten Dingen im Leben gibt es einen Grund für Sublimes Beliebtheit. Obwohl es nicht kostenlos ist, ist es der beste heute verfügbare Code-Editor. Zeitraum.
"Es gibt einen Grund für Sublimes Beliebtheit."
Wenn Sublime Text den traditionellen Code-Editor Pinnacle anbietet, hofft LightTable, das Codierungserlebnis vollständig zu revolutionieren. Obwohl es sich immer noch sehr in einem Alpha-Zustand befindet, waren die Fortschritte bisher unglaublich vielversprechend. Stellen Sie sich vor, Sie könnten Ihr JavaScript in Echtzeit auswerten, ohne den Editor zu verlassen. Dieses Echtzeit-Feedback ist beispiellos. Kombinieren Sie die Geschwindigkeit und Konfigurierbarkeit von Vim mit der Eleganz, die wir von modernen Apps erwarten. LightTable bietet dies und mehr. Könnte es Sublime Text im Jahr 2013 übertreffen? Wir müssen abwarten und sehen! Behalten Sie dies bis dahin im Auge!
"Könnte LightTable Sublime Text 2013 übertreffen? Wir müssen abwarten!"
Zwar gab es in den letzten Jahren sicherlich eine Abkehr von vollen IDEs, dennoch setzen sich viele für ihre Vorteile ein. Zum Glück gibt es eine Vielzahl von Optionen zur Auswahl! Vor allem das JetBrains-Team hat in den letzten Jahren hervorragende Arbeit geleistet und eine Reihe plattformspezifischer IDEs verwaltet, darunter WebStorm, PHPStorm und RubyMine.
Wenn Sie eine solche IDE bevorzugen, platzieren Sie das Angebot von JetBrains ganz oben in der Liste Ihrer Überprüfungen. Sie werden nicht enttäuscht sein.
"Wenn Sie eine solche IDE bevorzugen, platzieren Sie das Angebot von JetBrains ganz oben in Ihrer Liste" Zur Überprüfung ".
Sie denken vielleicht selbst: "Warum sollte Vim in eine Liste moderner Werkzeuge aufgenommen werden?" Während Vim, oder ursprünglich Vi, in der Tat schon seit Jahrzehnten existiert, ist die Wahrheit, dass es sich um einen modernen Editor handelt, der sich in der aktiven Entwicklung befindet. In Bezug auf die reine Erweiterbarkeit und Geschwindigkeit ist es schwierig, Vim zu übertreffen. Denken Sie jedoch daran, dass Sie, wenn Sie ihm eine Chance geben, monatelanges Training einplanen sollten. Es ist ein notorisch schwieriger Editor. Sobald Sie diese Tastenkombinationen jedoch in den Speicher übernehmen, können Sie nicht mehr aufhören!
"Vim ist ein notorisch schwieriger Editor."
Brackets ist insofern einzigartig, als es sich um einen von Adobe entwickelten Open-Source-Code-Editor handelt, der HTML, CSS und JavaScript auf die Spitze treibt. Solange Sie über ein relativ grundlegendes Verständnis von JavaScript verfügen, verfügen Sie daher bereits über die notwendigen Werkzeuge, um den Editor nach Ihren Wünschen zu erweitern. Front-End-Entwickler tun dies tatsächlich jeden Tag.
Brackets ist zwar immer noch ein wenig aufpoliert, befindet sich jedoch in der aktiven Entwicklung. Es ist zu erwarten, dass Sublime Text dieses Jahr für sein Geld sorgen wird!
"Erwarten Sie, dass Brackets Sublime Text dieses Jahr seinen Preis geben wird!"
Während sich die Branche ständig weiterentwickelt, wird eine neue Methodik für die Bereitstellung von reaktionsschnellen Erlebnissen im Web weit verbreitet: SPAs oder einseitige Webanwendungen. Während in der Vergangenheit eine so ehrgeizige Anstrengung sehr viel Code erfordert hätte, ist der Prozess zum Glück dank verschiedener Rahmenbedingungen einfacher als je zuvor! Die folgenden Tools starten Ihren Prozess.
Derzeit ist Backbone der amtierende Champion von JavaScript-Frameworks (zumindest was die Beliebtheit angeht) und bietet Struktur für Ihren Sloppy-Spaghetti-Code!
Wenn Sie Ihr Verständnis eines clientseitigen MVC (oder MV *) -Frameworks (insbesondere wenn Sie aus einem serverseitigen Framework stammen, wie z. B. Rails oder Laravel), kann dies ein wenig Umdenken erfordern Wenn Sie das Wesentliche verstanden haben, schreiben Sie sauberen, modularen und eleganten Code.
Hoffen Sie auf einen Absturzkurs in Backbone? Schauen Sie sich Tuts + Premium und CodeSchool an. Sie werden Sie in Rekordzeit vorbereitet haben.
"Backbone bietet Struktur für Ihren schlampigen Spaghetti-jQuery-Code!"
Ember ist der spirituelle Nachfolger von SproutCore, einem mächtigen JavaScript-Framework, mit dem versucht wurde, die Cocoa-Benutzeroberfläche in das Web zu portieren. Der Grund für die Namensänderung ergibt sich aus der Tatsache, dass die Codebase von Grund auf neu geschrieben wurde, um zu versuchen, sich von einer beträchtlichen Menge an altem Code und fehlerhaften Denkweisen zu lösen.
Wie die Ember-Teams es ausdrückten, bewies der Erfolg von Backbone, dass die Entwicklergemeinschaft tatsächlich die Möglichkeit wollte, responsive clientseitige Apps zu erstellen. Sie hatten jedoch jahrelange Erfahrung in der Erstellung benutzerdefinierter Benutzeroberflächen mit HTML und CSS. SproutCores Versuch, dies zu Gunsten der Cocoa-ähnlichen Benutzeroberfläche zu ersetzen, war nicht der richtige Weg.
Aus diesem Misserfolg ging Ember hervor, ein neues Framework, das sich mit Rekordgeschwindigkeit durch die Entwicklergemeinde zieht. Wenn Backbone nicht ganz der Rechnung entspricht, wechseln Sie zu Ember.
"Wenn Backbone nicht ganz in der Lage ist, wechsle zu Ember."
Angular, entwickelt und unterstützt von Google, geht einen anderen Weg, indem es die erforderlichen Tools bereitstellt, um das HTML-Vokabular für Ihre Anwendungen nach Bedarf zu erweitern. Während einige der Meinung sind, dass diese Art der Datenbindung für unordentlichen, nicht getrennten Code sorgt, setzen andere auf Flexibilität und einfache Entwicklung.
Wie das Angular-Team sagt, wurde HTML nicht für die Verwaltung dynamischer Ansichten entwickelt. Angular füllt diese krasse Lücke. Was ist deine Meinung?
"HTML wurde nicht für die Verwaltung dynamischer Ansichten entwickelt. Angular füllt diese eklatante Lücke."
Knockout, eines der ursprünglichen modernen JavaScript-Frameworks, das auch Angular vorausgegangen ist, spricht sich für einen datenbindenden Ansatz für das Erstellen responsiver Anwendungen mit minimalem Code aus.
Auch wenn sich unzählige Entwickler gegen diesen Ansatz ausgesprochen haben, lässt sich nicht leugnen, dass es seine Vorzüge hat. Was in Backbone möglicherweise Hunderte von Codezeilen erfordert, kann mit nur wenigen Dutzend Knockout erreicht werden. Die Frage ist nur: Können Sie nachts schlafen und alle Daten in Ihrem HTML-Code binden? Es gibt keine richtige Antwort auf diese Frage. Nur Vorliebe.
"Was in Backbone möglicherweise Hunderte von Codezeilen erfordert, kann mit wenigen Dutzend Knockout erreicht werden."
Meteor ist ein neues Full-Stack-JavaScript, das von Node.js unterstützt wird. Es ist garantiert, die Art und Weise zu revolutionieren, wie Sie beim Schreiben von reaktionsschnellen und dynamischen Webanwendungen vorgehen.
Stellen Sie sich vor, Sie schreiben Ihre gesamte Anwendung ausschließlich in JavaScript. Nicht nur die Client-Seite, sondern auch die Persistenzschicht! Stellen Sie sich bei jeder einzelnen API, die in einer Sprache angeboten wird, die Bequemlichkeit und Flexibilität vor, die dies bietet!
Während das Framework die Version 1.0 noch nicht erreicht hat, sollten Sie, solange die Entwicklung aktiv bleibt, unbedingt diesen neuen Ansatz zum Schreiben von Anwendungen untersuchen.
"Stellen Sie sich vor, Sie schreiben Ihre gesamte Anwendung nur in JavaScript."
Wie bereits erwähnt, ist die Front-End-Welt im letzten halben Jahrzehnt enorm gewachsen. An einem Punkt krümmte sich die Community, obwohl nur eine einzige JavaScript-Zeile geschrieben wurde. Heute geht es schnell vorwärts, und es gibt nicht nur eine scheinbar endlose Welle von JavaScript-Bibliotheken und Frameworks, sondern das Testen (und sogar das TDD-Muster) hat nach vorne und in die Mitte gedrängt.
Während es eine Vielzahl von Test-Frameworks zur Auswahl gibt, einschließlich Jasmine und QUnit, sollten Sie nach Ansicht des Autors zuerst mit Mocha experimentieren, das von derselben Person erstellt wurde, die hinter Stylus und dem Express-Framework steht: TJ Holowaychuk.
"Mocha wurde von derselben Person gebaut, die hinter Stylus und dem Express-Framework steht: TJ Holowaychuk."
Die Front-End-Community debattierte jahrelang darüber, ob eine CSS-Vorverarbeitung notwendig war. Die Sprache ist einfach; warum komplizieren wir es? Zum Glück hat sich die Mehrheit der Front-End-Entwickler im Laufe der Zeit und mit dem Ausbau des Web-Stacks mit der Tatsache abgefunden, dass die Vorverarbeitung bis zur Sprache selbst etwas mehr reift, eine Notwendigkeit für alle bis auf die unbedeutendsten Websites . Keine Sorge: Viele dieser Prä-Prozessor-Funktionen arbeiten sich langsam aber sicher in die Sprache ein. Diese Dinge brauchen einfach Zeit.
Wie die Website so kühn erklärt, macht Sass CSS wieder Spaß. Variablen, Verschachtelung, Mixins… Sass hat alles. Noch wichtiger ist, wenn Sie das Ziel haben, den beliebtesten verfügbaren Präprozessor sowie verschiedene darauf aufbauende Frameworks wie Compass zu erlernen, sollte Sass Ihre Wahl sein.
Sass kann sich sogar an Ihre Bedürfnisse anpassen. Wenn der Einrückungs-spezifische Stil des Originals .sass Die Syntax fühlt sich fremd an, dann wechseln Sie einfach zur Alternative .scss Formatieren Sie und schreiben Sie Ihre Stylesheets auf die gleiche Weise, wie Sie es seit Jahren getan haben.
Wenn Sie in naher Zukunft einem Entwicklungsteam beitreten, besteht die Chance, dass Sass der Präprozessor Ihrer Wahl ist und derjenige, den Sie lernen werden.
"Sass macht CSS wieder Spaß."
Meistens werden Sie feststellen, dass die drei beliebtesten CSS-Präprozessoren Sass, LESS und Stylus mehr oder weniger gleich sind. Nur moderate Syntaxunterschiede trennen die drei. In der Vergangenheit war LESS die einfachere Option für Webdesigner, da es eine lesbare CSS-artige Syntax bietet (etwas, die Sass ursprünglich nicht angeboten hatte). Als zusätzlicher Bonus muss nur eine einzige JavaScript-Datei importiert werden, um die Flexibilität dynamischer Stylesheets zu genießen.
"Traditionell hat LESS mehr an Webdesigner als an Sass appelliert."
Stylus ist ein relativer Neuling in der Szene und bietet möglicherweise die größte Flexibilität unter allen drei Präprozessoren in dieser Liste. Semikolons bevorzugen? Behalte sie. Hassen Sie es, Doppelpunkte zu verwenden, um Eigenschaften und Werte zu trennen? Entferne sie! Der Schlüssel liegt in der Tatsache, dass Sie mit Stylus die Möglichkeit haben, Ihre Stylesheets Ihren Wünschen entsprechend anzupassen. Konfigurierbarkeit auf höchstem Niveau!
Der einzige Nachteil (und ein erheblicher Nachteil dabei) ist, dass es aufgrund seines Alters höchstwahrscheinlich nicht wahrscheinlich ist, dass Mitglieder Ihres Entwicklungsteams oder Community-Mitwirkende, wenn Sie zufällig eine Open-Source-Anwendung entwickeln vertraut mit Stylus.
"Konfigurierbarkeit auf höchstem Niveau."
Wie viele sagen, macht CoffeeScript JavaScript handhabbar. Es beginnt mit dem Entfernen der hässlichen Bits. Semikolons Weg. Hosenträger? Die sind auch ausgezogen. Klammer? Machen wir sie optional. Sie bietet dann eine Reihe von Funktionen, die sich in jeder Hinsicht in synthetischen Zucker übersetzen lassen. Lexikalischer Umfang, Splats, Array-Verständnis - alles bietet CoffeeScript, während es schließlich zu Vanille-JavaScript kompiliert wird.
Dank der zunehmenden Akzeptanz und Verbesserung der Quellkarten werden viele Nachteile bei der Verwendung eines solchen Präprozessors schnell zu Problemen. Wenn Sie die Notwendigkeit eines weiteren Präprozessors in Frage stellen, fürchten Sie sich niemals; Wie Sass werden viele Neuerungen von CoffeeScript in zukünftige Versionen von ECMAScript implementiert.
"CoffeeScript macht JavaScript handhabbar."
Für diejenigen, die sich nicht mit der Ruby-ähnlichen Syntax von CoffeeScript in Verbindung setzen können, ist TypeScript eine ausgezeichnete Alternative. Sie können damit fortfahren, in einem Dialekt von JavaScript zu schreiben, während Sie die neuesten Ergänzungen zu ECMAScript 6 nutzen. Ähnlich wie bei CoffeeScript wird Ihr Code letztendlich zu einfachem JavaScript kompiliert, das im Browser ausgeführt werden kann.
"Mit TypeScript können Sie weiterhin in einem Dialekt von JavaScript schreiben, während Sie die neuesten Ergänzungen zu ECMAScript 6 nutzen."
CodeKit, von dem immer lustigen Bryan Jones entwickelt, ist 2012 in die Front-End-Welt explodiert und wird jetzt von Websites wie BarackObama.com und Engadget verwendet. Wie Steroide für Webentwickler führt es verschiedene Compiler, Minifier und Optimierungen in einer schönen Mac-Anwendung zusammen. Wenn sich das Terminal wie eine Black Box anfühlt und Sie Ihre Fähigkeit einschränken, die zuvor genannten Präprozessoren zu nutzen, ist CodeKit Ihre Lösung.
"CodeKit explodierte 2012 in die Frontend-Welt."
LiveReload ist hinreichend ähnlich zu CodeKit. Abgesehen von einigen UI-Unterschieden und einigen einzigartigen Funktionen von CodeKit können Sie mit beiden Apps gleichermaßen von Punkt A nach Z gelangen.
Genau wie CodeKit können Sie mit LiveReload ein Dateisystem auf Änderungen überwachen und die erforderlichen Vorverarbeitungs- und Kompilierungsvorgänge durchführen. Der Browser wird beim Speichern der Dateien automatisch aktualisiert.
Im Gegensatz zu CodeKit ist LiveReload jedoch sowohl für Mac als auch für Windows verfügbar. Wenn Sie Windows verwenden, ist LiveReload standardmäßig die einzige Wahl. Mach dir keine Sorgen; Das ist ein guter!
"LiveReload ist sowohl für Mac als auch für Windows verfügbar."
Die Chancen stehen gut, dass Sie JavaScript vor dem Erfolg von jQuery im selben Licht wie Voldemort gesehen haben. Sprich nicht von seinem Namen und vermeide es um jeden Preis. Obwohl jQuery nicht die erste Bibliothek war, die eine Lösung für die verschiedenen Cross-Browser-Probleme der damaligen Zeit bot, war es tatsächlich die erste Bibliothek, die eine Lösung anbot, die den Front-End-Designer des Alltags ansprach. Seitdem haben unzählige Entwickler ihre eigenen exzellenten Bibliotheken verfolgt.
Was gibt es zu jQuery zu sagen, das noch nicht gesagt wurde? jQuery hat JavaScript ansprechbar gemacht und eine neue Generation begeisterter Entwickler auf Client-Seite hervorgerufen. Das ist vielleicht das größte Kompliment, das man einer Bibliothek je zahlen könnte. Es ist zwar nicht die Antwort auf jedes Problem, aber bei der Manipulation des DOM gibt es kein besseres Werkzeug.
"Wenn es darum geht, das DOM zu manipulieren, gibt es kein besseres Werkzeug."
Haben Sie jemals das Gefühl gehabt, dass in JavaScript viele offensichtliche Funktionen fehlen, wie z finden, zupfen, oder Mischen? Wenn ja, wären Sie sicherlich nicht der Erste. Glücklicherweise bietet die beliebte Underscore-Bibliothek diese fehlende Funktionalität. Stellen Sie sich dies als einen Hilfsgürtel vor, der einige Dutzend Hilfsfunktionen bietet, die Sie sonst wie bei jedem neuen Projekt von Grund auf neu programmieren würden.
Wenn Sie Backbone verwenden, sind Sie wahrscheinlich bereits mit Underscore vertraut, da dies eine starke Abhängigkeit vom Framework ist.
"Haben Sie jemals das Gefühl gehabt, dass JavaScript viele offensichtliche native Funktionen fehlt?"
d3js.org
D3 ist eine fantastische JavaScript-basierte Datenvisualisierungsbibliothek, mit der Sie Daten an das DOM binden und dann Transformationen im Dokument vornehmen können. Weitere Informationen finden Sie im GitHub-Repository von D3. Dort finden Sie eine Fülle von Beispielen zur Visualisierung verschiedener Datensätze.
"D3 ist eine fantastische JavaScript-basierte Datenvisualisierungsbibliothek."
Wenn Sie Ihren Codierungs-Workflow optimieren, wird schnell deutlich, dass möglicherweise zusätzliche Tools und Funktionen erforderlich sind. Solche Werkzeuge umfassen alles von Modulladern bis zu Testläufern.
Irgendwann werden Sie sich sicherlich von der Idee lösen, Ihr gesamtes JavaScript in einer einzigen Datei zu verschachteln. Wenn dieser Tag eintritt, werden Sie schnell auf RequireJS stoßen, einen Datei- / Modullader. Leider ist der Umstieg auf einen modularen Ansatz zum Schreiben von JavaScript ein schwierigerer Prozess, als man hoffen könnte. Nachdem Sie das AMD-Konzept verstanden haben, müssen Sie die Logistik entschlüsseln: Wie richten Sie RequireJS ein? Was ist mit Nicht-AMD-Bibliotheken? Was ist mit dem Abhängigkeitsmanagement? Was ist mit Konfiguration und Optimierung? Zwar gibt es eine Lernkurve, aber es lohnt sich absolut.
"RequireJS ist mit Abstand der beliebteste heute verfügbare Modullader."
Ein erhebliches Hindernis für das Testen ist die einfache Tatsache, dass das Setup und die Inbetriebnahme manchmal einen erheblichen Konfigurationsaufwand erfordern. Je länger es dauert, desto wahrscheinlicher ist es, dass der Entwickler sich nicht darum kümmern wird. Deshalb ist Testem so fantastisch. Es macht das Testen so einfach wie möglich und vor allem Spaß!
Im Kern ist Grunt ein einfaches aufgabenbasiertes Befehlszeilenprogramm zum Erstellen von JavaScript-Anwendungen. Stellen Sie sich dies als ein Werkzeug vor, das eine Vielzahl kleiner, aber allgemeiner Operationen ausführen kann. Kompilierung, Minifizierung, Testlauf, Bereitstellung - jedes davon kann und sollte automatisiert werden. Mit Grunt können langwierige Prozesse wie diese in einen einzigen Befehl übersetzt werden.
Wir haben es alle erlebt. Ihre Website wird in Chrome und Firefox wunderschön dargestellt, aber Sie können sie dann in Internet Explorer anzeigen und sich damit abfinden, dass Sie sich in den nächsten Stunden der Browserunterstützung widmen werden.
Normalisieren bewirkt, dass alle Browser Elemente so konsistent wie möglich darstellen. Haben Sie schon einmal die Unannehmlichkeit erfahren, eine Inkonsistenz bei der Eingabe von drei Pixeln von Browser zu Browser zu debuggen? Mit Normalize werden Sie nie wieder damit fertig!
"Normalisieren bewirkt, dass alle Browser Elemente so konsistent wie möglich darstellen."
HTML5 Boilerplate ist das Produkt jahrelanger Erfahrung und Basteln. Es ist der ultimative Projekt-Kickstarter und wird von Unternehmen wie Google, Microsoft und der NASA verwendet. Das Beste daran ist, dass das Projekt, auch wenn Sie das Projekt nie voll und ganz annehmen, eine fantastische Ressource bleibt, wenn auch nur zum Kopieren und Einfügen.
"Das Produkt aus langjähriger Erfahrung und Bastelei."
Während die Entwicklungswelt oft die Notwendigkeit von wiederverwendbarem Code verkündet, ist die Wahrheit, dass diese Ratschläge, wenn es um CSS geht, meistens ignoriert werden. Wie oft haben Sie selbst das notwendige Styling für einen Blogbeitrag oder ein Nachrichtenfeld geschrieben? Wenn nur jemand ein sauberes Paket mit diesen wiederverwendbaren Komponenten bereitstellen würde, könnten wir neue Anwendungen mit unglaublicher Geschwindigkeit erstellen!
Geben Sie Bootstrap ein. Bootstrap wurde vom Team von Twitter entwickelt und bietet eine Vielzahl von Komponenten und Klassen (sowohl CSS als auch JavaScript-basiert), um die Menge an Boilerplate-Code zu minimieren, die für jedes neue Projekt geschrieben werden muss. Dies umfasst alles, von einem zurückgesetzten Stylesheet über schöne Schaltflächen bis zu JavaScript-aktivierten modalen Boxen. Insbesondere für die Nicht-Designer unter Ihnen ist Bootstrap eine fantastische Wahl.
"Besonders für die Nicht-Designer unter Ihnen ist Bootstrap eine fantastische Wahl."
Wenn Sie bei Twitter Bootstrap nichts Besonderes finden, sollten Sie sich unbedingt für Foundation 4 entscheiden, von den Leuten von Zurb. Ähnlich wie Bootstrap bietet Foundation ein flexibles Raster, JavaScript-Plugins und verschiedene CSS-Komponenten für schnelles Gerüst. Die Wahrheit ist, dass Sie mit beiden Entscheidungen nichts falsch machen können. Letztendlich kommt es auf eines: persönliche Vorlieben. Welches fühlt sich richtig an?
"Wenn Twitter Bootstrap nicht gerade begeistert ist, sollte Foundation 4 definitiv die zweite Wahl sein."
Es stimmt, mit der Reifung unseres Ökosystems ist es auch notwendig, sich fortzubilden und mit den neuesten Werkzeugen und Rahmenbedingungen zu experimentieren. Aber hey, wir haben uns dafür angemeldet; keine Aufregung erlaubt! Wir haben die einmalige Gelegenheit, im Großen und Ganzen die Flaggschiff-Entwicklungscrew der revolutionärsten Innovation in unserer Geschichte zu sein: das Internet.
Accentsconagua