PageSourceSearch

https://www.on2.dev/en

html on2.dev collected 2026-10-05 03:15:58 UTC 174,024 bytes, 9 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/>
vendor: 85 bytes, line 1
1<script strategy="afterInteractive" src="https://www.googletagmanager.com/gtag/js?id=
1G-LTE09YKMT8
vendor: 11 bytes, line 1
1"></script>
1<script id="google-analytics" strategy="afterInteractive">
2    
vendor: 139 bytes, lines 2-5
2window.dataLayer = window.dataLayer || [];
3    function gtag(){dataLayer.push(arguments);}
4    gtag('js', new Date());
5    gtag('config', '
5G-LTE09YKMT8
vendor: 58 bytes, lines 5-8
5', {
6    page_path: window.location.pathname,
7    });
8    
8</script>
8<meta name="robots" content="all"/><meta name="title" content="On2 - Tech Product Makers "/><meta name="description" content="On2 é uma empresa brasileira de desenvolvimento de software que ajuda empresas a construir seus produtos usando tecnologias de ponta."/><meta property="og:type" content="website"/><meta property="og:url" content="https://www.on2.dev/pt-BR"/><meta property="og:title" content="On2 - Tech Product Makers "/><meta property="og:description" content="On2 é uma empresa brasileira de desenvolvimento de software que ajuda empresas a construir seus produtos usando tecnologias de ponta."/><meta property="og:image" content="public/on2.png"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:url" content="https://www.on2.dev/pt-BR"/><meta property="twitter:title" content="On2 - Tech Product Makers "/><meta property="twitter:description" content="On2 é uma empresa brasileira de desenvolvimento de software que ajuda empresas a construir seus produtos usando tecnologias de ponta."/><meta property="twitter:image" content="public/on2.png"/><title>On2</title><meta name="next-head-count" content="18"/><link rel="preload" href="/_next/static/css/6c839dd60ff04263708d.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6c839dd60ff04263708d.css" data-n-g=""/><link rel="preload" href="/_next/static/css/c1f342b6b4583fa7219a.css" as="style"/><link rel="stylesheet" href="/_next/static/css/c1f342b6b4583fa7219a.css" data-n-p=""/><link rel="preload" href="/_next/static/css/3b971e1527339a520ded.css" as="style"/><link rel="stylesheet" href="/_next/static/css/3b971e1527339a520ded.css" data-n-p=""/><noscript data-n-css=""></noscript>
8<script defer="" nomodule="" src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"></script>
8<script src="/_next/static/chunks/webpack-0da0918607ca49eea6e8.js" defer=""></script>
8<script src="/_next/static/chunks/framework-895f067827ebe11ffe45.js" defer=""></script>
8<script src="/_next/static/chunks/main-5662bfae7e5a90d5dbcb.js" defer=""></script>
8<script src="/_next/static/chunks/pages/_app-bfc5ea824c94a893b365.js" defer=""></script>
8<script src="/_next/static/chunks/212-bf602288d128daffc731.js" defer=""></script>
8<script src="/_next/static/chunks/776-8b8186393d559df338d0.js" defer=""></script>
8<script src="/_next/static/chunks/711-e739697bfe333d28d78c.js" defer=""></script>
8<script src="/_next/static/chunks/pages/index-729d33d2448449bc9eba.js" defer=""></script>
8<script src="/_next/static/rtcw8R9FlkWxN4K1hMFuL/_buildManifest.js" defer=""></script>
8<script src="/_next/static/rtcw8R9FlkWxN4K1hMFuL/_ssgManifest.js" defer=""></script>
8</head><body><div id="__next"><div class="home_page__home-container__jgzXP " data="[object Object]"><div class="navbar_navbar-sticky__3YSOs"><div class="navbar_navbar-on2__2qJv1"><div class="navbar_lang__1D1Ku"><div class="lang-switcher_lang-switcher__2GftD"><a href="/pt-BR" class="lang-switcher_lang-switcher-item__1YSJ0">pt</a><a href="/es" class="lang-switcher_lang-switcher-item__1YSJ0">es</a><a href="/jp" class="lang-switcher_lang-switcher-item__1YSJ0">jp</a></div></div><div data-scroll="true" class="navbar_navbar-container__1KDjb"><div class="navbar_navbar-logo__14sJ-"><div class="navbar_menu-icon__x4kHI"><svg width="30" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 0v4H0V0h34zM34 10v4H0v-4h34zM34 20v4H0v-4h34z" fill="#fff"></path></svg></div></div><div class="navbar_navbar-items__3PbCV"><a class="navbar_nav-link__1F6sQ" href="/en#home"><div>Home</div></a><a class="navbar_nav-link__1F6sQ" href="/en#services"><div>Services</div></a><a class="navbar_nav-link__1F6sQ" href="/en#about"><div>About</div></a><a class="navbar_nav-link__1F6sQ" href="/en#portfolio"><div>Cases</div></a><a class="navbar_nav-link__1F6sQ" href="/en#midia"><div>Media</div></a><a class="navbar_nav-link__1F6sQ" href="/en#blog"><div>Blog</div></a><a class="navbar_nav-link__1F6sQ" href="/en/career"><div>Career</div></a><a class="navbar_nav-link__1F6sQ" href="/en/podcast"><div>Podcast</div></a><a class="navbar_nav-link__1F6sQ" href="/en#contact"><div>Contact</div></a></div></div><div class="navbar_detail-header__15Nye"></div></div></div><div class="fixed_navbar-sticky__2Um5l"><a href="#home" class="fixed_selectedTab__1MbiG"><div class="fixed_iv__3wftn"></div></a><a href="#services"><div class="fixed_iv__3wftn"></div></a><a href="#about"><div class="fixed_iv__3wftn"></div></a><a href="#portifolio"><div class="fixed_iv__3wftn"></div></a><a href="#blog"><div class="fixed_iv__3wftn"></div></a><a href="#contact"><div class="fixed_iv__3wftn"></div></a></div><div class="section_atom__section-container__2l90A " id="home"><div class="section_center-el__f-bKa "><div class="hero_molecule__hero-container__2Ka46 "><div class="hero_container-slogan__3M3iw hero_text-xl__1kXF1"><div class="hero_text-container__2yYsk"><span>Tech<br/></span><span>Product<br/></span><span>Makers</span></div></div><div class="hero_container-logo__q4bT_"><div class="hero_spacer__36j4u"></div><div class="on2-logo_atom__on2-logo-container__2KF8s hero_logo__36BnU" data-animation="1"><div class="on2-logo_small__2a3qo"><svg id="On2_Logo_Vertical" class="on2-logo_On2_Logo__TWxcz" x="0px" y="0px" viewBox="0 0 614 904" xml:space="preserve" style="max-height:inherit"><path d="M612.1,854.7v42.8H456l79.4-86.3c11.3-12.4,22.2-29.9,22.2-47.7c0-12.4-8.8-25.3-22.2-25.3c-13.7,0-21.1,10.6-21.1,23.7c0,2.6,0.3,5.4,0.8,8.3h-55.7c1.5-44.6,29.9-74.7,75.8-74.7c40.7,0,75,26.8,75,69.1c0,27.8-11.6,44.1-31.4,62.1l-30.2,28.1L612.1,854.7L612.1,854.7z"></path><polygon points="284,703.3 283.8,703.2 232,703.2 232,897.5 283.8,897.5 283.8,778.4 284,778.4"></polygon><polygon points="379.1,703.2 379.1,822 378.6,822 308.1,733.7 308.1,808.4 379.1,897.5 431,897.5 431,703.2"></polygon><path d="M217,796.7c0,62.9-45.1,107.2-107.5,107.2S2,859.6,2,796.7c0-58.8,51.5-100,107.5-100S217,738,217,796.7 M54.5,797c0,33.5,24.7,58,54.9,58s54.9-24.5,54.9-58c0-26.8-24.7-51.3-54.9-51.3C79.3,745.7,54.5,770.2,54.5,797"></path><path d="M533.5,213.5l-126.2,79.3v-97.3l0.1-0.1l-0.1-60.8l-124.4,78v60.9l72.8-45.6v54.5v103.9l202.2-126.7c2.9,15.4,4.5,31.3,4.5,47.5c0,141-114.3,255.2-255.2,255.2c-96.6,0-180.6-53.7-224-132.8l-44,27.4c52.6,93.7,152.8,157,267.9,157c169.5,0,307-137.5,307-307c0-45.3-9.8-88.2-27.4-126.8L533.5,213.5z"></path><path d="M80.6,400.5l126.2-79.3v97.3l-0.1,0.1l0.1,60.8l124.4-78v-60.9l-72.8,45.6v-54.5V227.7L56.2,354.5c-2.9-15.4-4.5-31.3-4.5-47.5C51.8,166,166,51.8,307,51.8c96.6,0,180.6,53.7,224,132.8l43.9-27.5C522.3,63.4,422,0.1,307,0.1C137.5,0.1,0,137.6,0,307.1c0,45.3,9.8,88.2,27.4,126.8L80.6,400.5z"></path></svg></div><div class="on2-logo_large__AQbdC"><svg id="On2_Logo_Horizontal" x="0px" class="on2-logo_On2_Logo__TWxcz" y="0px" viewBox="0 0 674 315" xml:space="preserve" style="max-height:inherit"><path class="on2-logo_st0__2mXDG on2-logo_faded__2-b7k" d="M674,186.1v22h-80.2l40.7-44.3c5.8-6.4,11.3-15.3,11.3-24.5c0-6.4-4.5-13-11.3-13s-10.8,5.4-10.8,12.2c0,1.4,0.1,2.8,0.4,4.2h-28.5c0.8-22.9,15.3-38.3,38.9-38.3c20.9,0,38.5,13.7,38.5,35.4c0,14.3-5.9,22.6-16.1,31.9l-15.5,14.4H674z"></path><polygon class="on2-logo_st0__2mXDG on2-logo_faded__2-b7k" points="505.6,108.4 505.5,108.3 478.9,108.3 478.9,208 505.5,208 505.5,146.9 50
85.6,146.9"></polygon><polygon class="on2-logo_st0__2mXDG on2-logo_faded__2-b7k" points="554.4,108.3 554.4,169.3 554.2,169.3 518,124 518,162.3 554.4,208 581,208 581,108.3"></polygon><path class="on2-logo_st0__2mXDG on2-logo_faded__2-b7k" d="M471.2,156.3c0,32.3-23.1,55-55.2,55s-55.2-22.7-55.2-55c0-30.2,26.5-51.3,55.2-51.3C444.7,105,471.2,126.1,471.2,156.3 M387.9,156.4c0,17.2,12.7,29.8,28.2,29.8c15.5,0,28.2-12.6,28.2-29.8c0-13.7-12.7-26.3-28.2-26.3S387.9,142.7,387.9,156.4"></path><path class="on2-logo_st0__2mXDG on2-logo_circle-1__28zwy" d="M273.7,109.5l-64.8,40.7v-49.9l0,0V69.1l-63.8,40v31.2l37.4-23.4v81.3l103.8-65c13.5,71.1-33.2,139.6-104.3,153.1c-55.8,10.6-112.1-16-139.4-65.9l-22.5,14.1c42.6,75.9,138.6,102.9,214.5,60.3c71.3-40,100.1-127.8,66.4-202.3L273.7,109.5z"></path><path class="on2-logo_st0__2mXDG on2-logo_circle-2__15OID" d="M41.4,205.5l64.8-40.7v49.9l0,0v31.2l63.8-40v-31.2l-37.4,23.4v-81.3L28.9,181.9C15.4,110.8,62.1,42.3,133.2,28.8c55.8-10.6,112,16,139.3,65.8L295,80.5C252.5,4.6,156.5-22.5,80.6,20C9.2,60-19.8,148,14.1,222.6L41.4,205.5z"></path></svg></div></div><div class="hero_spacer__36j4u"></div></div></div></div></div>
8<div id="services" class="container_container-main__3GXgj numeric-list-section_main-container__3HtAJ"><div class="numeric-list-section_main-body__2_VJN"><div class="numeric-list-section_first-section__1xth0" data-current-page="0"><div class="numeric-list-section_content-number__22c7B"><div class="numeric-list-section_texts-content__zJUTQ" data-page="0"><h3 class="numeric-list-section_content-title__1mdJu" data-page="0"><span class="numeric-list-section_title-number-mobile__1P5_E">1</span><div><div>Technology as a cornerstone</div></div></h3><div data-page="0" class="numeric-list-section_main-text__1z8mr"><div>Technology is the foundation for innovation. Connected with current trends in the digital environment, we transform challenges into business opportunities by developing solutions that involves the most advanced technologies available on the market. We are specialists in developing bleeding-edge, Web, open-source and open-standard technologies.</div></div></div><div data-page="0" class="numeric-list-section_image-container__1Eg-r"><div class="image_atom__image-container__8acQm numeric-list-section_image-item__3tvFu" data-page="0"><div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img tabindex="0" alt="[object Object]" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img tabindex="0" alt="[object Object]" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Fnum-01.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fnum-01.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fnum-01.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fnum-01.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fnum-01.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fnum-01.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fnum-01.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fnum-01.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Fnum-01.jpg&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></div></div></div></div><div class="numeric-list-section_content-number__22c7B"><div class="numeric-list-section_texts-content__zJUTQ" data-page="1"><h3 class="numeric-list-section_content-title__1mdJu" data-page="1"><span class="numeric-list-section_title-number-mobile__1P5_E">2</span><div><div>Focus on the product</div></div></h3><div data-page="1" class="numeric-list-section_main-text__1z8mr"><div>Good ideas turned into market value. Our job is to bring projects to life by creating technological products with high perceived value. Our team has extensive experience in product development. Count on our team from conception to deployment. We participate, organize and manage the project from start to finish, letting the client focus on the business.</div></div></div><div data-page="1" class="numeric-list-section_image-container__1Eg-r"><div class="image_atom__image-container__8acQm numeric-list-section_image-item__3tvFu" data-page="1"><div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img tabindex="0" alt="[object Object]" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img tabindex="0" alt="[object Object]" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Fnum-02.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fnum-02.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fnum-02.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fnum-02.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fnum-02.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fnum-02.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fnum-02.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fnum-02.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Fnum-02.jpg&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></div></div></div></div><div class="numeric-list-section_content-number__22c7B"><div class="numeric-list-section_texts-content__zJUTQ" data-page="2"><h3 class="numeric-list-section_content-title__1mdJu" data-page="2"><span class="numeric-list-section_title-number-mobile__1P5_E">3</span><div><div>Specialists</div></div></h3><div data-page="2" class="numeric-list-section_main-text__1z8mr"><div>We make everything work at the best cost, in the shortest time. We use advanced software techniques, conducted by recognized and experienced professionals. The maker culture is present and rooted in our team. We love solving problems of any kind, and not only that, we love proposing solutions to big problems.</div></div></div><div data-page="2" class="numeric-list-section_image-container__1Eg-r"><div class="image_atom__image-container__8acQm numeric-list-section_image-item__3tvFu" data-page="2"><div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img tabindex="0" alt="[object Object]" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img tabindex="0" alt="[object Object]" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Fnum-03.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fnum-03.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fnum-03.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fnum-03.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fnum-03.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fnum-03.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fnum-03.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fnum-03.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Fnum-03.jpg&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></div></div></div></div><div class="numeric-list-section_button-section__3-Nlx"><button class="button_atom__button-container__3TNj9 numeric-list-section_button-container__M-fC8" data-variant="solid" data-faint="1">▶</button><button class="button_atom__button-container__3TNj9 numeric-list-section_button-container__M-fC8" data-variant="solid">◀</button></div></div><div class="numeric-list-section_second-section__22B_t"><div class="numeric-list-paginagor_paginator-container__kWKGG"><button data-active="1" class="numeric-list-paginagor_paginator-button__2HbeB">01</button><button class="numeric-list-paginagor_paginator-button__2HbeB">02</button><button class="numeric-list-paginagor_paginator-button__2HbeB">03</button></div></div></div></div><div class="section-about-us_organism__section-about-us__36f_X " id="about"><div class="section-about-us_box-container__2yHuc"><div class="section_atom__section-container__2l90A "><div class="section_center-el__f-bKa "><div class="section-about-us_container__3PlPk"><div class="section-about-us_content-01__1_E7b"><h2 class="title_atom__title-container__3b3pW section-about-us_title__2uHIm" data-style="title"><div>About Us</div></h2><div class="image_atom__image-container__8acQm section-about-us_image-item__1AaQf" data-style="globe"><div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img tabindex="0" alt="Globe" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img tabindex="0" alt="Globe" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Fglobe.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fglobe.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fglobe.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fglobe.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fglobe.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fglobe.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fglobe.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fglobe.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Fglobe.png&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></div></div></div><div class="section-about-us_content__3GA4V"><span class="section-about-us_about__1i7Rb"><div>About Us</div></span><div class="section-about-us_text__23Y3w"><span><div>From the experience of three recognized professionals in the market, a solution focused on complex problems emerges. Jaydson Gomes and Felipe Nascimento are founders of BrazilJS, the company responsible for and creator of BrazilJS Conf, the largest JavaScript conference in the world. Over the last 20 years, the two have worked in major players in the market, startups, software houses and agencies. Their path crossed that of Cesar Paz, a renowned professional in the market since the 1990s. Cesar was founder, CEO and chairman of the Board of Directors of AG2, the largest agencies in Brazil in the 2000s. And this partnership gave rise to On2. We are not an agency or a software factory. We overcome challenges based on understanding each client's market, optimizing their results.</div></span><span class="section-about-us_abt-02__N0byf"><div>We have the ability to follow the entire development cycle of a business, helping to solve any problems that arise during the journey. All this thanks to an experienced team, ready to participate in every step: consulting, design, analysis, planning, development and maintenance. We work with several technologies, including the most advanced on the market. We choose solutions that deliver the best results, with the best performance and scalability. Our technology stack is tested by our experts and the biggest companies in the world. All this has brought us here and has already won the trust of customers and partners such as Toyota Brasil, Toyota Argentina, KINTO Brasil, Alright and Eyxo. Complex and robust projects move us.</div></span></div></div></div></div></div></div></div>
8<div id="portfolio" class="container_container-main__3GXgj cases_main-container__15caf"><h2 class="cases_main-title__3HnNE">Cases</h2><div class="cases_cases-container__2lAYO"><div class="box-cases_main-grid__1rpAA"><div class="box-cases_main-grid-item__32hbW" style="background-image:url(/images/case-01.png)"><div class="box-cases_overlay__2G3NN"><p class="box-cases_main-text__3eB1p"><div>Modern Infrastructure with AWS</div></p><span class="box-cases_secondary-text__2cEAY"><div>Toyota en Brasil</div></span></div></div><div class="undefined "></div></div><div class="box-cases_main-grid__1rpAA"><div class="box-cases_main-grid-item__32hbW" style="background-image:url(/images/case-02.png)"><div class="box-cases_overlay__2G3NN"><p class="box-cases_main-text__3eB1p"><div>Evolution of Web Applications</div></p><span class="box-cases_secondary-text__2cEAY"><div>Toyota en Brasil</div></span></div></div><div class="undefined "></div></div><div class="box-cases_main-grid__1rpAA"><div class="box-cases_main-grid-item__32hbW" style="background-image:url(/images/case-03.jpg)"><div class="box-cases_overlay__2G3NN"><p class="box-cases_main-text__3eB1p"><div>KINTO Brasil Website and CMS</div></p><span class="box-cases_secondary-text__2cEAY"><div>KINTO Mobility</div></span></div></div><div class="undefined "></div></div><div class="box-cases_main-grid__1rpAA"><div class="box-cases_main-grid-item__32hbW" style="background-image:url(/images/case-04.png)"><div class="box-cases_overlay__2G3NN"><p class="box-cases_main-text__3eB1p"><div>Car rental web application</div></p><span class="box-cases_secondary-text__2cEAY"><div>KINTO Mobility</div></span></div></div><div class="undefined "></div></div><div class="box-cases_main-grid__1rpAA"><div class="box-cases_main-grid-item__32hbW" style="background-image:url(/images/case-05.png)"><div class="box-cases_overlay__2G3NN"><p class="box-cases_main-text__3eB1p"><div>Eyxo Website and CMS</div></p><span class="box-cases_secondary-text__2cEAY"><div>Eyxo Innovation Strategies</div></span></div></div><div class="undefined "></div></div><div class="box-cases_main-grid__1rpAA"><div class="box-cases_main-grid-item__32hbW" style="background-image:url(/images/case-06.png)"><div class="box-cases_overlay__2G3NN"><p class="box-cases_main-text__3eB1p"><div>Humanitarian Coverage site and CMS</div></p><span class="box-cases_secondary-text__2cEAY"><div>ICRC in Brazil</div></span></div></div><div class="undefined "></div></div></div></div><div class="undefined "></div><div class="section_atom__section-container__2l90A midia_organism__what-we-do-container__16YeP " id="midia"><div class="section_center-el__f-bKa midia_organism__what-we-do-container__16YeP "><h2 class="midia_title-values__1vuCo"><div>On2 in the Media</div></h2><div class="midia_grid-container-wwd__3SKlZ" data-current-page="0"><div class="midia_images-values__30OpF"><div class="image_atom__image-container__8acQm midia_image-item__3UCS2" data-style="value" data-page="0"><div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img tabindex="0" alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img tabindex="0" alt="" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Festado.jpeg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Festado.jpeg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Festado.jpeg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Festado.jpeg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Festado.jpeg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Festado.jpeg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Festado.jpeg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Festado.jpeg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Festado.jpeg&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></div></div><div class="image_atom__image-container__8acQm midia_image-item__3UCS2" data-style="value" data-page="1"><div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img tabindex="0" alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img tabindex="0" alt="" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Fpod.jpeg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fpod.jpeg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fpod.jpeg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fpod.jpeg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fpod.jpeg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fpod.jpeg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fpod.jpeg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fpod.jpeg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Fpod.jpeg&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></div></div><div class="image_atom__image-container__8acQm midia_image-item__3UCS2" data-style="value" data-page="2"><div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img tabindex="0" alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img tabindex="0" alt="" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Fty.jpeg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fty.jpeg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fty.jpeg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fty.jpeg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fty.jpeg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fty.jpeg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fty.jpeg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fty.jpeg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Fty.jpeg&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></div></div><div class="image_atom__image-container__8acQm midia_image-item__3UCS2" data-style="value" data-page="3"><div style="display:block;overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;margin:0"><img tabindex="0" alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img tabindex="0" alt="" sizes="100vw" srcSet="/_next/image?url=%2Fimages%2Fmid.jpeg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fmid.jpeg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fmid.jpeg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fmid.jpeg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fmid.jpeg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fmid.jpeg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fmid.jpeg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fmid.jpeg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Fmid.jpeg&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></div></div></div><div class="midia_content-container__2vS2n"><div class="midia_texts-container__1YeZ4"><div class="midia_texts-content__1stC2" data-page="0"><h3 data-page="0"><div>Estadão interviews our dev Gabriel Gomes</div></h3><p class="midia_description__Sk7UR"><div>
8It's through the search for the transformation of spaces and the empowerment of black people that our developer Gabriel Gomes de Oliveira Costa is at ESTADÃO telling about his participation in the reality show C0D3RS Championship, available on Amazon Prime Video.</div></p><br/><a target="_blank" href="https://www.estadao.com.br/link/cultura-digital/programador-do-jardim-angela-vira-estrela-de-reality/"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="midia_texts-content__1stC2" data-page="1"><h3 data-page="1"><div>Padrinho produces a new frame for the 'N²' podcast</div></h3><p class="midia_description__Sk7UR"><div>The first edition of the new podcast 'N²', by On2, a technology company, is now on the air. Produced and edited by Padrinho Content and Assessoria, 'The C-Level Show' brings professionals from the market to discuss business and the main trends in the area.</div></p><br/><a target="_blank" href="https://coletiva.net/noticias/padrinho-produz-novo-quadro-do-podcast-n-,425196.jhtml"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="midia_texts-content__1stC2" data-page="2"><h3 data-page="2"><div>ON2 creates platform for Toyota</div></h3><p class="midia_description__Sk7UR"><div>ON2, a software development company from Rio Grande do Sul, is creating an e-commerce platform for Toyota Argentina, offering cars to the final public.</div></p><br/><a target="_blank" href="https://www.baguete.com.br/noticias/29/04/2022/on2-cria-plataforma-para-toyota"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="midia_texts-content__1stC2" data-page="3"><h3 data-page="3"><div>Is there freedom in digital territories?</div></h3><p class="midia_description__Sk7UR"><div>In a hyperconnected world, there is an increasing need to critically analyze not only the way we inhabit digital territories, but also the resistance strategies we use to practice the exercise of freedom within the virtual world. After all, to what extent are we free in the life we ​​lead online?</div></p><br/><a target="_blank" href="https://gauchazh.clicrbs.com.br/tecnologia/noticia/2022/09/ha-liberdade-nos-territorios-digitais-cl7q9qf3o00450163g6v2xaj1.html"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div></div><div class="paginator_molecule__paginator-container__3QkeT midia_paginator-container__1Zp72"><button class="button_atom__button-container__3TNj9 " data-variant="solid" data-faint="1">◀</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1">01</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">02</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">03</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">04</button><button class="button_atom__button-container__3TNj9 " data-variant="solid">▶</button></div></div></div></div></div><div class="section_atom__section-container__2l90A posts_organism__what-we-do-container__2qIrR " id="blog"><div class="section_center-el__f-bKa posts_organism__what-we-do-container__2qIrR "><h2><div>Discover the On2 Blog</div></h2><div class="posts_grid-container-wwd__NclS7" data-current-page="0"><div class="posts_images-container__22Zuo"><div class="image_atom__image-container__8acQm posts_image-item__3Psin" data-page="0"></div><div class="image_atom__image-container__8acQm posts_image-item__3Psin" data-page="1"></div><div class="image_atom__image-container__8acQm posts_image-item__3Psin" data-page="2"></div><div class="image_atom__image-container__8acQm posts_image-item__3Psin" data-page="3"></div><div class="image_atom__image-container__8acQm posts_image-item__3Psin" data-page="4"></div><div class="image_atom__image-container__8acQm posts_image-item__3Psin" data-page="5"></div><div class="image_atom__image-container__8acQm posts_image-item__3Psin" data-page="6"></div><div class="image_atom__image-container__8acQm posts_image-item__3Psin" data-page="7"></div><div class="image_atom__image-container__8acQm posts_image-item__3Psin" data-page="8"></div></div><div class="posts_content-container__3Fvoi"><div class="posts_texts-container___02np"><div class="posts_texts-content__g06pm" data-page="0"><h3 data-page="0">Implementing Quality Assurance in production</h3><br/><a href="https://medium.com/on2-dev/implementing-quality-assurance-in-production-5bd82182114b?source=rss----9ec0d78aeb67---4"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="posts_texts-content__g06pm" data-page="1"><h3 data-page="1">De funcionário a sócio da empresa</h3><br/><a href="https://medium.com/on2-dev/de-funcion%C3%A1rio-a-s%C3%B3cio-da-empresa-7800f958bc75?source=rss----9ec0d78aeb67---4"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="posts_texts-content__g06pm" data-page="2"><h3 data-page="2">O papel da tecnologia em meio à desinformação</h3><br/><a href="https://medium.com/on2-dev/o-papel-da-tecnologia-em-meio-%C3%A0-desinforma%C3%A7%C3%A3o-eb5df842fb9c?source=rss----9ec0d78aeb67---4"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="posts_texts-content__g06pm" data-page="3"><h3 data-page="3">Por uma tecnologia antirracista</h3><br/><a href="https://medium.com/on2-dev/por-uma-tecnologia-antirracista-b6919b5791a?source=rss----9ec0d78aeb67---4"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="posts_texts-content__g06pm" data-page="4"><h3 data-page="4">O que esperamos do futuro do Instagram?</h3><br/><a href="https://medium.com/on2-dev/o-que-esperamos-do-futuro-do-instagram-b4ac82b1679e?source=rss----9ec0d78aeb67---4"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="posts_texts-content__g06pm" data-page="5"><h3 data-page="5">5G no DOC</h3><br/><a href="https://medium.com/on2-dev/5g-no-doc-d860a2ac7b76?source=rss----9ec0d78aeb67---4"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="posts_texts-content__g06pm" data-page="6"><h3 data-page="6">i18n in Next.js: the easy way</h3><br/><a href="https://medium.com/on2-dev/i18n-in-next-js-the-easy-way-8349336263c7?source=rss----9ec0d78aeb67---4"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="posts_texts-content__g06pm" data-page="7"><h3 data-page="7">How to migrate large Git repositories</h3><br/><a href="https://medium.com/on2-dev/how-to-migrate-large-git-repositories-ba87c8910915?source=rss----9ec0d78aeb67---4"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div><div class="posts_texts-content__g06pm" data-page="8"><h3 data-page="8">How we built a publisher platform with Next.js, GraphQL and Vercel</h3><br/><a href="https://medium.com/on2-dev/how-we-built-a-publisher-platform-with-next-js-graphql-and-vercel-16ef50c9a00d?source=rss----9ec0d78aeb67---4"><button class="button_atom__button-container__3TNj9 " data-variant="solid"><div>Read full post</div></button></a></div></div><div class="paginator_molecule__paginator-container__3QkeT posts_paginator-container__3wDZT"><button class="button_atom__button-container__3TNj9 " data-variant="solid" data-faint="1">◀</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="
81">01</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">02</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">03</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">04</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">05</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">06</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">07</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">08</button><button class="button_atom__button-container__3TNj9 " data-variant="regular" data-small="1" data-faint="1">09</button><button class="button_atom__button-container__3TNj9 " data-variant="solid">▶</button></div></div></div></div></div><div id="contact" placeholderName="[object Object]" class="container_
8container-main__3GXgj contact_contact-container__uNh8D"><div class="contact_contact-title__1E14O"><h2><div>Be our next partner</div></h2></div><div class="contact_contact__1oawH"><form><div class="contact_ct-mail__2dDJ0"><div class="contact_ct-form__2Ycaf"><input type="text" required="" name="Name" maxLength="30" placeholder="Name"/></div><div class="contact_ct-form__2Ycaf"><input type="email" required="" name="Email" maxLength="30" placeholder="Email"/></div></div><div class="contact_ct-mail__2dDJ0"><div class="contact_ct-form__2Ycaf"><input type="text" required="" name="Empresa" maxLength="30" placeholder="Company"/></div><div class="contact_ct-form__2Ycaf"><input type="text" required="" name="Telefone" maxLength="30" placeholder="Phone"/></div></div><div class="contact_ct-text__Covog"><textarea placeholder="Message" maxLength="100" name="message"></textarea></div><div class="contact_ct-send__2g0r_"><input type="hidden" value="{}" name="data"/><input type="submit" value="Enviar"/></div></form></div></div><div class="footer_molecule__footer-container__1qBaA "><div class="section_atom__section-container__2l90A "><div class="section_center-el__f-bKa "><div class="footer_content__3Myri"><div class="footer_location__1sEZI"><div class="footer_footerIcon__1CwZB"><svg id="On2_Logo_Vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614 904"><defs></defs><path class="cls-1" d="M612.1,854.7v42.8h-156.1l79.4-86.3c11.3-12.4,22.2-29.9,22.2-47.7,0-12.4-8.8-25.3-22.2-25.3s-21.1,10.6-21.1,23.7c0,2.6,.3,5.4,.8,8.3h-55.7c1.5-44.6,29.9-74.7,75.8-74.7,40.7,0,75,26.8,75,69.1,0,27.8-11.6,44.1-31.4,62.1l-30.2,28.1,63.5-.1h0Z"></path><polygon class="cls-1" points="284 703.3 283.8 703.2 232 703.2 232 897.5 283.8 897.5 283.8 778.4 284 778.4 284 703.3"></polygon><polygon class="cls-1" points="379.1 703.2 379.1 822 378.6 822 308.1 733.7 308.1 808.4 379.1 897.5 431 897.5 431 703.2 379.1 703.2"></polygon><path class="cls-1" d="M217,796.7c0,62.9-45.1,107.2-107.5,107.2S2,859.6,2,796.7c0-58.8,51.5-100,107.5-100s107.5,41.3,107.5,100m-162.5,.3c0,33.5,24.7,58,54.9,58s54.9-24.5,54.9-58c0-26.8-24.7-51.3-54.9-51.3s-54.9,24.5-54.9,51.3"></path><path class="cls-1" d="M533.5,213.5l-126.2,79.3v-97.3l.1-.1-.1-60.8-124.4,78v60.9l72.8-45.6v158.4l202.2-126.7c2.9,15.4,4.5,31.3,4.5,47.5,0,141-114.3,255.2-255.2,255.2-96.6,0-180.6-53.7-224-132.8l-44,27.4c52.6,93.7,152.8,157,267.9,157,169.5,0,307-137.5,307-307,0-45.3-9.8-88.2-27.4-126.8l-53.2,33.4Z"></path><path class="cls-1" d="M80.6,400.5l126.2-79.3v97.3l-.1,.1,.1,60.8,124.4-78v-60.9l-72.8,45.6V227.7L56.2,354.5c-2.9-15.4-4.5-31.3-4.5-47.5,.1-141,114.3-255.2,255.3-255.2,96.6,0,180.6,53.7,224,132.8l43.9-27.5C522.3,63.4,422,.1,307,.1,137.5,.1,0,137.6,0,307.1c0,45.3,9.8,88.2,27.4,126.8l53.2-33.4Z"></path></svg></div><div><span class="footer_highlight__2a6Yi">Porto Alegre<br/></span><p class="footer_smallText__17c_8">Av. Dr. Nilo Peçanha, 1500, Sala 16<br/>Boa Vista, Porto Alegre - RS<br/>Brasil<br/>CEP 91.330-002</p></div></div><div class="footer_contact__1QtRB"><h2><div>Get in<br>touch<br>with us.</div></h2><p class="footer_smallText__17c_8"><a href="https://blog.on2.dev/">Blog</a> / <a href="https://github.com/on2-dev">GitHub</a> / <a href="https://www.glassdoor.com.br/Vis%C3%A3o-geral/Trabalhar-na-On2-EI_IE5235029.13,16.htm">Glassdoor</a> / <a href="https://www.instagram.com/on2.dev/">Instagram</a> / <a href="https://www.linkedin.com/company/on2/">LinkedIn</a> / <a href="https://twitter.com/On2_dev">X</a> / <a href="https://www.youtube.com/@on2dev">Youtube</a></p></div></div></div></div></div><div class="decorative-lines_atom__decorative-lines-container__11AKf "></div></div></div>
8<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"data":{"status":"ok","feed":{"url":"https://medium.com/feed/on2-dev","title":"On2 Dev - Medium","link":"https://medium.com/on2-dev?source=rss----9ec0d78aeb67---4","author":"","description":"On2 is Brazilian software house that helps companies to build their products using bleeding-edge technologies. - Medium","image":"https://cdn-images-1.medium.com/proxy/1*TGH72Nnw24QL3iV9IOm4VA.png"},"items":[{"title":"Implementing Quality Assurance in production","pubDate":"2023-10-04 15:03:48","link":"https://medium.com/on2-dev/implementing-quality-assurance-in-production-5bd82182114b?source=rss----9ec0d78aeb67---4","guid":"https://medium.com/p/5bd82182114b","author":"Alexander S","thumbnail":"","description":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1000/0*1QoXjlViLXjG5V0x\"\u003e\u003cfigcaption\u003eImage credit: Jason Coudriet\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003e\u003cstrong\u003eKey takeaways:\u003cbr\u003e1. Map out what needs to be tested\u003cbr\u003e2. Define the priorities\u003cbr\u003e3. Create an appropriate QA strategy\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eImplementing Quality Assurance (QA) is critical to ensure that products are reliable, user-friendly, and meet customer expectations.\u003c/p\u003e\n\u003cp\u003eThe “testing early, test often” ideal, while quite relevant, cannot always be applied.\u003c/p\u003e\n\u003cp\u003eFor 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).\u003c/p\u003e\n\u003cp\u003eFurthermore, 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.\u003c/p\u003e\n\u003cp\u003eWhile 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.\u003c/p\u003e\n\u003cp\u003eOn this article, we detail how we tackled this challenge at On2 to ensure our success.\u003c/p\u003e\n\u003ch3\u003e1. Map out the system — define what needs to be tested and how thoroughly\u003c/h3\u003e\n\u003cp\u003eBefore 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.\u003c/p\u003e\n\u003cp\u003eWhen 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.\u003c/p\u003e\n\u003cp\u003eReviewing 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.\u003c/p\u003e\n\u003ch3\u003e2. Listen to the stakeholders (and your team) — define the priorities\u003c/h3\u003e\n\u003cp\u003eWhen 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.\u003c/p\u003e\n\u003cp\u003eSome of the factors that may be considered:\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e- Customer impact:\u003c/strong\u003e 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.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e- Business impact:\u003c/strong\u003e 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.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e- Urgency:\u003c/strong\u003e 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 \u003ca href=\"https://rogeriodasilva.com/defect-clustering/\"\u003eDefect clustering\u003c/a\u003e, it’s highly probable that more defects will be found nearby and this part is prime for being prioritized on testing.\u003c/p\u003e\n\u003cp\u003eIt 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.\u003c/p\u003e\n\u003ch3\u003e3. Create an appropriate QA strategy\u003c/h3\u003e\n\u003cp\u003eCreating 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.\u003c/p\u003e\n\u003cp\u003eIf 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.\u003c/p\u003e\n\u003cp\u003eSome questions to be asked during the development of a QA strategy:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eHow much time will be needed to set up the testing environment?\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eHow long it will take for your team to create the test cases, to run the tests, to automatize them when appropriate?\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eHow much training will your team need to learn the testing tools and processes in order to be effective?\u003c/strong\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThe 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.\u003c/p\u003e\n\u003ch3\u003eIn Conclusion\u003c/h3\u003e\n\u003cp\u003eImplementing Quality Assurance (QA) is crucial to deliver quality products. Although implementing QA throughout the entire Softw
8are 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.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=5bd82182114b\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/implementing-quality-assurance-in-production-5bd82182114b\"\u003eImplementing Quality Assurance in production\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","content":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1000/0*1QoXjlViLXjG5V0x\"\u003e\u003cfigcaption\u003eImage credit: Jason Coudriet\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003e\u003cstrong\u003eKey takeaways:\u003cbr\u003e1. Map out what needs to be tested\u003cbr\u003e2. Define the priorities\u003cbr\u003e3. Create an appropriate QA strategy\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eImplementing Quality Assurance (QA) is critical to ensure that products are reliable, user-friendly, and meet customer expectations.\u003c/p\u003e\n\u003cp\u003eThe “testing early, test often” ideal, while quite relevant, cannot always be applied.\u003c/p\u003e\n\u003cp\u003eFor 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).\u003c/p\u003e\n\u003cp\u003eFurthermore, 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.\u003c/p\u003e\n\u003cp\u003eWhile 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.\u003c/p\u003e\n\u003cp\u003eOn this article, we detail how we tackled this challenge at On2 to ensure our success.\u003c/p\u003e\n\u003ch3\u003e1. Map out the system — define what needs to be tested and how thoroughly\u003c/h3\u003e\n\u003cp\u003eBefore 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.\u003c/p\u003e\n\u003cp\u003eWhen 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.\u003c/p\u003e\n\u003cp\u003eReviewing 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.\u003c/p\u003e\n\u003ch3\u003e2. Listen to the stakeholders (and your team) — define the priorities\u003c/h3\u003e\n\u003cp\u003eWhen 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.\u003c/p\u003e\n\u003cp\u003eSome of the factors that may be considered:\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e- Customer impact:\u003c/strong\u003e 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.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e- Business impact:\u003c/strong\u003e 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.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e- Urgency:\u003c/strong\u003e 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 \u003ca href=\"https://rogeriodasilva.com/defect-clustering/\"\u003eDefect clustering\u003c/a\u003e, it’s highly probable that more defects will be found nearby and this part is prime for being prioritized on testing.\u003c/p\u003e\n\u003cp\u003eIt 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.\u003c/p\u003e\n\u003ch3\u003e3. Create an appropriate QA strategy\u003c/h3\u003e\n\u003cp\u003eCreating 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.\u003c/p\u003e\n\u003cp\u003eIf 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.\u003c/p\u003e\n\u003cp\u003eSome questions to be asked during the development of a QA strategy:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eHow much time will be needed to set up the testing environment?\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eHow long it will take for your team to create the test cases, to run the tests, to automatize them when appropriate?\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eHow much training will your team need to learn the testing tools and processes in order to be effective?\u003c/strong\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThe 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.\u003c/p\u003e\n\u003ch3\u003eIn Conclusion\u003c/h3\u003e\n\u003cp\u003eImplementing Quality Assurance (QA) is crucial to deliver quality products. Although implementing QA throughout the entire Softw
8are 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.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=5bd82182114b\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/implementing-quality-assurance-in-production-5bd82182114b\"\u003eImplementing Quality Assurance in production\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","enclosure":{},"categories":["quality-assurance","development","software-development","software-engineering"]},{"title":"De funcionário a sócio da empresa","pubDate":"2023-02-14 13:49:32","link":"https://medium.com/on2-dev/de-funcion%C3%A1rio-a-s%C3%B3cio-da-empresa-7800f958bc75?source=rss----9ec0d78aeb67---4","guid":"https://medium.com/p/7800f958bc75","author":"Jaydson Gomes","thumbnail":"","description":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*FG8GByZVVM9eRHz4gPrMrw.jpeg\"\u003e\u003cfigcaption\u003eFelipe, Jaydson e Cesar, fundadores da On2\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eCofundador da ON2, Jaydson Gomes conta como conheceu o empresário Cesar Paz, que viria a investir em sua ideia\u003c/p\u003e\n\u003cp\u003eParece 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.\u003c/p\u003e\n\u003cp\u003eDesde 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.\u003c/p\u003e\n\u003cp\u003eSeus 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.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cp\u003ePorém, ainda que à distância, o gestor observava o desempenho do jovem funcionário.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cp\u003eApó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.\u003c/p\u003e\n\u003cp\u003e“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 tinh
8a com as comunidades de desenvolvimento de software. Depois daquele dia, seguimos conversando, tomamos café, trocamos figurinhas…”, lembra Jaydson.\u003c/p\u003e\n\u003cp\u003eNaquele 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.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cp\u003eComo 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.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=7800f958bc75\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/de-funcion%C3%A1rio-a-s%C3%B3cio-da-empresa-7800f958bc75\"\u003eDe funcionário a sócio da empresa\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","content":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*FG8GByZVVM9eRHz4gPrMrw.jpeg\"\u003e\u003cfigcaption\u003eFelipe, Jaydson e Cesar, fundadores da On2\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eCofundador da ON2, Jaydson Gomes conta como conheceu o empresário Cesar Paz, que viria a investir em sua ideia\u003c/p\u003e\n\u003cp\u003eParece 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.\u003c/p\u003e\n\u003cp\u003eDesde 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.\u003c/p\u003e\n\u003cp\u003eSeus 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.\u003c/p\u003e\n\u003cp\u003e“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.\u
8003c/p\u003e\n\u003cp\u003ePorém, ainda que à distância, o gestor observava o desempenho do jovem funcionário.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cp\u003eApó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.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cp\u003eNaquele 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.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cp\u003eComo 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.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cp\u003e“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.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=7800f958bc75\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/de-funcion%C3%A1rio-a-s%C3%B3cio-da-empresa-7800f958bc75\"\u003eDe funcionário a sócio da empresa\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","enclosure":{},"categories":["tecnologia","empreendedorismo"]},{"title":"O papel da tecnologia em meio à desinformação","pubDate":"2023-01-09 17:43:38","link":"https://medium.com/on2-dev/o-papel-da-tecnologia-em-meio-%C3%A0-desinforma%C3%A7%C3%A3o-eb5df842fb9c?source=rss----9ec0d78aeb67---4","guid":"https://medium.com/p/eb5df842fb9c","author":"Jaydson Gomes","thumbnail":"","description":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*vGy32fZMS8_mZRZfXpJL4A.jpeg\"\u003e\u003c/figure\u003e\u003cp\u003eAs 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.\u003c/p\u003e\n\u003cp\u003ePor 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%).\u003c/p\u003e\n\u003cp\u003eÉ 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 i
8dentificar 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.\u003c/p\u003e\n\u003cp\u003eEmpresas 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.\u003c/p\u003e\n\u003cp\u003eDesenvolver 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 \u003ca href=\"https://www.aosfatos.org/noticias/manuais/\"\u003eAos Fatos\u003c/a\u003e, 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.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=eb5df842fb9c\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/o-papel-da-tecnologia-em-meio-%C3%A0-desinforma%C3%A7%C3%A3o-eb5df842fb9c\"\u003eO papel da tecnologia em meio à desinformação\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","content":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*vGy32fZMS8_mZRZfXpJL4A.jpeg\"\u003e\u003c/figure\u003e\u003cp\u003eAs 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.\u003c/p\u003e\n\u003cp\u003ePor 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%).\u003c/p\u003e\n\u003cp\u003eÉ 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.\u003c/p\u003e\n\u003cp\u003eEmpresas 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.\u003c/p\u003e\n\u003cp\u003eDesenvolver softw
8ares 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 \u003ca href=\"https://www.aosfatos.org/noticias/manuais/\"\u003eAos Fatos\u003c/a\u003e, 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.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=eb5df842fb9c\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/o-papel-da-tecnologia-em-meio-%C3%A0-desinforma%C3%A7%C3%A3o-eb5df842fb9c\"\u003eO papel da tecnologia em meio à desinformação\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","enclosure":{},"categories":["desinformação","tecnologia"]},{"title":"Por uma tecnologia antirracista","pubDate":"2022-11-20 20:01:11","link":"https://medium.com/on2-dev/por-uma-tecnologia-antirracista-b6919b5791a?source=rss----9ec0d78aeb67---4","guid":"https://medium.com/p/b6919b5791a","author":"Jaydson Gomes","thumbnail":"","description":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/783/1*kzr0kUnumATw1G1VJjEBlQ.png\"\u003e\u003cfigcaption\u003eManifesto por por uma tecnologia antirracista\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eUm por cento.\u003c/p\u003e\n\u003cp\u003eEsse 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.\u003c/p\u003e\n\u003cp\u003eAlé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.\u003c/p\u003e\n\u003cp\u003eO 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.\u003c/p\u003e\n\u003cp\u003eA luta por um mercado tecnológico mais inclusivo e menos racista precisa começar na educação. Embora as ações afirmativas iniciadas nos anos 2000 já apresentam bons resultados, com a ampliaçã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 relaçã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.\u003c/p\u003e\n\u003cp\u003eMas 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 produtivida
8de 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.\u003c/p\u003e\n\u003cp\u003eEssa é 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.\u003c/p\u003e\n\u003cp\u003eAs 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.\u003c/p\u003e\n\u003cp\u003eEstabelecer 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.\u003c/p\u003e\n\u003cp\u003eUma 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.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=b6919b5791a\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/por-uma-tecnologia-antirracista-b6919b5791a\"\u003ePor uma tecnologia antirracista\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","content":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/783/1*kzr0kUnumATw1G1VJjEBlQ.png\"\u003e\u003cfigcaption\u003eManifesto por por uma tecnologia antirracista\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eUm por cento.\u003c/p\u003e\n\u003cp\u003eEsse 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.\u003c/p\u003e\n\u003cp\u003eAlé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.\u003c/p\u003e\n\u003cp\u003eO 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.\u003c/p\u003e\n\u003cp\u003eA luta por um mercado tecnológico mais inclusivo e menos racista precisa começar na educação. Embora as ações afirmativas iniciadas nos anos 2000 já apresentam bons resultados, com a ampliaçã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 relaçã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.\u003c/p\u003e\n\u003cp\u003eMas 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 produtivida
8de 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.\u003c/p\u003e\n\u003cp\u003eEssa é 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.\u003c/p\u003e\n\u003cp\u003eAs 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.\u003c/p\u003e\n\u003cp\u003eEstabelecer 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.\u003c/p\u003e\n\u003cp\u003eUma 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.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=b6919b5791a\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/por-uma-tecnologia-antirracista-b6919b5791a\"\u003ePor uma tecnologia antirracista\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","enclosure":{},"categories":["tecnologia"]},{"title":"O que esperamos do futuro do Instagram?","pubDate":"2022-10-10 14:50:25","link":"https://medium.com/on2-dev/o-que-esperamos-do-futuro-do-instagram-b4ac82b1679e?source=rss----9ec0d78aeb67---4","guid":"https://medium.com/p/b4ac82b1679e","author":"Jaydson Gomes","thumbnail":"","description":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*f1L9DjLUUvdSShKzCuAX2Q.jpeg\"\u003e\u003cfigcaption\u003eInstagram — Foto de Solen Feyissa no Unsplash\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eJá 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.\u003c/p\u003e\n\u003cp\u003eA 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.\u003c/p\u003e\n\u003cp\u003eEm 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.\u003c/p\u003e\n\u003cp\u003eO 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.\u003c/p\u003e\n\u003cp\u003eInclusive, 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.\u003c/p\u003e\n\u003cp\u003eMas 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.\u003c/p\u003e\n\u003cp\u003eUma 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.\u003c/p\u003e\n\u003cp\u003eFontes:\u003cbr\u003e\u003ca href=\"https://static.poder360.com.br/2022/04/Sensor-Tower-Q1-2022-Data-Digest.pdf\"\u003ehttps://static.poder360.com.br/2022/04/Sensor-Tower-Q1-2022-Data-Digest.pdf\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://www.data.ai/en/insights/market-data/q2-2022-market-pulse-regional/\"\u003ehttps://www.data.ai/en/insights/market-data/q2-2022-market-pulse-regional/\u003c/a\u003e\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=b4ac82b1679e\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/o-que-esperamos-do-futuro-do-instagram-b4ac82b1679e\"\u003eO que esperamos do futuro do Instagram?\u
8003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","content":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*f1L9DjLUUvdSShKzCuAX2Q.jpeg\"\u003e\u003cfigcaption\u003eInstagram — Foto de Solen Feyissa no Unsplash\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eJá 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.\u003c/p\u003e\n\u003cp\u003eA 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.\u003c/p\u003e\n\u003cp\u003eEm 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.\u003c/p\u003e\n\u003cp\u003eO 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.\u003c/p\u003e\n\u003cp\u003eInclusive, 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.\u003c/p\u003e\n\u003cp\u003eMas 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.\u003c/p\u003e\n\u003cp\u003eUma 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.\u003c/p\u003e\n\u003cp\u003eFontes:\u003cbr\u003e\u003ca href=\"https://static.poder360.com.br/2022/04/Sensor-Tower-Q1-2022-Data-Digest.pdf\"\u003ehttps://static.poder360.com.br/2022/04/Sensor-Tower-Q1-2022-Data-Digest.pdf\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://www.data.ai/en/insights/market-data/q2-2022-market-pulse-regional/\"\u003ehttps://www.data.ai/en/insights/market-data/q2-2022-market-pulse-regional/\u003c/a\u003e\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=b4ac82b1679e\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/o-que-esperamos-do-futuro-do-instagram-b4ac82b1679e\"\u003eO que esperamos do futuro do Instagram?\u
8003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","enclosure":{},"categories":["social-network","instagram","facebook"]},{"title":"5G no DOC","pubDate":"2022-08-08 18:20:56","link":"https://medium.com/on2-dev/5g-no-doc-d860a2ac7b76?source=rss----9ec0d78aeb67---4","guid":"https://medium.com/p/d860a2ac7b76","author":"Jaydson Gomes","thumbnail":"","description":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1000/0*XaC5LaO-f8VcXc9U\"\u003e\u003cfigcaption\u003eFoto por Vivica Silva — \u003ca href=\"https://unsplash.com/photos/KvJ4wD_-W5k\"\u003ehttps://unsplash.com/photos/KvJ4wD_-W5k\u003c/a\u003e\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eAs revoluções tecnológicas também escancaram a desigualdade social brasileira.\u003c/p\u003e\n\u003cp\u003eCom 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?\u003c/p\u003e\n\u003cp\u003eEm 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).\u003c/p\u003e\n\u003cblockquote\u003e“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”\u003c/blockquote\u003e\n\u003cp\u003e“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 \u003ca href=\"https://twitter.com/felipenmoura\"\u003eFelipe N. Moura\u003c/a\u003e, que assina artigo no Caderno DOC da @gzh da edição do último final de semana.\u003c/p\u003e\n\u003cp\u003eVocê pode acessar ao material completo pelo link: \u003ca href=\"https://gauchazh.clicrbs.com.br/tecnologia/noticia/2022/08/5g-uma-revolucao-lenta-e-desigual-mas-uma-revolucao-cl6dubd2w003p017ptmwt8be4.html\"\u003ehttps://gauchazh.clicrbs.com.br/tecnologia/noticia/2022/08/5g-uma-revolucao-lenta-e-desigual-mas-uma-revolucao-cl6dubd2w003p017ptmwt8be4.html\u003c/a\u003e\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=d860a2ac7b76\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/5g-no-doc-d860a2ac7b76\"\u003e5G no DOC\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","content":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1000/0*XaC5LaO-f8VcXc9U\"\u003e\u003cfigcaption\u003eFoto por Vivica Silva — \u003ca href=\"https://unsplash.com/photos/KvJ4wD_-W5k\"\u003ehttps://unsplash.com/photos/KvJ4wD_-W5k\u003c/a\u003e\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eAs revoluções tecnológicas também escancaram a desigualdade social brasileira.\u003c/p\u003e\n\u003cp\u003eCom 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?\u003c/p\u003e\n\u003cp\u003eEm 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).\u003c/p\u003e\n\u003cblockquote\u003e“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â€
8\u003c/blockquote\u003e\n\u003cp\u003e“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 \u003ca href=\"https://twitter.com/felipenmoura\"\u003eFelipe N. Moura\u003c/a\u003e, que assina artigo no Caderno DOC da @gzh da edição do último final de semana.\u003c/p\u003e\n\u003cp\u003eVocê pode acessar ao material completo pelo link: \u003ca href=\"https://gauchazh.clicrbs.com.br/tecnologia/noticia/2022/08/5g-uma-revolucao-lenta-e-desigual-mas-uma-revolucao-cl6dubd2w003p017ptmwt8be4.html\"\u003ehttps://gauchazh.clicrbs.com.br/tecnologia/noticia/2022/08/5g-uma-revolucao-lenta-e-desigual-mas-uma-revolucao-cl6dubd2w003p017ptmwt8be4.html\u003c/a\u003e\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=d860a2ac7b76\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/5g-no-doc-d860a2ac7b76\"\u003e5G no DOC\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","enclosure":{},"categories":["5g","technology","society"]},{"title":"i18n in Next.js: the easy way","pubDate":"2021-09-20 19:09:33","link":"https://medium.com/on2-dev/i18n-in-next-js-the-easy-way-8349336263c7?source=rss----9ec0d78aeb67---4","guid":"https://medium.com/p/8349336263c7","author":"Jaydson Gomes","thumbnail":"","description":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*ynKAdRw_w-3TQh5BsB5QuQ.png\"\u003e\u003c/figure\u003e\u003cp\u003eThere are quite a few articles out there about how to implement internationalization (i18n) in a Next.js project.\u003c/p\u003e\n\u003cp\u003eThe thing is: none of them is simple enough to get the task done quickly.\u003c/p\u003e\n\u003cp\u003eMost articles focus on just one side of the problem and others are too complex and focus on generic issues.\u003c/p\u003e\n\u003cp\u003eEven the Next.js official documentation is sort of confusing (\u003ca href=\"https://nextjs.org/docs/advanced-features/i18n-routing\"\u003ehttps://nextjs.org/docs/advanced-features/i18n-routing\u003c/a\u003e).\u003c/p\u003e\n\u003cp\u003eWell, the main thing we want to achieve with i18n is the content translated to a different language, right?\u003c/p\u003e\n\u003cp\u003eThat part is kind of missing and we get it.\u003c/p\u003e\n\u003cp\u003ei18n 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.\u003c/p\u003e\n\u003cp\u003eAnd here is the problem, assuming everyone already knows everything by default is not a good practice.\u003c/p\u003e\n\u003cp\u003eEnough with the frustration. Let’s implement i18n in a Next.js project!\u003c/p\u003e\n\u003ch3\u003eCreating a new Next.js project\u003c/h3\u003e\n\u003cp\u003eLet’s first create a new Next.js project. If you already have a Next.js project you can skip this part.\u003c/p\u003e\n\u003cpre\u003enpx create-next-app\u003cbr\u003e# or\u003cbr\u003eyarn create next-app\u003c/pre\u003e\n\u003cp\u003eTo start the application in the development environment:\u003c/p\u003e\n\u003cpre\u003enpx yarn dev\u003cbr\u003e# or\u003cbr\u003eyarn dev\u003c/pre\u003e\n\u003ch3\u003eAdding i18n\u003c/h3\u003e\n\u003cp\u003eNext.js has built-in support for i18n since v10.0.0.\u003c/p\u003e\n\u003cp\u003eWe 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.\u003c/p\u003e\n\u003cp\u003eFor instance, if you have a page called contact, a new page route such as [language]/contact will be the result.\u003c/p\u003e\n\u003cp\u003eLet’s edit our next.config.js and add the i18n configuration:\u003c/p\u003e\n\u003cpre\u003emodule.exports = {\u003cbr\u003e  i18n: {\u003cbr\u003e    locales: ['pt-BR','en-US', 'es-ES'],\u
8003cbr\u003e    defaultLocale: 'pt-BR',\u003cbr\u003e  }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eHere 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.\u003c/p\u003e\n\u003cp\u003eBy 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 .\u003c/p\u003e\n\u003cp\u003eAfter saving the changes to this file, remember to restart the server to see the changes in effect.\u003c/p\u003e\n\u003ch3\u003eAdding helpers\u003c/h3\u003e\n\u003cp\u003eNow, 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.\u003c/p\u003e\n\u003cpre\u003e// index.js\u003cbr\u003eimport texts from './texts';\u003c/pre\u003e\n\u003cpre\u003efunction getText(locale, key) {\u003cbr\u003e    return texts[locale][key] ? texts[locale][key] : texts['en'][key];\u003cbr\u003e}\u003c/pre\u003e\n\u003cpre\u003efunction getLangs(locale, locales, defaultLocale) {\u003cbr\u003e    // Returning all available languages, except the current\u003cbr\u003e    return locales.filter((lang) =\u0026gt; lang !== locale);\u003cbr\u003e}\u003c/pre\u003e\n\u003cpre\u003eexport { getText, getLangs }\u003c/pre\u003e\n\u003cp\u003eThe index.js file exports two helper functions to be used in the components, passing the keys from the router as arguments.\u003c/p\u003e\n\u003cp\u003eThe 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.\u003c/p\u003e\n\u003cp\u003eThe getLangs function will be useful in our LangSwitcher component (see later).\u003c/p\u003e\n\u003cp\u003eSometimes 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.\u003c/p\u003e\n\u003cpre\u003e// meta.js\u003cbr\u003eexport default {\u003cbr\u003e    'pt-BR': {\u003cbr\u003e        flag: '',\u003cbr\u003e        label: 'Português'\u003cbr\u003e    },\u003cbr\u003e    'en-US': {\u003cbr\u003e        flag: '',\u003cbr\u003e        label: 'English'\u003cbr\u003e    },\u003cbr\u003e    'es-ES': {\u003cbr\u003e        flag: '',\u003cbr\u003e        label: 'Spanish'\u003cbr\u003e    }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eJust 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.\u003c/p\u003e\n\u003ch3\u003eAdding texts\u003c/h3\u003e\n\u003cp\u003eNow let’s add the texts we’ll use in our application. To keep this example concise, a single file is enough: texts.js\u003c/p\u003e\n\u003cpre\u003e// texts.js\u003cbr\u003eexport default {\u003cbr\u003e    'pt-BR': {\u003cbr\u003e      title: 'Tecnologia como base'\u003cbr\u003e    },\u003cbr\u003e    'en-US': {\u003cbr\u003e      title: 'Technology as a cornerstone'\u003cbr\u003e    },\u003cbr\u003e    'es-ES': {\u003cbr\u003e      title: 'La tecnología como base'\u003cbr\u003e    }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eRemember to always use the same key for the locales (defined on next.config.js).\u003c/p\u003e\n\u003cp\u003eNow, just keep adding more texts for each language and you’re good to go.\u003c/p\u003e\n\u003ch3\u003eAdding a locale switcher\u003c/h3\u003e\n\u003cp\u003eThe 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.\u003c/p\u003e\n\u003cp\u003eBelow 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.\u003c/p\u003e\n\u003cpre\u003e// index.js\u003cbr\u003eimport React from 'react';\u003cbr\u003eimport Link from 'next/link';\u003cbr\u003eimport { getLangs } from '../../locales';\u003cbr\u003eimport  meta from '../../locales/meta';\u003cbr\u003eimport {useRouter} from \"next/router\";
8\u003c/pre\u003e\n\u003cpre\u003efunction LangSwitcher (props) {\u003cbr\u003e    const { locale, locales, defaultLocale } = useRouter();\u003cbr\u003e    const langs = getLangs(locale, locales, defaultLocale);\u003cbr\u003e    const redirectPath = props.redirectTo || '';\u003cbr\u003e    const {\u003cbr\u003e        children,\u003cbr\u003e        ...other\u003cbr\u003e    } = props;\u003cbr\u003e    return \u0026lt;\u0026gt;\u003cbr\u003e        {langs.map((lang, i) =\u0026gt; (\u003cbr\u003e            \u0026lt;Link key={i} href={`/${lang}/${redirectPath}`} locale={lang}\u0026gt;\u003cbr\u003e                \u0026lt;a\u0026gt;{meta[lang].label} \u0026lt;/a\u0026gt;\u003cbr\u003e            \u0026lt;/Link\u0026gt;\u003cbr\u003e        ))}\u003cbr\u003e    \u0026lt;/\u0026gt;\u003cbr\u003e}\u003c/pre\u003e\n\u003cpre\u003eexport default LangSwitcher;\u003c/pre\u003e\n\u003cp\u003eWhat we’re doing here is:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003etraversing our predefined locales\u003c/li\u003e\n\u003cli\u003eshowing the option to switch the language on the page\u003c/li\u003e\n\u003cli\u003ehandling a redirectPath passed in the props for the sake of this example.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003eWrapping up\u003c/h3\u003e\n\u003cp\u003eNow that we built the basic structure for i18n we can implement it in our application.\u003c/p\u003e\n\u003cp\u003eTo add a language switcher, import the LangSwitcher component and place it wherever you want, such as a new page on the ‘pages/about’ directory.\u003c/p\u003e\n\u003cpre\u003eimport LangSwitcher from '../../components/lang-switcher';\u003c/pre\u003e\n\u003cpre\u003e\u0026lt;LangSwitcher/\u0026gt;\u003c/pre\u003e\n\u003cp\u003eAnd for getting translated texts:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eget the locale from the next router,\u003c/li\u003e\n\u003cli\u003eimport the getText method from the helper,\u003c/li\u003e\n\u003cli\u003ecall it with the desired key (you can use the same page for this).\u003c/li\u003e\n\u003c/ul\u003e\n\u003cpre\u003eimport { getText } from '../../locales';\u003c/pre\u003e\n\u003cpre\u003econst { locale } = useRouter();\u003cbr\u003econst textTitle = getText(locale, 'title');\u003c/pre\u003e\n\u003cp\u003eThe final code for an about/index.jspage:\u003c/p\u003e\n\u003cpre\u003eimport LangSwitcher from '../../components/lang-switcher';\u003cbr\u003eimport { getText } from '../../locales';\u003cbr\u003eimport { useRouter } from \"next/router\";\u003cbr\u003e\u003cbr\u003eexport default function IndexPage() {\u003cbr\u003e    const { locale } = useRouter();\u003cbr\u003e    const textTitle = getText(locale, 'title');\u003cbr\u003e    const destPage = 'about';\u003cbr\u003e    return (\u003cbr\u003e        \u0026lt;\u0026gt;\u003cbr\u003e            \u0026lt;h1\u0026gt;{textTitle}\u0026lt;/h1\u0026gt;\u003cbr\u003e            \u0026lt;LangSwitcher redirectTo={`${destPage}`} /\u0026gt;\u003cbr\u003e        \u0026lt;/\u0026gt;\u003cbr\u003e    )\u003cbr\u003e}\u003c/pre\u003e\n\u003ch3\u003eConclusion\u003c/h3\u003e\n\u003cp\u003eThat is the basic about internationalization with Next.js!\u003c/p\u003e\n\u003cp\u003eFor 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.\u003c/p\u003e\n\u003cp\u003eAlso, as mentioned before, because of the lack of straight to the point solutions out there, we hope you can find this article useful.\u003c/p\u003e\n\u003ch4\u003eDid you get stuck or just want to download the code and see it working? Check our demo repository: \u003ca href=\"https://github.com/on2-dev/next_i18n\"\u003ehttps://github.com/on2-dev/next_i18n\u003c/a\u003e\n\u003c/h4\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=8349336263c7\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/i18n-in-next-js-the-easy-way-8349336263c7\"\u003ei18n in Next.js: the easy way\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u
8003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","content":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*ynKAdRw_w-3TQh5BsB5QuQ.png\"\u003e\u003c/figure\u003e\u003cp\u003eThere are quite a few articles out there about how to implement internationalization (i18n) in a Next.js project.\u003c/p\u003e\n\u003cp\u003eThe thing is: none of them is simple enough to get the task done quickly.\u003c/p\u003e\n\u003cp\u003eMost articles focus on just one side of the problem and others are too complex and focus on generic issues.\u003c/p\u003e\n\u003cp\u003eEven the Next.js official documentation is sort of confusing (\u003ca href=\"https://nextjs.org/docs/advanced-features/i18n-routing\"\u003ehttps://nextjs.org/docs/advanced-features/i18n-routing\u003c/a\u003e).\u003c/p\u003e\n\u003cp\u003eWell, the main thing we want to achieve with i18n is the content translated to a different language, right?\u003c/p\u003e\n\u003cp\u003eThat part is kind of missing and we get it.\u003c/p\u003e\n\u003cp\u003ei18n 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.\u003c/p\u003e\n\u003cp\u003eAnd here is the problem, assuming everyone already knows everything by default is not a good practice.\u003c/p\u003e\n\u003cp\u003eEnough with the frustration. Let’s implement i18n in a Next.js project!\u003c/p\u003e\n\u003ch3\u003eCreating a new Next.js project\u003c/h3\u003e\n\u003cp\u003eLet’s first create a new Next.js project. If you already have a Next.js project you can skip this part.\u003c/p\u003e\n\u003cpre\u003enpx create-next-app\u003cbr\u003e# or\u003cbr\u003eyarn create next-app\u003c/pre\u003e\n\u003cp\u003eTo start the application in the development environment:\u003c/p\u003e\n\u003cpre\u003enpx yarn dev\u003cbr\u003e# or\u003cbr\u003eyarn dev\u003c/pre\u003e\n\u003ch3\u003eAdding i18n\u003c/h3\u003e\n\u003cp\u003eNext.js has built-in support for i18n since v10.0.0.\u003c/p\u003e\n\u003cp\u003eWe 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.\u003c/p\u003e\n\u003cp\u003eFor instance, if you have a page called contact, a new page route such as [language]/contact will be the result.\u003c/p\u003e\n\u003cp\u003eLet’s edit our next.config.js and add the i18n configuration:\u003c/p\u003e\n\u003cpre\u003emodule.exports = {\u003cbr\u003e  i18n: {\u003cbr\u003e    locales: ['pt-BR','en-US', 'es-ES'],\u
8003cbr\u003e    defaultLocale: 'pt-BR',\u003cbr\u003e  }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eHere 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.\u003c/p\u003e\n\u003cp\u003eBy 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 .\u003c/p\u003e\n\u003cp\u003eAfter saving the changes to this file, remember to restart the server to see the changes in effect.\u003c/p\u003e\n\u003ch3\u003eAdding helpers\u003c/h3\u003e\n\u003cp\u003eNow, 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.\u003c/p\u003e\n\u003cpre\u003e// index.js\u003cbr\u003eimport texts from './texts';\u003c/pre\u003e\n\u003cpre\u003efunction getText(locale, key) {\u003cbr\u003e    return texts[locale][key] ? texts[locale][key] : texts['en'][key];\u003cbr\u003e}\u003c/pre\u003e\n\u003cpre\u003efunction getLangs(locale, locales, defaultLocale) {\u003cbr\u003e    // Returning all available languages, except the current\u003cbr\u003e    return locales.filter((lang) =\u0026gt; lang !== locale);\u003cbr\u003e}\u003c/pre\u003e\n\u003cpre\u003eexport { getText, getLangs }\u003c/pre\u003e\n\u003cp\u003eThe index.js file exports two helper functions to be used in the components, passing the keys from the router as arguments.\u003c/p\u003e\n\u003cp\u003eThe 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.\u003c/p\u003e\n\u003cp\u003eThe getLangs function will be useful in our LangSwitcher component (see later).\u003c/p\u003e\n\u003cp\u003eSometimes 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.\u003c/p\u003e\n\u003cpre\u003e// meta.js\u003cbr\u003eexport default {\u003cbr\u003e    'pt-BR': {\u003cbr\u003e        flag: '',\u003cbr\u003e        label: 'Português'\u003cbr\u003e    },\u003cbr\u003e    'en-US': {\u003cbr\u003e        flag: '',\u003cbr\u003e        label: 'English'\u003cbr\u003e    },\u003cbr\u003e    'es-ES': {\u003cbr\u003e        flag: '',\u003cbr\u003e        label: 'Spanish'\u003cbr\u003e    }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eJust 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.\u003c/p\u003e\n\u003ch3\u003eAdding texts\u003c/h3\u003e\n\u003cp\u003eNow let’s add the texts we’ll use in our application. To keep this example concise, a single file is enough: texts.js\u003c/p\u003e\n\u003cpre\u003e// texts.js\u003cbr\u003eexport default {\u003cbr\u003e    'pt-BR': {\u003cbr\u003e      title: 'Tecnologia como base'\u003cbr\u003e    },\u003cbr\u003e    'en-US': {\u003cbr\u003e      title: 'Technology as a cornerstone'\u003cbr\u003e    },\u003cbr\u003e    'es-ES': {\u003cbr\u003e      title: 'La tecnología como base'\u003cbr\u003e    }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eRemember to always use the same key for the locales (defined on next.config.js).\u003c/p\u003e\n\u003cp\u003eNow, just keep adding more texts for each language and you’re good to go.\u003c/p\u003e\n\u003ch3\u003eAdding a locale switcher\u003c/h3\u003e\n\u003cp\u003eThe 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.\u003c/p\u003e\n\u003cp\u003eBelow 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.\u003c/p\u003e\n\u003cpre\u003e// index.js\u003cbr\u003eimport React from 'react';\u003cbr\u003eimport Link from 'next/link';\u003cbr\u003eimport { getLangs } from '../../locales';\u003cbr\u003eimport  meta from '../../locales/meta';\u003cbr\u003eimport {useRouter} from \"next/router\";
8\u003c/pre\u003e\n\u003cpre\u003efunction LangSwitcher (props) {\u003cbr\u003e    const { locale, locales, defaultLocale } = useRouter();\u003cbr\u003e    const langs = getLangs(locale, locales, defaultLocale);\u003cbr\u003e    const redirectPath = props.redirectTo || '';\u003cbr\u003e    const {\u003cbr\u003e        children,\u003cbr\u003e        ...other\u003cbr\u003e    } = props;\u003cbr\u003e    return \u0026lt;\u0026gt;\u003cbr\u003e        {langs.map((lang, i) =\u0026gt; (\u003cbr\u003e            \u0026lt;Link key={i} href={`/${lang}/${redirectPath}`} locale={lang}\u0026gt;\u003cbr\u003e                \u0026lt;a\u0026gt;{meta[lang].label} \u0026lt;/a\u0026gt;\u003cbr\u003e            \u0026lt;/Link\u0026gt;\u003cbr\u003e        ))}\u003cbr\u003e    \u0026lt;/\u0026gt;\u003cbr\u003e}\u003c/pre\u003e\n\u003cpre\u003eexport default LangSwitcher;\u003c/pre\u003e\n\u003cp\u003eWhat we’re doing here is:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003etraversing our predefined locales\u003c/li\u003e\n\u003cli\u003eshowing the option to switch the language on the page\u003c/li\u003e\n\u003cli\u003ehandling a redirectPath passed in the props for the sake of this example.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003eWrapping up\u003c/h3\u003e\n\u003cp\u003eNow that we built the basic structure for i18n we can implement it in our application.\u003c/p\u003e\n\u003cp\u003eTo add a language switcher, import the LangSwitcher component and place it wherever you want, such as a new page on the ‘pages/about’ directory.\u003c/p\u003e\n\u003cpre\u003eimport LangSwitcher from '../../components/lang-switcher';\u003c/pre\u003e\n\u003cpre\u003e\u0026lt;LangSwitcher/\u0026gt;\u003c/pre\u003e\n\u003cp\u003eAnd for getting translated texts:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eget the locale from the next router,\u003c/li\u003e\n\u003cli\u003eimport the getText method from the helper,\u003c/li\u003e\n\u003cli\u003ecall it with the desired key (you can use the same page for this).\u003c/li\u003e\n\u003c/ul\u003e\n\u003cpre\u003eimport { getText } from '../../locales';\u003c/pre\u003e\n\u003cpre\u003econst { locale } = useRouter();\u003cbr\u003econst textTitle = getText(locale, 'title');\u003c/pre\u003e\n\u003cp\u003eThe final code for an about/index.jspage:\u003c/p\u003e\n\u003cpre\u003eimport LangSwitcher from '../../components/lang-switcher';\u003cbr\u003eimport { getText } from '../../locales';\u003cbr\u003eimport { useRouter } from \"next/router\";\u003cbr\u003e\u003cbr\u003eexport default function IndexPage() {\u003cbr\u003e    const { locale } = useRouter();\u003cbr\u003e    const textTitle = getText(locale, 'title');\u003cbr\u003e    const destPage = 'about';\u003cbr\u003e    return (\u003cbr\u003e        \u0026lt;\u0026gt;\u003cbr\u003e            \u0026lt;h1\u0026gt;{textTitle}\u0026lt;/h1\u0026gt;\u003cbr\u003e            \u0026lt;LangSwitcher redirectTo={`${destPage}`} /\u0026gt;\u003cbr\u003e        \u0026lt;/\u0026gt;\u003cbr\u003e    )\u003cbr\u003e}\u003c/pre\u003e\n\u003ch3\u003eConclusion\u003c/h3\u003e\n\u003cp\u003eThat is the basic about internationalization with Next.js!\u003c/p\u003e\n\u003cp\u003eFor 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.\u003c/p\u003e\n\u003cp\u003eAlso, as mentioned before, because of the lack of straight to the point solutions out there, we hope you can find this article useful.\u003c/p\u003e\n\u003ch4\u003eDid you get stuck or just want to download the code and see it working? Check our demo repository: \u003ca href=\"https://github.com/on2-dev/next_i18n\"\u003ehttps://github.com/on2-dev/next_i18n\u003c/a\u003e\n\u003c/h4\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=8349336263c7\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/i18n-in-next-js-the-easy-way-8349336263c7\"\u003ei18n in Next.js: the easy way\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u
8003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","enclosure":{},"categories":["i18n","nextjs","nodejs","javascript","react"]},{"title":"How to migrate large Git repositories","pubDate":"2021-06-13 18:40:46","link":"https://medium.com/on2-dev/how-to-migrate-large-git-repositories-ba87c8910915?source=rss----9ec0d78aeb67---4","guid":"https://medium.com/p/ba87c8910915","author":"Jaydson Gomes","thumbnail":"","description":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*rlcjxYfQQaeQXT-eQdt8ig.jpeg\"\u003e\u003c/figure\u003e\u003cp\u003eIt doesn’t matter how long is your career in technology and how experienced you are, you’ll always face things you never expected.\u003c/p\u003e\n\u003cp\u003eI’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.\u003c/p\u003e\n\u003cp\u003eHowever, this time around, a simple task became a big journey.\u003c/p\u003e\n\u003cp\u003eWe just close a deal with a big company and the first step was to migrate all Git repositories from the old supplier to us.\u003c/p\u003e\n\u003cp\u003eI knew this process could be tedious and slow, but it was a little more than that. We can say it was hard.\u003c/p\u003e\n\u003cp\u003eStart with the number of repositories: 82.\u003c/p\u003e\n\u003cp\u003eWell, we’ll need a tool to migrate 82 Git repositories. Fortunately, we use GitHub at \u003ca href=\"https://on2.dev/\"\u003eOn2\u003c/a\u003e and they offer a simple tool for that, which is available at \u003ca href=\"https://github.com/new/import\"\u003ehttps://github.com/new/import\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eIf you want to migrate a Git repo just put the HTTPS URL, authenticate and boom! Success.\u003c/p\u003e\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*2x85IhTT4ICHSKTzw4nCkA.png\"\u003e\u003cfigcaption\u003eGitHub migration tool\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eFor the first 20 repositories, the process was easy. Just a cup of coffee, some clicks on the GitHub interface and… job done.\u003c/p\u003e\n\u003cp\u003eBut then things got weird.\u003c/p\u003e\n\u003cp\u003eIn 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.\u003c/p\u003e\n\u003cp\u003eFailed again.\u003c/p\u003e\n\u003cp\u003eWell, let’s try this one manually. So I cloned the repository in my machine and then tried to push to our origin.\u003c/p\u003e\n\u003cpre\u003eremote: error: GH001: Large files detected. You may want \u003cstrong\u003eto\u003c/strong\u003e try Git Large \u003cstrong\u003eFile\u003c/strong\u003e Storage - https://git-lfs.github.com.\u003cbr\u003eremote: error: See http://git.io/iept8g \u003cstrong\u003efor\u003c/strong\u003e more information.\u003cbr\u003eremote: error: \u003cstrong\u003eFile\u003c/strong\u003e XXX.zip \u003cstrong\u003eis\u003c/strong\u003e XXX GB; this exceeds GitHub's \u003cstrong\u003efile\u003c/strong\u003e size limit \u003cstrong\u003eof\u003c/strong\u003e 100.00 MB\u003c/pre\u003e\n\u003cp\u003eHum, OK. I’ll not question someone else’s work. If this .zip file is stored on the repository it must have a reason.\u003c/p\u003e\n\u003cp\u003eHere’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 \u003ca href=\"https://git-lfs.github.com/\"\u003eGit LFS\u003c/a\u003e.\u003c/p\u003e\n\u003cblockquote\u003eGit 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.\u003c/blockquote\u003e\n\u003cp\u003eTo get this working we’ll first need to install git LFS.\u003c/p\u003e\n\u003cpre\u003egit lfs install\u003c/pre\u003e\n\u003cp\u003eThen we need to track the heavy files we want to store:\u003c/p\u003e\n\u003cpre\u003egit lfs track \"*.zip\"\u003c/pre\u003e\n\u003cp\u003eNow we just need to push? Nope.\u003c/p\u003e\n\u003cp\u003eHere’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.\u003c/p\u003e\n\u003cp\u003eAlso, to get this process done you first need to remove all big files, add again, commit and then push.\u003c/p\u003e\n\u003cp\u003eThis 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.\u003c/p\u003e\n\u003cp\u003eWhat to do?\u003c/p\u003e\n\u003cp\u003eFortunately, with \u003ca href=\"https://github.blog/2017-06-27-git-lfs-2-2-0-released/\"\u003eGit LFS 2.2.0\u003c/a\u003e we have a better way to deal with this.\u003c/p\u003e\n\u003cp\u003eWith the \u003ca href=\"https://github.com/git-lfs/git-lfs/blob/v2.2.0/docs/man/git-lfs-migrate.1.ronn\"\u003egit-lfs-migrate\u003c/a\u003e command, it’s way easier.\u003c/p\u003e\n\u003cp\u003eIn the repository you encountered the error you can just run:\u003c/p\u003e\n\u003cpre\u003egit lfs migrate info\u003c/pre\u003e\n\u003cp\u003eThis command will output all file types with their sizes, for example:\u003c/p\u003e\n\u003cpre\u003e*.zip   1.2 GB   27/27 files(s)  100%\u003c/pre\u003e\n\u003cp\u003eBy using this information you can determine which files to pluck out of your history and store in LFS:\u003c/p\u003e\n\u003cpre\u003egit lfs migrate \u003cstrong\u003eimport\u003c/strong\u003e --include=\"*.zip\"\u003cbr\u003emigrate: Sorting commits: ..., done\u003cbr\u003emigrate: Rewriting commits: 100% (810/810), done\u003cbr\u003e  main        f18bb746d44e8ea5065fc779bb1acdf3cdae7ed8 -\u0026gt; 35b0fe0a7bf3ae6952ec9584895a7fb6ebcd498b\u003cbr\u003emigrate: Updating refs: ..., done\u003c/pre\u003e\n\u003cp\u003eAnd then you can finally push:\u003c/p\u003e\n\u003cpre\u003egit push origin main\u003cbr\u003eGit LFS: (1 of 1 files) 1.2 GB / 1.2 GB\u003c/pre\u003e\n\u003cp\u003eWe’re almost done, I promise.\u003c/p\u003e\n\u003cp\u003eThing is, for most cases at this point you already solved your problem with large files.\u003c/p\u003e\n\u003cp\u003eHowever, for us, in this particular and peculiar case, nope.\u003c/p\u003e\n\u003cp\u003eBesides the large files on these repositories, we found a tricky issue.\u003c/p\u003e\n\u003cp\u003eThere’s a limit for big pushes. Yeah, life is not easy.\u003c/p\u003e\n\u003cp\u003eAfter all the work, investigation, adding Git LFS, etc, for some repositories GitHub failed with this message:\u003c/p\u003e\n\u003cpre\u003egit push \u0026lt;remote_repo_name\u0026gt; main\u003cbr\u003eCounting objects: 146106, done.\u003cbr\u003eDelta compression using up to 4 threads.\u003cbr\u003eCompressing objects: 100% (35519/35519), done.\u003cbr\u003efatal: pack exceeds maximum allowed size00 GiB | 154 KiB/s\u003cbr\u003efatal: sha1 file '\u0026lt;stdout\u0026gt;' write error: Invalid arguments\u003cbr\u003eerror: failed to push some refs to '[email protected]:\u0026lt;repo\u0026gt;.git\u003c/pre\u003e\n\u003cp\u003eTo deal with this we need to push commits by chunks.\u003c/p\u003e\n\u003cp\u003eHere goes a big thanks to \u003ca href=\"https://gist.github.com/Sacristan\"\u003eSacristan\u003c/a\u003e and his little shell script which saves the day:\u003c/p\u003e\n\u003ca href=\"https://medium.com/media/372af8b0f24a028b602bd8d39f0c6c31/href\"\u003ehttps://medium.com/media/372af8b0f24a028b602bd8d39f0c6c31/href\u003c/a\u003e\u003cp\u003eWith the new knowledge, all equipment and necessary scripts then we are ready!\u003c/p\u003e\n\u003cp\u003eOur next step in the weirdos’ repositories was to run Git LFS migrate and then run ./push_commits_by_chunk.sh\u003c/p\u003e\n\u003cp\u003eThat’s it! End of the tale. 82 big Git repositories migrated successfully.\u003c/p\u003e\n\u003cp\u003eAlways remember, sometimes what looks like the easiest task can consume you and your team days or even weeks.\u003c/p\u003e\n\u003cp\u003eAlso, 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.\u003c/p\u003e\n\u003cp\u003eImage credit: \u003ca href=\"https://unsplash.com/photos/H7LxvEmVZnE\"\u003ehttps://unsplash.com/photos/H7LxvEmVZnE\u003c/a\u003e\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=ba87c8910915\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/how-to-migrate-large-git-repositories-ba87c8910915\"\u003eHow to migrate large Git repositories\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u
8003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","content":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*rlcjxYfQQaeQXT-eQdt8ig.jpeg\"\u003e\u003c/figure\u003e\u003cp\u003eIt doesn’t matter how long is your career in technology and how experienced you are, you’ll always face things you never expected.\u003c/p\u003e\n\u003cp\u003eI’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.\u003c/p\u003e\n\u003cp\u003eHowever, this time around, a simple task became a big journey.\u003c/p\u003e\n\u003cp\u003eWe just close a deal with a big company and the first step was to migrate all Git repositories from the old supplier to us.\u003c/p\u003e\n\u003cp\u003eI knew this process could be tedious and slow, but it was a little more than that. We can say it was hard.\u003c/p\u003e\n\u003cp\u003eStart with the number of repositories: 82.\u003c/p\u003e\n\u003cp\u003eWell, we’ll need a tool to migrate 82 Git repositories. Fortunately, we use GitHub at \u003ca href=\"https://on2.dev/\"\u003eOn2\u003c/a\u003e and they offer a simple tool for that, which is available at \u003ca href=\"https://github.com/new/import\"\u003ehttps://github.com/new/import\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eIf you want to migrate a Git repo just put the HTTPS URL, authenticate and boom! Success.\u003c/p\u003e\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*2x85IhTT4ICHSKTzw4nCkA.png\"\u003e\u003cfigcaption\u003eGitHub migration tool\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eFor the first 20 repositories, the process was easy. Just a cup of coffee, some clicks on the GitHub interface and… job done.\u003c/p\u003e\n\u003cp\u003eBut then things got weird.\u003c/p\u003e\n\u003cp\u003eIn 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.\u003c/p\u003e\n\u003cp\u003eFailed again.\u003c/p\u003e\n\u003cp\u003eWell, let’s try this one manually. So I cloned the repository in my machine and then tried to push to our origin.\u003c/p\u003e\n\u003cpre\u003eremote: error: GH001: Large files detected. You may want \u003cstrong\u003eto\u003c/strong\u003e try Git Large \u003cstrong\u003eFile\u003c/strong\u003e Storage - https://git-lfs.github.com.\u003cbr\u003eremote: error: See http://git.io/iept8g \u003cstrong\u003efor\u003c/strong\u003e more information.\u003cbr\u003eremote: error: \u003cstrong\u003eFile\u003c/strong\u003e XXX.zip \u003cstrong\u003eis\u003c/strong\u003e XXX GB; this exceeds GitHub's \u003cstrong\u003efile\u003c/strong\u003e size limit \u003cstrong\u003eof\u003c/strong\u003e 100.00 MB\u003c/pre\u003e\n\u003cp\u003eHum, OK. I’ll not question someone else’s work. If this .zip file is stored on the repository it must have a reason.\u003c/p\u003e\n\u003cp\u003eHere’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 \u003ca href=\"https://git-lfs.github.com/\"\u003eGit LFS\u003c/a\u003e.\u003c/p\u003e\n\u003cblockquote\u003eGit 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.\u003c/blockquote\u003e\n\u003cp\u003eTo get this working we’ll first need to install git LFS.\u003c/p\u003e\n\u003cpre\u003egit lfs install\u003c/pre\u003e\n\u003cp\u003eThen we need to track the heavy files we want to store:\u003c/p\u003e\n\u003cpre\u003egit lfs track \"*.zip\"\u003c/pre\u003e\n\u003cp\u003eNow we just need to push? Nope.\u003c/p\u003e\n\u003cp\u003eHere’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.\u003c/p\u003e\n\u003cp\u003eAlso, to get this process done you first need to remove all big files, add again, commit and then push.\u003c/p\u003e\n\u003cp\u003eThis 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.\u003c/p\u003e\n\u003cp\u003eWhat to do?\u003c/p\u003e\n\u003cp\u003eFortunately, with \u003ca href=\"https://github.blog/2017-06-27-git-lfs-2-2-0-released/\"\u003eGit LFS 2.2.0\u003c/a\u003e we have a better way to deal with this.\u003c/p\u003e\n\u003cp\u003eWith the \u003ca href=\"https://github.com/git-lfs/git-lfs/blob/v2.2.0/docs/man/git-lfs-migrate.1.ronn\"\u003egit-lfs-migrate\u003c/a\u003e command, it’s way easier.\u003c/p\u003e\n\u003cp\u003eIn the repository you encountered the error you can just run:\u003c/p\u003e\n\u003cpre\u003egit lfs migrate info\u003c/pre\u003e\n\u003cp\u003eThis command will output all file types with their sizes, for example:\u003c/p\u003e\n\u003cpre\u003e*.zip   1.2 GB   27/27 files(s)  100%\u003c/pre\u003e\n\u003cp\u003eBy using this information you can determine which files to pluck out of your history and store in LFS:\u003c/p\u003e\n\u003cpre\u003egit lfs migrate \u003cstrong\u003eimport\u003c/strong\u003e --include=\"*.zip\"\u003cbr\u003emigrate: Sorting commits: ..., done\u003cbr\u003emigrate: Rewriting commits: 100% (810/810), done\u003cbr\u003e  main        f18bb746d44e8ea5065fc779bb1acdf3cdae7ed8 -\u0026gt; 35b0fe0a7bf3ae6952ec9584895a7fb6ebcd498b\u003cbr\u003emigrate: Updating refs: ..., done\u003c/pre\u003e\n\u003cp\u003eAnd then you can finally push:\u003c/p\u003e\n\u003cpre\u003egit push origin main\u003cbr\u003eGit LFS: (1 of 1 files) 1.2 GB / 1.2 GB\u003c/pre\u003e\n\u003cp\u003eWe’re almost done, I promise.\u003c/p\u003e\n\u003cp\u003eThing is, for most cases at this point you already solved your problem with large files.\u003c/p\u003e\n\u003cp\u003eHowever, for us, in this particular and peculiar case, nope.\u003c/p\u003e\n\u003cp\u003eBesides the large files on these repositories, we found a tricky issue.\u003c/p\u003e\n\u003cp\u003eThere’s a limit for big pushes. Yeah, life is not easy.\u003c/p\u003e\n\u003cp\u003eAfter all the work, investigation, adding Git LFS, etc, for some repositories GitHub failed with this message:\u003c/p\u003e\n\u003cpre\u003egit push \u0026lt;remote_repo_name\u0026gt; main\u003cbr\u003eCounting objects: 146106, done.\u003cbr\u003eDelta compression using up to 4 threads.\u003cbr\u003eCompressing objects: 100% (35519/35519), done.\u003cbr\u003efatal: pack exceeds maximum allowed size00 GiB | 154 KiB/s\u003cbr\u003efatal: sha1 file '\u0026lt;stdout\u0026gt;' write error: Invalid arguments\u003cbr\u003eerror: failed to push some refs to '[email protected]:\u0026lt;repo\u0026gt;.git\u003c/pre\u003e\n\u003cp\u003eTo deal with this we need to push commits by chunks.\u003c/p\u003e\n\u003cp\u003eHere goes a big thanks to \u003ca href=\"https://gist.github.com/Sacristan\"\u003eSacristan\u003c/a\u003e and his little shell script which saves the day:\u003c/p\u003e\n\u003ca href=\"https://medium.com/media/372af8b0f24a028b602bd8d39f0c6c31/href\"\u003ehttps://medium.com/media/372af8b0f24a028b602bd8d39f0c6c31/href\u003c/a\u003e\u003cp\u003eWith the new knowledge, all equipment and necessary scripts then we are ready!\u003c/p\u003e\n\u003cp\u003eOur next step in the weirdos’ repositories was to run Git LFS migrate and then run ./push_commits_by_chunk.sh\u003c/p\u003e\n\u003cp\u003eThat’s it! End of the tale. 82 big Git repositories migrated successfully.\u003c/p\u003e\n\u003cp\u003eAlways remember, sometimes what looks like the easiest task can consume you and your team days or even weeks.\u003c/p\u003e\n\u003cp\u003eAlso, 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.\u003c/p\u003e\n\u003cp\u003eImage credit: \u003ca href=\"https://unsplash.com/photos/H7LxvEmVZnE\"\u003ehttps://unsplash.com/photos/H7LxvEmVZnE\u003c/a\u003e\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=ba87c8910915\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/how-to-migrate-large-git-repositories-ba87c8910915\"\u003eHow to migrate large Git repositories\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u
8003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","enclosure":{},"categories":["git","git-lfs","software-development","github","on2"]},{"title":"How we built a publisher platform with Next.js, GraphQL and Vercel","pubDate":"2021-06-12 14:46:03","link":"https://medium.com/on2-dev/how-we-built-a-publisher-platform-with-next-js-graphql-and-vercel-16ef50c9a00d?source=rss----9ec0d78aeb67---4","guid":"https://medium.com/p/16ef50c9a00d","author":"Jaydson Gomes","thumbnail":"","description":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*B8-IS3dS1f-TVNE54XxHeg.png\"\u003e\u003cfigcaption\u003eNext.js + GraphQL + Vercel + Alright + On2\u003c/figcaption\u003e\u003c/figure\u003e\u003ch3\u003eThe backstory\u003c/h3\u003e\n\u003cp\u003eBack in 2020, we got a mission from \u003ca href=\"https://alright.com.br/\"\u003e\u003cstrong\u003eAlright\u003c/strong\u003e\u003c/a\u003e,\u003cstrong\u003e \u003c/strong\u003eone of our key partners: Build an alternative CMS plus an optimized website focused on small and medium publishers.\u003c/p\u003e\n\u003cp\u003eAlright is an Ad tech company that connects publishers and brands through proprietary technologies.\u003c/p\u003e\n\u003cp\u003eThey have more than \u003cstrong\u003e300 publishers all over Brazil\u003c/strong\u003e, 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.\u003c/p\u003e\n\u003cp\u003eWhy not \u003cstrong\u003eWordPress\u003c/strong\u003e, 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.\u003c/p\u003e\n\u003cp\u003eWell, so we did it. Our team suggested using a generic \u003ca href=\"https://graphql.org/\"\u003eGraphQL\u003c/a\u003e 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.\u003c/p\u003e\n\u003cp\u003eWe love \u003ca href=\"https://www.postgresql.org/\"\u003ePostgreSQL\u003c/a\u003e, 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 \u003ca href=\"https://www.graphile.org/postgraphile/\"\u003ePostGraphile\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThere 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).\u003c/p\u003e\n\u003cp\u003eWas that enough? Nope. What about the consuming interface? Enters \u003ca href=\"https://nextjs.org/\"\u003eNext.js\u003c/a\u003e into the picture.\u003c/p\u003e\n\u003cp\u003eThe 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 \u003ca href=\"https://reactjs.org/\"\u003eReact\u003c/a\u003e \u003ca href=\"https://en.wikipedia.org/wiki/Single-page_application\"\u003eSPA\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eSince 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 \u003cstrong\u003eAlright Publisher Viewer\u003c/strong\u003e, which was the “view” part of a growing ecosystem of big and small pieces of software.\u003c/p\u003e\n\u003ch3\u003eAfter the deploy\u003c/h3\u003e\n\u003cp\u003eTechnically speaking and from the developer point of view, Next.js is great, but we had some difficulties integrating all the stuff previously built.\u003c/p\u003e\n\u003cp\u003eBesides the \u
8003cstrong\u003eAlright Publisher Viewer\u003c/strong\u003e application, we now had \u003cstrong\u003eAlright Publisher Editor \u003c/strong\u003e(the React SPA CMS), \u003cstrong\u003eAlright GraphQL API\u003c/strong\u003e,\u003cstrong\u003e Alright Sqitch\u003c/strong\u003e (PostgreSQL related), and some other helper applications.\u003c/p\u003e\n\u003cp\u003eThe technology behind the product wasn’t trivial, but in the end, we made it work pretty well.\u003c/p\u003e\n\u003cp\u003eThere 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. \u003cstrong\u003eEC2\u003c/strong\u003e, \u003cstrong\u003eCode Deploy\u003c/strong\u003e, \u003cstrong\u003eS3\u003c/strong\u003e, \u003cstrong\u003eCloud Front\u003c/strong\u003e, \u003cstrong\u003eRDS\u003c/strong\u003e and so on.\u003c/p\u003e\n\u003cp\u003eIt 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).\u003c/p\u003e\n\u003cp\u003eRight after our first release we noticed something odd. The \u003cstrong\u003eAlright Publisher Viewer\u003c/strong\u003e, the app we built with Next.js, wasn’t even close to the result we expected.\u003c/p\u003e\n\u003cp\u003eAfter 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.\u003c/p\u003e\n\u003cp\u003eThere was certainly something wrong here, our team thought. And indeed there was.\u003c/p\u003e\n\u003ch3\u003eA shift in our strategy\u003c/h3\u003e\n\u003cp\u003eThe main issue was related to how Next.js works and how we implemented the logic in the view.\u003c/p\u003e\n\u003cp\u003eIf you have an application that needs to fetch data, what do you do?\u003cbr\u003eThat was easy. As we need performance and SEO, Next.js’ approach of server-side rendering seemed to be the solution.\u003c/p\u003e\n\u003cp\u003eWe looked at the \u003ca href=\"https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering\"\u003edocumentation\u003c/a\u003e and… \u003cem\u003eboom\u003c/em\u003e! Server-side rendering (SSR) \u003cem\u003ewas \u003c/em\u003eworking. Our view layer was communicating just fine with the GraphQL API.\u003c/p\u003e\n\u003cpre\u003eexport async function getServerSideProps(context) {\u003cbr\u003e  return {\u003cbr\u003e    props: {}, // will be passed to the page component as props\u003cbr\u003e  }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eSo 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.\u003c/p\u003e\n\u003cp\u003eSure, a cache layer is missing, you’re probably thinking.\u003c/p\u003e\n\u003cp\u003eWe knew that, but we also knew there was something even better: the Next.js’s approach of \u003ca href=\"https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation\"\u003estatic pages\u003c/a\u003e.\u003c/p\u003e\n\u003cpre\u003eexport async function getStaticProps(context) {\u003cbr\u003e  return {\u003cbr\u003e    props: {}, // will be passed to the page component as props\u003cbr\u003e  }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eWhen you use getStaticProps, Next.js will pre-render the page at build time using the props returned by getStaticProps.\u003c/p\u003e\n\u003cp\u003eThat’s awesome! We’re almost there.\u003c/p\u003e\n\u003cp\u003eTo get all things working we have to combine getStaticProps and \u003ca href=\"https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation\"\u003egetStaticPaths\u003c/a\u003e.\u003c/p\u003e\n\u003cpre\u003eexport async function getStaticPaths() {\u003cbr\u003e  return {\u003cbr\u003e    paths: [\u003cbr\u003e      { params: { ... } } // See the \"paths\" section below\u003cbr\u003e    ],\u003cbr\u003e    fallback: true or false // See the \"fallback\" section below\u003cbr\u003e  };\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eThe 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.\u003c/p\u003e\n\u003cp\u003eIf 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.\u003c/p\u003e\n\u003cp\u003eThere 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.\u003c/p\u003e\n\u003cp\u003eWe can’t generate \u003cem\u003eall pages\u003c/em\u003e at build time. Imagine millions of pages being generated for each build, that’s not feasible.\u003c/p\u003e\n\u003cp\u003eNext.js has this covered. With getStaticPaths and getStaticProps we can limit how many pages we want to generate at build time.\u003c/p\u003e\n\u003cp\u003eBut there’s more! What happens with pages that haven’t been generated yet when someone tries to access it? If \u003ca href=\"https://nextjs.org/docs/basic-features/data-fetching#fallback-true\"\u003e\u003cstrong\u003efallback\u003c/strong\u003e\u003c/a\u003e is true, then the behavior of getStaticProps will change. The paths that have not been generated at build time will \u003cstrong\u003enot\u003c/strong\u003e result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request to such a path.\u003c/p\u003e\n\u003cp\u003eIn the background, Next.js will statically generate the requested path HTML and JSON. This includes running getStaticProps.\u003c/p\u003e\n\u003cp\u003eIn 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.\u003c/p\u003e\n\u003ch3\u003eMoving to Vercel\u003c/h3\u003e\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*v-BY681D7Uva3P-_uM3LnQ.png\"\u003e\u003cfigcaption\u003eVercel\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eNow that we have the perfect combination of features on the Next.js side there is just one piece missing: \u003ca href=\"https://vercel.com/\"\u003eVercel\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eVercel combines the best developer experience with an obsessive focus on end-user performance.\u003c/p\u003e\n\u003cp\u003eActually, we already had the old application (before the static refactoring) running on Vercel.\u003c/p\u003e\n\u003cp\u003eWe 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.\u003c/p\u003e\n\u003cp\u003eAs 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 s
8ome small optimization on the application, we achieved our goal.\u003c/p\u003e\n\u003cp\u003eAnother killer feature from Vercel is its \u003ca href=\"https://vercel.com/docs/edge-network/overview\"\u003eEdge Network\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThe Vercel Edge Network sits in-between the internet and our application’s deployments. It has become our \u003cem\u003ede-facto \u003c/em\u003eCDN.\u003c/p\u003e\n\u003cp\u003eThis 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.\u003c/p\u003e\n\u003ch3\u003eConclusion and next steps\u003c/h3\u003e\n\u003cp\u003eOf 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.\u003c/p\u003e\n\u003cp\u003eAll infrastructure is automated, the developer experience is great and new features can be developed, merged and deployed smoothly.\u003c/p\u003e\n\u003cp\u003eVercel 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.\u003c/p\u003e\n\u003cp\u003eWe still need to migrate some sub-projects, but the bottleneck has been successfully removed.\u003c/p\u003e\n\u003cp\u003eOur plan is to have all applications running on Vercel and let just the database on Amazon RDS (for now).\u003c/p\u003e\n\u003cp\u003eThis work has already been done and is currently working on staging environment.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=16ef50c9a00d\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/how-we-built-a-publisher-platform-with-next-js-graphql-and-vercel-16ef50c9a00d\"\u003eHow we built a publisher platform with Next.js, GraphQL and Vercel\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","content":"\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*B8-IS3dS1f-TVNE54XxHeg.png\"\u003e\u003cfigcaption\u003eNext.js + GraphQL + Vercel + Alright + On2\u003c/figcaption\u003e\u003c/figure\u003e\u003ch3\u003eThe backstory\u003c/h3\u003e\n\u003cp\u003eBack in 2020, we got a mission from \u003ca href=\"https://alright.com.br/\"\u003e\u003cstrong\u003eAlright\u003c/strong\u003e\u003c/a\u003e,\u003cstrong\u003e \u003c/strong\u003eone of our key partners: Build an alternative CMS plus an optimized website focused on small and medium publishers.\u003c/p\u003e\n\u003cp\u003eAlright is an Ad tech company that connects publishers and brands through proprietary technologies.\u003c/p\u003e\n\u003cp\u003eThey have more than \u003cstrong\u003e300 publishers all over Brazil\u003c/strong\u003e, 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.\u003c/p\u003e\n\u003cp\u003eWhy not \u003cstrong\u003eWordPress\u003c/strong\u003e, 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.\u003c/p\u003e\n\u003cp\u003eWell, so we did it. Our team suggested using a generic \u003ca href=\"https://graphql.org/\"\u003eGraphQL\u003c/a\u003e 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.\u003c/p\u003e\n\u003cp\u003eWe love \u003ca href=\"https://www.postgresql.org/\"\u003ePostgreSQL\u003c/a\u003e, 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 \u
8003ca href=\"https://www.graphile.org/postgraphile/\"\u003ePostGraphile\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThere 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).\u003c/p\u003e\n\u003cp\u003eWas that enough? Nope. What about the consuming interface? Enters \u003ca href=\"https://nextjs.org/\"\u003eNext.js\u003c/a\u003e into the picture.\u003c/p\u003e\n\u003cp\u003eThe 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 \u003ca href=\"https://reactjs.org/\"\u003eReact\u003c/a\u003e \u003ca href=\"https://en.wikipedia.org/wiki/Single-page_application\"\u003eSPA\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eSince 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 \u003cstrong\u003eAlright Publisher Viewer\u003c/strong\u003e, which was the “view” part of a growing ecosystem of big and small pieces of software.\u003c/p\u003e\n\u003ch3\u003eAfter the deploy\u003c/h3\u003e\n\u003cp\u003eTechnically speaking and from the developer point of view, Next.js is great, but we had some difficulties integrating all the stuff previously built.\u003c/p\u003e\n\u003cp\u003eBesides the \u003cstrong\u003eAlright Publisher Viewer\u003c/strong\u003e application, we now had \u003cstrong\u003eAlright Publisher Editor \u003c/strong\u003e(the React SPA CMS), \u003cstrong\u003eAlright GraphQL API\u003c/strong\u003e,\u003cstrong\u003e Alright Sqitch\u003c/strong\u003e (PostgreSQL related), and some other helper applications.\u003c/p\u003e\n\u003cp\u003eThe technology behind the product wasn’t trivial, but in the end, we made it work pretty well.\u003c/p\u003e\n\u003cp\u003eThere 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. \u003cstrong\u003eEC2\u003c/strong\u003e, \u003cstrong\u003eCode Deploy\u003c/strong\u003e, \u003cstrong\u003eS3\u003c/strong\u003e, \u003cstrong\u003eCloud Front\u003c/strong\u003e, \u003cstrong\u003eRDS\u003c/strong\u003e and so on.\u003c/p\u003e\n\u003cp\u003eIt 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).\u003c/p\u003e\n\u003cp\u003eRight after our first release we noticed something odd. The \u003cstrong\u003eAlright Publisher Viewer\u003c/strong\u003e, the app we built with Next.js, wasn’t even close to the result we expected.\u003c/p\u003e\n\u003cp\u003eAfter 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.\u003c/p\u003e\n\u003cp\u003eThere was certainly something wrong here, our team thought. And indeed there was.\u003c/p\u003e\n\u003ch3\u003eA shift in our strategy\u003c/h3\u003e\n\u003cp\u003eThe main issue was related to how Next.js works and how we implemented the logic in the view.\u003c/p\u003e\n\u003cp\u003eIf you have an application that needs to fetch data, what do you do?\u003cbr\u003eThat was easy. As we need performance and SEO, Next.js’ approach of server-side rendering seemed to be the solution.\u003c/p\u003e\n\u003cp\u003eWe looked at the \u003ca href=\"https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering\"\u003edocumentation\u003c/a\u003e and… \u003cem\u003eboom\u003c/em\u003e! Server-side rendering (SSR) \u003cem\u003ewas \u003c/em\u003eworking. Our view layer was communicating just fine with the GraphQL API.\u003c/p\u003e\n\u003cpre\u003eexport async function getServerSideProps(context) {\u003cbr\u003e  return {\u003cbr\u003e    props: {}, // will be passed to the page component as props\u003cbr\u003e  }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eSo 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.\u003c/p\u003e\n\u003cp\u003eSure, a cache layer is missing, you’re probably thinking.\u003c/p\u003e\n\u003cp\u003eWe knew that, but we also knew there was something even better: the Next.js’s approach of \u003ca href=\"https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation\"\u003estatic pages\u003c/a\u003e.\u003c/p\u003e\n\u003cpre\u003eexport async function getStaticProps(context) {\u003cbr\u003e  return {\u003cbr\u003e    props: {}, // will be passed to the page component as props\u003cbr\u003e  }\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eWhen you use getStaticProps, Next.js will pre-render the page at build time using the props returned by getStaticProps.\u003c/p\u003e\n\u003cp\u003eThat’s awesome! We’re almost there.\u003c/p\u003e\n\u003cp\u003eTo get all things working we have to combine getStaticProps and \u003ca href=\"https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation\"\u003egetStaticPaths\u003c/a\u003e.\u003c/p\u003e\n\u003cpre\u003eexport async function getStaticPaths() {\u003cbr\u003e  return {\u003cbr\u003e    paths: [\u003cbr\u003e      { params: { ... } } // See the \"paths\" section below\u003cbr\u003e    ],\u003cbr\u003e    fallback: true or false // See the \"fallback\" section below\u003cbr\u003e  };\u003cbr\u003e}\u003c/pre\u003e\n\u003cp\u003eThe 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.\u003c/p\u003e\n\u003cp\u003eIf 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.\u003c/p\u003e\n\u003cp\u003eThere 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.\u003c/p\u003e\n\u003cp\u003eWe can’t generate \u003cem\u003eall pages\u003c/em\u003e at build time. Imagine millions of pages being generated for each build, that’s not feasible.\u003c/p\u003e\n\u003cp\u003eNext.js has this covered. With getStaticPaths and getStaticProps we can limit how many pages we want to generate at build time.\u003c/p\u003e\n\u003cp\u003eBut there’s more! What happens with pages that haven’t been generated yet when someone tries to access it? If \u003ca href=\"https://nextjs.org/docs/basic-features/data-fetching#fallback-true\"\u003e\u003cstrong\u003efallback\u003c/strong\u003e\u003c/a\u003e is true, then the behavior of getStaticProps will change. The paths that have not been generated at build time will \u003cstrong\u003enot\u003c/strong\u003e result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request to such a path.\u003c/p\u003e\n\u003cp\u003eIn the background, Next.js will statically generate the requested path HTML and JSON. This includes running getStaticProps.\u003c/p\u003e\n\u003cp\u003eIn 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.\u003c/p\u003e\n\u003ch3\u003eMoving to Vercel\u003c/h3\u003e\n\u003cfigure\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*v-BY681D7Uva3P-_uM3LnQ.png\"\u003e\u003cfigcaption\u003eVercel\u003c/figcaption\u003e\u003c/figure\u003e\u003cp\u003eNow that we have the perfect combination of features on the Next.js side there is just one piece missing: \u003ca href=\"https://vercel.com/\"\u003eVercel\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eVercel combines the best developer experience with an obsessive focus on end-user performance.\u003c/p\u003e\n\u003cp\u003eActually, we already had the old application (before the static refactoring) running on Vercel.\u003c/p\u003e\n\u003cp\u003eWe 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.\u003c/p\u003e\n\u003cp\u003eAs 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 s
8ome small optimization on the application, we achieved our goal.\u003c/p\u003e\n\u003cp\u003eAnother killer feature from Vercel is its \u003ca href=\"https://vercel.com/docs/edge-network/overview\"\u003eEdge Network\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThe Vercel Edge Network sits in-between the internet and our application’s deployments. It has become our \u003cem\u003ede-facto \u003c/em\u003eCDN.\u003c/p\u003e\n\u003cp\u003eThis 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.\u003c/p\u003e\n\u003ch3\u003eConclusion and next steps\u003c/h3\u003e\n\u003cp\u003eOf 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.\u003c/p\u003e\n\u003cp\u003eAll infrastructure is automated, the developer experience is great and new features can be developed, merged and deployed smoothly.\u003c/p\u003e\n\u003cp\u003eVercel 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.\u003c/p\u003e\n\u003cp\u003eWe still need to migrate some sub-projects, but the bottleneck has been successfully removed.\u003c/p\u003e\n\u003cp\u003eOur plan is to have all applications running on Vercel and let just the database on Amazon RDS (for now).\u003c/p\u003e\n\u003cp\u003eThis work has already been done and is currently working on staging environment.\u003c/p\u003e\n\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=16ef50c9a00d\" width=\"1\" height=\"1\" alt=\"\"\u003e\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://medium.com/on2-dev/how-we-built-a-publisher-platform-with-next-js-graphql-and-vercel-16ef50c9a00d\"\u003eHow we built a publisher platform with Next.js, GraphQL and Vercel\u003c/a\u003e was originally published in \u003ca href=\"https://medium.com/on2-dev\"\u003eOn2 Dev\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","enclosure":{},"categories":["on2","postgresql","graphql","vercel","nextjs"]}]}},"__N_SSG":true},"page":"/","query":{},"buildId":"rtcw8R9FlkWxN4K1hMFuL","isFallback":false,"gsp":true,"locale":"en","locales":["pt-BR","en","es","jp"],"defaultLocale":"pt-BR","scriptLoader":[]}</script>
8<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"af556ae67fde4c46a019f67174900ef8","r":1,"spa":2}' crossorigin="anonymous"></script>
8
9</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.