Freecodecamp: Ersetzen Sie ionische Symbole durch ihre Font Awesome-Entsprechungen und entfernen Sie ionische Symbole als Abhängigkeit

@ QuincyLarson Ich kann es versuchen!
Obwohl wir SVGs anstelle von Schriftartensymbolen hinzufügen und Schriftarten fantastisch als Abhängigkeit entfernen können.

Wir können SVGs anstelle von Schriftsymbolen hinzufügen

Meinen Sie damit, dass wir diese Assets erstellen und verwalten?

Ja, im Moment machen wir das für D3.js Bild.
Ich denke, wir können SVGs unter CC-Lizenz von verschiedenen Websites erhalten oder sogar direkt kostenlos kopieren.
Und viele Leute schlagen vor, dass man keine Symbolschriftarten verwenden sollte, sondern SVGs aus Sicht der Barrierefreiheit verwenden sollte (wie Bootstrap 4 Symbole fallen lässt und zu SVG wechselt).

FontAwesome 5 wird auch alle SVG-Symbole anbieten. Dies ist eine enorme Kostenersparnis, die durch das Erstellen und Verwalten eines Symbolsatzes selbst entsteht.

Und ein großer Bonus ist, dass sie alle Symbole haben, einschließlich unseres Symbols fa-free-code-camp ab 4.7.0

Und wie gesagt, dies würde sowieso kostenlos (als SVG) zur nächsten Hauptversion kommen, mit Backword-Kompatibilität.

Im Moment sollten wir uns einfach auf das Problem konzentrieren, von ionischen Symbolen zu Schriftarten überzugehen, die wir bereits als Abhängigkeit haben.

@BhaveshSGupta Ich stimme @raisedadead zu, dass wir nur Font Awesome verwenden sollten, eine ausgezeichnete Bibliothek. Wir müssen das Rad nicht neu erfinden.

Wir würden uns über Ihre Hilfe freuen. Würden Sie daran interessiert sein, daran zu arbeiten? Wenn ja, können Sie uns regelmäßig Statusaktualisierungen geben, damit wir wissen, wie es weitergeht?

@ QuincyLarson Sicher Lass mich das heute Abend sehen.

hey @QuincyLarson , @raisedadead
Dies sind alles Symbole für ionische Symbole, die ich finden konnte. Ich habe entsprechende Symbole für fantastische Schriftarten markiert. Wenn Sie etwas ändern müssen, lassen Sie es mich wissen.

