Comencemos con una observación: me encantan algunos marcos. Como alternativa a la reinvención completa de la rueda, o al diseño de un botón desde cero, una vez más, es difícil superar una solución todo en uno para sus necesidades básicas de HTML / CSS / JavaScript.
El problema es, bueno, es lo que dije ahí arriba. Los marcos realmente no son una solución todo en uno ¿verdad? Por todo lo que hemos hecho modular y fácil de personalizar, a veces simplemente no tienen lo que necesitamos.
Es imposible incluir todos los fragmentos de HTML posibles, el estilo de elemento o la función de JavaScript que pueda necesitar. Pero luego, eso también puede ser algo bueno.
Un marco puede tener muchas cosas que simplemente no necesitamos. Parte de mi trabajo más frustrante fue la búsqueda manual a través de los masivos archivos CSS de Bootstrap para cambiar un poco de código que estaba causando estragos en mi diseño.
Simplemente tome el componente de la barra de navegación de Bootstrap, por ejemplo. Es genial, funciona sin problemas, y se ve bien. Pero si intentas cambiar la forma en que se ve de manera importante, tienes que cambiar un montón de estilos, y lleva un tiempo encontrarlos todos. Si solo se trata de una lista horizontal de enlaces en la parte superior de la página que desea, podría ser más fácil codificar uno nuevo desde cero.
Pero bueno, los frameworks más populares, Bootstrap en particular, tienen muchas herramientas de personalización, ¿verdad? Sí, y eso es genial, pero las opciones predeterminadas no le dan suficiente espacio para trabajar.
En pocas palabras, si te centras en la creatividad, un marco masivo probablemente no sea el camino a seguir. Claro, puedes hackearlo, pero eso llevará mucho tiempo.
Un problema más con el que me he encontrado: incompatibilidades de JavaScript. Como un chico que no es realmente un programador, esto fue doloroso.
Específicamente, hubo una vez en la que intenté integrar un par de complementos jQuery en un diseño basado en Foundation. Esto no es un factor decisivo por sí solo, pero lleva más tiempo depurarlo.
Por supuesto, esto fue en algún momento el año pasado. Honestamente, no sé qué pasaría si probara lo mismo con las nuevas versiones del mismo framework y complementos, pero aún es algo a considerar.
En resumen, hay momentos en que los marcos simplemente no son la respuesta. Aquí es donde entra en juego el kit de herramientas, y debería tener uno.
Un conjunto de herramientas, en el contexto de este artículo, es un conjunto de herramientas, fragmentos, complementos y recursos autocompuestos y seleccionados que le permiten codificar sus proyectos mucho más rápido. La gente a menudo encontrará estos recursos a lo largo del tiempo y se apegará a ellos. Es algo personal, y realmente tienes que hacer el tuyo.
Similitudes
Diferencias
La ventaja de un juego de herramientas sobre un marco es su gran versatilidad. Como se dijo anteriormente, en los proyectos en los que pretenda ampliar los límites del diseño, un marco suele ser demasiado engorroso.
Esa misma calidad es también la caída del marco en proyectos de tamaño pequeño a mediano. ¿Estás construyendo una página de inicio promocional? ¿Un sitio web de una página? Un blog simple? Entonces, un marco probablemente sea innecesario. Será mejor que empiece de cero y haga que cada detalle del proyecto sea suyo.
Iría tan lejos como para decir, esta es solo mi opinión, que la mayoría de los sitios web basados en contenido no necesitan un marco completo. La excepción sería para sitios masivos, como ars technica por ejemplo. Para algo tan grande deberías usar un framework, pero probablemente deberías desarrollarlo desde cero para cumplir con las necesidades exactas del sitio web.
Donde los marcos como Bootstrap y Foundation realmente brillan es en el desarrollo de aplicaciones web y sitios web impulsados por la aplicación. Es en estos proyectos que las restricciones relativamente rígidas son útiles, en lugar de frenar.
Hacer su propio juego de herramientas es una cuestión de tiempo, paciencia y experiencia. Quiero decir, seguro, podrías ir y hacer una búsqueda de "recursos de diseño web". Obtendrá miles y miles de éxitos, y en un par de horas podría descargar más bits de código de los que posiblemente podría usar.
Pero eso no es un juego de herramientas. Esa es una biblioteca que nunca tocará, porque ordenarla llevaría demasiado tiempo. Somos personas ocupadas, por lo que he adoptado un enfoque más orgánico para esto: cuando me encuentro con un problema, lo busco en Google.
Los fragmentos suelen ser demasiado largos para memorizarlos, por lo que si me encuentro buscando lo mismo en repetidas ocasiones, lo agrego a mi kit de herramientas. Lo mismo ocurre con el software: si es algo que sabes que vas a usar mucho, lo agregas.
Eso no quiere decir que nunca debas reservar tiempo para simplemente experimentar con algunos nuevos "juguetes" ... deberías. Si escuchas acerca de un recurso en particular que podría cambiar la forma en que trabajas para mejorar, por supuesto, échale un vistazo. Pero recuerde que los juegos de herramientas se mantienen relativamente pequeños. Debe concentrarse en mantener solo lo que necesita para satisfacer las necesidades que encuentra regularmente.
Una vez más, reiteraré que los kits de herramientas son algo que debe hacer usted mismo para satisfacer sus propias necesidades. Sin embargo, voy a enumerar las cosas en mi kit de herramientas para darle una mejor idea de qué buscar mientras crea las suyas.
Preprocesadores de CSS como MENOS y HABLAR CON DESCARO A hacer dos cosas:
Si aún no ha intentado codificar CSS con un preprocesador, le insto a que lo haga ahora. Ahora mismo. Esperaré.
Una lista bien organizada de marcadores puede ser muy útil cuando necesita algo que no puede guardar en su disco duro local. Marcar cosas como Generadores CSS3 , generadores de sprites , creadores de esquema de color y otras herramientas que me ayudan a realizar rápidamente tareas que tardan mucho más cuando las haces a mano.
Los sistemas de rejilla son tan 2000s. Desde que el diseño web receptivo se convirtió en algo real, los sistemas de grillas se han vuelto cada vez más complejos para satisfacer las necesidades de innumerables dispositivos.
¿Y qué pasa si necesitas un sistema de grilla personalizado? Podría golpear uno de los muchos generadores de sistemas de grillas que responden en línea, pero son limitados.
La solución viene en forma de semántica.gs . Ahora, aunque su propio autor lo llama un sistema de cuadrícula, elijo llamarlo un motor de diseño, porque no es una cuadrícula. Es una herramienta basada en el procesamiento previo de CSS (puede usarla con LESS, SASS y Stylus), y le permite generar cualquier cuadrícula que desee, de ancho fijo o sensible, sobre la marcha.
Todo lo que tiene que hacer es cambiar algunos números en un archivo .less (o SASS, etc.) e ir.
Hormiga es una colección de complementos que convierten las abreviaturas en líneas completas de código, tanto en HTML como en CSS.
Básicamente, resulta esto:
div>ul>li*3>aDentro de esto:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> este para WordPress . Las funciones y opciones de plantillas de WordPress para functions.php pueden ser difíciles de recordar, así que esto es un salvavidas.
Complementos jQuery
Como dije antes, no soy un programador real. Entonces, cuando se requiere algún tipo de funcionalidad de animación avanzada o UI, pero no tanto como para hacer que un framework valga la pena, recurro a los complementos individuales.
Algunos de mis favoritos son:
- Scrollto.js : una secuencia de comandos de desplazamiento suave.
- idTabs : para cuando necesite algún tipo de UI con pestañas.
- Supersized : para cuando necesite una presentación de página completa.
- ResponsiveSlides.js : lo que dice su nombre Es un control deslizante de imagen sensible. ¿Qué más podrías querer?
Nunca es demasiado pronto para tener tu propia biblioteca personal de cosas útiles.
¿Qué herramientas te gustaría ver en tu kit de herramientas? ¿Con qué recursos no podrías vivir? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen del juego de herramientas del matemático a través de Marc Kjerland.