Neue Ressourcen für Webdesigner und -entwickler (Oktober 2017)

In diesem Monat werden Fresh Resouces ein wenig anders sein als in den vergangenen Monaten. Wir, Webentwickler, leben von einer sich schnell verändernden Branche und ich habe eine Menge Ankündigungen von einigen der größten Tech-Unternehmen wie Google, Microsoft, Firefox und PHP gesehen, die die Art und Weise, wie wir bauen, verändern werden das Netz.

In dieser Folge wird sich die Hälfte unserer Liste mit diesen Ankündigungen befassen. Seien Sie also bereit, die Zukunft zu begrüßen!

Wesentliche Bildoptimierung

Es ist ein erschöpfender Artikel zur Optimierung eines Bildes für das Web geschrieben von Addy Osmani. Es ist nicht wie bei anderen Auffassungen, bei denen es um das How-To oder nur um das Tun und Nicht-Drehen geht.

Dieser Artikel führt Sie durch die technischen Details und die Wissenschaft hinter der Optimierung. Außerdem finden Sie ausführliche Informationen zu verschiedenen Optimierungsansätzen und Bildformaten, Tools, Tipps und einige Beispiele aus der Praxis.

PHP 7.2

Eine umfassende Verweis auf das, was zu PHP 7.2 kommt. Abgesehen von Ergänzungen, die die Performance von PHP-Anwendungen verbessern, ist auch PHP 7.2 enthalten Abschreibungen, bei denen mehrere Dinge entfernt werden und sollte nicht mehr verwendet werden.

In PHP 7.2 gibt es zwei Funktionen, die nämlich veraltet sind create_function () und __autoload (). Wenn Sie ein Webentwickler sind, Überprüfen Sie Ihren Code und nehmen Sie die erforderlichen Änderungen vor. Ich habe zahlreiche WordPress-Plugins gesehen, die diese beiden Funktionen noch verwenden.

Web Share API

Ich habe ehrlich gesagt nicht diese API im Web gesehen. Da jedoch die Hälfte unserer Interaktion im Internet ungefähr ist “teilen”, Diese API wird viel bewirken Für Webentwickler einfacher, ein natives Sharing-Erlebnis aufzubauen, insbesondere auf der mobilen Plattform.

Diese API ist derzeit nur in Google Chrome für Desktop und Android verfügbar. Schauen Sie sich dieses Youtube-Video an, um es in Aktion zu sehen.

Image Async-Attribut

Eine andere Sache, die das Web revolutionieren wird, ist die asynchron Attribut für das Element img. Zum Zeitpunkt des Schreibens gibt es eine Handvoll Ansätze Bild asynchron laden, das einen kleinen Trick von JavaScript beinhaltet. Bald können wir nur noch hinzufügen async = ein auf die img Element.

Firefox Quantum

Mozilla hat Firefox-Updates mit einigen Verbesserungen (Codenamen) aggressiv vorangetrieben “Projekt Quantum”. Es enthält Quantum CSS - eine neue Engine für extrem schnelles CSS-Rendering, eine neue Benutzeroberfläche und neue DevTools.

Die Freigabe ist Traktion bei Web-Entwicklern und einige haben ihren Hauptbrowser bereits auf Firefox umgestellt. In diesem Projekt sind noch weitere Projekte enthalten, darunter Quantum DOM und WebRender. Werden wir einen auf Firefox Quantum Engine basierenden Node.js-Konkurrenten sehen? Na ja vielleicht ja.

MS Edge für iOS und Android

Microsoft hat es gerade angekündigt veröffentlicht seinen neuesten Browser, Edge, für iOS und Android. Dies bedeutet, dass es einen weiteren Browser für Ihre Websites gibt, mit dem Sie testen können.

Gutenberg

WordPress befindet sich derzeit in einem ehrgeizigen Projekt mit dem Namen Gutenberg. Gutenberg ist ein Facelift zum WordPress-Editor, der fast vollständig mit JavaScript erstellt wurde.

An diesem Punkt ist Gutenberg gebaut mit React Das Projekt betrachtet jedoch einen anderen Rahmen wie Preact, Vue oder etwas anderes. Es ist vorerst eine komplizierte Situation. Also, für WordPress-Entwickler, die Themen und Plugins erstellen, behalten Sie das Projekt im Auge Es wird die Art und Weise, wie wir WordPress erstellen, für immer verändern.

