On2 is Brazilian software house that helps companies to build their products using bleeding-edge technologies. - Medium

On2 Dev - Medium

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/0*1QoXjlViLXjG5V0x"><figcaption>Image credit: Jason Coudriet</figcaption></figure>Key takeaways: 1. Map out what needs to be tested 2. Define the priorities 3. Create an appropriate QA strategy
Implementing Quality Assurance (QA) is critical to ensure that products are reliable, user-friendly, and meet customer expectations.
The “testing early, test often” ideal, while quite relevant, cannot always be applied.
For small startups, adding a QA team may not be feasible in the early stages, but it’s still important to implement QA processes whenever possible to ensure that the product is fit for use and that it meets the requirements. Many projects may start without a dedicated QA team, or may encounter unexpected delays that push QA implementation to later stages in the Software Development Lifecycle (SDLC).
Furthermore, taking over legacy code that does not have tests may also require that QA is implemented on a code that is already in production. Legacy code often presents challenges when changes are made, particularly when migrating to a new platform or environment. Adding QA for this type of code can help to identify any potential issues and to mitigate the risk of disruptions to the system’s functionality.
While implementing QA so late in the SDLC (on a system that has already gone to production) raises the costs of fixing a defect and may seem daunting, it’s still possible to achieve a successful outcome.
On this article, we detail how we tackled this challenge at On2 to ensure our success.
<h3>1. Map out the system — define what needs to be tested and how thoroughly</h3>
Before you begin the QA process, it’s important to conduct a comprehensive assessment of the product and its requirements. This step will help ensure that the QA process is efficient and effective.
When requirements are properly documented, the QA team can use the documentation to create a comprehensive test plan and to ensure that all necessary tests will be performed. In some cases, however, organizations may not have the requirements in a document such as a Software Requirements Specification (SRS) — or it may also be the case that the documentation has become outdated during the development process.
Reviewing existing development documentation, reviewing the code that has been implemented, observing user behavior, gathering feedback from stakeholders, and analyzing system logs are all actions that can provide valuable insight into the requirements and the expected functionalities. They help to understand the system and to identify all areas that will need testing.
<h3>2. Listen to the stakeholders (and your team) — define the priorities</h3>
When implementing QA in a system that is already in production, it’s important to prioritize the parts of the system that are more critical. These parts may be customer-facing, or they may be internal systems that are critical to the functioning of the product.
Some of the factors that may be considered:
- Customer impact: Customer-facing parts of the system are often more critical and have more urgency in testing, as they directly impact the customer experience. Stakeholders can provide valuable insight into the customer needs and expectations, helping the QA team to prioritize the parts of the system that are most critical to the customer experience. They can also provide feedback on the product, helping the QA team to identify any potential issues and improve the overall quality of the product.
- Business impact: Parts of the system that are critical to the functioning of the business should also be prioritized, as they may have a significant impact on the overall success of the product.
- Urgency: Parts of the system that are experiencing issues or need to be updated to meet changing business requirements should also be prioritized. Developers can provide valuable input to identify anything that is constantly failing or places where more than one bug has been found. In a case of <a href="https://rogeriodasilva.com/defect-clustering/">Defect clustering</a>, it’s highly probable that more defects will be found nearby and this part is prime for being prioritized on testing.
It is also valuable to listen to your team members and gather their feedback on the product. They are the ones who are most familiar with the product, and they know how the product is expected to behave. They may also be able to identify potential issues and technical debits that may cause issues, things that may not be obvious to someone who is not familiar with the system.
<h3>3. Create an appropriate QA strategy</h3>
Creating a QA strategy that is appropriate to the time and resources that you have is critical to the success of your QA process. The strategy should take into account the size and complexity of the product, as well as the available resources.
If you have limited resources, it may be necessary to prioritize the most critical tests and focus on these first. Limitations may also help you to define the tools you will use for testing.
Some questions to be asked during the development of a QA strategy:
<ul>
<li>How much time will be needed to set up the testing environment?</li>
<li>How long it will take for your team to create the test cases, to run the tests, to automatize them when appropriate?</li>
<li>How much training will your team need to learn the testing tools and processes in order to be effective?</li>
</ul>
The strategy does not have to be a fixed plan, it’s important to have regular reviews and updates to the strategy as the product — and the team — evolves and changes. Continuously monitoring and updating the QA process will help to ensure it will remain meeting its goals.
<h3>In Conclusion</h3>
Implementing Quality Assurance (QA) is crucial to deliver quality products. Although implementing QA throughout the entire Software Development Life Cycle (SDLC) is ideal, it is still possible to successfully incorporate QA processes in a project that already is in production. By conducting a comprehensive assessment of the product, prioritizing the most critical parts of the system, and developing a tailored QA strategy that considers available resources, it’s possible to achieve positive results.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5bd82182114b" width="1" height="1" alt=""><hr>
<a href="https://medium.com/on2-dev/implementing-quality-assurance-in-production-5bd82182114b">Implementing Quality Assurance in production</a> was originally published in <a href="https://medium.com/on2-dev">On2 Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Implementing Quality Assurance in production

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FG8GByZVVM9eRHz4gPrMrw.jpeg"><figcaption>Felipe, Jaydson e Cesar, fundadores da On2</figcaption></figure>Cofundador da ON2, Jaydson Gomes conta como conheceu o empresário Cesar Paz, que viria a investir em sua ideia
Parece roteiro de filme sobre o mundo corporativo: ao reconhecer o talento e a veia empreendedora de um ex-funcionário, um experimentado empresário resolve investir em seu plano de negócio e, juntos, abrem uma empresa. Só que essa história não tem nada de ficção.
Desde 2019, o empresário Cesar Paz — dono de bem sucedida carreira na área digital e articulador dos movimentos como Porto Alegre Inquieta e Pacto Alegre — é sócio dos desenvolvedores Jaydson Gomes e Felipe Moura. O trio é dono da On2, uma empresa de produtos e soluções em tecnologia que já é referência no país, estando à frente de projetos de multinacionais como Toyota e Kinto. A adesão ao novo investimento teve um componente forte: Jaydson já havia trabalhado em uma das empresas de Cesar, e a confiança que tinha em seu trabalho o avalizou.
Seus caminhos se cruzaram em 2008, quando Jaydson passou a trabalhar como programador na AG2, empresa que Cesar, engenheiro de formação, abriu após atuar por muito tempo na indústria aeronáutica. Rapidamente, o empreendimento se tornou referência no Sul e depois no Brasil, como uma agência nativa digital.
“Quando entrei, a AG2 já era uma agência bem estabelecida, com clientes grandes, como Embraer e GM. Tinha sedes em Porto Alegre, Pelotas e São Paulo. O Cesar era um dos sócios. Eu o conhecia, mas não tinha contato no dia a dia. Ele estava na gestão, fazendo coisas mais relacionadas a produtos, conexão com os clientes e tudo o mais. Eu era programador, e nutria a admiração de conhecer o cara que tinha montado aquela empresa”, recorda Jaydson.
Porém, ainda que à distância, o gestor observava o desempenho do jovem funcionário.
“O Jaydson entrou [na empresa] e logo se destacou como desenvolvedor. Um profissional diferenciado, com uma capacidade de resolução muito grande, que acabou assumindo responsabilidades com alguns dos principais clientes que a gente tinha, como a Embraer e GM. Ele sempre foi identificado como um cara de solução”, observa Cesar.
Após dois anos na casa, Jaydson foi buscar novos horizontes. Trabalhou em startups, outras agências, no portal Terra e, junto com o primo, Felipe, criou a empresa BrazilJS e a BrazilJS Conf — maior evento mundial sobre linguagem JavaScript. Cesar, por sua vez, vendeu a AG2 para a Publicis, terceiro maior grupo de comunicação do mundo em 2010, mas permaneceu na empresa até 2015 por determinação contratual. O reencontro viria logo depois, em um churrasco entre ex-colaboradores da AG2.
“O Cesar foi nesse churrasco, e troquei uma ideia com ele. Ele falou das empresas que estava montando e se interessou por um núcleo de desenvolvimento que havia dentro da BrazilJS. Ele se encantou com a conexão que a gente tinha com as comunidades de desenvolvimento de software. Depois daquele dia, seguimos conversando, tomamos café, trocamos figurinhas…”, lembra Jaydson.
Naquele período, Cesar investiu em empresas que acabaram por integrar a Ecosys, um hub de startups de diferentes naturezas que forma um ecossistema criativo de tecnologia, com sede em Porto Alegre. Algumas dessas empresas eram atendidas pelos softwares criados por Jaydson e Felipe — o que mais uma vez chamou a atenção de Cesar Paz.
“Em algum momento, o Jaydson trouxe a ideia de montarmos uma empresa que produzisse produtos de tecnologia, com foco na qualidade de software, que seria liderada por ele e pelo Felipe, que eu já conhecia. A partir daí, decidi investir. Nascia a ON2”, recorda Cesar.
Como sócios de uma empresa em franca expansão, o trio desenvolveu uma relação bem próxima. O passado em comum, segundo Jaydson, ainda favorece a ON2.
“As conexões que o Cesar criou, na época de AG2, acabam afetando positivamente a ON2. A AG2 atendeu a Toyota e, agora, atendemos também”, comenta.
“O Cesar era um grande mentor do Jaydson e se tornou um grande mentor para todos nós. Já éramos empreendedores, mas independentes, autodidatas, descobrindo as coisas por conta própria, errando e acertando. Com o Cesar, ganhamos todo o embasamento da bagagem enorme que ele traz de aprendizados, experiências e contatos, o que nos ajudou a nos comunicarmos com todo um lado do mercado que era novo para nós. Tem sido uma grande aventura, na qual temos aprendido muito, dado passos grandes e encarado novos desafios”, completa Felipe.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7800f958bc75" width="1" height="1" alt=""><hr>
<a href="https://medium.com/on2-dev/de-funcion%C3%A1rio-a-s%C3%B3cio-da-empresa-7800f958bc75">De funcionário a sócio da empresa</a> was originally published in <a href="https://medium.com/on2-dev">On2 Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

