Freecodecamp: Substitua os ícones do Ionic por seus equivalentes Font Awesome e remova o Ionic como uma dependência

@QuincyLarson , posso experimentar este!
Embora possamos adicionar svg's ao invés de ícones de fontes, e remover fontes incríveis como uma dependência também.

podemos adicionar svg's em vez de ícones de fontes

Você quer dizer que criamos e mantemos esses ativos?

sim, agora fazemos isso para a imagem D3.js,
Acho que podemos obter svg sob licença CC de vários sites ou até mesmo copiar gratuitamente.
E muitas pessoas sugerem que não se deve usar fontes de ícone em vez disso, deve-se usar svg da perspectiva de acessibilidade (como o bootstrap 4 é descartar ícones e mover para svg).

FontAwesome 5 também vai oferecer todos os ícones SVG, o que representa uma grande economia de custos em relação à criação e manutenção de um conjunto de ícones.

E um grande bônus é que eles têm todos os ícones, incluindo nosso ícone fa-free-code-camp de 4.7.0

E como eu disse, isso viria de graça (como SVG) para a próxima versão principal de qualquer maneira, com compatibilidade de backword.

Por enquanto, eu acredito que devemos simplesmente nos concentrar na questão de mudar de ícones iônicos para fontes incríveis, que já temos como dependência.

@BhaveshSGupta Concordo com @raisedadead que devemos apenas usar Font Awesome que é uma excelente biblioteca. Não precisamos reinventar a roda.

Adoraríamos sua ajuda com isso. Você estaria interessado em trabalhar nisso? Em caso afirmativo, você poderia nos fornecer atualizações de status regulares para que possamos saber como as coisas estão progredindo?

@QuincyLarson Claro Deixe-me ver isso esta noite.

ei @QuincyLarson , @raisedadead
Estes são todos ícones de ícones Ionic que pude encontrar, marquei ícones fantásticos de fontes equivalentes. Se houver necessidade de alteração, entre em contato comigo.

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

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

Não foi possível encontrar nenhum ícone para o seguinte.
.ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

A adição do ícone NodeJS à biblioteca FA está pendente desde dezembro de 2013, edição nº 2584 . Não consegui encontrar um problema para o ícone JS. Eu fui em frente e tomei a liberdade de converter os dois ícones acima em fontes de ícone usando Fontello e Ion Icon SVGs.

Eu acho que mesmo se mudarmos para ícones FA completamente, haverá uma necessidade de ícones personalizados e, portanto, devemos manter uma fonte de ícone FCC personalizada.

Ícone SVGs.zip

fontello-7ce4e099.zip

@BhaveshSGupta excelente lista! Sim - você tem tempo para fazer essas substituições sozinho para que possa obter o crédito por isso na história do Git?

@iHarshad Sim - concordo que devemos incluir nossas próprias imagens SVG onde Font Awesome está faltando. Isso será muito menor do que incluir o Ionic para apenas alguns ícones.

@QuincyLarson claro, por que não, eu adoraria fazer isso,
e se quisermos usar um kit personalizado, podemos usar algo como icomoon.io, onde podemos adicionar fontes incríveis e fontes personalizadas e criar um único kit com apenas os ícones necessários

@BhaveshSGupta Sim, podemos tentar isso. Eu também poderia pegar um punhado de arquivos SVG específicos de que precisamos e colocá-los no S3. Eles não são muito grandes - apenas alguns kilobytes cada :)

@QuincyLarson Acho que @BhaveshSGupta fez uma boa sugestão aqui.

Em vez de carregar toda a biblioteca Font Awesome, poderíamos usar algo como Fontello para escolher ícones de onde precisarmos e enviar os arquivos gerados para o S3. Usei isso em vários de meus projetos e é um processo muito simples.

@ dakshshah96 OK - mas se entendi corretamente, acho que vamos querer carregar toda a biblioteca Font Awesome de qualquer maneira, porque @BerkeleyTrue está construindo um editor do tipo JSBin e queremos que os participantes possam usar Font Awesome lá.

Prezado Senhor,

Espere pelo meu colaborador de sete corações tipo jardim.

Saudações
Em 22 de junho de 2017 6:02, "Quincy Larson" [email protected] escreveu:

@ dakshshah96 https://github.com/dakshshah96 OK - mas se eu entender
corretamente, acho que vamos querer carregar toda a biblioteca Font Awesome
de qualquer maneira porque @BerkeleyTrue https://github.com/berkeleytrue é
construir um editor do tipo JSBin, e queremos que os campistas possam usar o Font
Incrível aí.

-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310217649 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ALc8XLcX7m38iuBq7htBigFEqOI5lFR6ks5sGZLggaJpZM4MWGCb
.

@QuincyLarson entendo, então vamos precisar do Font Awesome.

No entanto, existe uma alternativa. Talvez pudéssemos deixar os campistas inserirem uma tag de script em vez de incluir o Font Awesome em todo o site, mesmo que ela seja necessária apenas no editor em construção?

