Mapa do Blog de Front-end

Artigos de Front-end

• Next.js: criando aplicações fullstack

• Como construir aplicações SSR com React, React Router e Vite

• Como proteger suas aplicações Next.js: práticas essenciais de segurança

• Escrevendo testes automatizados com React e TypeScript

• React: validação de formulários com React Hook Form

• Métricas de performance centradas no usuário

• Next.js: aprimorando performance e escalabilidade com sua API de cache

• Criando esquemas de validação com Yup

• Como a WAI-ARIA pode tornar as aplicações acessíveis

• WordPress: um guia completo para iniciantes

• TypeScript: o que é, diferenças para o JS e como começar a aprender

• Next: um guia de como depurar aplicações web

• Como usar bibliotecas de terceiros com TypeScript?

• O que são acessibilidade e tecnologias assistivas

• Next: Server Actions aprendendo na prática

• Typescript: aprimore aplicações com tipagem estática

• Next.JS: aplicações fullstack com super poderes

• Alura oferece 80 mil vagas para curso online e gratuito em Front-end

• Novidades no Angular 17

• Conhecendo o TypeScript no Front-end

• Angular: testes unitários de classes de componentes e serviços com Jasmine

• Entendendo os Signals do Angular

• Cobertura da Next Conf de 2023

• TSLint vs. ESLint: como configurar e utilizar em projetos TypeScript

• Como usar a Guarda de Rotas Funcional em Angular?

• Roteamento eficiente com Next.js: descobrindo o App Router

• Node.js para Frameworks Front-end

• TypeScript com JavaScript Vanilla

• Qual o tipo de um React Hook?

• CSS Grid: guia de propriedades de grid container e grid item

• VueJS: ciclo de vida dos componentes

• Changelog: o guia do desenvolvedor para documentar e compreender alterações de software

• Simplificando o controle de versão com Conventional Commits

• Componentes React com TypeScript

• Context API e TypeScript: como utilizar o superpoder desta dupla

• Configurando Next.js com TypeScript

• Utilizando o Vite para criar uma aplicação React com TypeScript

• Angular: o que é, para que serve e um Guia para iniciar no framework JavaScript

• React e VSCode: como as extensões podem transformar sua produtividade

• CSS: seletores avançados que facilitam o desenvolvimento de aplicações web

• CSS: o que é, como usar no HTML e um Guia para iniciar

• HTML: o que é, a importância para a Web, como aprender e um Guia para iniciantes

• Dicas essenciais para escrever testes end to end melhores

• Dicas para desenvolver testes unitários e de integração no Front-end

• Como implementar cobertura de testes no Cypress

• A evolução do desenvolvimento React: porque outras ferramentas estão ganhando espaço sobre o create-react-app

• Guia essencial do GraphQL para pessoas que desenvolvem frontend

• Trabalhando com diferentes versões do Angular

• Guia essencial do GraphQL para pessoas que desenvolvem frontend

• React: o que é a arquitetura Saga?

• Guia de JavaScript: o que é e como aprender a linguagem mais popular do mundo?

• Boas práticas ao escrever código em React js

• React: o que é, como funciona e um guia dessa popular ferramenta JS

• Prototype: descubra como quase tudo no JavaScript é um Objeto

• React e Context API: testes de unidade

• React: lidando com colisão de nomes de componentes

• Live coding de CSS com a Alura Star Natália F. Dev

• Armazenadores de dados do navegador

• Sexta-feira livre no Discord com CSS

• Sexta-feira livre no Discord com Marco Bruno

• Requisições HTTP utilizando o AXIOS

• Autenticação, autorização e segurança no front-end

• Angular: como funciona um componente?

• A função Math.random() no JavaScript na criação de números pseudoaleatórios

• O que é o DOM?

• Como iniciar os estudos de Front-end — um passo a passo de como começar a estudar Front-end

• O que é JSON Web Tokens?

• Principais comunidades de Front-end

• Services e injeção de dependência no Angular: o que são e como funcionam?

• CSS Object-fit: trabalhando com proporções

• O que é um sprite e como ele funciona em jogos 2D?

• Por uma Web mais rápida: 26 técnicas de otimização de Sites

• Como o Next.js ajuda no SEO das SPAs?

• Construa um CSS mágico com variáveis nativas

• Como aplicar validação em formulários reativos no Angular?

• SEO: como adicionar meta-tags no Next.js?

• CSS Border: estilizando com bordas seus elementos CSS

• React: conheça as novidades da versão 18 do React

• Conhecendo playgrounds de bibliotecas front-end

• Como colocar seu projeto no ar com o Github Pages?

• Svelte: o que é, como funciona e diferenças com o React JS

• Como o Lazy Loading pode melhorar o desempenho da minha aplicação Angular?

• JavaScript: para que serve um Array?

• Navegação com Next.Js utilizando rotas dinâmicas

• Hoisting no Javascript

• Position CSS: entenda essa propriedade

• O que é CORS e como resolver um erro de Cross-Origin Resource Sharing (CORS)?

