Aprenda

Uma das coisas mais belas da web é sua metamorfose constante. Essas mudanças e melhoras podem ser difíceis de acompanhar, nós estamos aqui para ajudar você a não ficar pra trás! Vamos listar alguns recursos que vão lhe mostrar como os navegadores funcionam, e como ficar a par de suas modificações. Nota: os sites, por hora, estão disponíveis apenas em inglês.

Como eu me mantenho atualizado com o que acontece nos navegadores?

• Keeping up with HTML5 and browser support - uma lista de recursos que agrupam todas as mudanças
• Blog de Peter Beverloo - atualizações semanais do Webkit e Chrome
• The WHATWG Blog - sumário das atividades semanais de web standard
• W3C’s open web - atualizações semanais da plataforma Open Web
• Opera Developer News - lista as mudanças da plataforma web Opera
• HTML5 Rocks updates - Novidades de HTML5 e Chrome
• Mozilla Hacks - aplicativos legais e funcionalidades HTML5
• Blog IE - atualizações para o IE

Siga-os no Twitter

Recomendamos seguir: @oDevRel (Relacionamento com desenvolvedores Opera), @ChromiumDev (Relacionamento com desenvolvedores Chrome), @mozhacks (Ponto de desenvolvedores Mozilla) & @IE (Equipe do Internet Explorer).

Como entender o funcionamento dos navegadores?

• How Browsers Work: Behind the Scenes of Modern Web Browsers - Explicação aprofundada de como os navegadores funcionam
• Life of a <button> element (por Alex Russell) - excelente palestra sobre renderização e CSS

Outras fontes de aprendizado

• CSS-tricks - fornece uma gama de artigos, tutoriais, e downloads para a comunicade de web design.
• HTML5doctor - excelente fonte para pessoas que querem aprender sobre HTML5, sua semântica e como implementá-lo hoje!
• Dive into HTML5 - dá uma visão aprofundada de algumas funcionalidades de HTML5.
• Blog de Addy Osmani’s - muitos artigos excelentes para pessoas que querem saber mais sobre jQuery, JavaScript, HTML5, e CSS3.
• Blog de Paul Irish’s - tudo para fazer websites legais e mantê-lo atualizado com as novidades mais recentes.
• Dev.Opera - artigos para aprender sobre funcionalidades HTML5.
• Feeds de navegadores, front-ends e padrões para seguir
• YUI Theater - vídeos de palestras de engenheiros front-end sobre as tecnologias web ministrados no Yahoo! ao longo dos anos (muitos não ligados ao YUI).
• Adobe Developer Connection - artigos e vídeos para apbrender sobre HTML5, CSS3 e desenvolvimento móvel.

Guias de referência/wikis

• Mozilla’s MDN - excelente documentação relacionada a HTML, CSS, JavaScript, o DOM, e mais. É também um ótimo lugar para contribuir! Leia Como ajudar e aprenda como começar.
• dochub.io - atalho para as documentações MDN, inclui HTML, CSS, JavaScript, e DOM.
• Forward-compatible websites - lista de melhores práticas para criar sites que não vão quebrar quando os navegadores forem atualizados.
• HTML5 Please - Use new and shiny responsibly - Enciclopédia para ferramentas HTML5 nos navegadores, veja funcionalidades específicas e quando/se você pode usar.

Conheça pessoas que pensam como você

Participar de reuniões e conferências na sua região é um ótimo jeito de entrar em contato com outros desenvolvedores para aprender, trocar conhecimento, e trazer novas idéias e colaborações à vida. Sites como Meetup e Lanyrd podem lhe ajudar a encontrar eventos na sua região.

Peça ajuda

Responda perguntas e participe de conversas no IRC

Iniciando o uso de freenode e irc

• Canais Freenode IRC: #html5 / #css / #javascript / #whatwg / #jquery / #yui / #dojo / #web / #bbg (on irc.freenode.net)
• Canal IRC Mozilla: #js (on irc.mozilla.org)

Como pedir ajuda

1. Você provavelmente deve criar um jsfiddle.
2. Crie um caso de teste reduzido.
3. Lembre-se: seja específico!
4. Pergunte no IRC, StackOverflow (mesmo no bate-papo javascript), ou para um grupo de amigos.

Ajude outros

Todos tivemos que começar em algum lugar! Prestar auxílio ajuda a reforçar seu conhecimento, e contribui para expandir os conceitos aos quais você se expôs. Listamos abaixo alguns grandes exemplos de projetos open-source que estão sempre precisando de ajuda. Lembre-se - tudo vale a pena quando a alma não é pequena!

Projetos Open-Source que valem a pena dar uma olhada