No icomoon, podemos adicionar fontes inteiras incríveis, juntamente com ícones personalizados que eu tenho
fazendo isso com muitos projetos, não apenas com a fonte incrível, mas com alguns outros
kits.

Em quinta-feira, 22 de junho de 2017, 03h38, Daksh Shah, [email protected] escreveu:

@QuincyLarson https://github.com/quincylarson Entendo, então precisaremos
Fonte incrível.

No entanto, existe uma alternativa. Talvez pudéssemos deixar os campistas inserirem um
tag de script em vez de incluir Font Awesome em todo o site, embora seja
necessário apenas no editor sendo construído?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310218975 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AEA75e44KO5ivCcTCHyHEFTNu9LfGlN7ks5sGZQ8gaJpZM4MWGCb
.

@BhaveshSGupta afetaria a sintaxe que os campistas usam para adicionar ícones Font Awesome aos seus desafios de codificação e projetos no freeCodeCamp?

@QuincyLarson Haveria uma pequena mudança que seria em vez de fa fa-search que eles precisariam usar icon-search. Preciso ver se há uma maneira de evitar isso, enquanto isso, você pode verificar icomoon.io se tiver algum tempo livre

font-awesome acaba de anunciar que estão em alfa, e devem estar em beta público no próximo mês em seu Kickstarter.

Eles vão lançar a estrutura SVG como OSS para todos, para uso como ícones personalizados.

Não precisaríamos de bibliotecas ou dependências adicionais, exceto para FA.

@raisedadead, obrigado pelo @BhaveshSGupta Como já estamos usando o Font Awesome para todos os nossos ícones (ou pelo menos, faremos isso assim que nos livrarmos dos ícones Ionic restantes), proponho que esperemos que o Font Awesome o libere e podemos usar apenas SVG estático arquivos necessários por enquanto (posso hospedá-los em uma pasta S3)

@QuincyLarson Eu atualizaria icônico de acordo com isso , embora precise de alternativas para .ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

@BhaveshSGupta Awesome! Aqui está o logotipo JS em SVG (pensamos que deveríamos centralizá-lo e torná-lo maior - você sabe como fazer isso?

Aqui está o logotipo do Node - você precisará fazer o download e torná-lo monocromático: https://seeklogo.com/vector-logo/273749/node-js

Por favor, deixe-me saber se eu posso ser de alguma ajuda com estes :)

@BhaveshSGupta aqui estão os logotipos acima editados como @QuincyLarson mencionado. Usei o VectorPaint para fazer alterações e removi os metadados de marca.

Logotipo JSG JSG ​​editado - https://goo.gl/xP72mF
Logotipo SVG do nó editado - https://goo.gl/dN4i2M

@iHarshad Parece incrível, @QuincyLarson . Estou mantendo isso na pasta pública / imagens a partir de agora

@BhaveshSGupta @iHarshad Seria ótimo se você pudesse adicioná-los ao repo freeCodeCamp / assets também por meio de um PR.

@raisedadead Claro, adicionaria esses

@iHarshad seus novos logotipos estão ótimos! Obrigado por fazer isso.

Você pode considerar abrir uma solicitação pull para Font Awesome com eles. Eles podem não aceitá-los, mas pode acelerar seu trabalho para obter versões padrão desses ícones em sua biblioteca :)

@raisedadead @BhaveshSGupta @iHarshad Você sabe se podemos realmente mudar para a

Queremos obter essa velocidade de carregamento de página inicial mais rápido e acho que carregar apenas os SVGs de que precisamos pode nos levar a uma grande parte do caminho :)

Você pode considerar abrir uma solicitação pull para Font Awesome com eles.

No FA 4, eles não estão aceitando PRs no momento para as solicitações de ícones. Se desejar, você precisará acessar o FA 5 repo. Infelizmente, é privado em beta.

Você sabe se podemos realmente mudar para a extração de arquivos SVG? Acho que seria muito mais rápido do que carregar a biblioteca Font Awesome.

Estamos falando apenas da página inicial?
Aqui está o relatório do farol com sugestões de melhorias.

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

Como @raisedadead apontou problemas com o uso de FA4 e FA5, poderíamos usar uma folha de sprite de imagem ( referência ) para nossos ícones personalizados que não são suportados pelo FA.

O que vocês acham?

As velocidades de página não têm nada a ver com FA e sim com CSS não otimizado como um todo. @QuincyLarson Acho que devemos rastrear isso em um tópico separado.

@raisedadead concordou. Você poderia criar um problema separado que explique esses problemas - de preferência com uma lista de verificação de coisas que podemos fazer para otimizar nosso CSS?

@QuincyLarson com certeza, farei isso assim que tivermos o novo layout no lugar e consolidar.

Fechei este problema por engano - isso ainda é algo que queremos ativamente realizar. Atualizando rótulos de acordo.

@BhaveshSGupta Você ainda está interessado em nos ajudar a atualizar esses ícones?

@QuincyLarson sim, estou dentro.

