Projeto Doroteia – Como estou construindo meu próprio framework para front-end. Parte 1

Hoje em dia, é praticamente impossível encontrar algum desenvolvedor web que não use ou que nunca usou um framework para o front-end, eu já utilizei vários, o famigerado Bootstrap, Foundation, Pure, Ui Kit. Particularmente de todos o que mais gostei foi o Pure Css, da Yahoo, simples, leve e robusto. Além, claro que responsivo. ;D

Entretanto, como todo desenvolvedor que se preza, sou incansável quando se trata de praticar o que eu amo: desenvolver! Pensando nisso decidi criar um framework css apenas para melhorar minhas skills.

Comecei pelo nome (dããã), pensei em work-less, mas soou muito como um plágio de “write less” do slogan do jquery então abandonei, foi então que num dia, quase como uma epifania me surgiu o nome Doroteia, sabe Deus de onde isso surgiu, apenas sei que gostei e assim ficou.

As features

Pensando em qual seria a abrangência da Doroteia quanto a componentes decidi o seguinte, ela vai contar com:

  • Grid responsivo;
  • Menus responsivos;
  • Buttons;
  • Tables;
  • Tipografia;
  • Classes de ajuda;

O Grid

Para o grid pesquisei muito, varias formas e modelos de nomenclatura e do próprio grid, optei por um de 12 colunas, básico. A nomenclatura vai seguir o padrão:

  • dg-12-12 – Para desktops e maiores que 960px.
  • dm-12-12 – Para tablets entre 768px e 960px.
  • ds-12-12 – Para celulares até 768px.
  • des-12-12 – Para celulares menores que 480px.

Tenho ciência que não é o grid perfeito, mas já estou trabalhando em melhorias urgentes.

Container

O container foi escrito para ser full width, e ja conta com o hack do clearfix.

Row

Feito para envelopar o grid cada vez que ele completa o seu tamanho total.

A primeira parte desta série acaba aqui amigos, descrevi uma feature do framework, na verdade a única parte que esta pronta XD, mas ja estou escrevendo os menus de topo e laterais, ambos responsivos e com possibilidade de serem fixos.

Vocês podem acompanhar o desenvolvimento e ajudar a fazê-lo através do github, é só dar um fork lá e enviar sua pull request, issues ou me manda um email, uma mention no twitter ou até sinal de fumaça, não importa, fico grato e feliz em responder. 😀

Sem mais, abraços companheiros! Até a próxima.

Ferramentas, Workflow e Processos!

Boa noite pessoal, hoje eu vou falar sobre meu workflow e as ferramentas que uso, inclusive as minhas formas de inspiração e estudo.

Wireframe

Quando é algo pequeno, geralmente em projetos pessoais não costumo fazê-lo pelo simples motivo de estimular a criatividade e fugir um pouco dos processos do design(assunto que vou tratar num futuro post).

Mas quando o produto é um pouco mais elaborado não tem jeito, mão na massa e bora desenhar. Para isso as ferramentas que eu prefiro são:

– Pencil – Simples de usar, com bons recursos e lindamente open-source, pra que melhor ferramenta que está para criar mockups de forma rápida e bonita.

– Froont – Se você quer fazer algo responsivo e pensa em utilizar o mobile-first como conceito esse cara vai ser perfeito pra você. Recomendo fortemente.

– Papel & Caneta – Os melhores, tenha sempre em mãos.

Editor de textos

Ja testei muitos, vários, mesmo, Notepad++, Aptana, Netbeans, JetBrains, Bloco de notas do Windows, Vim, nossa, inúmeros mas de fato, para coding o que se adaptou melhor a mim foi assim como para a grande maioria o Sublime Text, bonito, robusto, personalizável, para resumir o Sublime eu usaria apenas: awesome.

Já para os demais textos gosto muito do:

– Editor do Google Docs – É bonito e me oferece todas as ferramentas que preciso.(Este texto inclusive esta sendo escrito nele :P).

– LibreOffice Writer – Superior ao Word, simples assim. :B

Desenho e edição de imagens

Tudo começou no Corel Draw que talvez é considerado por você como infame mas que eu considero BOM, e não tenho vergonha em falar, foi nele que descobri a magia dos vetores, hoje em dia busco não usá-lo, mas caso seja necessário não hesitarei.

– Adobe Illustrator – A menina dos olhos, dispensa qualquer observação sobre.

– Adobe Photoshop – Assim como seu irmão é fantástico no que faz.

(Sobre as ferramentas supra-citadas, convenhamos senhores que a Adobe Creative Cloud é uma pechincha)

Eu também gostaria muito de aprender e estudar o Gimp e Inkscape, mas infelizmente não disponho do tempo necessário.

E para o final guardei as cerejas do bolo: Tasks Runner e FrameWorks.

E começando pelo começo temos o Grunt, que eu considero a mais fantástica ferramenta ja criada e agradeço profundamente ao Cowboy por isso. Com ele mais o Bower tudo fica muito mais simples e rápido. Faço hint do css e javascript, minificação e deploy, ainda não tive tempo de aprender sobre testes unitários mas já esta na minha to-do list. Com todo o perdão da palavra, mas essa dupla é FODA!

E por fim os frameworks. Vou deixar uma lista dos que ja usei econsideirei bons:

– Bootstrap – Fantástico, em sua versão 3 ainda melhor.

– Pure Css – Leve e bonito, fácil de usar.

– Foudation – Usei pouco, gostei bastante.

– Doroteia – Menina dos meus olhos, afinal sou eu que estou desenvolvendo :p nasceu com intuito de estudo mas vou prosseguir dedicando todo meu conhecimento a ele e o conhecimento que for adquirindo, está no começo, mesmo(só fiz o grid por enquanto). O grid é responsivo e todas as outras features também serão.

Acabo de lembrar que comentei lá em cima sobre inspiração e estudo não é mesmo? Então lá vai!

E também tem quem eu admiro:

Ufa! Acho que por hoje é isso, consegui resumir minhas ferramentas, processos e inspiração em poucas palavras. Espero que gostem e comentem. =D Tchau pessoal!

Sobre motivação

Bom dia, boa tarde e boa noite, este é o primeiro short-post do blog e nele vou abordar um assunto muito importante, motivação!

Oque te deixa motivado em seu trabalho? Salário?

Você ja parou pra pensar que seu salário poderia ser bem maior apenas mudando o foco da sua motivação?

Atualmente, oque mais me motiva são os desafios, aprendi a gostar deles, e respeitá-los. Os vejo como o combustível para o sucesso, ou desenvolvimento profissional pessoal ou da sua empresa. E acredito que essa seja uma boa metodologia a se considerar quando o profissional esta buscando evoluir.

Acho que falei, em bem poucas palavras oque tinha como objetivo e talvez ajude alguém em sua carreira/profissão.