Criando componentes para Web #01: Acessibilidade (a11y) na prática com WAI-ARIA
WAI ou Web Accessibility Initiative (Iniciativa de Acessibil...
I started writing to record my journey through the write code every day challenge in 2015 (inpired by Raphael Amorim and John Resig).
Many years later, here are my beloved articles about engineering, design and career.
WAI ou Web Accessibility Initiative (Iniciativa de Acessibil...
我觉得这是一个简单但深刻的问题。许多人下定决心开始做自己的个人项目,刚开始的几天感到非常兴奋,但是没过多久热情就消失了—...
I believe this is a simple but deep question. Many people st...
I decided to create my tools, not for commercial propose, bu...
WAI ou Web Accessibility Initiative (Iniciativa de Acessibilidade na Web), é uma iniciativa da W3C para desenvolver padrões e materiais de apoio que nos ajudam a compreender e implementar a acessibilidade.
我觉得这是一个简单但深刻的问题。许多人下定决心开始做自己的个人项目,刚开始的几天感到非常兴奋,但是没过多久热情就消失了——这中间发生了什么?
Building personal projects is one of the must-have habits for any developer, but a big question appears for many developers that make the process stop: What project am I going to do?
I believe this is a simple but deep question. Many people start new side projects and get very excited at the beginning, but after a few days, the energy is gone. WTF happen?
I decided to create my tools, not for commercial propose, but to know how these technologies actually work and to improve my tech skills. This is a short story about how this decision changed my life.
É complicado entender a necessidade de algo que não temos, nunca vimos ou ouvimos falar. Para termos o que comparar, vou apresentar um conceito que é um dos pilares do famoso e super desenvolvido Ruby on Rails.
Durante muito tempo, vários dos ditos “programadores” zombaram dos amiguinhos focados em client side dizendo coisas como “quem trabalha com HTML não é programador de verdade” ou o meu favorito “HTML é coisa de criança”, pois é, quem diria que esse povinho estava parcialmente correto.
Vamos criar uma ferramenta de linha de comando do absoluto zero e com poucas linhas de Javascript para demostrar de forma prática o verdadeiro poder dos módulos globais.
Se você tem um background como desenvolvedor Front-End e já chegou a usar alguma ferramenta baseada em Node.js (Gulp, stylus, etc…) mas, não entende como elas funcionam por trás dos panos ou, tem curiosidade sobre como o Back-End disponibiliza aqueles endpoints mágicos através de APIs, você está no lugar certo!
Agora que aprendermos alguns termos e princípios durante o primeiro artigo da série, temos uma base para construir nosso primeiro exemplo com códigos, vamos lá!
Hoje vamos conversar sobre uma mudança de mindset que todo desenvolvedor Front-End precisa ter. Não veremos códigos neste artigo, apenas a base teórica sobre como devemos compor nossas aplicações utilizando componentes.
Fala pessoal, hoje vou desmistificar um pouco a história do Polymer Project, tentar tirar algumas dúvidas frequentes, localiza-los na linha do tempo e apresentar um futuro chamado Polymer 3.
Durante a Front-End Week SP 2017, eu e o Diogo Moretti fizemos uma cobertura no Youtube de todos os eventos e tivemos vários feedbacks, muita gente que participou dos eventos curtiu rever o que vivenciaram, porém tivemos muitos feedbacks de pessoas fora de São Paulo querendo ter algo do tipo em suas cidades e com os olhinhos brilhando vendo os encontros.
Hoje vamos conversar sobre duas coisas que sou pessoalmente apaixonado: Web Components e HTML Template Engines. Vou apresentar uma abordagem diferente para compor nossas páginas utilizando apenas três das quatro especificações que compõem um Web Component.
Vamos começar falando sobre o que ele não é. Definitivamente não é mais framework de javascript, muito menos um Polyfill para Web Components.
Esse post é parte de uma série de entrevistas para o Training Center sobre o que um profissional pode dizer sobre sua área de atuação visando mostrar para outras pessoas como é trabalhar no que fazem.
Quando falamos em desenvolvimento Front-End, a adoção de novas tecnologias se torna uma tarefa relativamente complicada pela necessidade de dar suporte a diversos browsers, nesse cenário temos basicamente duas abordagens: Graceful Degradation e Progressive Enhancement.
Hoje vamos entender os conceitos básicos que envolvem esse mundo e criar nosso primeiro modelo 3D, e claro, com muito javascript porque somos desses ;)
Esse é um relato das coisas maravilhosas que aconteceram comigo nessa semana que entrou para a história da comunidade mundial de desenvolvedores Front-End.
Fala galera, esse é apenas o relato de um carioca que que teve a oportunidade de participar do já tradicional Sampa.JS, e de cara quero dizer que voltarei nos próximos anos COM CERTEZA!
Vamos testar um componente simples, que escreve hello na página. Como somos descolados vamos usar ES6 e um bundler para organizar nossas dependências e componentes.
Criar um link em markdown é realmente muito simples, mas existem alguns casos especiais, se você já tentou adicionar um arquivo SVG ou criar uma âncora para um heading que usa caracteres especiais sabe do que estou falando.
Foi realmente incrível passar esses últimos dias com vocês, recebi tantos feedbacks positivos, vi tantos desenhos irados e conheci muita gente boa. Só tenho a agracer o carinho de todos!
Flexbox é um modulo da CSS3 que define um novo box model otimizado para interfaces, ou seja, agora temos uma especificação focada em interfaces, nada de floats ou tabelas aqui.
Na parte 1 aprendemos a configurar nossas animações, hoje iremos focar nas animações de fato, em cada movimento e conbinações de movimentos. Vamos nessa <3
Abordaremos basicamente os pseudo-elementos ::after e ::before, hoje aprenderemos que esses caras são muito importantes para a qualidade de nossos desenhos.
Sombras com CSS são bem fáceis de criar e entender, tão fáceis, que a partir de hoje você meu caro leitor, nunca mais vai precisar de nenhum box-shadow generator em sua vida ;)
Chegou a hora de falar sobre umas das coisas mais divertidas da vida! Vamos aprender um pouco sobre animações com CSS3, que é algo tão simples quanto poderoso!
Agora que tal juntarmos tudo para desenhar algo que represente o motivo desta série de posts existir? Vamos la!
Agora sim! Vamos conhecer umas das melhores features do CSS3, o que vai literalmente transformar sua percepção da linguagem :D
Agora que sabemos como criar formas básicas, podemos dar o próximo passo e preparar nossa folha de papel em branco para posicionarmos nossas formas e montar nosso desenho, a princípio usaremos apenas o bom e velho position, mas nos próximos artigos veremos flexbox e outras coisinhas legais sobre posicionamento.
Depois de muito tempo sem fazer nada legal, resolvi pegar uma noite e fazer algo para me distrair e acabei criando o Jake apenas com CSS, depois de mostrar para a galera no facebook recebi alguns pedidos para ensinar os macetes para fazer essas coisas fofas com CSS.
Olá pessoal, neste artigo irei abordar o básico sobre variáveis nativas com CSS, e como você pode usar essa tecnologia hoje e sem medo de ser feliz.
Assim que postei o último artigo, o Raphael Amorim me parabenizou pelo repositório commit-wars, e me confessou que já tinha pensando em fazer algo do gênero, porém, um pouco diferente e bem mais completo, etc...
É pessoal, depois de receber tantos feedbacks positivos sobre o primeiro post, eu não poderia deixar de comentar que escrever sem duvidas é tão importante quando contribuir em projetos. etc...
Tudo começou no último Meetup RioJS de 2014, quando o @raphamorim deu uma talk intitulada Confissões de um contribuidor, basicamente ele apresentou os benefícios de aderir ao movimento Write Code Every Day, etc...