@BhaveshSGupta Awesome! Avise-me se puder fazer algo para ajudar.

@QuincyLarson finalmente aqui nós estaríamos substituindo de acordo com isso e usaríamos imagens svg que são fornecidas por @iHarshad de acordo com isso e também adicionaríamos essas imagens a freeCodeCamp / assets de acordo com @raisedadead

@BhaveshSGupta Isso está perfeitamente correto!

@BhaveshSGupta Sim, exatamente.

Estou feliz em informar que, graças a @raisedadead , o freeCodeCamp agora tem uma licença para usar o Font Awesome 5.0! Obrigado, cara!

Não os vejo publicamente visíveis ainda, mas aqui estão os ícones 4.7: http://fontawesome.io/icons/

@BhaveshSGupta me envie uma mensagem no Gitter e eu lhe darei o arquivo de ícone 5.0 (já que acho que você está planejando exportar os que queremos para um conjunto separado de arquivos, para que possamos criar nosso próprio CDN para eles).

@QuincyLarson Ei, eu mandei uma mensagem para você no gitter, me passe o arquivo quando estiver livre

@QuincyLarson, claro, feliz em poder ajudar nisso!

@BhaveshSGupta obrigado por nos ajudar nesse esforço.
Além disso, nem é preciso dizer que iremos adicionar uma versão de produção reduzida dos ícones no S3, portanto, certifique-se de não enviar os arquivos de origem (que NÃO são para distribuição e apenas para desenvolvimento).

Peça qualquer ajuda.

Olá @BhaveshSGupta, você poderia nos dar uma atualização rápida sobre como está indo?

@QuincyLarson Por enquanto, podemos apenas remover a dependência iônica fazendo as alterações listadas aqui e usando as imagens listadas aqui . Para isso se você puder hospedar esses arquivos no S3 e me passar o link dos mesmos não demorará muito para fazer outras alterações.

@QuincyLarson e outros interessados

Fico feliz em anunciar que o Font Awesome lançou a versão 5.0.0
Tem todos os ícones de que precisamos.

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

Assim, não precisaríamos de nenhuma manutenção dos ícones (SVG, etc) do nosso lado.

Portanto, a migração é tão boa quanto adicionar os deps nos novos pacotes, conforme documentado nos documentos oficiais acima.

Comecei alguns trabalhos aqui na minha bifurcação. Sinta-se à vontade para enviar por push request.

staging...raisedadead:feat/upgrade-fontawesome

@raisedadead Awesome! Tem certeza de que tem tudo o que precisamos? Por exemplo, não consegui encontrar um ícone D3 lá e o usamos para nossa página de destino. Podemos ter que manter alguns arquivos SVG, mas estou confiante de que podemos nos livrar da redundante biblioteca de ícones Ionic :)

Eu abri um pedido oficial

Por enquanto podemos usar o logotipo oficial (disponível como SVG)
https://github.com/d3/d3-logo

@raisedadead OK - isso seria ótimo. Observe que levou mais de um ano e centenas de + 1s no problema do GitHub antes que a equipe do Font Awesome adicionasse o logotipo do freeCodeCamp, por isso pode demorar muito.

No momento, já estamos usando o logotipo oficial da D3 na página de destino, então não precisamos mudar nada. Eu estava apenas apontando que ainda vamos precisar de alguns arquivos SVG além dos ícones fornecidos pelo Font Awesome.

Eu acredito que Ionic ainda é uma dependência. Alguém estaria interessado em ajudar a remover esta biblioteca de ícones do repo e substituir os ícones por seus equivalentes Font Awesome?

Ei @QuincyLarson , gostaria de dar uma olhada nisso!

Ok, parece que @bhaveshsgupta e @raisedadead já fizeram a maior parte do trabalho pesado.

Ainda estamos no Font Awesome v4.7. Seria ótimo atualizar para 5.0; conforme observado anteriormente, já temos uma licença, e a versão 5 inclui os ícones JS e Node que 4 não inclui e removeria a necessidade de manter esses SVGs.

No entanto, há grandes mudanças envolvidas na atualização de 4 para 5. Poderíamos usar o shim de atualização oficial como uma solução rápida, mas isso nos poupa um pouco de esforço até que atualizemos "adequadamente" no futuro.

Devo levantar um novo problema para a atualização do Font Awesome? Existem algumas opções de escolha para a implementação da versão 5 e seria bom dar algumas sugestões sobre qual é a melhor para as necessidades da FCC. Pode ser um bloqueador para a remoção de Ionic, mas, na minha opinião, atualizar o FA seria a melhor coisa a se resolver primeiro.

Olá @hctpscl

Apenas para que você saiba, gostaríamos de substituir as dependências dentro deste repo e do repo de aprendizado, que é nossa plataforma de aprendizado.

Você pode entrar em contato comigo se precisar de alguma ajuda.

Um PR seria um bom lugar para discutir o lado técnico das coisas e mudanças.

A única coisa que falta é o logotipo da D3. Mas isso também está disponível como um SVG no repo oficial de ativos D3.