• HTML5 Boilerplate - um ponto de partida para desenvolvedores frontend levando em consideração as boas práticas
• jQuery Learning Site - site educacional para a popular biblioteca jQuery
• jQuery Mobile - melhores práticas para aprimoramento progressivo de plataforma móvel
• Modernizr - a cereja do bolo em detecção de funcionalidades
• Bootstrap - um conjunto de ferramentas de css e js que serve como pontapé inicial para webapps
• Normalize.css - faça todos os navegadores renderizar o conteúdo da mesma forma
• Dojo - conjunto de ferramentas para frontend de fácil compreensão
• Lazyweb requests - Ferramentas web e soluções que seria gostaríamos de ter como desenvolvedores web.
• jQuery standards project - defeitos e discussões relacionados a web standards

Faça o que pedimos em ‘peça ajuda’ ali em cima e assista ao podcast de Addy Osmani’s sobre como fazer parte!

Dê feedback das especificações

Especificações ditam o comportamento esperado. Elas são criadas por Working Groups (WG) em conjunto com discussões ativas em listas de e-mail. Mesmo não tendo certeza se todos os navegadores irão aderir às regras ditadas nas especificações, elas nos fornecem algo que nós, desenvolvedores, podemos padronizar em cima.

• Aprenda a história do HTML.
• Dê uma olhada em como os WG de CSS funcionam.
• Inscreva-se a estas listas para seguir e contribuir às discussões que guiam a web:
  • public-webapps - discussões técnicas do Web Applications Working Group
  • www-style - discussões técnias do Cascading Style Sheets (CSS) e suas especificações
  • whatwg - lista de e-mails do WHATWG
  • public-html - WG do W3C HTML
  • www-dom - onde o DOM é melhorado
  • public-fx - questões relacionadas ao WGs de CSS e SVG
• Leia toda a especificação HTML5 para desenvolvedores (sem questões de implementação, formatada lindamente para você).
• A melhor forma de comentar ou dar feedback nos conteúdos das especificações do HTML é escolher o texto em que você deseja enviar seu comentário e deixar uma mensagem no formulário localizado no rodapé da página.
• Veja os últimos commits nas especificações do HTML e CSS seguindo seus respectivos WGs no Twitter:
  • @whatwg
  • @csscommits

Explore funcionalidades frontend

Depois de ter passado pelo básico, é hora de ir um pouco mais fundo nos web standards atuais e futuros! Tudo em ritmo de festa, pois aqui, nós vemos CSS avançado, funções/APIs HTML5 novinhas em folha e também o futuro do que estas linguagens se tornarão. Muitos novos caminhos estão agora disponíveis nos navegadores, e explorar estes caminhos nos ajudará a levar a web adiante!

Exemplos de como explorar bem as funcionalidades

• Global eval: what are the options? - kangax
• Multiple Backgrounds and Borders with CSS 2.1 - Nicolas Gallagher
• CSS background-image hacks - Nicolas Gallagher
• Let the Web move you — CSS3 Animations and Transitions - John Allsopp
• Patterns For Large-Scale JavaScript Application Architecture - Addy Osmani
• The Cicada Principle and why it matters to web designers - Alex Walker
• Keyframe animation syntax - Chris Coyier
• What's new in CSS Selectors (Level 4) - Shi Chuan
• Everything you always wanted to know about touch icons - Mathias Bynens
• The z-index CSS Property: A Comprehensive Look - Louis Lazaris

Coisas legais para explorar mais (e escrever a respeito)

Os navegadores estão lançando novas funcionalidades toda hora. Os prefixos que nós amamos odiar estão lá para que os desenvolvedores possam prestar feedback de como a funcionalidade atende suas necessidades. Tome coragem de ver se elas atendem! A visão geral de vendor-prefixed CSS, por Peter Beverloo, tem um monte de CSS experimental; muitos deles ainda não totalmente compreendidos. Pense em escrever sobre todos os ítens abaixo:

• The :checked selector / object-fit / background-clip / fx blur css filter / -webkit-line-clamp / text-overflow / box-sizing / CSS columns
• history.pushState(), HTML5 input checkValidity(), getClientRects / getBoundingClientRect, WebKit's ConvertPointFromPageToNode
• CSS Generated Content for Paged Media Module (GCPM)
• Differences between word-wrap, word-break, and white-space
• Harmony features like let / block-scoped bindings / block functions / destructuring / rest parameters / default param values.
• Web Components Explained (very early draft)
• Qualquer funcionalidade destas apresentações:
  • The Future of CSS - Tab Atkins sobre o que esperar do CSS no futuro.
  • Data, Semantics, and the Process of Progress - evolução dos navegadores, Component Model, MDV
  • [JS|DOM].next() - Alex Russell sobre a próxima versão do ECMAScript.
  • CSS3 Secrets - uma apresentação interativa sobre o futuro das funcionalidades avançadas do CSS3.
  • The Future of Layouts in CSS - como especificações emergentes irão adicionar controle de layout apropriado ao CSS
  • The Future of CSS - uma visão geral de algumas funcionalidades CSS que estão surgindo.

