Freecodecamp: Reemplace los íconos de Ionic con sus equivalentes de Font Awesome y elimine Ionic como una dependencia

@QuincyLarson ¡Puedo probar este!
Aunque podemos agregar svg en lugar de íconos de fuente, y eliminar la fuente impresionante como dependencia también.

podemos agregar svg en lugar de icono de fuente

¿Quiere decir que creamos y mantenemos esos activos?

sí, ahora mismo lo hacemos para la imagen D3.js,
Creo que podemos obtener svg bajo licencia CC de varios sitios o incluso copiar gratis.
Y muchas personas sugieren que no se deben usar fuentes de iconos, sino que se deben usar svg desde la perspectiva de la accesibilidad (como bootstrap 4 es soltar iconos y pasar a svg).

FontAwesome 5 también ofrecerá todos los íconos SVG, eso es un gran ahorro de costos que crear y mantener un conjunto de íconos nosotros mismos.

Y una gran ventaja es que tienen todos los íconos, incluido nuestro ícono fa-free-code-camp partir de 4.7.0

Y como dije, esto vendría gratis (como SVG) a la próxima versión principal de todos modos, con compatibilidad con backword.

Por ahora, creo que deberíamos centrarnos simplemente en el tema de alejarnos de los íconos iónicos a la fuente impresionante, que ya tenemos como dependencia.

@BhaveshSGupta Estoy de acuerdo con @raisedadead en que deberíamos usar Font Awesome, que es una biblioteca excelente. No necesitamos reinventar la rueda.

Nos encantaría su ayuda con esto. ¿Estarías interesado en trabajar en esto? Si es así, ¿podría darnos actualizaciones de estado periódicas para que podamos saber cómo van las cosas?

@QuincyLarson Claro, déjame ver eso esta noche.

hola @QuincyLarson , @raisedadead
Estos son todos los íconos iónicos que pude encontrar, he marcado íconos impresionantes de fuentes equivalentes. Si es necesario cambiar, hágamelo saber.

• [] .ion-android-hand a .fa-hand-paper-o (email-signin.jade)
• [] .ion-person-add to fa-user-plus (email-signup.jade)
• [] .ion-close-circle to .fa-times-circle (update-email.jade, flash.jade, flyer.jade)
• [] .ion-social-html5 a .fa-html5 (home.jade)
• [] .ion-social-css3 a .fa-css3 (inicio.jade)
• [] .ion-social-github a .fa-github (inicio.jade)
• [] .ion-android-globe a .fa-globe (pmi-acp-agile-project-managers.jade)
• [] .ion-card a .fa-credit-card (pmi-acp-agile-project-managers.jade)
• [] .ion-android-calendar a .fa-calendar (pmi-acp-agile-project-managers.jade)
• [] .ion-ios-box a .fa-archive (pmi-acp-agile-project-managers.jade)
• [] .ion-university a .fa-graduation-cap (pmi-acp-agile-project-managers.jade)
• [] .ion-ios-list a .fa-list-alt (pmi-acp-agile-project-managers.jade)
• [] .ion-ios-people a .fa-users (pmi-acp-agile-project-managers.jade)

- [] .ion-settings a .fa-wrench (pmi-acp-agile-project-managers.jade)

No se pudo encontrar ningún ícono para lo siguiente.
.ion-social-javascript (inicio.jade)
.ion-social-nodejs (inicio.jade)

La adición del icono de NodeJS a la biblioteca FA está pendiente desde diciembre de 2013, número 2584 . No pude encontrar un problema para el ícono JS. Seguí adelante y me tomé la libertad de convertir los dos iconos anteriores en fuentes de iconos utilizando Fontello e Ion Icon SVG.

Supongo que incluso si cambiamos a los íconos FA por completo, habrá una necesidad de íconos personalizados y, por lo tanto, deberíamos mantener una fuente de ícono FCC personalizada.

Icono SVGs.zip

fontello-7ce4e099.zip

@BhaveshSGupta ¡ excelente lista! Sí, ¿tienes tiempo para hacer estas sustituciones tú mismo para que puedas obtener crédito por esto en el historial de Git?

@iHarshad Sí, estoy de acuerdo en que deberíamos incluir nuestras propias imágenes SVG donde falta Font Awesome. Esto será mucho más pequeño que incluir Ionic para solo unos pocos iconos.