• [] .ion-android-hand zu .fa-hand-paper-o (email-signin.jade)
• [] .ion-person-add zu fa-user-plus (email-signup.jade)
• [] .ion-close-circled to .fa-times-circle (update-email.jade, flash.jade, flyer.jade)
• [] .ion-social-html5 bis .fa-html5 (home.jade)
• [] .ion-social-css3 bis .fa-css3 (home.jade)
• [] .ion-social-github zu .fa-github (home.jade)
• [] .ion-android-globus zu .fa-globus (pmi-acp-agile-project-manager.jade)
• [] .ion-Karte zu .fa-Kreditkarte (pmi-acp-agile-project-manager.jade)
• [] .ion-android-kalender zu .fa-kalender (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-box zum .fa-archive (pmi-acp-agile-project-manager.jade)
• [] .ion-Universität zu .fa-Abschluss-Kappe (pmi-acp-agile-Projektmanager.jade)
• [] .ion-ios-list to .fa-list-alt (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-people an .fa-users (pmi-acp-agile-project-manager.jade)

- [] .ion-Einstellungen zu .fa-Schraubenschlüssel (pmi-acp-agile-project-manager.jade)

Es wurden keine Symbole für Folgendes gefunden.
.ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

Das Hinzufügen des NodeJS-Symbols zur FA-Bibliothek steht seit Dezember 2013, Ausgabe Nr. 2584, aus . Ich konnte kein Problem für das JS-Symbol finden. Ich habe mir die Freiheit genommen, die beiden oben genannten Symbole mithilfe von Fontello- und Ion Icon-SVGs in Symbolschriftarten umzuwandeln.

Ich gehe davon aus, dass selbst wenn wir vollständig zu FA-Symbolen wechseln, benutzerdefinierte Symbole erforderlich sind und wir daher eine benutzerdefinierte FCC-Symbolschrift beibehalten sollten.

Symbol SVGs.zip

fontello-7ce4e099.zip

@ BhaveshSGupta ausgezeichnete Liste! Ja - haben Sie Zeit, diese Ersetzungen selbst vorzunehmen, damit Sie dies in der Git-Geschichte gutschreiben können?

@iHarshad Ja - ich stimme zu, dass wir unsere eigenen SVG-Bilder

@ QuincyLarson sicher, warum nicht würde ich das gerne tun,
und wenn wir ein benutzerdefiniertes Kit verwenden möchten, können wir so etwas wie icomoon.io verwenden, wo wir fantastische Schriftarten und benutzerdefinierte Schriftarten hinzufügen und ein einzelnes Kit mit nur den erforderlichen Symbolen erstellen können

@ BhaveshSGupta Ja, das könnten wir versuchen. Ich könnte auch einfach die Handvoll spezifischer SVG-Dateien nehmen, die wir brauchen, und sie in S3 einfügen. Sie sind nicht sehr groß - nur ein paar Kilobyte pro Stück :)

@QuincyLarson Ich denke, @BhaveshSGupta hat hier einen guten Vorschlag gemacht.

Anstatt die gesamte Font Awesome-Bibliothek zu laden, könnten wir so etwas wie Fontello verwenden , um Symbole von

@ dakshshah96 OK - aber wenn ich das richtig verstehe, werden wir wahrscheinlich trotzdem die gesamte Font Awesome-Bibliothek laden wollen, da

Lieber Herr,

Warten Sie auf meinen Mitwirkenden von sieben Garten Typodeart.

Grüße
Am 22. Juni 2017, 6:02 Uhr, schrieb "Quincy Larson" [email protected] :

@ dakshshah96 https://github.com/dakshshah96 OK - aber wenn ich verstehe
Richtig, ich denke, wir werden die gesamte Font Awesome-Bibliothek laden wollen
sowieso, weil @BerkeleyTrue https://github.com/berkeleytrue ist
Wenn Sie einen JSBin-ähnlichen Editor erstellen, möchten wir, dass Camper Font verwenden können
Super da drin.

- -
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310217649 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/ALc8XLcX7m38iuBq7htBigFEqOI5lFR6ks5sGZLggaJpZM4MWGCb
.

@ QuincyLarson Ich

Es gibt jedoch eine Alternative. Vielleicht könnten Camper ein Skript-Tag einfügen lassen, anstatt Font Awesome auf der gesamten Website einzuschließen, obwohl es nur für den Editor benötigt wird, der gerade erstellt wird?

In icomoon können wir die ganze Schrift zusammen mit den benutzerdefinierten Symbolen, die ich habe, fantastisch hinzufügen
Dies für viele Projekte zu tun, nicht nur für großartige Schriftarten, sondern auch für einige andere kostenlose
Kits.

Am 22. Juni 2017, 03:38 Uhr schrieb Daksh Shah, [email protected] :

@QuincyLarson https://github.com/quincylarson Ich sehe, dann werden wir brauchen
Font Awesome.

Es gibt jedoch eine Alternative. Vielleicht könnten wir Camper einfügen lassen
Skript-Tag, anstatt Font Awesome auf der gesamten Website einzuschließen, obwohl dies der Fall ist
benötigt nur auf dem Editor gebaut?

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310218975 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AEA75e44KO5ivCcTCHyHEFTNu9LfGlN7ks5sGZQ8gaJpZM4MWGCb
.

@BhaveshSGupta Würde sich dies auf die Syntax auswirken, mit der Camper ihren Codierungsherausforderungen und -projekten auf freeCodeCamp Font Awesome-Symbole hinzufügen?

@QuincyLarson Es würde eine kleine Änderung geben, die anstelle der Fa-Fa-Suche die

font-awesome hat gerade angekündigt, dass sie in Alpha sind und bis nächsten Monat auf ihrem Kickstarter in der öffentlichen Beta sein sollen.

Sie werden das SVG-Framework als OSS für alle freigeben, um benutzerdefinierte Symbole zu erstellen.

Wir würden keine zusätzlichen Bibliotheken oder Abhängigkeiten außer FA benötigen.

@raisedadead danke für das Heads-up. @BhaveshSGupta Da wir Font Awesome bereits für alle unsere Symbole verwenden (oder zumindest, sobald wir die verbleibenden ionischen Symbole entfernt haben), schlage ich vor, dass wir darauf warten, dass Font Awesome es veröffentlicht, und wir können einfach statisches SVG verwenden Dateien nach Bedarf (ich kann sie in einem S3-Ordner hosten)

@QuincyLarson Ich würde aktualisieren ikonische wie pro diese , obwohl ich im Wechsel für .ion-sozial Javascript erforderlich wäre (home.jade)
.ion-social-nodejs (home.jade)

@ BhaveshSGupta Super ! Hier ist das JS-Logo in SVG (wir wollten es zentrieren und vergrößern - wissen Sie, wie das geht?

Hier ist das Node-Logo - Sie müssen es herunterladen und monochrom machen: https://seeklogo.com/vector-logo/273749/node-js

Bitte lassen Sie mich wissen, ob ich Ihnen dabei weiterhelfen kann :)

@BhaveshSGupta Hier sind die oben genannten Logos bearbeitet, wie @QuincyLarson erwähnt. Ich habe mit VectorPaint Änderungen vorgenommen und die Branding-Metadaten entfernt.

Bearbeitetes JS SVG-Logo - https://goo.gl/xP72mF
Bearbeitetes Knoten-SVG-Logo - https://goo.gl/dN4i2M

@iHarshad Sieht fantastisch aus, @QuincyLarson Ich sofort im Ordner public / images

@BhaveshSGupta @iHarshad Es wäre großartig, wenn Sie diese auch über eine PR zum freeCodeCamp / Assets-Repo hinzufügen könnten.

@raisedadead Sicher, würde diese auch in Assets Repo hinzufügen.

@iHarshad deine neuen Logos sehen toll aus! Danke, dass du diese gemacht hast.

Sie können in Betracht ziehen, mit diesen eine Pull-Anfrage an Font Awesome zu öffnen. Sie akzeptieren sie möglicherweise nicht, aber es kann ihre Arbeit beschleunigen, Standardversionen dieser Symbole in ihre Bibliothek aufzunehmen :)