De funcionário a sócio da empresa

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vGy32fZMS8_mZRZfXpJL4A.jpeg"></figure>As eleições presidenciais estadunidenses de 2016 foram consideradas históricas não apenas pelo resultado das urnas, mas sim pelo uso da tecnologia e redes sociais na disseminação de notícias falsas. As chamadas “fake news” não são um fenômeno que começou agora, mas é notório o crescimento da desinformação depois dos avanços tecnológicos e digitais.
Por meio da tecnologia é possível criar informações falsas, alterar vozes, editar vídeos e imagens. O estudo Panorama Político 2022 do Instituto DataSenado mostra que 72% dos brasileiros já viram, leram ou ouviram alguma notícia sobre política que desconfiam que seja falsa. A pesquisa revela também que é mais comum receber notícias aparentemente falsas entre os usuários de redes sociais (74%) do que entre os que declaram não usar as redes (64%).
É nesse cenário que a tecnologia sai do lugar de propagadora das fake news e precisa ser uma aliada no combate à desinformação. Já existem, inclusive, diversas iniciativas que promovem o combate às notícias falsas no meio digital. A plataforma Faktabaari, por exemplo, ajuda as pessoas a identificar notícias falsas e incentiva crianças em idade escolar a examinar vídeos do YouTube e artigos publicados em mídias sociais em busca de erros factuais e estatísticos, com a ajuda da ferramenta.
Empresas de tecnologia, profissionais e governos devem se unir na promoção de plataformas e ferramentas de combate às fake news. O portal de notícias BBC anunciou recentemente uma parceria com instituições como a Google, o Twitter e o Facebook, para ajudar a combater a desinformação online. O grupo elaborou mecanismos como um sistema de alerta precoce, por meio do qual as organizações se avisam quando detectam uma notícia falsa. Esse é um dos exemplos que precisam ser seguidos.
Desenvolver softwares e algoritmos capazes de checagem de informações falsas são soluções necessárias. Existe a necessidade de desenvolvimento de ferramentas capazes de bloquear ou notificar fake news. No entanto, há também uma urgência em promover a educação midiática por meio de plataformas que ensinem o usuário a checar e buscar notícias com fatos reais. Um exemplo é o <a href="https://www.aosfatos.org/noticias/manuais/">Aos Fatos</a>, plataforma jornalística de checagem de fatos e conta com um manual de técnicas e ferramentas de fact checking. De todas as formas, a tecnologia é sim uma grande aliada no combate à desinformação.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=eb5df842fb9c" width="1" height="1" alt=""><hr>
<a href="https://medium.com/on2-dev/o-papel-da-tecnologia-em-meio-%C3%A0-desinforma%C3%A7%C3%A3o-eb5df842fb9c">O papel da tecnologia em meio à desinformação</a> was originally published in <a href="https://medium.com/on2-dev">On2 Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

