# dpw2016 > Apresentação do dpw2016 com Foundation Framework, Flexbox e ECMAScript 6. Descubra evolução técnica revolucionária e novos recursos visuais modernos. Confira! URL: https://dpw.dev/miscelanea/dpw2016/ Publicado em: 2016-05-21 Categoria: miscelanea Tags: analise Autor: Tárcio Zemel > A vida só pode ser compreendida olhando-se para trás; > mas só pode ser vivida olhando-se para frente. > > Søren Kierkegaard Muitos conteúdos inéditos e traduções foram colocados no **desenvolvimento para web** desde sua inauguração, quase uma década atrás. Dentre estes, alguns meta artigos para contarmos um pouco sobre a experiência de desenvolvimento do blog, em si. Depois de pouco mais de 2 anos que sua última versão foi lançada, a [webfatorial](http://webfatorial.com/) apresenta **dpw2016**! ## Layout Na "versão" anterior do blog, optamos por uma abordagem técnica ultraminimalistas, não usando quaisquer soluções prontas mais robustas para front-end, somente JavaScript puro etc. Para a **dpw2016**, a escolha foi [Foundation](http://foundation.zurb.com/), o melhor framework front-end da atualidade! Naquela época (e até antes) já tínhamos um _affair_ com o Foundation, mas a decisão de usá-lo no **desenvolvimento para web**, efetivamente, se deu pela evolução mesma do framework. Atualmente, ele não é o melhor framework front-end somente pela gama de componentes que possui e sua facilidade de uso; seu próprio código é muito bem escrito e modularizado, permitindo que se use tão-somente os recursos que sejam necessários, não trazendo "tranqueira" para os assets finais. Também contam os fatos de o Foundation usar tecnologias de ponta -- como **Sass**, **Flexbox** e **ECMAScript 6** -- e de o estarmos usando bastante nos projetos da [webfatorial](http://webfatorial.com/). Criamos mais elementos visuais para facilitar o entendimento dos conteúdos e aprimorar a apresentação dos artigos. Esperem ver mais cores, formas e até algumas animaçõezinhas por aí. Por exemplo, mensagens importantes agora têm uma formatação especial, do tipo: > **Dica:** O **dpw2016** pode ter algum(ns) bug(s). Se encontrar, comente! Se quisermos evidenciar bastante uma imagem qualquer, agora é possível fazer algo como (veja numa resolução grande): ![Uma sobremesa deliciosa!](/images/blog/dpw2016/1463932737-dpw2016-dessert-sobremesa.webp) ## Conteúdo Para começar, aprimorados a navegação: acabamos com "becos sem saída" nos artigos, agora mostrando quais são os respectivos anterior e próximo post de cada um. Também trocamos o menu hambúrguer para viewports maiores por uma clássica barra superior fixa com opções mais enxutas. Remanejamos vários artigos de lugar para ser possível cortar algumas categorias. Já desde a versão passadas começamos com essa limpa, mas decidimos chegar ao número máximo de 10 categorias para o **dpw2016**. No final das contas, aprimorar a experiência e facilitar a leitura de conteúdos que, convenhamos, apesar de gostarmos bastante -- vocês que estão lendo e nós que estamos escrevendo --, não são tão fáceis de serem assimilados, foi uma de nossas principais metas na concepção do **dpw2016**! ## Tipografia [No anúncio do último tema](/miscelanea/dpw2014/) já havíamos comunicado um drástico aprimoramento na tipografia do site, mostrando algumas das (então) fontes mais consagradas sobre assunto. Mantendo a tradição de estudos para aprimoramento constante, usamos muito do que pode ser encontrado no artigo "[Secret Symphony: The Ultimate Guide to Readable Web Typography](http://www.pearsonified.com/2011/12/golden-ratio-typography.php)", dando especial atenção à maneira como o texto é apresentado, seu tamanho, contraste, espaçamentos etc. Perceba que a leitura dos textos está bem melhor: mais prazerosa, menos cansativa, mais fluida. Mesmo que você não seja um leitor das antigas, certamente consegue perceber estas características enquanto lê estas palavras (e observa "o todo"). ## Os comentários voltaram! No dpw2014, havíamos tomado a decisão de abolir os comentários, direcionando toda a eventual comunicação às redes sociais. Nesta versão, os comentários estão de volta! > Perceba que a leitura dos textos está bem melhor: mais prazerosa, menos cansativa, mais fluida. Acreditamos que isso aumentará a participação da comunidade e dará ensejo a mensagens mais diretas sobre o(s) tema(s) abordado(s) em cada artigo. Entretanto, esse retorno dos comentários ainda não pode ser considerada como definitivo, então, se os comentários não forem minimamente utilizados, não há motivos para que continuem presentes. Como a apresentação padrão dos comentários no WordPress e as interações disponíveis são um tanto que limitadas, está sendo usado o [Disqus](https://disqus.com/) para aprimorar a coisa toda. ## Infra Todos sabemos que, no "mundo da tecnologia", tudo evolui muito rápido. Mas continuamos achando incrível como, em poucos meses, toda a maneira de se desenvolver pode mudar! Para o **desenvolvimento para web**, este foi o caso. ### AWS ![Amazon AWS logo](/images/blog/dpw2016/1463851511-amazon-aws-logo.webp) "Serviços de infraestrutura de nuvem abrangentes e altamente especializados". A descrição no próprio [site da AWS](https://aws.amazon.com/pt/) não poderia ser mais precisa e verdadeira. A AWS é _precisamente_ isso. Depois de diversos testes com diversos serviços ao decorrer dos anos, chegamos à inevitável constatação de que, atualmente, a Amazon é realmente a empresa que oferece os melhores serviços de infra através de seus Web Services! No **desenvolvimento para web**, usamos alguns deles, como ECS, S3, CloudFront e RDS. Desenvolver em ambientes virtualizados e automatizar deploys direto na AWS são muito, muito eficientes! Certamente haverá conteúdos por aqui explicando mais sobre isso, mas continue lendo este artigo para algumas _sneak peeks_. ### Docker ![Docker logo](/images/blog/dpw2016/1463848676-docker-logo.webp) Para quem desenvolve usando virtualização, até não muito tempo atrás o protagonismo desse tipo de tecnologia era do [Vagrant](https://www.vagrantup.com/). Já há algum tempo, quem roubou a cena foi o [Docker](https://www.docker.com/)! Ele usa um conceito diferente de virtualização: enquanto Vagrant e outras soluções são ambientes virtualizados completos, o Docker usa recursos isolados compartilhando bibliotecas comuns -- daí a metáfora de contêineres num navio. Certamente haverá artigos futuros explicando mais sobre o Docker, mas, por ora, basta saber que ele é muito rápido, eficiente e divertido de se usar! Então, em nossas máquinas locais, fora editores/IDEs não temos nenhum software específico de desenvolvimento. Todos são contêineres Docker que permitem desenvolvimento e operações da VM rapidíssimos -- inclusive em projetos diferentes, que compartilham os mesmos contêineres. ### wercker ![wercker logo](/images/blog/dpw2016/1463852608-wercker-logo.webp) Se você ainda não ouviu falar e/ou leu sobre o [wercker](http://wercker.com/) (pronuncia-se "worker"), tudo bem; ele é relativamente novo nos guetos de desenvolvimento web. **wercker** é uma plataforma de Integração Contínua baseada em contêineres Docker para operações na nuvem. É possível configurar scripts e workflows para facilitar bastante este tipo de tarefa e, como sabemos, em webdev, automatização é tudo! Mesmo para projetos "da casa", como o **dpw**, fazemos questão de usar todo o instrumental técnico-conceitual que fazemos com os projetos de clientes da [webfatorial](http://webfatorial.com/). Então, antes de ir para produção, o blog passa por um ambiente de homologação para ser testado. > É possível configurar scripts e workflows para facilitar bastante este tipo de tarefa e, como sabemos, em webdev, automatização é tudo! Graças ao **wercker**, passar códigos e assets de um ambiente para o próximo é _muito simples e muito rápido_: depois de devidamente configurado, quando é feito push no branch `develop`, automaticamente já é ativado um trigger do wercker que faz com que todo o código e assets sejam copiados para o ambiente de homolog -- juntamente com outras ações, como criação de algumas pastas, alterações de permissões, adaptações ao ambiente homolog etc. Todo o processo demora **menos de 5 minutos**! ![wercker: exemplo de deploy](/images/blog/dpw2016/1463846888-wercker-deploy-animation-v2.gif) Depois de feita a homologação, basta um push para o branch `master` para que, através de um outro trigger do wercker, um deploy seja feito diretamente no ambiente de produção na AWS, já com as devidas credenciais de chaves, clusters, services etc, invalidação de cache e todas as outras medidas necessárias para que, em poucos minutos, as alterações sejam colocadas em produção. Tudo -- absolutamente tudo -- de maneira automatizada! ## Fluxo de desenvolvimento ### JIRA ![JIRA logo](/images/blog/dpw2016/1463860845-jira-logo.webp) [JIRA](https://www.atlassian.com/software/jira) é uma ferramenta que permite o monitoramento de tarefas -- mais ou menos como a [Trello](https://trello.com/). A diferença é que conseguimos total integração com o repositório do projeto, chat corporativo e muitos outros! Sua interface muito intuitiva e eficiente e as possibilidades de personalização existentes por projeto o tornam bastante eficiente e aumenta bastante a produtividade e informação da equipe sobre o que acontece durante o desenvolvimento, características imprescindíveis para projetos e fluxos de desenvolvimento profissionais. ![JIRA do dpw2016](/images/blog/dpw2016/1463858618-dpw2016-jira.webp) Então, por exemplo, na integração do repo [Bitbucket](https://bitbucket.org/), acontece o seguinte: no JIRA, conseguimos abrir um branch no repositório diretamente pela tarefa, acompanhar os commits feitos, o track de quanto tempo foi gasto nas tarefas e muitas e muitas outras integrações e facilidades. ### HipChat ![HipChat logo](/images/blog/dpw2016/1463861216-hipchat-logo.webp) Algo com o que trabalhamos, também, é com a integração de todo o fluxo de tarefas do JIRA com o [HipChat](https://www.hipchat.com/) -- que já usávamos como ferramenta principal de comunicação. Para citar somente uma das capacidades dessa integração, caso alguém cite no chat uma tarefa, colocando seu identificador, automaticamente o **HipChat** apresenta um snippet com informações a respeito: ![Exemplo de citação de tarefa JIRA no HipChat](/images/blog/dpw2016/1463860079-hipchat-jira-tarefa.webp) E a integra --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml