Frische Ressourcen für Web-Entwickler - Oktober 2017

In diesem Monat wird Fresh Resouces etwas anders sein als in den vorherigen Monaten. Wir, Webentwickler, verdienen unseren Lebensunterhalt in einer sich schnell verändernden Branche, und ich habe viele Ankündigungen von einigen der größten Technologieunternehmen wie Google, Microsoft, Firefox und PHP gesehen, die unsere Art und Weise verändern werden das Netz.

In dieser Ausgabe wird die Hälfte unserer Liste über diese Ankündigungen sein. Also, sei bereit, Hallo in die Zukunft zu sagen!

Wesentliche Bildoptimierung

Es ist ein erschöpfender Artikel, um ein Bild für das Web von Addy Osmani zu optimieren . Es ist nicht wie bei anderen Zuschreibungen, die sich nur um Anleitungen drehen, oder nur um das Gebotene und Verbotene.

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

PHP 7.2

Eine umfassende Referenz zu PHP 7.2 . Abgesehen von Hinzufügungen, die die PHP-Anwendungsleistung verbessern, kommt PHP 7.2 auch mit einer Abschreibung, bei der mehrere Dinge entfernt werden und nicht länger verwendet werden sollten.

In PHP 7.2 gibt es zwei Funktionen, die 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 immer noch diese beiden Funktionen verwenden.

Webfreigabe-API

Ich habe ehrlich gesagt nicht gesehen, dass diese API ins Web kommt. Da es sich bei der Hälfte unserer Interaktion im Web um "Sharing" handelt, erleichtert diese API Webentwicklern die Entwicklung einer nativen Sharing-Erfahrung, insbesondere auf der mobilen Plattform.

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

Asynchrones Bildattribut

Eine weitere Sache, die das Web revolutionieren wird, ist das async Attribut für das img-Element. Zum Zeitpunkt des Schreibens gibt es eine Reihe von Ansätzen zum asynchronen Laden von Bildern, die einen kleinen Trick mit JavaScript beinhalten . Bald können wir einfach async=on auf das img Element hinzufügen.

Firefox Quantum

Mozilla hat mit einigen Verbesserungen, unter dem Codenamen "Project Quantum", aggressiv Updates an Firefox weitergegeben. Es enthält Quantum CSS - eine neue Engine für extrem schnelles CSS-Rendering, eine neue Benutzeroberfläche und neue DevTools .

Die Veröffentlichung gewinnt in den Webentwicklern zunehmend an Bedeutung und einige haben ihren Hauptbrowser bereits auf Firefox umgestellt. In diesem Projekt werden noch weitere kommen, einschließlich Quantum DOM und WebRender. Werden wir Node.js Contender basierend auf der Firefox Quantum Engine sehen? Nun, vielleicht ja.

MS Edge für iOS und Android

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

Gutenberg

WordPress ist derzeit an einem ehrgeizigen Projekt mit dem Codenamen Gutenberg. Gutenberg ist ein Facelift für den WordPress-Editor, der fast ausschließlich mit JavaScript erstellt wurde .

An diesem Punkt wird Gutenberg mit React erstellt, aber das Projekt erwägt ein anderes Framework wie Preact, Vue oder etwas anderes. Es ist eine komplizierte Situation für jetzt. Also, für WordPress-Entwickler, die Themen und Plugins erstellen, sollten Sie das Projekt im Auge behalten, denn es wird die Art verändern, wie wir WordPress für immer erstellen .

FoitFout

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

Vuera

Vuera ist eine JavaScript-Bibliothek, mit der Sie Vue und React zusammen verwenden können . Sie können eine Vue-Komponente aus einer .vue oder eine React-Komponente in Vue verwenden. Ihr Team kann jetzt produktiver mit jedem Rahmen sein, den sie bevorzugen.

Ziehbar

"Draggable" ist eine fantastische Bibliothek von Shopify. Es basiert auf der nativen Drag & Drop-API des Browsers und ermöglicht Ihnen die Arbeit mit einer umfangreichen API . Falls Sie etwas nicht benötigen, können Sie ein benutzerdefiniertes Modul schreiben , um seine Funktionen zu erweitern . Schau dir die Demo an, um zu sehen, wie es funktioniert.

FlussdiagrammJS

Wie der Name schon sagt, ist FlowchartJS eine Bibliothek, die es ermöglicht, ein Flussdiagramm wie in PowerPoint zu erstellen . In ähnlicher Weise können Sie verschiedene Formen des Diagramms erstellen, einschließlich Kreis, Ellipse, Quadrat, Diamant, Dreieck usw.

FrontEnd Checkliste

Eine Handvoll Checklisten zum Erstellen von HTML-Seiten aus jahrelanger Erfahrung . Die Checkliste deckt verschiedene Bereiche einer Webseite ab, wie z. B. Head-Tags, CSS, JavaScript, Barrierefreiheit, Performances und sogar SEO.

QuickBill

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

Mocka

Mocka ist ein Platzhalter für Inhalte, den Sie für die Prototyping-Website verwenden können . Es ist nur 500 Bytes 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 stellt eine Reihe von Klassen zur Verfügung, einschließlich mocka-media zum Erstellen eines Bildplatzhalters, mocka-heading zum Erstellen eines mocka-text und mocka-text zum Erstellen eines beliebigen Textes.

VueStar

VueStar ist eine Vue-Komponente, um einen funkelnden Effekt hinzuzufügen, wenn Sie auf ein Symbol klicken, ähnlich wie Twitter mit dem "Herz" -Symbol in der mobilen App. Die Komponente führt ein neues Element mit dem Namen vue-star das Sie im Web-Zeitalter hinzufügen können. Und du bist fertig!

Grid Spielplatz

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

GridPlayground ist im Grunde eine Mozilla-Initiative, die CSS Grid lehrt und die Einführung von CSS Grid vorantreibt . Sogar Firefox bringt ein neues Werkzeug zu den DevTools, um das Grid-Layout zu untersuchen.

Snippet-Manager

"Snippet Manager" ist eine einfache App zum Speichern und Verwalten von Code-Snippets . Sie können ein neues Objekt erstellen, den Code einfügen und den Punkt festlegen. An diesem Punkt nichts Besonderes und es bietet nur den Quellcode, den Sie mit NPM kompilieren müssen.

IBM Plex

Eine neue , von IBM entworfene Schriftfamilie namens IBM Plex, die auch Styleguides in IBM Corporate Typography einführt. Es besteht aus drei Schriftarten Serifenlos, Serif und Mono. Das Bundle enthält auch die Schriftart für die Sketch App.

Tabbed-Schnittstelle

Ein toller Schritt zum Aufbau einer progressiven und zugänglichen Tab-Navigation mit minimaler Verwendung von JavaScript . Eine großartige Quelle für diejenigen, die mehr über barrierefreies Design erfahren möchten.

SwissInCSS

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