@QuincyLarson seguro por qué no me encantaría hacer eso,
y si queremos usar un kit personalizado, podemos usar algo como icomoon.io donde podemos agregar fuentes increíbles y fuentes personalizadas y crear un solo kit con solo los iconos requeridos

@BhaveshSGupta Sí, podríamos intentarlo. También podría simplemente tomar un puñado de archivos SVG específicos que necesitamos y ponerlos en S3. No son muy grandes, solo unos pocos kilobytes cada uno :)

@QuincyLarson Creo que @BhaveshSGupta ha hecho una buena sugerencia aquí.

En lugar de cargar toda la biblioteca de Font Awesome, podríamos usar algo como Fontello para elegir íconos de donde sea que necesitemos y cargar los archivos generados en S3. Lo he usado en varios de mis proyectos y es un proceso muy simple.

@ dakshshah96 OK, pero si entiendo correctamente, creo que querremos cargar toda la biblioteca de Font Awesome de todos modos porque @BerkeleyTrue está construyendo un editor similar a JSBin, y queremos que los campistas puedan usar Font Awesome allí.

Estimado señor,

Espere a mi colaborador de Seven Garden Typodeart.

Saludos
El 22 de junio de 2017 a las 6:02 a.m., "Quincy Larson" [email protected] escribió:

@ dakshshah96 https://github.com/dakshshah96 Está bien, pero si entiendo
correctamente, creo que querremos cargar toda la biblioteca de Font Awesome
de todos modos porque @BerkeleyTrue https://github.com/berkeleytrue es
construyendo un editor similar a JSBin, y queremos que los campistas puedan usar Font
Impresionante ahí.

-
Recibes esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310217649 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ALc8XLcX7m38iuBq7htBigFEqOI5lFR6ks5sGZLggaJpZM4MWGCb
.

@QuincyLarson Ya veo, entonces necesitaremos Font Awesome.

Sin embargo, existe una alternativa. ¿Quizás podríamos permitir que los campistas inserten una etiqueta de script en lugar de incluir Font Awesome en todo el sitio, aunque solo sea necesario en el editor que se está construyendo?

En icomoon podemos agregar una fuente completa impresionante junto con íconos personalizados que tengo
haciendo esto en muchos proyectos, no solo con fuentes increíbles, sino que hay algunos otros gratuitos
kits.

El jueves 22 de junio de 2017 a las 3:38 a.m., Daksh Shah, [email protected] escribió:

@QuincyLarson https://github.com/quincylarson Ya veo, entonces necesitaremos
Font Awesome.

Sin embargo, existe una alternativa. Quizás podríamos dejar que los campistas inserten un
etiqueta de script en lugar de incluir Font Awesome en todo el sitio, aunque sea
necesario solo en el editor que se está construyendo?

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310218975 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AEA75e44KO5ivCcTCHyHEFTNu9LfGlN7ks5sGZQ8gaJpZM4MWGCb
.

@BhaveshSGupta ¿Afectaría la sintaxis que los campistas usan para agregar íconos de Font Awesome a sus desafíos y proyectos de codificación en freeCodeCamp?

@QuincyLarson Habría un pequeño cambio que sería en lugar de fa fa-search que necesitan usar icon-search. Necesito ver si hay alguna forma de evitar esto, mientras tanto, puedes visitar icomoon.io si tienes algo de tiempo libre.

font-awesome acaba de anunciar que están en versión alfa y deberían estar en versión beta pública el próximo mes en su Kickstarter.

Van a lanzar el marco SVG como OSS para todos, para usarlo para crear iconos personalizados.

No necesitaríamos bibliotecas o dependencias adicionales excepto FA.

@raisedadead gracias por el @BhaveshSGupta Dado que ya estamos usando Font Awesome para todos nuestros íconos (o al menos, lo estaremos una vez que nos deshagamos de los íconos Ionic restantes), propongo que esperemos a que Font Awesome lo libere, y podemos usar SVG estático archivos según sea necesario por ahora (puedo alojarlos en una carpeta S3)

@QuincyLarson Actualizaría icónico según esto , aunque necesitaría alternativas para .ion-social-javascript (home.jade)
.ion-social-nodejs (inicio.jade)

