E o passado é uma roupa que não nos serve mais.
Depois de quase exatos 2 anos, eis que um novo “meta artigo” aparece para anunciar aos leitores e visitantes do blog sobre algumas novidades importantes; agora os motivos daquela ansiedade já não existem mais e é com imensa alegria e satisfação que inauguramos uma nova era no desenvolvimento para web! E, para começar em grande estilo, nada melhor que um novo tema: dpw2014!
“Sob nova direção”
Recentemente, me juntei a 1 amigo para montarmos uma empresa, a webfatorial. Como, desde que começamos, estamos em contato direto praticamente todos os dias e devido de o Saulo gostar tanto de desenvolvimento web quanto eu, nada mais justo e benéfico a todos do que trazê-lo a fazer parte do blog.
Com base nos estudos e experiências que tivemos e teremos, continuaremos trazendo artigos relacionados e correlatos a temas de ponta de desenvolvimento web e, como agora a equipe aumentou, a atualização de artigos já publicados para que não fiquem muito obsoletos também irá acontecer. É uma relação “ganha-ganha” entre nós e os que acompanham o blog já há tantos anos e, claro, também a novos leitores.
O que entrou, o que saiu, o que mudou
Em relação ao último tema do blog, praticamente todas as tecnologias usadas foram melhoradas e/ou evoluídas. A seguir, uma “visão topográfica” de o que agora se pode encontrar por aqui e como as coisas mudaram e estão implementadas.
Layout e Design
De cara, já é possível perceber que o conteúdo está absolutamente destacado e evidenciado nesta nova versão. Se o conteúdo é o que importa, então merece seu absoluto destaque! Mas não somente a área útil ao conteúdo foi ampliada: baseando-nos em estudos de tipografia, fizemos o máximo cabível ao projeto para facilitar e dar ensejo a uma boa leitura.
Uma das novas diretrizes do blog é: cada artigo será único – e não estamos falando somente sobre conteúdos. Trabalhamos duro para criar uma série de “modificadores visuais” que podem ser usados livremente em qualquer parte de um artigo ou página, conferindo um visual e “ambientação” únicos em cada um deles.
Para citar alguns, agora é possível ter:
- Divisão do conteúdo em colunas
- Variações no tamanho de textos
- Extrapolação ou contração de textos e imagens à “linha central” do conteúdo
- Alinhamentos diferenciados
- Citações variadas
- Avisos e alertas
Muita coisa que será amplamente usada para que cada artigo chegue o mais próximo possível de proporcionar uma experiência única ao ser lido!
LESS para SASS
O último tema do desenvolvimento para web foi feito em cima de Twitter Bootstrap (versão antiga) e, consequentemente, LESS. À época, ele ainda era meio que uma novidade e, inegavelmente, possuía (e ainda possui) qualidade para ser usado em vários tipos de projetos (incluindo blogs). Mas com a vivência e amadurecimento profissional, foi inevitável a evolução para SASS.
Sem frameworks front-end “fullstack”
Apesar de na atual versão do Twitter Bootstrap ser possível usar SASS, também estava na hora de experimentar outras possibilidades e realizar alguns experimentos com outras tecnologias. Então, ao invés de usar um framework front-end “fullstack”, agora são vários pedacinho de tecnologias diferentes atuando para que o bem-maior possa acontecer.
Pure
Em relação ao grid usado, num primeiro momento pensamos em fazer um próprio; mas depois de 2 segundos decidimos usar o grid do Pure – assista ao screencast para saber mais sobre o Pure.
Mas fomos um passo além e fizemos um grid personalizado usando o Rework para que tudo ficasse exatamente como o necessário – em breve, screencast ensinando a como fazer isso, assine o canal para não perder.
Também usamos a parte de botões do Pure como base para fazer botões próprios para o tema – o bom dele é que é possível usar seus módulos separadamente, escolhendo o que é necessário ao projeto e não o sobrecarregando com recursos desnecessários.
SMACSS e BEM
Em relação à organização de código de estilo, foram adotadas as metodologias SMACSS para organização e BEM para nomenclatura, que, depois de muitos estudos, foram eleitas algumas das melhores existentes na atualidade quando o assunto é modularidade e organização no front-end.
Focando na parte “src” do tema, sua estrutura está assim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
| [...] | |-- src | `-- assets | |-- font | |-- img | |-- script | `-- stylesheet | |-- base | | |-- _elements.scss | | |-- _font.scss | | |-- _generics.scss | | |-- _sprites.scss | | |-- _variables.scss | | `-- _wordpress.scss | |-- helpers | | |-- _breakpoint.scss | | |-- _colors.scss | | `-- _units.scss | |-- layout | | |-- _footer.scss | | `-- _rework-pure-grid-12u.scss | |-- module | | |-- _article-call.scss | | |-- _back-to-top.scss | | |-- _button.scss | | |-- _circulated-character.scss | | |-- _constrict.scss | | |-- _extrapolate.scss | | |-- _main-logo.scss | | |-- _off-screen-nav.scss | | |-- _page-hero.scss | | |-- _single.scss | | `-- _wordpress-archive.scss | |-- state | |-- style.scss | `-- theme `-- style.css |
jQuery para JavaScript puro
A remoção da jQuery já era planejada desde o início, mas, na ocasião, pensávamos em trocar por Zepto ou algum outro equivalente. No final das contas, pensamos: “Pra quê?”. Na verdade, as necessidades de JavaScript por aqui nem são tantas, então uma biblioteca provavelmente atrapalharia a performance sem trazer tantos benefícios.
O tema estará sempre evoluindo e experimentos de webdev serão feitos por aqui; faremos ao máximo para que “jQuery” só seja encontrado no código-fonte no meio do conteúdo dos artigos e evitaremos a instalação de plugins que precisem do dito cujo. Esperamos que isso possa durar.
Sem task manager para Gulp
O task manager focado em programação mais eficiente no momento é o Gulp. Portanto, ele foi o escolhido para ser usado. Se antes não havia nenhuma automatização dos diferentes processos que envolvem a criação de um projeto web, agora, com o Gulp, tudo ficou mais automático e, claro, bem mais simples e eficiente.
Na estrutura mostrada acima, através do watch
do Gulp, sempre que se salva algum arquivo tudo é compilado em uma fração de segundo (literalmente) para o style.css
na raiz do tema, tal como exigido pelas convenções do WordPress.
Creative Commons para WTFPL
A licença do blog foi trocada de Creative Commons para Do What the Fuck You Want to Public License, ou, para simplificar, WTFPL.
Então, já podem dormir um pouco mais tranquilos aqueles que ripam conteúdo por aqui sem dó nem piedade para colocarem em seus blogs. Eles já não se depararão mais com comentários sarcásticos sobre como sua atividade de não referenciar a fonte de um conteúdo pode tornar suas vidas miseráveis… Provavelmente. ;-)
Comentários
Talvez o ponto mais controverso em relação a este novo tema seja o seguinte: não existem mais comentários! Depois de refletirmos sobre o assunto (baseando-nos não somente em fatores internos, mas, também, em análises de projetos de terceiros), optamos por não ter mais a interação por comentários no blog.
Evidentemente isso não significa um corte total na comunicação – por se tratar de um blog, isso seria absurdo. Acontece que, a partir de agora, os comentários e trocas de ideias se darão através das redes sociais – aliás, bastante apropriadas para interações… Sociais.
Conteúdo pré-dpw2014
Devido às drásticas mudanças de layout e acréscimos de novas maneiras de se apresentar os conteúdos, os artigos “pré-dpw2014” devem sofrer mudanças e atualizações assim que possível. Até lá, não repare se uma ou outra coisinha estiver quebrada e/ou se se deparar com alguma imagem “genérica”.
Dezenas de artigos, escritos ao longo de anos de blog, não podem ser todos atualizados ao mesmo tempo, em curto espaço de tempo. Além do mais, com todas as novas possibilidades, é preciso pensar melhor em como o conteúdo sera disposto e, inevitavelmente, isso exige maior tempo de planejamento.
Contamos com sua compreensão!
Observações finais
Como este é um blog de tecnologia voltado a desenvolvimento web (e não há nenhum “stakeholder” exigindo suporte a velharias), não nos preocupamos muito (leia-se: nem um pouco, mesmo) em dar suporte a Internet Explorer. De qualquer maneira, devido ao grid ser do Pure e estarmos chamando o polyfill, as coisas não devem estar tão ruins assim. Mas se estiverem, bem, “A vida é muito curta para se preocupar com IE”, diriam alguns…
Uma de nossas maiores preocupações é em relação à performance de nossos projetos e, com um blog “da casa”, não poderia ser diferente. Aliando técnicas de otimização de front-end e back-end, conseguimos alcançar um desempenho de alto nível e excelentes resultado nas principais ferramentas de análise. Em Page Speed e YSlow, por exemplo:
No mais, esperamos, com sinceramente, que todas essas mudanças/evoluções sejam de grande valia a todos os que visitaram, visitam e visitarão o desenvolvimento para web. Temos prazer em compartilhar o que sabemos e esta é tão-somente uma ferramenta para que essa transmissão de conhecimentos e ideias seja facilitada.
Ah, e uma última novidade: agora você pode compartilhar todos os posts do blog com muito mais facilidade através dos botões de compartilhamento em redes sociais. Tá logo aí em baixo, é só clicar! ;-)
A gente se vê pela web!