¿Cuáles son algunas herramientas que todo desarrollador web debería tener en su caja de herramientas?

• Sentido común . No busque una solución a su problema y copie / pegue en el primer fragmento de código que vea. W3 Schools y Stack Overflow no son un sustituto de las habilidades de pensamiento crítico.
• Libros . Un montón de libros. Nunca dejes de aprender sobre la evolución de la web. O’Reilly tiene una gran oferta de temas de desarrollo web. Compra muchos libros de ellos; Gano una comisión.
• Paciencia Algunas personas dicen que se necesitan 10.000 horas para dominar una habilidad. En cualquier caso, un proyecto weekender jQuery no te convertirá en un ninja de JavaScript para el lunes. Conozca sus debilidades y trate de absorber el conocimiento de cualquier manera posible. Cualquiera que haya disputado un error de formato de IE sabe lo importante que puede ser la paciencia.

1. Un IDE (si va a hacer principalmente HTML y CSS, omita este, de lo contrario, un IDE lo ayudará mucho). Algunas buenas opciones: WebStorm: el IDE de JavaScript más inteligente, NetBeans, PhpStorm IDE.
2. Un editor de texto : es con el que pasarás más tiempo, así que elige el que más te guste. Algunas buenas opciones para desarrolladores web:

1. Atom: es un editor de texto increíble que puede personalizar de la manera que desee, tiene un buen resaltado de sintaxis, es gratis y proviene de los chicos de GitHub. Lo mejor de Atom es que la cantidad de paquetes disponibles para instalar es muy grande, por lo que puede hacer que se comporte de la manera que desee. El único inconveniente es que puede reducir la velocidad.
2. Visual Studio Code – Edición de código. Redefinido: VSCode (el editor que uso) es increíble, puede ejecutarse en Linux, MacOS y Windows, recibe actualizaciones cada mes, es muy estable, rápido y gratis. Su integración con Git es muy buena, aunque prefiero la de Atom.
3. Brackets: un editor de código fuente moderno y abierto que comprende el diseño web: si usted es un desarrollador front-end , entonces este es su editor . Brackets es increíble para HTML y CSS, es liviano y sus características como Edición rápida, Vista previa en vivo y las extensiones lo hacen aún mejor. Un gran editor de los chicos de Adobe.

1. Navegador web Chrome La única razón por la que prefiero Chrome en lugar de Firefox, es porque Chrome le permite editar el JavaScript desde las herramientas de desarrollador sin necesidad de cambiarlo en su editor de texto y volver a cargar la página. Muy rápido (a costa de su RAM), muchas extensiones, herramientas de desarrollador simples y ordenadas.
2. Firefox Developer Edition: la que uso, puedo instalar todas las extensiones que necesito y nunca he tenido un problema con ella.
3. Descargar Blisk, un navegador para desarrolladores web: parece una buena opción, sin embargo, no la uso, ya que no está en Linux, y debes pagar por algunas características.

Aquí tienes, hay otras herramientas que necesitarás en el camino, pero las encontrarás de acuerdo a tus necesidades. Estos son los básicos y le ayudarán a comenzar muy rápidamente.

Herramientas de desarrollo web

Al ser un desarrollador web, lidiar con los errores en su código es una de las cosas más irritantes y resolverlos sin el uso de las últimas herramientas lo hace aún peor. Las nuevas técnicas de desarrollo web que puede aplicar a su sitio web existente solo son posibles mediante el uso de algunas herramientas más recientes que respaldan el desarrollo de estas tecnologías con bastante facilidad. Esto es importante porque el mundo de la tecnología digital se está moviendo a un ritmo muy antiguo y los sitios web deben estar actualizados para que puedan resistir el nivel de competencia que tienen que enfrentar y proporcionar a sus usuarios lo mejor disponible en la web. Por lo tanto, es su responsabilidad asegurarse de que sus sitios web hagan exactamente eso.