@raisedadead @BhaveshSGupta @iHarshad Wissen Sie, ob wir tatsächlich auf das

Wir möchten, dass diese anfängliche Seitenladegeschwindigkeit schneller wird , und ich denke, dass das Laden von nur SVGs, die wir benötigen, uns einen großen Teil des Weges dorthin bringen kann :)

Sie können in Betracht ziehen, mit diesen eine Pull-Anfrage an Font Awesome zu öffnen.

Auf FA 4 akzeptieren sie momentan keine PRs für die Symbolanforderungen. Wenn Sie möchten, benötigen Sie Zugriff auf das FA 5-Repo. Leider ist es privat in der Beta.

Wissen Sie, ob wir tatsächlich auf das Abrufen von SVG-Dateien umsteigen können? Ich denke, das wäre viel schneller als das Laden der Font Awesome-Bibliothek.

Sprechen wir nur über die Homepage?
Hier ist der Leuchtturmbericht mit Verbesserungsvorschlägen.

www.freecodecamp.org_2017-07-10_11-03-21.html.zip

Wie @raisedadead auf Probleme bei der Verwendung von FA4 und FA5 hinwies, könnten wir für unsere benutzerdefinierten Symbole, die von FA nicht unterstützt werden, ein Bild-Sprite-Blatt ( Referenz ) verwenden.

Was denkst du alle?

Die Seitengeschwindigkeiten haben nichts mit FA und eher unoptimiertem CSS als Ganzes zu tun. @ QuincyLarson Ich denke, wir sollten das lieber in einem separaten Thread verfolgen.

@raisedadead stimmte zu. Könnten Sie ein separates Problem erstellen, das diese Probleme erklärt - vorzugsweise mit einer Checkliste der Maßnahmen, die wir zur Optimierung unseres CSS ergreifen können?

@QuincyLarson sicher, ich werde, sobald wir das neue Layout eingerichtet und konsolidiert haben.

Ich habe dieses Problem irrtümlich geschlossen - dies ist immer noch etwas, was wir aktiv erreichen wollen. Beschriftungen entsprechend aktualisieren.

@BhaveshSGupta Sind Sie immer noch daran interessiert, uns bei der Aktualisierung dieser Symbole zu helfen?

@ QuincyLarson ja ich bin in.

@ BhaveshSGupta Super ! Lassen Sie mich wissen, ob ich etwas tun kann, um zu helfen.

@QuincyLarson schließlich hier würden wir per ersetzen diese und würde svg Bilder verwenden , die von @iHarshad gemäß vorgesehen sind dies und füge hinzu , auch diese Bilder zu freeCodeCamp / Vermögen pro @raisedadead

@ BhaveshSGupta Das ist vollkommen richtig!

@ BhaveshSGupta Ja genau.

Ich freue mich, Ihnen mitteilen zu

Ich sehe diese noch nicht öffentlich sichtbar, aber hier sind die 4.7-Symbole: http://fontawesome.io/icons/

@BhaveshSGupta senden Sie mir eine Nachricht in Gitter und ich gebe Ihnen die 5.0-

@QuincyLarson Hey, ich habe dir über gib mir die Datei, wenn du frei bist

@QuincyLarson natürlich froh, dabei helfen zu können!