@BhaveshSGupta ¡Impresionante! Aquí está el logotipo de JS en SVG (pensamos que querríamos centrarlo y agrandarlo, ¿sabes cómo hacerlo?

Aquí está el logotipo de Node: deberá descargarlo y hacerlo monocromo: https://seeklogo.com/vector-logo/273749/node-js

Por favor, avíseme si puedo ser de más ayuda con estos :)

@BhaveshSGupta aquí están los logotipos anteriores editados como @QuincyLarson mencionado. Usé VectorPaint para hacer cambios y eliminé los metadatos de marca.

Logotipo JS SVG editado: https://goo.gl/xP72mF
Logotipo SVG de nodo editado: https://goo.gl/dN4i2M

@iHarshad Se ve increíble, @QuincyLarson Los mantengo en la carpeta pública / imágenes a partir de ahora

@BhaveshSGupta @iHarshad Sería genial si pudiera agregarlos al repositorio freeCodeCamp / assets también a través de un PR.

@raisedadead Seguro, también los agregaría en el repositorio de activos.

@iHarshad ¡ tus nuevos logotipos se ven geniales! Gracias por hacer estos.

Podría considerar abrir una solicitud de extracción a Font Awesome con estos. Es posible que no los acepten, pero puede acelerar su trabajo obtener versiones estándar de estos íconos en su biblioteca :)

@raisedadead @BhaveshSGupta @iHarshad ¿Sabe si realmente podemos cambiar a la extracción de archivos SVG? Creo que sería mucho más rápido que cargar la biblioteca Font Awesome.

Queremos que esta velocidad de carga de la página inicial sea más rápida , y creo que cargar solo los SVG que necesitamos puede llevarnos una gran parte del camino :)

Podría considerar abrir una solicitud de extracción a Font Awesome con estos.

En FA 4, no aceptan ningún RP por el momento para las solicitudes de iconos. Si lo desea, necesitará acceder al repositorio FA 5. Desafortunadamente, es privado en beta.

¿Sabe si realmente podemos cambiar a la extracción de archivos SVG? Creo que sería mucho más rápido que cargar la biblioteca Font Awesome.

¿Estamos hablando solo de la página de inicio?
Aquí está el informe del faro con sugerencias de mejora.

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

Como @raisedadead señaló problemas con el uso de FA4 y FA5, podríamos usar una hoja de sprites de imagen ( referencia ) para nuestros íconos personalizados que no son compatibles con FA.

¿Qué piensan todos ustedes?

Las velocidades de la página no tienen nada que ver con FA ni con CSS no optimizado en su conjunto. @QuincyLarson Creo que deberíamos rastrear eso en un hilo separado.

@raisedadead estuvo de acuerdo. ¿Podría crear un problema separado que explique estos problemas, preferiblemente con una lista de verificación de las cosas que podemos hacer para optimizar nuestro CSS?

@QuincyLarson seguro, lo haré tan pronto como tengamos el nuevo diseño en su lugar y consolidemos.

Cerré este problema por error; esto sigue siendo algo que queremos lograr activamente. Actualización de etiquetas en consecuencia.

@BhaveshSGupta ¿

@QuincyLarson sí, estoy dentro.

@BhaveshSGupta ¡Impresionante! Avísame si puedo hacer algo para ayudarte.

@QuincyLarson finalmente aquí estaríamos reemplazando según esto y estaríamos usando imágenes svg que son proporcionadas por @iHarshad según esto y también agregaríamos estas imágenes a freeCodeCamp / assets según @raisedadead

@BhaveshSGupta ¡ Eso es perfectamente correcto!

@BhaveshSGupta Sí, exactamente.

Me complace informar que gracias a @raisedadead , ¡freeCodeCamp ahora tiene una licencia para usar Font Awesome 5.0! ¡Gracias hombre!

Todavía no veo estos públicamente visibles, pero aquí están los iconos 4.7: http://fontawesome.io/icons/

@BhaveshSGupta envíame un mensaje en Gitter y te daré el archivo de icono 5.0 (ya que creo que estás planeando exportar los que queremos a un conjunto de archivos separado, para que podamos crear nuestro propio CDN para ellos).