Las herramientas de desarrollo web son muy útiles en el desarrollo de los sitios web. El mercado de desarrollo está lleno de este tipo de herramientas. Son de diferentes tipos, como complementos y complementos del navegador, que pueden ayudarlo a crear un sitio web bastante avanzado y dinámico. Estas herramientas hacen que su trabajo sea más productivo y, por lo tanto, más rápido. Junto con esto, mejoran su conocimiento y le dan acceso a las últimas técnicas. Las últimas actualizaciones de la mayoría de los navegadores tienen herramientas de desarrollo web integradas, pero sigue siendo útil para monitorear la experiencia del usuario de sus sitios web, rastrear el rendimiento de sus sitios web y ser creativo con lo que puede hacer con la web.

Ahora es muy posible que ya esté utilizando algunos soportes proporcionados por navegadores como Google Chrome. Pero eso no es suficiente. Hoy en día, los sitios web necesitan que responda a varios dispositivos y deben tener un mayor mecanismo de seguridad. Por lo tanto, se ha vuelto necesario crear y depurar sitios web utilizando algunas de las últimas herramientas de desarrollo web. Conocer sus características y cómo pueden ayudarlo será valioso.

Utilizamos Bugherd en Mindstick Softwares.

“Bugherd” es una de esas herramientas de desarrollo. Proporciona una forma mejor y ordenada de manejar comentarios, correcciones de errores y solicitudes de funciones. Un simple .js incluye y los visitantes del sitio obtienen un botón de comentarios. Los invitados al proyecto pueden presentar errores y solicitudes, los miembros pueden administrar todo el shebang desde una interfaz amigable e intuitiva. Todo esto ayuda a los desarrolladores a corregir los errores fácilmente y a crear un sitio web más limpio.

Otra herramienta de desarrollo web de este tipo es ” http://Proto.io “. Es una buena herramienta de creación de prototipos que permite a los desarrolladores levantarse y ejecutar rápidamente el proceso de desarrollo. Maneja todos los gestos táctiles que el desarrollador quiere, aborda las animaciones y permite compartir y comentar. Es bastante fácil de usar con una accesibilidad fluida y, además, hay un plan gratuito disponible. Del mismo modo, hay muchas más herramientas de este tipo que ayudan a los desarrolladores a desarrollar sitios web. Por lo tanto, sería bueno para cualquiera que desarrolle sitios web usarlos.

Algunas herramientas que puede necesitar como desarrollador web incluyen ”

01. Calorías del navegador

En un momento en el que más de nosotros estamos navegando más en una conexión móvil débil que nunca antes, como diseñadores y desarrolladores debemos estar atentos a los pesos de nuestras páginas. Esta extensión del navegador coloca un ícono junto a la barra de direcciones que, cuando se hace clic, le permite saber el peso de la página de lo que esté mirando, desglosado por recurso si lo desea.

02. Código de Visual Studio

Un editor de código abierto y gratuito de Microsoft que se ejecuta en cualquier lugar y tiene muchas funciones inteligentes para hacer que la codificación sea más rápida y fácil. Comandos Git integrados, depurador y mucho más.

03. Firebug

De los desarrolladores de Firefox, el complemento Firebug increíblemente útil le permite depurar, editar y monitorear HTML, JavaScript y CSS en vivo, todo en el navegador. Una de las mejores herramientas de desarrollo web que existen, es imprescindible para cualquier persona que trabaje en el desarrollo web.

04. Búsqueda de caracteres de entidad HTML

La búsqueda de caracteres de entidad HTML lo ayuda a garantizar que todos los caracteres de su página estén validados

El uso de entidades HTML es esencial para garantizar que todos los caracteres de su página estén validados. Sin embargo, a menudo encontrar el código de entidad correcto requiere escanear a través de 250 filas de caracteres. También está disponible como un widget en el Panel de Mac.

05. -prefix-free