O papel da tecnologia em meio à desinformação

<figure><img alt="" src="https://cdn-images-1.medium.com/max/783/1*kzr0kUnumATw1G1VJjEBlQ.png"><figcaption>Manifesto por por uma tecnologia antirracista</figcaption></figure>Um por cento.
Esse foi o aumento de pessoas que se identificam como pretas em cargos técnicos em grandes empresas de tecnologia durante os anos de 2014 e 2021, de acordo com o relatório State of Tech Diversity: The Black Tech Ecosystem do Kapor Center, divulgado em abril deste ano. O estudo mostra também que estes profissionais representam 13% do quadro de funcionários, sendo somente 4,4% em cargos de diretoria, 3,7% em cargos técnicos e apenas 4,0% em cargos de liderança executiva.
Além da falta de representatividade, profissionais da área de tecnologia que se identificam como uma pessoa preta sofrem com a diferença salarial entre pessoas brancas e frequentemente são contratados em funções de nível inferior do que suas qualificações justificam. O relatório aponta ainda que quase metade das pessoas programadoras e desenvolvedoras já relataram experiências de desigualdade racial em contratações, promoções, oportunidades de liderança, salários e benefícios. Ou seja, os desafios não acabam na contratação de pessoas pretas.
O mercado de tecnologia brasileiro também reflete esses obstáculos. No Relatório 2022 da Preta Lab — uma iniciativa que atua para preencher a lacuna de mulheres pretas na tecnologia -, mostra que existem 19% de pessoas pretas profissionais da área de tecnologia ou indígenas dentro de empresas de tecnologia no Brasil. Quando levantamos a questão de gênero, o problema é ainda mais preocupante: apenas 11% dos profissionais do setor são mulheres negras ou indígenas. Além disso, quando conseguem entrar no mercado, mulheres ainda precisam lidar com as consequências de um setor majoritariamente masculino e principalmente branco.
A luta por um mercado tecnológico mais inclusivo e menos racista precisa começar na educação. Embora as ações afirmativas iniciadas nos anos 2000 já apresentam bons resultados, com a ampliação expressiva no número de estudantes que se consideram pretos iniciando e concluindo cursos de nível superior nos últimos anos, ainda existe um abismo de diferença em relação aos brancos nas universidades. E quando colocamos a lupa sobre os estudantes de cursos de tecnologia, a discrepância ainda é a regra. Nos cursos de Engenharia de Computação, Ciência da Computação e Sistemas de Informação, por exemplo, a porcentagem de estudantes pretos matriculados é, respectivamente, 5,85%, 6,74% e 7,07%, conforme o relatório da Preta Lab.
Mas por que esses dados importam? A discrepância social do mercado da tecnologia e os talentos que estamos perdendo, revela como a exclusão de pessoas pretas é prejudicial para a indústria de tecnologia e para toda a sociedade. Já se sabe que a diversidade impulsiona a produtividade e a criatividade. Um exemplo disso são os coletivos pretos, como AfroPython, QuebraDev, AfroyaTech, PerifaCode e PretaDev, projetos que existem para aumentar a representatividade de pessoas pretas e periféricas dentro da área de tecnologia.
Essa é uma luta que a On2 tomou para si. Atualmente, 34,6% das pessoas desenvolvedoras da empresa se consideram pretas e 7,7% pardas. Esses números estão acima da média do mercado e representam o nosso compromisso em promover representatividade contra o racismo. A gente entende que ofertar oportunidades e condições coerentes de trabalho para grupos pouco representados é uma das formas de cooperar para uma sociedade mais igual, além de incentivar a mobilidade social, desenvolvimento de pessoas e diversidade de saberes e experiências dentro e fora da On2.
As empresas de tecnologia precisam entender que essa não é uma missão apenas dos coletivos e pessoas desenvolvedoras pretas. Para construir um mercado tecnológico mais justo e igualitário é necessário ir além do discurso e encarar a luta antirracista.
Estabelecer e reconhecer pessoas racializadas em diferentes postos no setor de tecnologia é urgente e a falta de equidade é um problema. Em 2019, por exemplo, o Brasil passou a usar reconhecimento facial na segurança pública. O método, que tem um viés a reconhecer corretamente o rosto de uma pessoa branca e a tendência a reconhecer incorretamente o rosto de uma pessoa preta, incentiva o racismo e aumenta abordagens policiais feitas com pessoas pretas.
Uma sociedade brasileira verdadeiramente democrática só é possível com diversidade em todos os setores. E só realizamos mudanças reais a partir da transformação coletiva.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b6919b5791a" width="1" height="1" alt=""><hr>
<a href="https://medium.com/on2-dev/por-uma-tecnologia-antirracista-b6919b5791a">Por uma tecnologia antirracista</a> was originally published in <a href="https://medium.com/on2-dev">On2 Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Por uma tecnologia antirracista

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*f1L9DjLUUvdSShKzCuAX2Q.jpeg"><figcaption>Instagram — Foto de Solen Feyissa no Unsplash</figcaption></figure>Já faz algum tempo que o Instagram deixou de ser um aplicativo para compartilhar apenas fotos. Nos últimos anos, a rede social de Mark Zuckerberg passou por diversas atualizações e alterou o tradicional formato do conteúdo estático para caminhar para o mundo do audiovisual.
A mudança é um reflexo do crescimento e popularidade do TikTok. O aplicativo de vídeos curtos foi o mais baixado do mundo no 1º trimestre de 2022, com 175 milhões de downloads, de acordo com a pesquisa QI 2022: Store Intelligence Data Digest, divulgada pela Sensor Tower. O Instagram ocupa a segunda posição do ranking.
Em um mundo em que os usuários chegam a passar mais de cinco horas por dia nas redes sociais, como mostra o estudo Regional Pulse Index da data.ai, é natural que as empresas disputam a atenção desse público. Mas a que custo? O Instagram, por exemplo, investe em mudanças e se assemelha tanto ao TikTok porque esse é um modelo bem sucedido. Outro caso é o BeReal, novo aplicativo de fotos instantâneas, que virou febre nos últimos meses e tanto o TikTok quanto o Instagram já se movimentaram para copiar as ferramentas. No entanto, nesse processo, a premissa de Zuckerberg com o aplicativo se perde cada vez mais.
O caminho mais esperado para o futuro é um Instagram mais parecido com outras plataformas que com ele mesmo. Outra tendência também é que as pessoas migrem de uma rede social para a outra, seja para acompanhar um novo movimento digital ou uma mudança de comportamento da geração. Essa mobilidade, no entanto, é nociva para o usuário e para as plataformas.
Inclusive, essa pauta tem levantado debates e provocado até pessoas famosas a se posicionarem contra as atualizações. Isso porque o público perde por encontrar as mesmas funcionalidades superficiais em todas redes sociais e os aplicativos deixam de inovar ou criar novas ferramentas de conexão. A mudança desse cenário, porém, só é possível com a alteração do comportamento de consumo de conteúdo das pessoas, que impacta diretamente a forma de nos comunicarmos e de gerarmos conteúdo.
Mas e como lidar com isso? O futuro do Instagram poderia ser inspirado em novos espaços e formatos de mídias sociais com redes descentralizadas. A descentralização das redes sociais permite que diferentes interfaces de usuários, diferentes softwares e diferentes formas de governança coexistem e cooperem. Isso ajudaria a incorporar novas tecnologias, ao mesmo tempo que tiraria a tomada de decisão de um único grupo de empresas.
Uma rede social centralizada tem uma estrutura hierárquica em que as regras, aplicação, desenvolvimento e a direção da plataforma são decididos pela empresa proprietária. Dessa forma, os usuários não possuem quase nenhuma forma de discordar das atualizações e ferramentas. A descentralização procura abandonar o controle do proprietário da plataforma, justamente por não ter um. Mas enquanto esse futuro não chega, precisamos repensar as nossas formas de consumir e gerar conteúdo dentro da internet.
Fontes: <a href="https://static.poder360.com.br/2022/04/Sensor-Tower-Q1-2022-Data-Digest.pdf">https://static.poder360.com.br/2022/04/Sensor-Tower-Q1-2022-Data-Digest.pdf</a>
<a href="https://www.data.ai/en/insights/market-data/q2-2022-market-pulse-regional/">https://www.data.ai/en/insights/market-data/q2-2022-market-pulse-regional/</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b4ac82b1679e" width="1" height="1" alt=""><hr>
<a href="https://medium.com/on2-dev/o-que-esperamos-do-futuro-do-instagram-b4ac82b1679e">O que esperamos do futuro do Instagram?</a> was originally published in <a href="https://medium.com/on2-dev">On2 Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

