Arquivo de categorias para "#Front-End"
Rotas Paralelas (Parallel Routes) no NextJS
Você já teve a necessidade de carregar páginas de forma simultânea ou precisou colocar condicionais para determinar se uma parte da página deve ser carregada ou não? É para isso que o Parallel Routes serve, nós podemos carregar uma ou mais páginas, em uma página pai. Imagine um painel de controle onde diferentes seções como…
Como fiz com que um provedor de API mudasse a implementação de seu embed
Gostaria de compartilhar essa coisa interessante que recentemente aconteceu comigo enquanto desenvolvia um dos produtos de um de meus clientes. Este cliente paga por um serviço que fornece uma API com dados extremamente relevantes para o produto, e há uma nova funcionalidade que acabou de ficar disponível: uma solução de embed configurável para exibir seus…
Ferramentas para reduzir retrabalho no Front-end
Um problema que vejo se repetir em projetos no front-end é que conforme eles crescem e mais pessoas trabalham nele, menos as decisões são reutilizadas. Por exemplo, em um projeto com poucas pessoas é muito simples manter um padrão de qualidade e uso dos recursos disponíveis; lembrar de sempre reutilizar componentes, cores, margens, normalizers, etc….
Criando content loaders confiáveis
Content loaders (também conhecidos como placeholder loaders, ou skeleton loaders) além de serem legais são muito úteis para UX, como por exemplo: O loading mostra uma prévia do que será o conteúdo. O usuário tem a percepção que o conteúdo carrega mais rápido. Cria uma expectativa no usuário e evita surpresas. Problemas Fato é que…
Como funciona o Styled-components por debaixo dos panos
O CSS-in-JS está se tornando cada vez mais comum no desenvolvimento moderno de front-end, especialmente na comunidade React. O styled-components se destaca na lista porque ele adota tagged templates e permite criar componentes React normais definindo apenas estilos. Ele também resolve problemas importantes, como modularidade CSS, fornece recursos non-CSS, como aninhamento, e todos esses recursos…
PWA com React
O que é PWA? O PWA vem da sigla “Progressive Web App”, ele é um web app que usa as modernas funcionalidades dos navegadores para entregar uma experiência de um app na web para os usuários. Ele é muito similar a um sistema web, tem só que satisfazer alguns requisitos (que serão comentados abaixo). Fora…
Desmitificando o destructuring do JavaScript ES6/ES7
As novas especificações do EcmaScript trouxeram uma série de melhorias e recursos adicionais na sintaxe e funcionalidade da linguagem. Uma delas que particularmente gosto e uso bastante, por ajudar a deixar o código mais curto e mais claro, é a possibilidade de fazer destructuring em objetos e arrays. Entender o que esse recurso faz…
Sim, o React está tomando conta do desenvolvimento front-end. A questão é por quê.
Esta é uma tradução do artigo Yes, React is taking over front-end development. The question is why de autoria de Samer Buna. — Porque o React? Aqui estão algumas razões pelas quais o React se tornou tão popular tão rápido: Trabalhar com o DOM é difícil. O React basicamente dá aos desenvolvedores a habilidade de trabalhar…
GraphQL hoje usando Apollo em aplicações que utilizam APIs REST
Apesar do entusiamo das pessoas que já usam GraphQL, a popularidade da ferramenta está crescendo a passos curtos. Desenvolvedores trabalhando no client-side das aplicações são os que mais rapidamente têm a ganhar com o GraphQL, mas poucos ainda conseguem justificar o investimento financeiro na migração de um backend em pleno funcionamento servindo uma API REST….
Um Ensaio sobre Arquitetura Fractal usando Webpack e React
Aplicações de menor porte são normalmente organizadas de modo a separar os arquivos por natureza; componentes, contêineres, rotas, etc. O resultado é uma aplicação com uma estrutura parecida a esta: components/ Header.js HomePage.js Footer.js Post.js PostList.js PostPage.js User.js UserProfile.js UserAvatar.js containers/ App.js Post.js User.js routes/ index.js post.js user.js router.js index.js Essa estrutura, porém, não…