Esta herramienta genial de Lea Verou te permite usar propiedades CSS no prefijadas. Básicamente funciona detrás de escena, agregando el prefijo actual del navegador a cualquier código CSS, solo cuando es necesario.

Puede obtener más información sobre estos al unirse a nuestra buena escuela de programación llamada Holberton School y aprender más sobre las herramientas que puede utilizar para su ventaja como desarrollador web. Buena suerte.

En ningún orden en particular:

• Un comprobador de enlaces: me gusta Xenu’s Link Sleuth.
• Buenos complementos Sass y CoffeeScript para sus scripts IDE / build.
• Un buen IDE, como Dreamweaver, WebMatrix, Eclipse o Visual Studio.
• Firebug para depuración frontal.
• Un buen editor de texto, como http://notepad-plus-plus.org/ .
• Una herramienta para evaluar y mejorar los tiempos de descarga, como YSlow.
• Un depurador HTTP, soy aficionado a Fiddler.
• Las últimas versiones de IE, Chrome, Firefox y Safari.
• Una herramienta de prueba automatizada, como Selenium.
• Control de versiones: Subversion y Git son bastante estándar.
• Varios dispositivos (teléfonos, tabletas) para pruebas.
• Bibliotecas de desarrollo web comunes como jQuery, Backbone.js, Bootstrap, etc.
• Entrenamiento premium y materiales de referencia. Mi equipo se suscribe a Lynda.com, por ejemplo, y también estamos pensando en Pluralsight.

Hago mi desarrollo web en una Mac, por lo que estas respuestas estarán orientadas a eso.

TextMate 2 – El editor que falta para Mac OS X
Un entorno de desarrollo sólido es imprescindible para cualquiera que intente desarrollar para la web. Sin embargo, prefiero un enfoque minimalista para esta pieza en particular. Siempre encuentro que la mayoría de los IDE con funciones completas agregan demasiada sobrecarga al proyecto. He estado usando TextMate durante años y me encanta lo liviano y simple que es.

MAMP Pro: Mac de pila local de múltiples entornos , Apache, MySQL, PHP
Las Mac vienen con sus propios servidores Apache, PHP y MySQL, pero MAMP es una gran herramienta para administrar fácilmente múltiples entornos locales.

Cartero – Cliente REST

Cuando se realizan pruebas de API o pruebas de envío de formularios, un buen cliente REST es invaluable. Hace que el envío de solicitudes HTTP sea simple, automatizado e incluso fácil de compartir con otros.

Proxy de depuración web Charles – Monitor HTTP
En caso de que alguna vez necesite profundizar en la información que su navegador está enviando y recibiendo, Charles actúa como un proxy que monitorea todo el tráfico entre su navegador y la web. Lo que hace que Charles sea realmente poderoso es la capacidad de grabar y reproducir solicitudes fácilmente.

Google Chrome: navegador web y desarrollo front-end
Desafortunadamente, es imposible hacer pruebas de compatibilidad entre navegadores con un solo navegador, pero para mi uso diario y desarrollo, Google Chrome es mi navegador de acceso. Developer Tools es una de las mejores consolas de depuración que he usado.

BrowserStack – Prueba de compatibilidad cruzada del navegador
Muchas veces descubrirá que necesita realizar pruebas de compatibilidad en un sistema operativo o versión de navegador que no haya instalado. Ahí es donde entra http://browserstack.com . Pruebe en tiempo real desde IE6 hasta iOS Safari.

GitHub – Repositorio de código y control de versiones
Si alguna vez perdió un archivo accidentalmente, sabe lo frustrante que es tener que volver a crearlo. GitHub ofrece una manera excelente y fácil no solo de hacer una copia de seguridad de los archivos, sino también de practicar el control de versiones y compartir código con otros desarrolladores.

Tener y usar un rastreador de errores o una herramienta de gestión de proyectos. Incluso si usted es un hombre soltero, definitivamente necesita una forma de estructurar proyectos de larga duración.

