Vamos começar com uma observação: eu amo alguns frameworks. Como uma alternativa para reinventar completamente a roda ou estilizar um botão do zero, novamente, é difícil superá-lo com uma solução completa para suas necessidades básicas de HTML / CSS / JavaScript.
O problema é, bem, é o que eu disse lá em cima. Frameworks realmente não são uma solução tudo-em-um são eles? Por tudo o que os tornamos modulares e fáceis de personalizar, às vezes eles simplesmente não têm o que precisamos.
É impossível incluir todos os possíveis trechos de código HTML, estilo de elemento ou função javascript que você possa precisar. Mas então, isso também pode ser uma coisa boa.
Um framework pode ter muitas coisas que simplesmente não precisamos. Alguns dos meus trabalhos mais frustrantes já envolveram manualmente a pesquisa através dos enormes arquivos CSS do Bootstrap para alterar um pequeno pedaço de código que estava causando estragos no meu design.
Apenas pegue o componente da barra de navegação do Bootstrap, por exemplo. É ótimo, funciona perfeitamente e parece bom. Mas, se você tentar mudar a aparência dele de qualquer maneira, você terá que mudar vários estilos e demorará um pouco para encontrá-los. Se for apenas uma lista horizontal de links no topo da página que você deseja, pode ser mais fácil codificar um novo a partir do zero.
Mas ei, os frameworks mais populares por aí, o Bootstrap em particular, tem muitas ferramentas de customização, certo? Sim, e isso é ótimo, mas as opções padrão não oferecem espaço suficiente para você trabalhar.
Simplificando, se o seu foco é na criatividade, uma estrutura maciça provavelmente não é o caminho a percorrer. Claro, você pode hackear isso, mas isso vai levar muito tempo.
Mais um problema que eu tenho em: incompatibilidades JavaScript. Como um cara que não é realmente um programador, isso foi doloroso.
Especificamente, houve um momento em que tentei integrar alguns plug-ins do jQuery em um design baseado em Foundation. Este não é um problema por si só, mas é mais tempo gasto em depuração.
Claro, isso foi algum tempo no ano passado. Eu sinceramente não sei o que aconteceria se eu tentasse a mesma coisa com as novas versões do mesmo framework e plugins, mas ainda é algo a considerar.
Em resumo, há momentos em que os frameworks simplesmente não são a resposta. É aqui que entra o kit de ferramentas e você deve ter um.
Um kit de ferramentas, no contexto deste artigo, é um conjunto de ferramentas, snippets, plug-ins e recursos auto-coletados e com curadoria que permitem codificar seus projetos muito mais rapidamente. As pessoas muitas vezes encontram esses recursos ao longo do tempo e se apegam a eles. É uma coisa pessoal e você realmente tem que fazer o seu próprio.
Semelhanças
Diferenças
A vantagem de um kit de ferramentas sobre um framework é sua versatilidade absoluta. Como dito anteriormente, em projetos nos quais você pretende ultrapassar os limites do projeto, um framework é muitas vezes complicado demais.
Essa mesma qualidade é também a queda da estrutura em projetos de pequeno a médio porte. Você está construindo uma landing page promocional? Um site de uma página? Um blog simples? Então, uma estrutura provavelmente é apenas desnecessária. É melhor começar do zero e fazer todos os detalhes do seu projeto.
Eu diria até - esta é apenas a minha opinião - que a maioria dos sites voltados para conteúdo não precisa de um framework completo. A exceção seria para sites massivos, como ars technica por exemplo. Para algo tão grande, você deve usar uma estrutura, mas provavelmente deve desenvolvê-la do zero para atender às necessidades exatas do site.
Onde frameworks como o Bootstrap e o Foundation realmente brilham está no desenvolvimento de aplicativos da Web e em websites orientados a aplicativos. É nesses projetos que as restrições relativamente rígidas são úteis, em vez de atrasá-lo.
Fazer o seu próprio kit de ferramentas é uma questão de tempo, paciência e experiência. Quero dizer, claro, você poderia simplesmente ir e procurar por “recursos de web design”. Você obteria milhares e milhares de acessos e, em algumas horas, poderia baixar mais bits de código do que poderia usar.
Mas isso não é um kit de ferramentas. Essa é uma biblioteca que você nunca vai tocar, porque a escolha seria demorada. Somos pessoas ocupadas, por isso adotei uma abordagem mais orgânica: quando encontro um problema, faço o Google.
Os trechos geralmente são muito longos para serem memorizados, então, se eu me encontrar repetidamente procurando a mesma coisa, adiciono ao meu kit de ferramentas. O mesmo vale para software: se é algo que você sabe que vai usar muito, você o adiciona.
Isso não quer dizer que você nunca deva reservar um tempo para apenas experimentar novos “brinquedos”… você deveria. Se você ouvir falar de um recurso em particular que possa mudar sua maneira de trabalhar, por favor, verifique-o. Mas lembre-se que os kits de ferramentas são mantidos relativamente pequenos. Você deve se concentrar em manter apenas o que você precisa para atender às necessidades que você encontra regularmente.
Mais uma vez, vou reiterar que os kits de ferramentas são algo que você precisa fazer para satisfazer suas próprias necessidades. Ainda assim, vou listar as coisas no meu kit de ferramentas para ter uma ideia melhor do que procurar enquanto você cria as suas próprias.
Pré-processadores CSS como MENOS e SASS faça duas coisas:
Se você ainda não tentou codificar CSS com um pré-processador, peço que faça isso agora. Agora mesmo. Eu vou esperar.
Uma lista bem organizada de marcadores pode ser muito benéfica quando você precisa de algo que não pode salvar em seu disco rígido local. Eu marcar coisas como Geradores CSS3 , geradores de sprite , criadores de esquema de cores e outras ferramentas que me ajudam a realizar rapidamente tarefas que demoram muito mais tempo quando você as faz à mão.
Sistemas de grade são tão 2000s. Desde que o web design responsivo se tornou uma coisa real, os sistemas de grade se tornaram cada vez mais complexos para atender às necessidades de inúmeros dispositivos.
E se você precisar de um sistema de grade personalizado? Você pode encontrar um dos muitos geradores de sistema de rede on-line responsivos, mas eles são limitados.
A solução vem na forma de semântica.gs . Agora, enquanto seu próprio autor o chama de um sistema de grade, eu escolho chamá-lo de mecanismo de layout, porque não é uma grade. É uma ferramenta baseada no pré-processamento de CSS (você pode usá-lo com menos, SASS e Stylus), e permite que você gere qualquer grade que desejar, de largura fixa ou responsiva, em tempo real.
Tudo o que você precisa fazer é alterar alguns números em um arquivo .less (ou SASS, etc) e ir.
Emmet é uma coleção de plugins que transforma abreviações em linhas completas de código, tanto em HTML quanto em CSS.
Basicamente, isso acontece:
div>ul>li*3>aNisso:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> este para o WordPress . As funções e opções do template do WordPress para o functions.php podem ser difíceis de lembrar, portanto, isso é um salva-vidas.
plugins jQuery
Como eu disse antes, não sou um programador real. Assim, quando qualquer tipo de animação avançada ou funcionalidade de interface do usuário é necessária, mas não tanto para fazer um framework valer a pena, eu ligo para plugins individuais.
Alguns dos meus favoritos são:
- Scrollto.js : um script de rolagem suave.
- idTabs : para quando você precisar de qualquer tipo de interface do usuário com guias.
- Supersized : para quando você precisar de uma apresentação de slides de página inteira.
- ResponsiveSlides.js : o que o nome diz. É um controle deslizante de imagem responsivo. O que mais você poderia querer?
Nunca é cedo demais para ter sua própria biblioteca pessoal de coisas úteis.
Quais ferramentas você gostaria de ver no seu kit de ferramentas? Quais recursos você não poderia viver sem? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem do kit de ferramentas do matemático via Marc Kjerland.