O que esperamos do futuro do Instagram?

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/0*XaC5LaO-f8VcXc9U"><figcaption>Foto por Vivica Silva — <a href="https://unsplash.com/photos/KvJ4wD_-W5k">https://unsplash.com/photos/KvJ4wD_-W5k</a></figcaption></figure>As revoluções tecnológicas também escancaram a desigualdade social brasileira.
Com a chegada do 5G, as formas de nos conectarmos não será a mesma. Mas e quem poderá aproveitar os benefícios dessa nova tecnologia?
Em um mundo ideal, a distribuição seria de forma massiva, porém, nos dias atuais, mais de 300 municípios do país ainda nem receberam sinal 4G, segundo dados da Agência Nacional de Telecomunicações (Anatel).
<blockquote>“Estamos implementando a quinta geração da conexão enquanto milhares de pessoas seguem isoladas do ambiente digital, seja por falta total de acesso à informação via internet ou por não ter o mínimo de alcance por meio de gerações anteriores, como 2G e 3G”</blockquote>
“Estamos implementando a quinta geração da conexão enquanto milhares de pessoas seguem isoladas do ambiente digital, seja por falta total de acesso à informação via internet ou por não ter o mínimo de alcance por meio de gerações anteriores, como 2G e 3G” destaca o nosso sócio <a href="https://twitter.com/felipenmoura">Felipe N. Moura</a>, que assina artigo no Caderno DOC da @gzh da edição do último final de semana.
Você pode acessar ao material completo pelo link: <a href="https://gauchazh.clicrbs.com.br/tecnologia/noticia/2022/08/5g-uma-revolucao-lenta-e-desigual-mas-uma-revolucao-cl6dubd2w003p017ptmwt8be4.html">https://gauchazh.clicrbs.com.br/tecnologia/noticia/2022/08/5g-uma-revolucao-lenta-e-desigual-mas-uma-revolucao-cl6dubd2w003p017ptmwt8be4.html</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d860a2ac7b76" width="1" height="1" alt=""><hr>
<a href="https://medium.com/on2-dev/5g-no-doc-d860a2ac7b76">5G no DOC</a> was originally published in <a href="https://medium.com/on2-dev">On2 Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