• Seu código CSS pode ser mais limpo, flexível e reaproveitável

• Mockando APIs REST com json-server

• Qual a diferença entre id e class?

• Redux: desvendando a arquitetura com Flux

• O que é o HTML e suas tags? Parte 4: elementos de um formulário

• O que é o HTML e suas tags? Parte 5: atributos dos elementos

• O que é o HTML e suas tags? Parte 3: elementos block-level

• O que é o HTML e suas tags? Parte 2: elementos inline

• O que é o HTML e suas tags? Parte 1: estrutura básica

• Como começar com Angular

• Glossário do front-end

• Sublime, Atom ou VSCode: qual melhor editor de código?

• Recebendo dados de usuário na Web com inputs

• Angular vs React vs Vue.js

• Sublime Text - conheça um dos melhores editores de código

• Extensões VS Code: descubra quais são as mais usadas

• Tailwind: Preparando o Visual Studio Code

• Tailwind: Adicionando fontes customizadas

• Tailwind: criando componentes com @apply

• Tailwind: Qual framework usar? Bootstrap vs Tailwind

• Tailwind: Alinhando elementos

• Z-index: Como utilizar essa propriedade do CSS

• Srcset: Trabalhando com imagens responsivas

• NPM vs Yarn

• PWA Criação e Publicação com Quasar e Vue.js

• Vue 3: Conhecendo mais de perto

• React Hooks: o que é e como funcionam?

• Bootstrap: O que é, Documentação, como e quando usar

• Entendendo como funciona o Box Model e o Box Sizing

• Elvis Operator: dá pra usar com JavaScript?

• O que faz um programador?

• Entrega e integração contínua de aplicações Vue

• Cuidados com o estado de uma aplicação Vue

• Desmistificando testes de unidade no Vue

• Javascript ou Typescript?

• VSCode: extensões mais usadas

• Como utilizar operadores de comparação em Javascript

• GitOps: o que é?

• This, Getters e Setters nas classes Javascript

• i18n no NextJS?

• Prop Drilling: o que é?

• Page Object: o que é?

• Mocks e Stubs em testes: o que são e quais as diferenças

• Higher Order Functions: o que são?

• HTML, CSS e Javascript, quais as diferenças?

• NextJS: por que usar?

• CSS com NextJS

• Reset CSS: O que é, exemplos, como Criar e usar

• Configurando rotas com Next.js e Link

• Começando com Front-end: entenda os conceitos, as áreas e as tecnologias que você precisa estudar

• Formação Front-end Alura

• Instalando o Browser-sync

• Async/await no JavaScript: o que é e quando usar a programação assíncrona?

• Tipagem dinâmica com Javascript

• O Front End vai acabar? Uma reflexão sobre a profissão

• CSS Funcional e outros nomes

• Flexbox CSS: Guia Completo, Elementos e Exemplos

• Vamos criar um site com HTML e CSS na Imersão Hipsters.CSS!

• Como funciona o import e export do JavaScript?

• CodePen: o que é e como funciona?

• JavaScript: Quando devo usar forEach e map?

• Gitpod: ambiente de programação em nuvem

• React: componentes com Styled Components

• VisualStudio Code: instalação, teclas de atalho, plugins e integrações

• jQuery: DOM, AJAX e Máscaras

• CSS: Grids e tabelas com responsividade na Web

• CSS: animações com Transition e Animation

• O que é Front-end Back-end e Full Stack - aprenda as diferenças entre essas áreas

• JavaScript replace: manipulando Strings e regex

• Entenda a diferença entre var, let e const no JavaScript

• Tagged Template Literals

• Criando e publicando uma biblioteca Javascript no NPM

• Manipulação de array com map, filter e reduce

• Markdown: como trabalhar com essa linguagem de markup?

• Utilizando export.modules no Node.js

• Como automatizar um code styleguide em projetos - Dicas de React #003

• Como deixar multi linguagem/i18n uma aplicação React?

• O que é uma sprite?

• Criando um autocomplete com JavaScript

• Debugando projetos NodeJS no VSCode

• Formatando CPF com ajuda das Expressões Regulares

• Começando com o desenvolvimento Front-end

• Como preparar uma aplicação React para o deploy em um servidor Node

• Criando uma máscara de Telefone com Javascript

• Conhecendo Arrow Functions

• Alterando CSS com JavaScript

• Guia de Unidades no CSS

• Trabalhando com datas em JavaScript

• Começando com fetch no Javascript

• Capturando valor do input: introdução a seletores

• Formatando e Arredondando números no JavaScript: 2 casas decimais e outros casos possíveis

• Nomes de classes no CSS

• Organizando o CSS no seu projeto

• JavaScript: convertendo String para número

• Fazendo um gráfico para a web com Google Charts

• Melhorando a acessibilidade do seu checkbox customizado

• Lidando com parâmetros obrigatórios em JavaScript

• Ancorando elementos com HTML5

