Inhalt
- 01. Layout Land
- 02. basicScroll
- 03. Röntgen
- 04. Compositor Lab
- 05. PWABuilder
- 06. Schöner
- 07. Google Speed Index Calculator
- 08. Gatsby
- 09. CSS-Farbverlauf
- 10. Überlauf
Wenn Sie sich von der Menge an Lernergebnissen überwältigt fühlen, die heutzutage erforderlich sind, um mit neuen Webtechnologien Schritt zu halten, ist die gute Nachricht, dass viele Menschen erstaunliche Tools entwickeln, die Ihnen helfen. Diesen Monat in unserem Besten Webdesign-Tools Zusammenfassend betrachten wir Ressourcen zum Erstellen und Verwalten von Progressive Web Apps, statischen Websites, Designsystemen und mehr.
01. Layout Land
Dieser fantastische YouTube-Kanal von Jen Simmons, Designerin und Entwicklerin von Mozilla, zeigt Ihnen sehr intelligente und interessante Dinge, die Sie mit dem Layout im Web tun können. In diesen Tutorials erhalten Sie eine solide Grundlage für die Verwendung von Flexbox, Grid, CSS-Formen und Clip-Pfad in Ihren Entwürfen und erhalten nützliche Beispiellayouts.
Sie erfahren mehr über Kernkonzepte, z. B. wann Sie Grid verwenden und wann Sie sich für Flexbox entscheiden, wie Sie mit Internet Explorer arbeiten und wie Sie belastbares CSS schreiben, das Sie in Zukunft weniger stören wird. Um einen Vorgeschmack auf das zu bekommen, was Sie erwartet, lesen Sie die Artikel-6-Weblayout-Mythen von Simmons.
02. basicScroll
Das Fehlen von Variablen in CSS war lange Zeit ein Frust für Entwickler, aber sie sind endlich da und Sie können sie verwenden, um Ihr Leben viel einfacher zu machen und coole Dinge zu tun! basicScroll ist ein cleveres Tool, das CSS-Variablen verwendet, um Animationen basierend auf der Bildlaufposition auszulösen.
Neben den benutzerdefinierten CSS-Eigenschaften erfordert basicScroll requestAnimationFrame zu funktionieren, aber darüber hinaus ist es Framework-unabhängig und verfügt über eine einfache JavaScript-API. Sie können alle Ihre Animationen mit CSS erstellen. Wenn Sie jedoch noch mehr Kontrolle wünschen, können Sie JavaScript verwenden. Es funktioniert sowohl auf dem Desktop als auch auf dem Handy und verspricht „verrückte“ Leistung.
03. Röntgen
Atom-Fans möchten vielleicht ein Auge auf dieses Projekt werfen, bei dem es sich um einen experimentellen Texteditor handelt, der auf den Erkenntnissen basiert, die Atom seit seiner Einführung gelernt hat. Im Wesentlichen ist es eine Möglichkeit, mit radikalen Ideen zu experimentieren, ohne Atom zu destabilisieren. Das Projektziel besteht darin, einen schnellen Code-Editor zu entwickeln, der es Benutzern erleichtert, gemeinsam zu codieren und dem Programm über leistungsstarke APIs ihre eigenen Funktionen hinzuzufügen. Die Webkompatibilität hat ebenfalls Priorität, sodass sich das Bearbeiten in Xray ähnlich anfühlt wie das Bearbeiten in GitHub.
04. Compositor Lab
Da viele Unternehmen Design-Systeme verwenden, um ihre Produkte kohärent zu entwickeln, ist es sinnvoll, Tools zu entwickeln, mit denen Sie in diesem Rahmen arbeiten können. Compositor Lab ist ein solches Tool: Es dient zum Aufbau und zur Wartung eines Designsystems.
Mit Lab können Sie produktionsbereite React-Komponenten erstellen, ohne Code schreiben zu müssen, Ihren Workflow beschleunigen und die Arbeit zwischen Designern und Entwicklern vereinfachen. Sie können Ihre Arbeit in verschiedenen Formaten exportieren und Ihren Styleguide mit einem einzigen Klick veröffentlichen.
05. PWABuilder
Progressive Web Apps sind die Antwort des Webs auf native mobile Apps. Sie versuchen, die Erfahrung einer nativen App zu replizieren, jedoch im Web. Dies bedeutet, dass sie zuerst offline, zuverlässig, schnell und so einfach zu verwenden sind wie eine native App. Wenn Sie eine progressive Web-App mit Daten von Ihrer vorhandenen Website erstellen möchten, haben Sie Glück: PWABuilder vereinfacht den Vorgang erheblich.
Geben Sie die URL ein und Sie können das Manifest erstellen, den Service Worker erstellen und die fertige App veröffentlichen. Wenn Sie nicht viel über Progressive Web Apps wissen, ist dieser Artikel eine gute Einführung.
06. Schöner
Es mag sich wie eine zusätzliche Belastung anfühlen, die Dinge in Ordnung zu halten, aber Ihr zukünftiges Ich wird es Ihnen danken, dass Sie gut formatierten Code geschrieben haben, der einfacher zu navigieren und zu warten ist - genau wie Ihre Kollegen! Prettier ist ein Meinungsbildner, der sich in viele Editoren wie Atom und Sublime Text sowie in viele Sprachen integrieren lässt.
Der Vorteil der Verwendung eines Tools besteht darin, dass es automatisiert ist, so dass es für Sie viel einfacher ist, und dass es auf standardisierte Weise durchgeführt wird, sodass weniger Raum für nervige Debatten über das Formatieren von Dingen bleibt. Klicken Sie einfach auf Speichern und der Code wird formatiert.
07. Google Speed Index Calculator
Wir alle wissen, dass eine langsame mobile Website weniger Conversions bedeutet, aber dieser Taschenrechner hilft Ihnen dabei, eine Nummer darauf zu setzen. Geben Sie Ihre URL ein und die Speed Scorecard ermittelt, wie Ihre Website im Vergleich zur Konkurrenzleistung abschneidet. Der Revenue Impact Calculator zeigt Ihnen dann an, wie viel Geld Ihre langsame Website Sie kostet.
Diese Zahlen können hilfreich sein, um Ihren Argumenten Gewicht zu verleihen, wenn Sie die Leistung einer Website priorisieren möchten. Auf dieser Seite finden Sie auch einige nützliche Anleitungen, wie Sie die Dinge beschleunigen können.
08. Gatsby
Gatsby ist ein statischer Site-Generator für React, mit dem Sie schnelle und sichere Sites mithilfe moderner Web-Technologie erstellen können. Statische Dateien sind viel einfacher bereitzustellen, sodass die Skalierung Ihrer Website viel einfacher und schneller ist. Das Einspielen von Daten in Ihre Site ist dank eines großartigen Plugin-Ökosystems, mit dem Sie mithilfe von GraphQL Daten aus CMS, APIs, Datenbanken und mehr abrufen können, unkompliziert. Bei Gatsby-Websites handelt es sich um progressive Web-Apps. Dies bedeutet, dass nur die kritischen Daten geladen werden, damit Ihre Website so schnell wie möglich vor Ihren Benutzern angezeigt wird.
09. CSS-Farbverlauf
Warum sollten Sie Code verwenden, um CSS-Verläufe zu erstellen, wenn Sie dies nicht müssen? Es macht keinen Sinn, das Rad neu zu erfinden. Sie können auch ein webbasiertes Tool wie dieses verwenden, um die Aufgabe zu erledigen. CSS Gradient ist eine einfache App, die eine schöne Oberfläche zum Erstellen von CSS-Verläufen bietet. Wählen Sie einen von fünf Verlaufsstilen aus und passen Sie die Schieberegler an, bis Sie das bekommen, was Sie brauchen. Der Code wird darunter angezeigt und kann kopiert und in Ihre Site eingefügt werden.
10. Überlauf
Overflow wurde von den Leuten hinter Proto.io erstellt, die etwas machen wollten, um den Prozess der Designkritik zu unterstützen. Sie fanden heraus, dass die übliche Methode zur Präsentation von Designarbeiten ein wichtiges Element ausließ; die Geschichte des Designs und die Gründe der Designer für die Entscheidungen, die sie getroffen hatten.
Sie fanden heraus, dass die Antwort darauf Benutzerflüsse sind: Flussdiagramme, die zeigen, wie ein Benutzer durch eine Schnittstelle navigiert.Bisher gab es jedoch kein Tool, das speziell für die Erstellung von Benutzerabläufen entwickelt wurde. Daher war es schwierig, sie in einen Workflow zu integrieren. Überlauf soll diesen Bedarf decken. Es sieht aufregend aus und Sie können sich jetzt für einen frühen Zugriff anmelden. In diesem Blog-Beitrag wird ausführlicher erläutert, wie Benutzerströme Ihnen helfen können.