@ BhaveshSGupta, danke, dass hast .
Es ist auch unnötig zu erwähnen, dass wir eine verkleinerte Produktionsversion der Symbole in S3 hinzufügen werden. Stellen Sie daher sicher, dass Sie die Quelldateien nicht festschreiben (die NICHT für die Verteilung und nur für die Entwicklung bestimmt sind).

Schlagen Sie mich um Hilfe.

Hallo @BhaveshSGupta, kannst du uns ein kurzes Update geben, wie das geht?

@QuincyLarson Denn jetzt können wir nur ionische Abhängigkeit entfernt von Änderungen aufgeführt hier und Verwendung von Bildern aufgeführt hier . Wenn Sie diese Dateien auf S3 hosten und mir den Link dafür geben können, dauert es nicht lange, andere Änderungen vorzunehmen.

@ QuincyLarson und andere Interessierte

Wir freuen uns, Ihnen mitteilen zu können, dass Font Awesome jetzt die Version 5.0.0 veröffentlicht hat
Es hat alle Symbole, die wir brauchen.

https://fontawesome.com/icons?d=gallery&m=free

Wir würden also an unserem Ende keine Wartung der Symbole (SVG usw.) benötigen.

Daher ist die Migration so gut wie das Hinzufügen der Deps zu den neuen Paketen, wie in den offiziellen Dokumenten oben dokumentiert.

Ich habe hier an meiner Gabel einige Arbeiten begonnen. Fühlen Sie sich frei, per Pull-Anfrage darauf zu drücken.

staging...raisedadead:feat/upgrade-fontawesome

@raisedadead Super ! Sind Sie sicher, dass es alles hat, was wir brauchen? Zum Beispiel konnte ich dort kein D3-Symbol finden und wir verwenden es für unsere Zielseite. Wir müssen vielleicht ein paar SVG-Dateien behalten, aber ich bin zuversichtlich, dass wir die redundante Ionic-Symbolbibliothek loswerden können :)

Ich habe eine offizielle Anfrage geöffnet

Im Moment könnten wir das offizielle Logo verwenden (verfügbar als SVG)
https://github.com/d3/d3-logo

@raisedadead OK - das wäre toll. Beachten Sie, dass es mehr als ein Jahr und Hunderte von +1 in der GitHub-Ausgabe gedauert hat, bis das Font Awesome-Team das freeCodeCamp-Logo hinzugefügt hat. Daher kann es lange dauern.

Derzeit verwenden wir bereits das offizielle D3-Logo auf der Zielseite, sodass wir nichts ändern müssen. Ich habe nur darauf hingewiesen, dass wir zusätzlich zu den von Font Awesome bereitgestellten Symbolen noch einige SVG-Dateien benötigen.

Ich glaube, Ionic ist immer noch eine Abhängigkeit. Wäre jemand daran interessiert, diese Symbolbibliothek aus dem Repo zu entfernen und Symbole durch ihre Font Awesome-Entsprechungen zu ersetzen?

Hey @QuincyLarson , ich würde mir das gerne ansehen!

Okay, es sieht so aus, als hätten @bhaveshsgupta und @raisedadead den größten Teil des schweren Hebens bereits erledigt.

Wir sind immer noch auf Font Awesome v4.7. Es wäre toll, auf 5.0 zu aktualisieren; Wie bereits erwähnt, haben wir bereits eine Lizenz, und Version 5 enthält die JS- und Node-Symbole, die 4 nicht enthält, und würde die Anforderung zur Wartung dieser SVGs aufheben.

Es gibt jedoch wichtige Änderungen beim Upgrade von 4 auf 5. Wir könnten das offizielle Upgrade-Shim als schnelle Lösung verwenden, aber es erspart uns nur einen geringen Aufwand, bis wir in Zukunft "richtig" upgraden.

Sollte ich ein neues Problem für das Font Awesome-Upgrade ansprechen? Für die Implementierung von Version 5 stehen einige Optionen zur Auswahl, und es wäre schön, wenn Sie etwas dazu sagen würden, welches für die Anforderungen der FCC am besten geeignet ist. Es könnte ein Blocker für das Entfernen von Ionic sein, aber meiner Meinung nach wäre es besser, FA zuerst zu aktualisieren.

Hallo @hctpscl

Damit Sie wissen, möchten wir die Abhängigkeiten innerhalb dieses Repos und des Lern- Repos, das unsere Lernplattform ist, ersetzen.

Sie können sich mit mir in Verbindung setzen, wenn Sie Hilfe benötigen.

Eine PR wäre jedoch ein guter Ort, um die technische Seite der Dinge und Änderungen zu diskutieren.

Es fehlt nur noch das D3-Logo. Das steht aber auch als SVG auf dem offiziellen D3 Assets Repo zur Verfügung.