Hay muchas alternativas, pagas o gratuitas: mis favoritos particulares son:

• Trac
• Redmine
• Campamento base
• Jira
• A tiempo

Deje que sus clientes echen un vistazo a su rastreador de errores. De esa forma, 1) ven el progreso y 2) comienzan a ser más específicos cuando informan nuevos requisitos.

Para el control de calidad, recomendaría agregar Usersnap a esos rastreadores de errores para obtener capturas de pantalla anotadas directamente adjuntas a sus tickets.

Divulgación completa: soy CTO y cofundador de Usersnap, pero esta opinión se caracteriza por mi trabajo anterior en agencias web.

• La capacidad de hacer una búsqueda avanzada en Google

Debería poder encontrar los recursos que necesita para finalizar cualquier proyecto, ya sean imágenes, ayuda con un error o algún software que lo haga más eficiente.

• Un buen editor de texto.

Notepad ++ no es un buen editor para desarrollo web. Atom y Sublime Text son excelentes porque te ayudan con tu código y hacen algunas verificaciones básicas del código.

• Habilidades organizativas

Todas sus cosas para un proyecto de desarrollo web deben estar en un solo lugar. No importa si usa Dropbox o una unidad flash siempre que pueda encontrar rápidamente lo que necesita. También debe usar algún tipo de repositorio de código como Git en caso de que algo loco le ocurra a su código actual.

• Habilidades de depuración extraordinarias

No importa cuánto tiempo haya estado codificando. Eventualmente tendrá un comportamiento inesperado en su código y necesitará saber cómo encontrarlo. Póngase cómodo con las herramientas de desarrollador en su navegador preferido y asegúrese de que su IDE tenga algún tipo de configuración de depurador.

Si lo que quieres es un arsenal, entonces podrías hacer mucho peor que echar un vistazo: ToolBox: Herramientas útiles para diseñadores web y SEO – The Portable Entrepreneur

Siempre habrá algunas características personalizables u opcionales para usar como desarrollador web, pero cubrir los conceptos básicos es esencial y muy simple: no puedo enfatizar cuánto me ha ayudado el enlace anterior.

Por ejemplo, la caja de herramientas vinculada tiene recomendaciones fantásticas sobre:

• Crear un sitio web sin codificación (WordPress, Joomla, etc.)
• Hospedar sus sitios (HostGator, etc.)
• Herramientas de SEO (MySiteAuditor, SEMrush, etc.)
• Rastreadores de tráfico (Google Analytics, etc.)

Tengo que decir que Analytics es mi herramienta favorita. Algo sobre esos números es realmente satisfactorio.

¿La mejor parte? La caja de herramientas se actualiza a medida que prueban nuevas herramientas y las ponen a prueba. En serio, marcadoreshttp: //www.portableentrepreneur…. y comprobarlo de vez en cuando es un salvavidas. 😉

¡Espero eso ayude!

Google Chrome o Firebug para Firefox (Chrome preferido), un buen editor como Eclipse, Kate, Textpad o Notepad ++ o webstorm, conocimiento en jquery y un marco de trabajo de alto nivel como prototype.js, ember.js o ext.js, una biblioteca para desarrollo rápido de UI como bootstrap.js, buen conocimiento de OO o desarrollo orientado a prototipos en js (no puedo pensar en un sitio web que lo enseñe), …

GitHub (Construya software mejor, juntos) – para la gestión de código;
Dropbox / Droplr: para compartir activos gráficos, maquetas de UI, documentos, capturas de pantalla, videos, volcados de bases de datos;
Balsamiq. – para crear maquetas;
la lista completa está aquí – Pila de gestión de proyectos.

En cuanto a un kit de desarrollo, si eres un chico PHP, probablemente encuentres útil esta pila de desarrollo.