5G no DOC

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ynKAdRw_w-3TQh5BsB5QuQ.png"></figure>There are quite a few articles out there about how to implement internationalization (i18n) in a Next.js project.
The thing is: none of them is simple enough to get the task done quickly.
Most articles focus on just one side of the problem and others are too complex and focus on generic issues.
Even the Next.js official documentation is sort of confusing (<a href="https://nextjs.org/docs/advanced-features/i18n-routing">https://nextjs.org/docs/advanced-features/i18n-routing</a>).
Well, the main thing we want to achieve with i18n is the content translated to a different language, right?
That part is kind of missing and we get it.
i18n is not something new and there’s a lot of libraries, concepts, frameworks, etc., that help with that, so this crucial part of the implementation is ignored, assuming that we all know how to do it.
And here is the problem, assuming everyone already knows everything by default is not a good practice.
Enough with the frustration. Let’s implement i18n in a Next.js project!
<h3>Creating a new Next.js project</h3>
Let’s first create a new Next.js project. If you already have a Next.js project you can skip this part.
<pre>npx create-next-app # or yarn create next-app</pre>
To start the application in the development environment:
<pre>npx yarn dev # or yarn dev</pre>
<h3>Adding i18n</h3>
Next.js has built-in support for i18n since v10.0.0.
We can provide a list of locales, the default locale, and even domain-specific locales, and Next.js will automatically handle the routing. Here we’re focusing on path routing, which is the basic approach.
For instance, if you have a page called contact, a new page route such as [language]/contact will be the result.
Let’s edit our next.config.js and add the i18n configuration:
<pre>module.exports = { i18n: { locales: ['pt-BR','en-US', 'es-ES'], defaultLocale: 'pt-BR', } }</pre>
Here we’re explicit saying we have two languages: pt-BR(Brazilian Portuguese) and en-US(English US). We’re also saying that Brazilian Portuguese is the default language for the website.
By default, Next.js will load the language configured in the user’s browser. To disable this behavior just add localeDetection: false to next.config.js .
After saving the changes to this file, remember to restart the server to see the changes in effect.
<h3>Adding helpers</h3>
Now, create the directory which will handle the internationalization. You can call it whatever you want, here we’re calling it locales. You can put this directory at the root of the project. To get the basic i18n working, let’s create 3 files inside the locales folder: index.js, meta.js and texts.js.
<pre>// index.js import texts from './texts';</pre>
<pre>function getText(locale, key) { return texts[locale][key] ? texts[locale][key] : texts['en'][key]; }</pre>
<pre>function getLangs(locale, locales, defaultLocale) { // Returning all available languages, except the current return locales.filter((lang) =&gt; lang !== locale); }</pre>
<pre>export { getText, getLangs }</pre>
The index.js file exports two helper functions to be used in the components, passing the keys from the router as arguments.
The getText function will be our main function to translate texts and getLangs will return the available languages on your websites, extracting the one being currently used.
The getLangs function will be useful in our LangSwitcher component (see later).
Sometimes we don’t want to add the locale code as a label in our application and perhaps, in the future, we may want to add an image flag or something like that. For this purpose, we’ll use a metadata strategy with the meta.js helper.
<pre>// meta.js export default { 'pt-BR': { flag: '', label: 'Português' }, 'en-US': { flag: '', label: 'English' }, 'es-ES': { flag: '', label: 'Spanish' } }</pre>
Just keep the same key name and then you will be able to grab all metadata information you might need. Here we’re using just the label which will be used in the LangSwitcher component.
<h3>Adding texts</h3>
Now let’s add the texts we’ll use in our application. To keep this example concise, a single file is enough: texts.js
<pre>// texts.js export default { 'pt-BR': { title: 'Tecnologia como base' }, 'en-US': { title: 'Technology as a cornerstone' }, 'es-ES': { title: 'La tecnología como base' } }</pre>
Remember to always use the same key for the locales (defined on next.config.js).
Now, just keep adding more texts for each language and you’re good to go.
<h3>Adding a locale switcher</h3>
The routing part is well managed by Next.js. There’s no extra step. What we need to do is somehow show our users that our application has other languages.
Below is a basic component that renders the available languages, manages the routing part and redirects to the specific translated resource. You can add it to your components/lang-switcher folder at the root of the project.
<pre>// index.js import React from 'react'; import Link from 'next/link'; import { getLangs } from '../../locales'; import meta from '../../locales/meta'; import {useRouter} from "next/router";</pre>
<pre>function LangSwitcher (props) { const { locale, locales, defaultLocale } = useRouter(); const langs = getLangs(locale, locales, defaultLocale); const redirectPath = props.redirectTo || ''; const { children, ...other } = props; return &lt;&gt; {langs.map((lang, i) =&gt; ( &lt;Link key={i} href={`/${lang}/${redirectPath}`} locale={lang}&gt; &lt;a&gt;{meta[lang].label} &lt;/a&gt; &lt;/Link&gt; ))} &lt;/&gt; }</pre>
<pre>export default LangSwitcher;</pre>
What we’re doing here is:
<ul>
<li>traversing our predefined locales</li>
<li>showing the option to switch the language on the page</li>
<li>handling a redirectPath passed in the props for the sake of this example.</li>
</ul>
<h3>Wrapping up</h3>
Now that we built the basic structure for i18n we can implement it in our application.
To add a language switcher, import the LangSwitcher component and place it wherever you want, such as a new page on the ‘pages/about’ directory.
<pre>import LangSwitcher from '../../components/lang-switcher';</pre>
<pre>&lt;LangSwitcher/&gt;</pre>
And for getting translated texts:
<ul>
<li>get the locale from the next router,</li>
<li>import the getText method from the helper,</li>
<li>call it with the desired key (you can use the same page for this).</li>
</ul>
<pre>import { getText } from '../../locales';</pre>
<pre>const { locale } = useRouter(); const textTitle = getText(locale, 'title');</pre>
The final code for an about/index.jspage:
<pre>import LangSwitcher from '../../components/lang-switcher'; import { getText } from '../../locales'; import { useRouter } from "next/router"; export default function IndexPage() { const { locale } = useRouter(); const textTitle = getText(locale, 'title'); const destPage = 'about'; return ( &lt;&gt; &lt;h1&gt;{textTitle}&lt;/h1&gt; &lt;LangSwitcher redirectTo={`${destPage}`} /&gt; &lt;/&gt; ) }</pre>
<h3>Conclusion</h3>
That is the basic about internationalization with Next.js!
For sure there’s a lot we are not covering here (such as React/Next.js concepts) and you might need to improve this solution to accomplish more ambitious tasks. But, for simple applications and websites, this basic approach can work just fine.
Also, as mentioned before, because of the lack of straight to the point solutions out there, we hope you can find this article useful.
<h4>Did you get stuck or just want to download the code and see it working? Check our demo repository: <a href="https://github.com/on2-dev/next_i18n">https://github.com/on2-dev/next_i18n</a>
</h4>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8349336263c7" width="1" height="1" alt=""><hr>
<a href="https://medium.com/on2-dev/i18n-in-next-js-the-easy-way-8349336263c7">i18n in Next.js: the easy way</a> was originally published in <a href="https://medium.com/on2-dev">On2 Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

i18n in Next.js: the easy way

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rlcjxYfQQaeQXT-eQdt8ig.jpeg"></figure>It doesn’t matter how long is your career in technology and how experienced you are, you’ll always face things you never expected.
I’m not a Git guru, but I use Git since I don’t even remember and I do know how to work with it. And when I’m stuck in something, there’s always the team and the internet to help.
However, this time around, a simple task became a big journey.
We just close a deal with a big company and the first step was to migrate all Git repositories from the old supplier to us.
I knew this process could be tedious and slow, but it was a little more than that. We can say it was hard.
Start with the number of repositories: 82.
Well, we’ll need a tool to migrate 82 Git repositories. Fortunately, we use GitHub at <a href="https://on2.dev/">On2</a> and they offer a simple tool for that, which is available at <a href="https://github.com/new/import">https://github.com/new/import</a>.
If you want to migrate a Git repo just put the HTTPS URL, authenticate and boom! Success.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2x85IhTT4ICHSKTzw4nCkA.png"><figcaption>GitHub migration tool</figcaption></figure>For the first 20 repositories, the process was easy. Just a cup of coffee, some clicks on the GitHub interface and… job done.
But then things got weird.
In one of the repositories, the process just failed with no error messages. I thought it was something related to the network, so I just tried to push some buttons another time.
Failed again.
Well, let’s try this one manually. So I cloned the repository in my machine and then tried to push to our origin.
<pre>remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com. remote: error: See http://git.io/iept8g for more information. remote: error: File XXX.zip is XXX GB; this exceeds GitHub's file size limit of 100.00 MB</pre>
Hum, OK. I’ll not question someone else’s work. If this .zip file is stored on the repository it must have a reason.
Here’s the first issue. GitHub is pretty clear about the error. It basically says that if we want to store big files we’ll need to use <a href="https://git-lfs.github.com/">Git LFS</a>.
<blockquote>Git Large File Storage (LFS) replaces large files such as audio samples, videos, datasets, and graphics with text pointers inside Git while storing the file contents on a remote server like GitHub.com or GitHub Enterprise.</blockquote>
To get this working we’ll first need to install git LFS.
<pre>git lfs install</pre>
Then we need to track the heavy files we want to store:
<pre>git lfs track "*.zip"</pre>
Now we just need to push? Nope.
Here’s the second issue. For a big existent repository with multiple big files for which we don’t know exactly the purpose, the task is not trivial.
Also, to get this process done you first need to remove all big files, add again, commit and then push.
This is not an option when you have 82 big repositories in which some of them store big files and you don’t even know what are the file types.
What to do?
Fortunately, with <a href="https://github.blog/2017-06-27-git-lfs-2-2-0-released/">Git LFS 2.2.0</a> we have a better way to deal with this.
With the <a href="https://github.com/git-lfs/git-lfs/blob/v2.2.0/docs/man/git-lfs-migrate.1.ronn">git-lfs-migrate</a> command, it’s way easier.
In the repository you encountered the error you can just run:
<pre>git lfs migrate info</pre>
This command will output all file types with their sizes, for example:
<pre>*.zip 1.2 GB 27/27 files(s) 100%</pre>
By using this information you can determine which files to pluck out of your history and store in LFS:
<pre>git lfs migrate import --include="*.zip" migrate: Sorting commits: ..., done migrate: Rewriting commits: 100% (810/810), done main f18bb746d44e8ea5065fc779bb1acdf3cdae7ed8 -&gt; 35b0fe0a7bf3ae6952ec9584895a7fb6ebcd498b migrate: Updating refs: ..., done</pre>
And then you can finally push:
<pre>git push origin main Git LFS: (1 of 1 files) 1.2 GB / 1.2 GB</pre>
We’re almost done, I promise.
Thing is, for most cases at this point you already solved your problem with large files.
However, for us, in this particular and peculiar case, nope.
Besides the large files on these repositories, we found a tricky issue.
There’s a limit for big pushes. Yeah, life is not easy.
After all the work, investigation, adding Git LFS, etc, for some repositories GitHub failed with this message:
<pre>git push &lt;remote_repo_name&gt; main Counting objects: 146106, done. Delta compression using up to 4 threads. Compressing objects: 100% (35519/35519), done. fatal: pack exceeds maximum allowed size00 GiB | 154 KiB/s fatal: sha1 file '&lt;stdout&gt;' write error: Invalid arguments error: failed to push some refs to 'git@github.com:&lt;repo&gt;.git</pre>
To deal with this we need to push commits by chunks.
Here goes a big thanks to <a href="https://gist.github.com/Sacristan">Sacristan</a> and his little shell script which saves the day:
<a href="https://medium.com/media/372af8b0f24a028b602bd8d39f0c6c31/href">https://medium.com/media/372af8b0f24a028b602bd8d39f0c6c31/href</a>With the new knowledge, all equipment and necessary scripts then we are ready!
Our next step in the weirdos’ repositories was to run Git LFS migrate and then run ./push_commits_by_chunk.sh
That’s it! End of the tale. 82 big Git repositories migrated successfully.
Always remember, sometimes what looks like the easiest task can consume you and your team days or even weeks.
Also, remember to be humble, it doesn’t matter if you have one, two or twenty years of experience, the day to day job will show you that your knowledge is never enough.
Image credit: <a href="https://unsplash.com/photos/H7LxvEmVZnE">https://unsplash.com/photos/H7LxvEmVZnE</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ba87c8910915" width="1" height="1" alt=""><hr>
<a href="https://medium.com/on2-dev/how-to-migrate-large-git-repositories-ba87c8910915">How to migrate large Git repositories</a> was originally published in <a href="https://medium.com/on2-dev">On2 Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to migrate large Git repositories

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*B8-IS3dS1f-TVNE54XxHeg.png"><figcaption>Next.js + GraphQL + Vercel + Alright + On2</figcaption></figure><h3>The backstory</h3>
Back in 2020, we got a mission from <a href="https://alright.com.br/">Alright</a>, one of our key partners: Build an alternative CMS plus an optimized website focused on small and medium publishers.
Alright is an Ad tech company that connects publishers and brands through proprietary technologies.
They have more than 300 publishers all over Brazil, which means the solution should be built with scalability in mind – and not only that – we should have a more generic approach for the technological stack.
Why not WordPress, you might be asking. Well, some publishers are already using WordPress and some bottlenecks could be found when integrating Alright’s technology with these websites, especially because the WP instances are not running on Alright’s infrastructure.
Well, so we did it. Our team suggested using a generic <a href="https://graphql.org/">GraphQL</a> API to deal not just with the data from this CMS but with all generic data Alright has in other applications and that would eventually be needed in other apps.
We love <a href="https://www.postgresql.org/">PostgreSQL</a>, so here the decision was easy. If we need a relational database with sane structured data, why not going with the “The World’s Most Advanced Open Source Relational Database”? In the beginning, we wanted a quick solution for GraphQL, so instead of building all schemes, resolvers, mutations, etc, by hand, we choose <a href="https://www.graphile.org/postgraphile/">PostGraphile</a>.
There are a lot of benefits with a solution that takes a database and generates an API, but as you can imagine, there are some issues as well (we’ll cover that in a future post).
Was that enough? Nope. What about the consuming interface? Enters <a href="https://nextjs.org/">Next.js</a> into the picture.
The CMS itself was not built with Next.js – considering it is an application that doesn’t need performance, SEO, or a strategy for dealing with multiple users; therefore, we built a plain <a href="https://reactjs.org/">React</a> <a href="https://en.wikipedia.org/wiki/Single-page_application">SPA</a>.
Since our main goal was to build a performance-first website for publishers, we bet on Next.js and its promises. Back then, Next.js hadn’t yet achieved what they have today, which is quite impressive. We adopted it for the project we called Alright Publisher Viewer, which was the “view” part of a growing ecosystem of big and small pieces of software.
<h3>After the deploy</h3>
Technically speaking and from the developer point of view, Next.js is great, but we had some difficulties integrating all the stuff previously built.
Besides the Alright Publisher Viewer application, we now had Alright Publisher Editor (the React SPA CMS), Alright GraphQL API, Alright Sqitch (PostgreSQL related), and some other helper applications.
The technology behind the product wasn’t trivial, but in the end, we made it work pretty well.
There was an additional and complex step here in this phase: We were creating and managing all the necessary infrastructure to support the apps. Which means our team was dealing with Amazon daily. EC2, Code Deploy, S3, Cloud Front, RDS and so on.
It worked well, but it could have been so much better, especially when we look at the developer experience, at the processes of deploying to different environments (staging, production, etc).
Right after our first release we noticed something odd. The Alright Publisher Viewer, the app we built with Next.js, wasn’t even close to the result we expected.
After all the struggle adapting the Next.js application to run well on Amazon, all days spent on the architecture and, when everything was well limed, our production application was just… OK.
There was certainly something wrong here, our team thought. And indeed there was.
<h3>A shift in our strategy</h3>
The main issue was related to how Next.js works and how we implemented the logic in the view.
If you have an application that needs to fetch data, what do you do? That was easy. As we need performance and SEO, Next.js’ approach of server-side rendering seemed to be the solution.
We looked at the <a href="https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering">documentation</a> and… boom! Server-side rendering (SSR) was working. Our view layer was communicating just fine with the GraphQL API.
<pre>export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } }</pre>
So what could be the issue? The problem is that this is not as fast, as performant, as we needed. We implemented the application in a way that, every time someone asks for a page, there would be a request for the API and the page would be rendered on the server.
Sure, a cache layer is missing, you’re probably thinking.
We knew that, but we also knew there was something even better: the Next.js’s approach of <a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation">static pages</a>.
<pre>export async function getStaticProps(context) { return { props: {}, // will be passed to the page component as props } }</pre>
When you use getStaticProps, Next.js will pre-render the page at build time using the props returned by getStaticProps.
That’s awesome! We’re almost there.
To get all things working we have to combine getStaticProps and <a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation">getStaticPaths</a>.
<pre>export async function getStaticPaths() { return { paths: [ { params: { ... } } // See the "paths" section below ], fallback: true or false // See the "fallback" section below }; }</pre>
The application has dynamic routes. Remember, Alright is delivering a tool for publishers, so it’s basically a news website with a lot of pages and articles. In Next.js we need to define a list of paths that have to be rendered as HTML at build time.
If you export an async function called getStaticPaths from a page which uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.
There is a detail that must be taken into consideration: publishers may have thousands of articles (pages), which was the case for our first publisher using the platform.
We can’t generate all pages at build time. Imagine millions of pages being generated for each build, that’s not feasible.
Next.js has this covered. With getStaticPaths and getStaticProps we can limit how many pages we want to generate at build time.
But there’s more! What happens with pages that haven’t been generated yet when someone tries to access it? If <a href="https://nextjs.org/docs/basic-features/data-fetching#fallback-true">fallback</a> is true, then the behavior of getStaticProps will change. The paths that have not been generated at build time will not result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request to such a path.
In the background, Next.js will statically generate the requested path HTML and JSON. This includes running getStaticProps.
In short, with this approach. we can have as many pages as we want pre-generated and in cache and when a new page is requested, Next.js will load all data necessary and cache it.
<h3>Moving to Vercel</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*v-BY681D7Uva3P-_uM3LnQ.png"><figcaption>Vercel</figcaption></figure>Now that we have the perfect combination of features on the Next.js side there is just one piece missing: <a href="https://vercel.com/">Vercel</a>.
Vercel combines the best developer experience with an obsessive focus on end-user performance.
Actually, we already had the old application (before the static refactoring) running on Vercel.
We started with small steps and one thing we wanted was to be able to use all the developer experience deploying and building applications Vercel offers. We love the automated deploys via Git (including different branches) and the powerful interface and CLI.
As we had already had the new application running on Vercel with multiple branches, moving everything to production wasn’t that difficult. With a few changes on the DNS, some environment variables and some small optimization on the application, we achieved our goal.
Another killer feature from Vercel is its <a href="https://vercel.com/docs/edge-network/overview">Edge Network</a>.
The Vercel Edge Network sits in-between the internet and our application’s deployments. It has become our de-facto CDN.
This layer is responsible for routing requests to the correct Serverless Function or Static File output of our builds. Vercel caches our content at the edge in order to serve data as fast as possible.
<h3>Conclusion and next steps</h3>
Of course, there were some extra steps and a lot of research, but in the end, we got a nice and complex application up and running. And, more important, running in a scalable way.
All infrastructure is automated, the developer experience is great and new features can be developed, merged and deployed smoothly.
Vercel and Next.js are great for this kind of application, but first, you need to know what do you want and what are the possible approaches to achieve that. Then, you can move on to the advantages of combining the platform and the framework.
We still need to migrate some sub-projects, but the bottleneck has been successfully removed.
Our plan is to have all applications running on Vercel and let just the database on Amazon RDS (for now).
This work has already been done and is currently working on staging environment.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=16ef50c9a00d" width="1" height="1" alt=""><hr>
<a href="https://medium.com/on2-dev/how-we-built-a-publisher-platform-with-next-js-graphql-and-vercel-16ef50c9a00d">How we built a publisher platform with Next.js, GraphQL and Vercel</a> was originally published in <a href="https://medium.com/on2-dev">On2 Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

N², o podcast da On2

コンタクト