Beim Chrome Dev Summit 2014 gab es eine ganze Reihe von Themen und Themen, die neue APIs abdecken, aber nicht nur die neuen und brillanten.
Wenn Sie ein neuer Webentwickler oder selbst ein erfahrener Entwickler sind, der sich mit der Erkundung neuer APIs befasst, stehen Sie wahrscheinlich diesen drei Schritten vor: Lernen, Erstellen und Iterieren.
Matt Gaunt berichtet über die laufenden Bemühungen des Teams für die Chrome-Entwicklerplattform zur Lösung dieser Probleme.
Lernen
Web Fundamentals umfasst eine Reihe von Anwendungsfalldokumentationen, die eine Reihe von Themen abdecken. Das Hauptziel besteht darin, Entwickler mit wenig oder keinem Wissen zu gewinnen und Best Practices so schnell wie möglich zu implementieren.
Eines der Hauptziele von Web Fundamentals besteht darin, dass die „Choice“-Lähmung so weit wie möglich reduziert wird, wenn Sie mit einem Thema noch nicht vertraut sind. Addy Osmani deckt dieses Thema bei Pastry Box perfekt ab.
Wenn du Probleme mit der Website oder ihrem Inhalt entdeckst oder möchtest, dass Web Fundamentals ein bestimmtes Thema behandelt, kannst du uns Feedback auf GitHub geben.
Erstellen
Um Sie beim Start eines neuen Webprojekts zu unterstützen, haben wir das Web Starter Kit entwickelt. Es enthält alles, was Sie brauchen:
- Solider Build-Prozess
- Textbaustein-HTML
- Gestaltungsrichtlinien
Der Erstellungsprozess
Denjenigen unter Ihnen, die noch nicht mit dem Erstellen von Prozessen vertraut sind, können Sie sich einen Build-Prozess als Programm vorstellen, das eine Reihe von Dateien ausführt, bestimmte Aufgaben ausführt und neue Versionen an einem anderen Speicherort ausgibt. Die Aufgaben optimieren die Dateien, um Ladezeiten zu verbessern, auf mögliche Fehler zu prüfen oder Aufgaben zu verarbeiten, die automatisiert werden können.
Im Web Starter Kit sind folgende Prozesse verfügbar:
Wir komprimieren und verketten CSS und JavaScript, damit der Browser die Datei schnell abrufen kann. Außerdem wird der JavaScript-Code über JSHint ausgeführt, um nach Best Practices für JavaScript und häufigen Codierungsfehlern zu suchen. Bilder werden mit "imagemin" reduziert und Sie können die Dateigröße erheblich reduzieren. Wir haben auch ein Verfahren zum Erstellen der Styleguides-CSS.
Standardcode für HTML-Code für mehrere Geräte
Der erste HTML-Satz, den Sie für eine neue Seite schreiben, ist ziemlich langweilig und wahrscheinlich haben Sie eine Möglichkeit, schnell eine HTML-Datei vorrätig zu bekommen, die auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert.
Im Web Starter Kit sollen alle Funktionen unterstützt werden, die die Grenzen zwischen der Plattform und Ihrer Website verschwimmen lassen. Deshalb haben wir Unterstützung für Zum Startbildschirm und zu Ladebildschirmen für Android, Windows Phone, iOS und Opera Coast hinzugefügt.
Gestaltungsrichtlinien
Der letzte Teil des Web Starter Kit ist der Styleguide.
Dadurch erhält jedes neue Projekt eine große Auswahl an Standardstile und -komponenten, die die stilorientierte Entwicklung fördern. Sie können Elemente vorhandene Stile ändern und eigene Stile hinzufügen.
Anfang nächsten Jahres soll die nächste Version des WSK veröffentlicht werden. Wir arbeiten intensiv daran, die Zusammensetzung des Styleguides und die Umstellung auf ein Material Design-Design zu vereinfachen. Matthat auf dem Chrome Dev Summitein frühes Modell gezeigt, wie dies aussehen könnte. Unten siehst du ein Beispiel.
Verbessern und wieder testen
Sobald Sie damit begonnen haben, Ihre neuen Kenntnisse in die Praxis umzusetzen, sollten Sie die Entwicklertools verwenden, um Fehler zu beheben, Ihre Arbeit zu verbessern und zu verwalten.
In den Entwicklertools gibt es einige große neue Funktionen. Matt sieht sich die folgenden neuen Funktionen an.
Gerätemodus
Der Gerätemodus ist ein neuer Abschnitt in den Entwicklertools, in dem du schnell sehen kannst, wie deine Website auf verschiedenen Mobilgeräten funktioniert, während du dir die Medienabfragen in deinem CSS ansiehst.
Eine der praktischen Funktionen des Gerätemodus ist die Möglichkeit, die Netzwerkgeschwindigkeit zu drosseln, sodass Sie die Erfahrung eines Nutzers mit einer GPRS-, EDGE-, 3G-, DSL- oder WLAN-Verbindung simulieren können.
Farbprofiler
Wenn Sie den Tab „Zeitachse“ geöffnet und auf die Schaltfläche zum Aufzeichnen geklickt haben, sind Ihnen wahrscheinlich schon einige Paint-Ereignisse im Wasserfall passiert. Normalerweise wäre dies ein schwarzer Kasten, an dem Sie nicht erkennen können, warum oder was der Browser getan hat.
„Paint-Profiler no“ liefert weitere Informationen darüber, was genau der Browser während dieses Paints tut.
Nachverfolgung der Entwertung
Die Entwicklertools geben jetzt wann immer möglich einen Grund an, warum eine Farbe oder ein Layout aufgetreten ist. Dies ist für alle nützlich, die sich mit der Zeitachse und dem Browserverhalten vertraut machen. Außerdem können Sie damit Ihren Code optimieren, um Leistungsprobleme zu vermeiden.
Flame-Diagrammansicht
Dies ist eine ganz andere Art, die in der Zeitachse verfügbaren Informationen darzustellen. So lässt sich leichter erkennen, wie sich Aufgaben überschneiden und welches Browserverhalten als Ergebnis anderer Aufgaben aufgetreten ist.
Frame-Viewer
In der Flame-Diagramm-Ansicht können Sie einen bestimmten Frame auswählen und darin sehen, welche Elemente der Seite auf eine zusammengesetzte Ebene hochgestuft wurden und warum sie hochgestuft wurden.
Infos Erstellen. Verbessern und wieder testen
Dies sind einige der Bemühungen des Chrome-Teams, um Entwickler dabei zu unterstützen, sich schnell in die Webentwicklung einzuarbeiten. Sie sollten sich also Web Fundamentals, das Web Starter Kit und die neuen Funktionen in den Chrome-Entwicklertools ansehen.