@QuincyLarson Oye, te he enviado un mensaje de texto a través de gitter, pásame el archivo cuando estés libre

@QuincyLarson, por supuesto, feliz de poder ayudar en eso.

@BhaveshSGupta gracias por ayudarnos en el esfuerzo.
Además, no hace falta decir que agregaremos una versión de producción minimizada de los íconos en S3, así que asegúrese de no enviar los archivos fuente (que NO son para distribución y solo para desarrollo).

Golpéame para cualquier ayuda.

Hola @BhaveshSGupta, ¿ podrías darnos una actualización rápida de cómo va esto?

@QuincyLarson Por ahora, podemos eliminar la dependencia iónica haciendo los cambios enumerados aquí y utilizando las imágenes enumeradas aquí . Para esto, si puede alojar estos archivos en S3 y darme el enlace para los mismos, no tomará mucho tiempo hacer otros cambios.

@QuincyLarson y otros interesados

Feliz de anunciar que Font Awesome ha lanzado la versión 5.0.0
Tiene todos los iconos que necesitamos.

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

Por lo tanto, no necesitaríamos ningún mantenimiento de los íconos (SVG, etc.) de nuestro lado.

Por lo tanto, la migración es tan buena como agregar los detalles de los nuevos paquetes como se documenta en los documentos oficiales anteriores.

Empecé a trabajar aquí en mi bifurcación. Siéntase libre de presionar a través de una solicitud de extracción.

staging...raisedadead:feat/upgrade-fontawesome

@raisedadead ¡Impresionante! ¿Estás seguro de que tiene todo lo que necesitamos? Por ejemplo, no pude encontrar un ícono D3 allí, y lo usamos para nuestra página de destino. Es posible que tengamos que mantener algunos archivos SVG, pero estoy seguro de que podemos deshacernos de la biblioteca de iconos Ionic redundante :)

He abierto una solicitud oficial

Por ahora podríamos usar el logo oficial (disponible como SVG)
https://github.com/d3/d3-logo

@raisedadead Está bien, eso sería genial. Tenga en cuenta que tomó más de un año y cientos de +1 en el problema de GitHub antes de que el equipo de Font Awesome agregara el logotipo de freeCodeCamp, por lo que puede llevar mucho tiempo.

Actualmente ya estamos usando el logotipo oficial de D3 en la página de destino, por lo que no necesitamos cambiar nada. Solo estaba señalando que todavía necesitaremos algunos archivos SVG además de los iconos proporcionados por Font Awesome.

Creo que Ionic sigue siendo una dependencia. ¿Alguien estaría interesado en ayudar a eliminar esta biblioteca de iconos del repositorio y reemplazar los iconos con sus equivalentes Font Awesome?

Hola @QuincyLarson , ¡me gustaría echarle un vistazo a esto!

De acuerdo, parece que @bhaveshsgupta y @raisedadead ya han hecho la mayor parte del trabajo pesado.

Todavía estamos en Font Awesome v4.7. Sería genial actualizar a 5.0; como se señaló anteriormente, ya tenemos una licencia, y la versión 5 incluye los íconos JS y Node que 4 no tiene y eliminaría el requisito de mantener esos SVG.

Sin embargo, hay cambios importantes involucrados en la actualización de 4 a 5. Podríamos usar la corrección oficial de actualización como una solución rápida, pero solo nos ahorra una pequeña cantidad de esfuerzo hasta que actualice "correctamente" en el futuro.

¿Debo plantear un nuevo problema para la actualización de Font Awesome? Hay algunas opciones entre las que elegir para implementar la versión 5 y sería bueno recibir alguna información sobre cuál es la mejor para las necesidades de la FCC. Podría ser un bloqueador para eliminar Ionic, pero en mi opinión, actualizar FA sería lo mejor que se debe abordar primero.

Hola @hctpscl

Solo para que lo sepas, nos gustaría reemplazar las dependencias dentro de este repositorio y el repositorio de aprendizaje, que es nuestra plataforma de aprendizaje.

Puede comunicarse conmigo si necesita ayuda.

Sin embargo, un RP sería un buen lugar para discutir el aspecto técnico de las cosas y los cambios.

Lo único que falta es el logo D3. Pero eso también está disponible como un SVG en el repositorio oficial de activos D3.