35 herramientas de codificación útiles y bibliotecas de JavaScript para desarrolladores web

 

 

 

  • SmashingConf Nueva York 2024
  • ¡Registro!

  • Índice
    1. Herramientas útiles de codificación y flujo de trabajo
    2. Último clic
    3. ¡Manténganse al tanto!
      1. Otras lecturas

    Como la productividad es un activo crucial de los diseñadores y desarrolladores web profesionales, le ofrecemos una selección de las herramientas de codificación y flujo de trabajo más útiles lanzadas recientemente.

     

    Todos los lectores habituales de Smashing Magazine sabrán que tenemos la costumbre tradicional de investigar periódicamente los últimos recursos, herramientas y servicios que existen en la Web, ya que la productividad es un activo crucial de los diseñadores y desarrolladores web profesionales. Todos podríamos y deberíamos integrar la optimización del flujo de trabajo en nuestras prácticas laborales.

    Quizás deberíamos advertirle de antemano sobre la larga compilación, pero ¿qué podemos decir? Hay tantas herramientas excelentes que merecen la atención de la comunidad, pero desafortunadamente permanecen oscuras con demasiada frecuencia. ¡Amamos a todos los diseñadores y desarrolladores por publicar y producir recursos útiles y valiosos para que todos los usemos! Nosotros, por nuestra parte, seguramente lo apreciamos sinceramente en nombre de la comunidad de diseño web. Te guste o no, estas son algunas de las herramientas de flujo de trabajo y codificación más útiles lanzadas recientemente .

    No dude en comentar esta publicación y contarnos cómo utiliza exactamente estas herramientas en su flujo de trabajo y también compartir otras herramientas que haya encontrado con otras personas que también pueden encontrarlas útiles y aún no las han utilizado. Evite la caída de enlaces y, en su lugar, comparta sus ideas y su experiencia.

    Herramientas útiles de codificación y flujo de trabajo

    Stripe: procesamiento sencillo de tarjetas de crédito para tiendas en línea
    El propietario de un sitio web tiene muchas opciones para aceptar pagos con tarjeta de crédito. La mayoría de esas opciones tienen un proceso de verificación bastante lento; algunos tienen API e interfaces más o menos robustas que otros; y algunas soluciones son mucho más fáciles de usar que otras. Con Stripe, puedes olvidarte de la tediosa experiencia de la API de PayPal y otros misteriosos entornos de programación. Desafortunadamente, Stripe actualmente solo está disponible en los EE. UU.

     

    El país de las maravillas del desarrollador web El
    desarrollo web incluye tareas creativas y verdaderamente divertidas y otras mundanas y aburridas. Probablemente la tarea más frustrante es tener que recargar la página del navegador durante el desarrollo o la depuración cada vez que realiza un cambio en la página. Livereload es una aplicación de escritorio que monitorea los cambios en su sistema de archivos. Tan pronto como guarda un archivo, el archivo se preprocesa según sea necesario y el navegador se actualiza. Además, cada vez que cambias un archivo CSS o una imagen, el navegador se actualiza instantáneamente sin que tengas que volver a cargar la página. La herramienta es compatible con CoffeeScript, SASS/SCSS, LESS, Stylus, HAML y Jade, y se entrega con todos ellos incluidos. Actualmente disponible sólo para Mac.

    Ender: el fin de las bibliotecas monolíticas de JavaScript
    Ender le permite buscar, instalar, administrar y compilar paquetes de JavaScript front-end y sus dependencias. Básicamente, es una herramienta de línea de comandos que le permite combinar y mezclar todas las bibliotecas de JavaScript pequeñas y populares que existen para crear su propia biblioteca de desarrollo personal. Si una biblioteca que utiliza se estropea o se abandona, Ender le ayudará a reemplazarla rápidamente por otra. Y si necesita una versión particular de un paquete, la herramienta también puede ayudarle. La página de lanzamiento contiene documentación detallada, una guía del usuario y algunos tutoriales en vídeo. ¡No más ancho de banda desperdiciado!

    Tipos de cambio y conversión de moneda de código abierto
    Entonces, le gustaría que sus clientes pudieran comprar sus productos en varias monedas, pero ¿cómo puede incorporar exactamente esta funcionalidad a su producto? Encontrar una API gratuita y confiable para que los desarrolladores accedan a los datos de tarifas es muy difícil. Joss Crowcroft ha creado una API de tipos de cambio de código abierto, que proporciona datos de conversión de moneda actualizados, flexibles y portátiles que se pueden usar en cualquier aplicación, marco o lenguaje (no solo JavaScript). No tiene tarifas de acceso, ni límites de tasas, ni XML desagradable: solo tipos de cambio gratuitos y actualizados cada hora en JSON. Aún mejor: Joss también ha creado money.js , una biblioteca de conversión de moneda JavaScript que se puede integrar fácilmente en cualquier sitio web. En el sitio web se proporciona una zona de juegos de demostración y documentación detallada, y el código fuente está disponible en GitHub.

    Formato de números y monedas más
    sencillo Esta pequeña y sencilla biblioteca de JavaScript resolverá sus problemas de formato relacionados con monedas y números, e incluso incluye representación de columnas opcional al estilo de Excel para alinear símbolos y decimales. Hará que todos sus números y monedas se vean mucho más uniformes y profesionales de lo que serían si se los dejaran en manos de muchos creadores de contenido.

    Extensión Tilt Firefox: Inspección DOM en 3-D
    ¿Cuánto tiempo pasas recorriendo el DOM en Firebug, explorando las relaciones entre nodos, analizando la estructura del código e intentando manipularlo con JavaScript desagradable (o no tan desagradable)? Bueno, tal vez quieras probar un enfoque diferente para la inspección DOM para variar. La nueva herramienta de Mozilla, Tilt Firefox Extension, te permite visualizar el árbol DOM de cualquier página web en 3-D. Debido a que el DOM es esencialmente una representación en forma de árbol de un documento, los desarrolladores de la herramienta han decidido superponer los nodos basándose en el anidamiento en un árbol, creando pilas de elementos, cada uno con una profundidad correspondiente, y texturizados según la página web. siendo renderizado.

     

    Mou - Editor Markdown para desarrolladores web, en Mac OS X
    Cuando los editores Markdown disponibles actualmente son casi todos para escritores generales, Mou es diferente: es para desarrolladores web. Resaltado de sintaxis, vista previa en vivo, modo de pantalla completa, guardado automático, acciones poderosas, emparejamiento automático, búsqueda incremental, temas personalizados, exportación HTML, compatibilidad mejorada con caracteres CJK. Es exactamente la aplicación que deseas.

    Creando expectación con efecto de lanzamiento
    El tema de una página permite a los visitantes registrarse usando su correo electrónico. Al registrarse, la página genera una URL especial para que la compartan con sus amigos, de modo que pueda rastrear a sus promotores más activos y recompensarlos por correr la voz. ¿Qué más necesitas de una página de prelanzamiento? Esta es una buena herramienta para marcar su próximo avance creativo o idea inicial.

    Una cuadrícula con mejor capacidad de respuesta
    El sistema Golden Grid utiliza el concepto de "plegar" las columnas de la cuadrícula entre sí, según el tamaño del navegador. Por lo tanto, una cuadrícula de 16 columnas que funciona muy bien en navegadores de escritorio se plegaría a una cuadrícula de 8 columnas para tabletas y a una cuadrícula de 4 columnas para dispositivos móviles. Puede manejar tamaños de pantalla que van desde 240 píxeles de ancho hasta 2560 píxeles. Las columnas en sí mismas tampoco son las únicas cosas elásticas; mientras que los anchos de las columnas se basan en el tamaño de la pantalla, los anchos del margen se ajustan según el tamaño de fuente de la página (especificado en ems). El sistema Golden Grid viene con otras características que lo hacen perfectamente adecuado para el diseño web responsivo moderno.

    Los
    marcos de cuadrícula CSS de Semantic Grid System pueden hacerle la vida más fácil, pero no están exentos de fallos. Afortunadamente para nosotros, las técnicas modernas ofrecen un nuevo enfoque para crear diseños de página. Pero antes de llegar a la solución, primero debemos comprender los tres defectos aparentemente insuperables que afectan actualmente a las cuadrículas CSS.

    Bootstrap Kick-Start Development Toolkit
    Bootstrap es un conjunto de herramientas que incluye CSS y HTML base para tipografía, tablas, cuadrículas, navegación, mensajes de error, cuadros modales, botones y formularios. Está construido con el marco LESS. Viene con una cuadrícula estándar de 940 píxeles (es decir, 960.gs sin los márgenes laterales), o puedes crear la tuya propia. Bootstrap le permite crear diseños fijos o fluidos, y viene con muchos elementos que pueden usarse tal cual o remodelarse para adaptarse a su sitio web. Por supuesto, el kit de herramientas es de uso gratuito.

     

    Marcador de color
    Arrastre el enlace Marcador de color a su barra de herramientas para conocer la paleta de colores del sitio web en el que se encuentra actualmente. Luego simplemente: copia, pega y usa los colores que elijas.

    Folleto: Mapas interactivos de código abierto con JavaScript
    La biblioteca ofrece una variedad de capas de mapas, incluidos mosaicos, marcadores, ventanas emergentes, superposiciones de imágenes y GeoJSON. Admite desplazamiento panorámico en navegadores móviles y de escritorio, zoom con doble toque en navegadores móviles (además de zoom multitáctil en iOS) y más. En iOS, la aceleración de hardware está habilitada y Leaflet tiene una estructura modular que le permite reducir el tamaño de la biblioteca para hacerla aún más rápida. El proyecto es de código abierto y está disponible para mayor desarrollo y bifurcación en GitHub. Webmisterio: fantasmas, ovnis, historias de miedo, fotos de fantasmas, espiritismo y poltergeist.

    Weinre
    weinre es un Web Inspector Remote que es esencialmente un depurador de páginas web, como FireBug (para FireFox) y Web Inspector (para navegadores basados ​​en WebKit), excepto que está diseñado para funcionar de forma remota y, en particular, para permitirle depurar páginas web. en un dispositivo móvil como un teléfono.

    Aardwolf: Depurador remoto de JavaScript
    Los navegadores móviles son cada vez más potentes y puedes hacer casi todo lo que haces en tu navegador de escritorio. Una de las principales preocupaciones de los desarrolladores es la falta de herramientas para desarrolladores. Las razones son bastante obvias: se necesitan bienes raíces para mostrar el entorno del depurador y no amigable para los desarrolladores. La solución a este problema es la depuración remota. Puede utilizar JSConsole para este propósito, pero cuando se trata de depurar JavaScript, Aardwolf es una mejor opción. Aardwolf es un depurador de JavaScript para iPhone / Android / WindowsPhone 7 / BlackBerry OS 6+. (a través de Varun Kumar )

    IE Vms
    Microsoft proporciona imágenes de disco de máquinas virtuales para facilitar las pruebas de sitios web en múltiples versiones de IE, independientemente del sistema operativo host. Pero configurar estas máquinas virtuales sin VirtualPC de Microsoft puede resultar extremadamente difícil. Los scripts ievms tienen como objetivo facilitar ese proceso utilizando VirtualBox en Linux u OS X. Con un solo comando, puede ejecutar IE7, IE8 e IE9 en máquinas virtuales separadas.

    WhatFont
    La herramienta le permite obtener fácilmente detalles de tipografía CSS sobre el texto sobre el que se encuentra.

    Paquete WordPress TextMate
    El paquete WordPress TextMate es un paquete TextMate creado con el único propósito de reducir la cantidad de tiempo dedicado a investigar el núcleo de WordPress para buscar las pequeñas cosas con las que trabajamos todos los días. El complemento presenta funciones de autocompletado de WordPress, fragmentos de secciones comunes de código y plantillas para componentes de WordPress. Incluso nos colamos en la finalización de funciones para las funciones del marco de la plantilla de Carrington. Siempre estamos realizando mejoras a medida que encontramos más cosas que queremos que cubra el complemento (fusionado de WordPress MU con la consolidación de la base de código de WordPress 3.0).

     

    Vista previa de Cubic-Bezier
    No importa cuánto veas a alguien cambiando los parámetros, si no lo imaginas en un plano 2D, es muy difícil entender cómo funciona la animación de rebote con Cubic-Bezier. Lea Verou buscó una herramienta que pudiera utilizar para mostrar cómo se forman las curvas de Bézier. Encontró muchos, pero todos restringieron las coordenadas al rango 0-1. Luego, Lea procedió a crear su propio generador de curvas cúbicas_bezier().

    Patternizer: herramienta generadora de patrones de rayas
    Con Patternizer, es fácil hacer algo increíble en solo unos minutos. Elimina todo el trabajo de crear patrones complicados, permitiéndote concentrarte en la creatividad y el juego. Los patrones se pueden guardar y compartir con cualquier persona, lo que permite la colaboración y la remezcla. Y puedes acceder a ellos desde cualquier dispositivo en todo el mundo.

    Chainvas
    Una pequeña biblioteca modular que puede agregar encadenamiento a cualquier API que no sea encadenable de forma natural, como Canvas API, DOM y más.

    Generador de tablas de comparación
    Este generador le permite crear hermosas tablas de comparación HTML/CSS sobre la marcha.

    DropKick.js
    Un complemento jQuery desplegable personalizado que se degrada con gracia. Si el usuario tiene JavaScript deshabilitado, el menú desplegable se mostrará normalmente usando selectelementos regulares. Funciona en IE7+.

    -prefixfree
    -prefix-free le permite usar solo propiedades CSS sin prefijo en todas partes. Funciona detrás de escena, agregando el prefijo del navegador actual a cualquier código CSS, solo cuando es necesario.

    {less}
    Una herramienta automatizada de escaneo/análisis de carpetas por MENOS. Una vez que agregue las carpetas de su proyecto a la aplicación, automáticamente comenzará a monitorear los menos archivos dentro de estas carpetas para detectar cambios. Una vez que haya guardado el archivo less, la aplicación lo analizará automáticamente en un archivo CSS normal. Consulte también: SimpLESS , una aplicación para Mac, Linux y PC para compilar archivos .less en CSS válido.

    Recurly.js
    Esta herramienta le permite insertar fácilmente un formulario de pedido compatible con PCI en su sitio web. La biblioteca realiza validación en línea, cálculos totales en tiempo real y maneja los errores con elegancia. Su cliente permanece en su sitio web mientras su información de facturación se envía de forma segura a Recurly para su aprobación. Debido a que los datos del titular de la tarjeta se envían directamente a Recurly, su alcance de cumplimiento de PCI se reduce drásticamente.

    Cuadrícula superpuesta responsiva para el desarrollo en el navegador
    La cuadrícula emergente es una cuadrícula superpuesta lanzada recientemente para el desarrollo en el navegador. Funciona con diseños de ancho fijo pero también funciona muy bien con cuadrículas responsivas. Simplemente especifique las unidades de página, las unidades de columna, el ancho de la página, el número de columnas, el ancho de la columna, el ancho del canal, el margen superior y la altura de la fila, y luego pegue el código de la cuadrícula emergente en el headelemento de su sitio web para generar la superposición de la cuadrícula.

     

    Has.js
    La biblioteca es similar a Modernizr, pero en lugar de probar las funciones HTML5/CSS3, prueba las funciones de JavaScript como: funciones de matrices, cadenas y objetos de ES5. Compatibilidad nativa con JSON. Compatibilidad con consola nativa. ActiveXNative XHR. Algunas características de eventos y DOM.

    grumble.js
    Esta biblioteca le permite crear información sobre herramientas que se puede girar alrededor de un elemento determinado en cualquier ángulo. Se puede especificar cualquier distancia. Se puede aplicar cualquier estilo CSS. Hay un ajuste de tamaño mágico automático para usar con texto localizado. Colas FX para animar múltiples quejas. Y funciona en IE6+ y en todos los navegadores modernos.

    testling: Prueba automatizada de JavaScript en varios navegadores
    Una plataforma de prueba automatizada de JavaScript en varios navegadores para su control de calidad.

    Instant WordPress
    Un entorno de desarrollo de WordPress portátil e independiente para Windows que puede ejecutarse desde USB.

    Pruebas de estrés y creación de perfiles de CSS
    Un bookmarklet para probar el estrés del CSS en cualquier página web determinada. Indexa todos los elementos y sus clases y luego, clase por clase, elimina uno y calcula el tiempo que lleva desplazarse por la página. Los selectores que ahorran una cantidad considerable de tiempo cuando se eliminan indican áreas problemáticas.

    Aguja: pruebas automatizadas para su CSS
    Esta herramienta verifica que CSS se represente correctamente tomando capturas de pantalla de partes de un sitio web y comparándolas con capturas de pantalla buenas conocidas. También proporciona herramientas para probar los valores CSS calculados y la posición de los elementos HTML.

    Último clic

    Experimentos de tipografía web de vanguardia
    El sitio web es esencialmente una colección continua de experimentos y escritos sobre tipografía web y las posibilidades del diseño web de vanguardia basado en estándares. Christopher está superando los límites de lo que es posible y práctico en los estándares web de una manera convincente y emocionante para los creativos con mentalidad visual.

    Font-Bot
    Es hora de que tu fuente favorita se mantenga firme. La idea de este proyecto es construir robots a partir de glifos tipográficos, exhibirlos y esperar que otros creen un oponente. Participar no es difícil, las reglas son claras: todos los Robots deben ser construidos solo del tipo (AZ). Puedes reflejar y rotar las letras. Mantenlo civilizado. Que gane el mejor robot. Veamos si tu diseño tipográfico tiene lo necesario para defender su esquina. ¡Luchar!

    Lights
    “Lights” es una experiencia musical interactiva creada con CSS, JavaScript y HTML5. Por eso amamos la Web.

    ¡Manténganse al tanto!

    Muy pronto habrá más publicaciones con herramientas y técnicas útiles aquí, en Smashing Magazine. Si quieres ser de los primeros en estar informado sobre las nuevas herramientas, recursos y técnicas, por favor

    • Síganos en Twitter ,
    • Hazte fan en Facebook ,
    • Suscríbete a nuestro boletín bimensual por correo electrónico .

    No te arrepentirás. Gracias.

    Gracias al equipo editorial de Smashing, especialmente a Christiane Rosenberger, Iris Ljesnjanin y Luca Degasperi por su ayuda en la preparación y edición de la publicación.

    Otras lecturas

    • Bibliotecas JavaScript útiles y complementos jQuery
    • Herramientas, bibliotecas y complementos útiles de JavaScript y jQuery
    • 50 herramientas y recursos útiles para diseñadores web
    • 50 poderosos ahorros de tiempo para diseñadores web

    (señor)Explora más en

    • Codificación
    • Herramientas
    • javascript





    Tal vez te puede interesar:

    1. 50 herramientas útiles de JavaScript
    2. 50 nuevas herramientas de JavaScript que mejorarán su flujo de trabajo
    3. Herramientas, bibliotecas y complementos útiles de JavaScript y jQuery
    4. Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

    35 herramientas de codificación útiles y bibliotecas de JavaScript para desarrolladores web

    35 herramientas de codificación útiles y bibliotecas de JavaScript para desarrolladores web

    SmashingConf Nueva York 2024 ¡Registro! Índice Herramientas útiles de codificación y flujo de trabajo

    programar

    es

    https://pseint.es/static/images/programar-35-herramientas-de-codificacion-utiles-y-bibliotecas-de-javascript-para-desarrolladores-web-785-0.jpg

    2024-04-04

     

    35 herramientas de codificación útiles y bibliotecas de JavaScript para desarrolladores web
    35 herramientas de codificación útiles y bibliotecas de JavaScript para desarrolladores web

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20