FoitFout

FoitFout ist ein praktisches Werkzeug, um zwei unterschiedliche Ansätze, sogenannte FOIT und FOUT, miteinander zu vergleichen Laden Sie benutzerdefinierte Schriftarten im Web. Mit diesem Tool können Sie die beiden Ansätze nachahmen und entscheiden, welcher Ansatz für Ihre Website am besten geeignet ist.

Vuera

Vuera ist ein JavaScript-Bibliothek, mit der Sie Vue und React zusammen verwenden können. Sie können eine Vue-Komponente von a einschließen .vue oder verwenden Sie eine React-Komponente in Vue. Dein Team kann jetzt sein produktiver mit jedem Framework dass sie es vorziehen zu benutzen.

Ziehbar

“Ziehbar” ist eine fantastische Bibliothek von Shopify. Es basiert auf dem nativen Browser Drag-n-Drop-API und ermöglicht Ihnen eine umfangreiche API, mit der Sie arbeiten können. Falls es nicht etwas gibt, was Sie brauchen, können Sie ein schreiben benutzerdefiniertes Modul zur Erweiterung der Funktionalität. Schauen Sie sich die Demo an, um zu sehen, wie es funktioniert.

FlussdiagrammJS

Wie der Name schon sagt, ist FlowchartJS eine Bibliothek, die das Erstellen eines Flussdiagramms wie in PowerPoint ermöglicht. Auf ähnliche Weise können Sie verschiedene Diagrammformen erstellen, einschließlich Kreis, Ellipse, Quadrat, Rauten, Dreieck usw.

QuickBill

Ein Leichtgewicht und unkomplizierte Webanwendung zum Erstellen einer Rechnung. Es verwendet native Browsertechnologien und APIs zur Ausführung, sodass kein Konto erforderlich ist. Gehen Sie einfach auf die Website, fügen Sie die Artikel der Rechnung hinzu und generieren Sie die PDF-Datei. Das ist es!

Mocka

Mocka ist ein Platzhalter für Inhalte, den Sie für das Prototyping von Websites verwenden können. Es sind nur 500 Byte und vollständig anpassbar. Sie können es einfach in die CSS-Datei Ihres Projekts einfügen, indem Sie das Sass-Mixin verwenden.

Das CSS bietet eine Reihe von Klassen einschließlich Mocka-Medien einen Platzhalter für Bilder erstellen, Mocka-Überschrift eine Überschrift erstellen und Mocka-Text einen beliebigen Text erstellen.

VueStar

VueStar ist ein Vue-Komponente, um einen funkelnden Effekt hinzuzufügen, wenn Sie auf ein Symbol klicken, ähnlich dem, was Twitter mit dem macht “Herz” Symbol in ihrer mobilen App. Die Komponente führt ein neues Element mit dem Namen ein vue-star wo Sie es im Webzeitalter hinzufügen können. Und du bist fertig!

Spielplatz

CSS Grid führt ein neues Konzept im Web ein, um ein Layout zu erstellen. Auf den ersten Blick ist es aufgrund der zahlreichen neuen Eigenschaften auf den ersten Blick komplex.

GridPlayground ist im Grunde ein Mozilla-Initiative, um CSS Grid zu unterrichten und die Einführung von CSS Grid voranzutreiben. Sogar Firefox bietet den DevTools ein neues Werkzeug zur Überprüfung des Rasterlayouts.

Snippet-Manager

“Snippet-Manager” ist ein einfaches App zum Speichern und Verwalten von Code-Snippets. Sie können ein neues Element erstellen, den Code einfügen und den Punkt festlegen. An diesem Punkt ist nichts zu schickes und es stellt nur den Quellcode bereit, den Sie zum Kompilieren mit NPM benötigen.

Tabbed-Schnittstelle

Ein großer Schritt für Schritt zum Erstellen einer progressiven und zugänglichen Tab-Navigation mit minimalem Einsatz von JavaScript. Eine großartige Ressource für alle, die mehr über barrierefreies Design erfahren möchten.

SwissInCSS

SwissInCSS zeigt verschiedene klassische Schweizer Plakatdesigns, die ausschließlich CSS verwenden. Der Quellcode ist in CodePen verfügbar.