1. Un buen editor de texto : (Trabajo con texto sublime o código de Visual Studio pero hay otros buenos).
2. Varios navegadores (solo para asegurarse de que su código funciona bien en todas las plataformas)
3. Aprende a usar Git . Te salvará la vida algún día.
4. Familiarícese con las herramientas de desarrollo de su navegador
5. Siempre tenga a mano una botella de coca cola.

Freeter.io. Es una herramienta de productividad que le permite recopilar todo lo que necesita para trabajar en su (s) proyecto (s) en un solo lugar. Todo se agrupa por proyectos y flujos de trabajo, y se puede acceder en un segundo con una simple tecla Ctrl (o Cmd ) + Shift + F. Le ayuda a mantenerse enfocado en un proyecto / flujo de trabajo específico y cambiar fácilmente entre ellos.

Aquí hay un panel de ejemplo para un flujo de trabajo de desarrollo web para darle algunas ideas de cómo se puede usar:

Freeter tiene múltiples widgets que le permiten incrustar varias cosas útiles en sus paneles: botones para abrir archivos / carpetas de proyectos con herramientas de edición, botones para ejecutar líneas de comando, exploradores de archivos, editores de notas, listas de tareas, sus aplicaciones / herramientas web favoritas. Puede obtener algunas ideas sobre cómo incorporar las características de las aplicaciones web aquí: incrustar aplicaciones web.

Disponible para Windows, Mac OS y Linux.

Existen las herramientas que todo desarrollador web debería tener en su caja de herramientas, como el tostador de plantillas de software de diseño web. Es un generador de temas de WordPress, software de diseño web y generador de plantillas de Joomla, que diseña temas totalmente adaptables y de alta calidad con tecnología bootstrap en menor tiempo para todos los principales CMS. También diseña plantillas completamente receptivas para blogger. Sus características como compatibilidad con bootstrap 3, compatibilidad con varios navegadores y CMS, diseño de compatibilidad para diferentes dispositivos, áreas de widgets personalizados, etc. lo hacen mejor que otro software.

Yo uso un mac y los encuentro increíbles.

1) Dash: kapeli.com/ – este es un visor de documentación fuera de línea para muchos frameworks y bibliotecas. Si sigues mirando la documentación mientras trabajas, esta es increíble.

2) Texto sublime: editor de texto.

3) Alfred – Más de una herramienta de utilidad.

4) Iterm – Aplicación de terminal.

5) Oh My zsh – zshell para el terminal.

6) Yoeman – generador de tareas de línea de comando js.

Estos son algunos que puedo pensar en este momento.

Aquí hay una publicación de blog que puede ser de su interés. Enumera las 5 herramientas esenciales para un desarrollador web:

http://blog.openclassrooms.com/e …

Firebug se convirtió en una herramienta indispensable en mis actividades de diseño web. Es un complemento del navegador (Firefox, Chrome), que le permite inspeccionar HTML y modificar el diseño de estilo en tiempo real. Solo puedo aconsejarlo a cualquiera que quiera tomarse en serio el diseño web.

Firebug

Las mejores herramientas que todos los desarrolladores web principiantes deberían conocer y a las que deberían acostumbrarse. – Aprender pasos

Este artículo habla sobre la Búsqueda de Google, Git, vim, bash y más herramientas similares.

Hoy en día, dependemos más que nunca de la web para la mayoría de nuestras actividades cotidianas, incluidas las compras, el pago de facturas de servicios públicos, la banca, la reserva de boletos, etc. Por lo tanto, la necesidad de desarrollo de sitios web aumenta día a día y, por lo tanto, una empresa de diseño y desarrollo web debe estar al tanto de las últimas tendencias para cumplir con las expectativas del público experto en tecnología de hoy. Deben estar familiarizados con las tecnologías emergentes y poder incorporarlas en su sitio web para que pueda mantenerse a la moda y servir mejor a sus clientes. Echemos un vistazo a las tecnologías actuales que se utilizan para diseñar los sitios web más buscados: Desarrollo web avanzado con herramientas y tecnologías modernas