• Criando Layouts com CSS Grid Layout

• Testes em JavaScript

• Entendendo a relação entre Ember, Handlebars e Glimmer

• Acessibilidade na Web

• PWA: Quando usar progressive web apps?

• Criando componentes CSS com o padrão BEM

• Criando aplicações Angular com Angular CLI

• CSS mágico que não existe

• Entendendo o Material Design

• Como sair do zero até se tornar um programador front-end

• Como lidar com os limites de resolução em sites responsivos?

• Desafio JavaScript entre duas amigas

• Colocar as propriedades no CSS em ordem alfabética é melhor pra performance?

• Como criar um servidor HTTP com KoaJS

• Ordenação de números no JavaScript não funciona?

• Começar a programar é com JavaScript

• Como criar um servidor HTTP com HapiJS

• Conheça 5 tipos de marketplaces para freelancers em TI

• Sprites ou imagens separadas?

• Quais impactos de performance ao usar serviços externos de fontes?

• Content Security Policy: uma arma eficaz contra ataques XSS

• Preenchendo formulário HTML automaticamente com AJAX

• Páginas rápidas no Google com AMP - Accelerated Mobile Pages

• Por que você deve ficar sempre de olho na performance do seu site

• 10 mixins em Sass que você deveria usar em seus projetos

• Criando pseudo-elementos mais rapidamente com Sass

• Herança em JavaScript

• Desenhando a logo da Caelum com CSS

• jQuery 3.0 Final é lançado

• HTTP/2 Server Push na prática

• Não pare seu teste A/B quando ele atingir significância estatística!

• Como realizar testes A/B com o Google Analytics

• Angular 2: o fim do two-way data binding?

• Construtores em JavaScript

• Ampliando a String do JavaScript

• Variable Hoisting no JavaScript

• Será que o onclick é do mal? As várias formas de escutar eventos em uma página

• Formulário com form validation do HTML5

• JSON e Objeto JavaScript são a mesma coisa?

• Tutorial: instalando e usando o Sass no Windows

• Escopos no JavaScript

• As engines de renderização dos browsers

• Offline Web

• Centralizando um elemento com CSS

• CSS menos sofrido com Sass

• Touch-first

• Quem disse que eu preciso de jQuery?

• Protegendo sua aplicação web contra Cross-Site Request Forgery

• Começando a organizar seu CSS

• Use os Rich Snippets para aumentar conversão nas buscas

• Use Geolocation API do HTML5 e OpenStreetMaps para um formulário mais amigável

• Porque você não deveria ligar para o tempo do onload (ou: as métricas que importam para performance real na Web)

• Browser-sync, indispensável para desenvolver sites em vários dispositivos

• AngularJS: SEO, Google Analytics e Virtual Pages

• Navegando por uma Single Page Application Angular

• Como anda o Angular.js? Devo embarcar nessa?

• Porque usar 'em' no seu CSS hoje em dia?

• Validações customizadas no Asp.Net MVC

• O que muda nas práticas de otimizações de performance na Web com o HTTP 2.0 e o SPDY

• Como começar com SEO e as boas práticas básicas

• Entenda a nova especificação de classes do JavaScript Harmony ES6

• As fantásticas novidades do HTTP 2.0 e do SPDY

• Reaproveitando código com JavaScript: herança e protótipos

• Física em jogos com Chipmunk2D

• Criação de objetos em Javascript

• Organize seu código Javascript de maneira fácil!

• SPDY, HTTP2 e por que você deveria conhecê-los

• Bye bye Grunt.js, hello Gulp.js!

• Conhecendo a stack MEAN: MongoDB, Express, Angular e Node.

• Experimente o Yeoman em seu workflow de projetos front-end

• O drama do posicionamento de elementos na tela e o Flexbox

• Automação de build de front-end com Grunt.js

• Qual é a velocidade de carregamento do seu site?

• Internet Explorer, testes cross browsers e a política de compatibilidade

• Aplicando o progressive enhancement

• WebSockets HTML5 em Java com Jetty: Web em tempo real

• Não use jQuery no seu site mobile: conheça o Zepto.JS

• Logging, debugging e profiling de JavaScript com o Firebug

• CSS fácil, flexível e dinâmico com LESS

• Boas práticas com JavaScript e jQuery: código não-obstrusivo

• Conhecendo o operator new e os protótipos no JavaScript

• As múltiplas personalidades do this em JavaScript

• 2012 é o ano do mercado mobile no Brasil

• Flexibilidade em páginas para dispositivos móveis com media queries

• Possibilitando o overload de métodos em Javascript

• Pixels, pixels ou pixels? Dicas de Web Mobile com viewport

• Otimizações na Web e o carregamento assíncrono

• Como não aprender design de urls: os Hashbangs

• Evolução dos navegadores e estatísticas de acesso

• CSS3 e progressive enhancement

• Flex: Teste de unidade em Actionscript

• CSS3 e o futuro da Web

• HTML, CSS, Javascript e UX na nova formação da Caelum