Escreva

Publique sobre o que você aprender e não tenha medo de cometer enganos. Escreva em seu blog pessoal e mantenha seus posts atualizados. Certifique-se de escrever do seu jeito! Tenha em mente que você não precisa ser uma autoridade absoluta sobre um assunto para escrever a respeito de algo! Sempre faça perguntas e estimule discussões. Raramente há uma pergunta errada ou resposta errada.

Ensinar é uma ótima forma de aprender também. Então, mesmo que você esteja dando seus primeiros passos em uma área, você estará se ajudando escrevendo a respeito. Você sempre pode perguntar a um mentor ou amigo por uma opinião técnica. (Addy fez isso com aplomb.)

O que seria legal escrever a respeito?

Algo que você pode ensinar aos outros! Veja algumas idéias:

• Por que os elementos <br> e <hr> (ou qualquer elemento) existem?
• Como criar uma apresentação com o mínimo de código?
• O que é o DOM? Por que ele existe?
• Verifique como os navegadores implementam uma propriedade específica e compare com a especificação.
• Como um website popular implementou sua página inicial (e sugestões de melhoras).
• Como você corrigiria as falhas de um website popular (tempo de carregamento grande, JS inválido, etc.).
• Pegue uma demonstração prática e torne-a em algo diferente (ou utilize na prática).
• Faça um sumário das idéias que circundam a web ultimamente.
• Sua experiência contribuindo a um projeto open-source.
• Como pré-processadores CSS podem levar a códigos cumpridos ou ruins se não forem gerenciados corretamente.
• Se sua língua nativa não é o Inglês:
  • Traduza alguns sites populares de escritores em Inglês.
  • Elabore sobre algumas funcionalidades das especificações.

Reporte bugs

De verdade, todos os criadores de navegadores ficariam muito mais felizes se você reportasse os bugs que encontrou do que xingar muito no twitter. =D

• Help the Community: Report Browser Bugs por Lea Verou
• A Web Developer’s Responsibility por John Resig
• Help prioritize browser accessibility bugs por Vlad Alexander

• Rastreador de problemas de navegadores - procure bugs existentes ou reporte novos:

  • Mozilla's bugzilla
  • WebKit bugs
  • Chrome bugs
  • Opera bugs
  • Help IE

Hackeie!

Leve a web aos limites! Hackeie do CSS, HTMl avançado e Javascript. Hackeie do sistema de renderização dos navegadores. Faça Fork em repositórios do github, escave pelo código, e mantenha-se aprendendo. Vamos fazer a web ainda mais incrível. Há tantos caminhos:

Contribua para os navegadores

• Ajude a construir ferramentas de desenvolvedor como WebKit Inspector e Dragonfly. Eles são escritos em HTML, CSS e JS, e você não precisa ser um programador C++ para contribuir. Escreva patches!
• Reduza os casos de teste da Mozilla
• Hackeie no Gecko
  • Leia o guia do desenvolvedor de iniciando desenvolvimento com Gecko.
  • Uma lista de “bons primeiros bugs” para Firefox/Gecko
  • Faça parte dos canais #introduction e #developers no servidor IRC da Mozilla
• Hackeie no Webkit
  • Guia do Google sobre como contribuir com o WebKit

Ajude nas Test Suites

Testes são fundamentais para padrões e navegadores. Eles garantem que tudo funcione de forma consistente entre navegadores. Agora mesmo, a test suite da W3C está longe dos testes que deveriam ter. Testes são escritos na linguagem dos desenvolvedores: HTML, CSS, e JavaScript.

• Dê uma olhada em test suite de webapps da w3c, a test suite para HTML da w3c, and the test suite do CSSWG.
• Dê uma olhada em turbinando testes existentes para a suite de testes W3C.
• Turbine o WebKit’s LayoutTests. Veja também a teoria dos LayoutTests & prática.
• Turbine Mozilla’s Mochitests.
• Entre pra conversa em public-webapps-testsuite, public-html-testsuite, e public-css-testsuite.
• Contribua para o áudio no HTML5 em the AreWePlayingYet? test suite.

Contribua com as especificações

• Opine sobre bugs existentes no W3C bugzilla - e aprenda as Bugzilla conventions.
• Participe das discussões do WHATWG / public-webapps / www-style / public-fx.
• Faça uma proposta web-standards. (este guia ensina como!)
• Escreva especificações! certamente precisamos de mais escritores.

Contribua para os validadores

• HTML Validator anda precisando de amor, dê uma olhada em lazyweb-reqs/18
• CSS Validator sempre exige carinho. Dê uma olhada nas listas de discussão!
• WebVTT um formato de legendas para vídeos, uma área ativa de interesse para padronização

Ajude em projetos

• Lazyweb Requests tem algumas idéis de projetos incríveis propostas por pessoas que adorariam ver suas idéias indo adiante.