Origen del termino "bug"

 El origen del concepto "bug" data del 9 de septiembre de 1947 cuando Grace Murray Hopper, anotó en el cuaderno de errores: "primer caso de bicho que se encuentra".Durante aquellos días se había producido un error en el Mark II, y cuando los técnicos revisaron encontraron que un relé electromagnético se había atascado con culpa de una polilla… la famosa polilla pegada en el cuaderno de errores.

El Harvard Mark II fue un ordenador electromecánico construido en la Universidad de Harvard, bajo la dirección de Grace Hopper y Howard Aiken, se terminó en 1947. Fue financiado por la Marina de los Estados Unidos.

Pero esta historia, con el paso de los años, se ha ido deformando en cierta medida, ya que el término «bug» ya fue utilizado en 1878 por Thomas Alva Edison con el significado «error» en una carta que escribió a Theodore Puskas. Por lo tanto no procede adjudicar la invención de la palabra a «Amazing Grace», lo que podría proceder es adjudicar su primer uso en el campo de la informática.

Además también se le adjudicó a «Amazing Grace» el honor de haber encontrado el error y la polilla en el Mark II, algo desmentido por ella misma en varias ocasiones; fue algún técnico el que encontró el fallo y la polilla. Para retorcer un poco más esta historia, también se habla de que «Amazing Grace» no fue tampoco quien anotó la célebre frase en el cuaderno de errores y pegó la polilla en la hoja. Así que para los anales de la historia se le adjudicó a Grace este honor, pero esta sucesión de hechos no están tan claros como se cree.

De ahí nació el concepto "bug", y por inercia nació el concepto "debug" para nombrar el proceso de depuración de errores.

Esta historia sobre el concepto "bug"  está plagada de errores en Internet, en muchos lugares se afirma que la anotación en el cuaderno de errores es del 9 de septiembre de 1945, cuando el Harvard Mark II comienza a operar en el año 1947. En otros sitios web se llega a fechar el hecho en el año 1967… más alejado si cabe. Esto sumado a que en muchos sitios web se afirma con rotundidad la autoría de este concepto por parte de Grace Hopper, nos hace dudar de la fiabilidad de los datos que muchas veces son publicados en la gran red.

Plugins y extensiones de VSCode para desarrollo web

Un plugin o extensión te va a facilitar enormemente el escribir código porque estos te pueden marcar errores de sintaxis o pueden ayudar a que tu código se vea más estético en tu editor de código. Y estos pueden ser tus grandes aliados al tener que debuggear.

                                                auto close tag

Es una extensión para cuando trabajes con HTML, cuando escribas la apertura de una etiqueta esta se cerrará automáticamente. Esto te reducirá el tiempo al escribir la estructura de una página web.

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

auto rename tag

Es una extensión para HTML, funciona para cuando cambies el nombre de una etiqueta. Cambias el nombre de la de apertura y la etiqueta de cierre se cambia automáticamente.

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

babel javascript

Es una extensión para corregir la sintaxis cuando trabajes con React jsx flow y grapqL. Cuando tienes algún error de sintaxis de esas tecnologías estas te las marcara, pero no telas corregirán tù las tienes que corregir 

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel 

Bracket Pair Colorizer

Es una extensión te facilita identificar los Closures mostrando de diferentes colores los corchetes según corresponde uno con otro.

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Code Runner

Es una extenciòn para ejecutar còdigo de forma màs veloz solo tienes que seleccionar el còdigo que quieras ejecutar y tendràs la salida en la terminal de VSCode. Soporte los siguientes lenguajes: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less y Fortran.

Link de instalaciòn: 

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Debugger for Chrome

Es una extensiòn para implementar las DevTools de Chrome en VSCode y no tener que entrar al navegador.

Link de instalaciòn:

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

ESLint

ESLint es una herramienta para identificar e informar sobre patrones encontrados en código ECMAScript / JavaScript, con el objetivo de hacer que el código sea más consistente y evitar errores. ESLint usa un AST para evaluar patrones en el código.

Link de instalaciòn:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

GitHub Pull Requests and Issues

Es una extensiòn le permite revisar y administrar solicitudes de extracción de GitHub y problemas en Visual Studio Code.

Link de instalaciòn:

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

GitLens

Es una extensiòn para repositorios locales de git ver rápidamente a quién, por qué y cuándo se cambió una línea o un bloque de código. Retroceda a través de la historia para obtener más información sobre cómo y por qué evolucionó el código. Explore sin esfuerzo la historia y la evolución de una base de código.

Link de instalciòn:

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Highlight Matching Tag

Esta extensiòn muestra de diferente color cada tipo de etiqueta html. Opcionalmente, también muestra la ruta para etiquetar en la barra de estado. Aunque VSCode tiene algunas coincidencias de etiquetas básicas, es solo eso: básico. Esta extensión intentará hacer coincidir las etiquetas en cualquier lugar

Link de instalaciòn: 

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

html to JSX

Este plugin te ayuda a convertir HTML a Jsx para que sea compatible con react.JS. solo seleccionas el html que quieras convertir y el plugin lo hace automáticamente.

Link de instalación: 

https://marketplace.visualstudio.com/items?itemName=riazxrazor.html-to-jsx

indent-rainbow

 

Una extensión simple. Esta extensión colorea la sangría frente a su texto alternando cuatro colores diferentes en cada paso. A algunos les puede resultar útil escribir código para Nim o Python.

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

JavaScript (ES6) code snippets

Esta extensión contiene fragmentos de código para JavaScript en la sintaxis de ES6 (admite JavaScript y TypeScript). Nota Todos los fragmentos incluyen el punto y coma final;

los fragmentos de código es lo que son los snippets.

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

language-stylus

Si trabajas con el preprocesador de CSS stylus esta es una muy buena herramienta te da Finalización de selectores, propiedades, valores, variables, funciones, etc.

Vista previa de color y Resaltado de sintaxis

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus

Live Sass Compiler

Una extensión VSCode que le ayuda a compilar / transpilar sus archivos SASS / SCSS a archivos CSS en tiempo real con la recarga del navegador en vivo.

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

Live Server

Esta es una extensión para ver la UI de tú página web a alta velocidad porque lo que hace es abrir un puerto en tu computadora por la que puedes entrar desde tu navegador y se refresca cada vez que se cambia los archivos del proyecto

Link de instalación: 

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Material Icon Theme

Es una extensión para estética de los íconos de tus archivos,  según la extensión de los archivos del proyecto colocará automáticamente un icono del lenguaje con el que este trabaje.

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

NPM-Scripts

Esta extensión es para ver y ejecutar scripts de NPM desde la barra lateral sin tener que ira una terminal externa si no los ejecuta en la terminal de VSCode

Link de instalación: 

https://marketplace.visualstudio.com/items?itemName=traBpUkciP.vscode-npm-scripts

Prettier - Code formatter

Prettier es un formateador de código obstinado. Aplica un estilo coherente al analizar su código y volver a imprimirlo con sus propias reglas que tienen en cuenta la longitud máxima de línea, ajustando el código cuando es necesario. Soporta los lenguajes

JavaScript · TypeScript · Flow · JSX · JSON

CSS · SCSS · Less

HTML · Vue · Angular

GraphQL · Markdown · YAML

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React-Native/React/Redux snippets for es6/es7

Esta extensión le proporciona fragmentos de JavaScript y React / Redux en ES7 con funciones de complemento de Babel para VS Code. La documentación de los snippets están en el link de instalación

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

React.js with Flow Types code snippets

Esta extensión contiene fragmentos de código para React.js con soporte de tipo de flujo. Tiene soporte para JavaScript (.js) y JavaScript React (.jsx). Los snippets están en el link de instalación:

https://marketplace.visualstudio.com/items?itemName=lsadam0.ReactFlowSnippets

Settings Sync

Es una extensión para sincronizar las configuraciones de VSCode si tú quieres tu misma configuración y los mismos plugins de VSCode donde sea esta herramienta de ayuda haciendo un gist en tu GitHub y a partir de este se configura automáticamente.

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Synthwave x Fluoromachine

Si te gusta el neón es plugin es para ti, este plugin mostrara tu código con un degradado y en neón.

Link de instalación: 

https://marketplace.visualstudio.com/items?itemName=webrender.synthwave-x-fluoromachine

Remote - WSL

Es una extensión que te permite ejecutar un entorno Linux, incluidas herramientas y aplicaciones de línea de comandos, directamente en Windows, sin la sobrecarga de una máquina virtual tradicional o una configuración de arranque dual. 

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

WakaTime

Si eres alguien muy organizado y te gustan las métricas este plugin es para ti. WakaTime es un complemento VSCode de código abierto para métricas, conocimientos y seguimiento del tiempo generado automáticamente a partir de su actividad de programación. Te muestra exactamente cuanto tiempo has estado programando en cada lenguaje entre otras métricas.

Link de instalación:

https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime 

como empezar en el desarrollo web

Primero lo primero

Lo que tienes que entender antes de comenzar en desarrollo web es como es que funciona una página web aquí encontraras una introducción, pero te recomiendo investigar más a profundidad cada concepto que veas aquí y buscar más formas de explicar esto porque no solo hay una forma de aprender esto.

Analogía

Pensemos en una página como un restaurante, lo primero que tienes que saber de un restaurante para acudir a él es su dirección esto es un DNS este tiene un costo como por ejemplo youtube.com es un DNS este tiene que ser único en internet. luego una vez teniendo la dirección necesitas un transporte para llegar a él este es el navegador e internet viene siendo el medio por el que se va a mover.

Una vez llegaste al restaurante si está muy lleno te ponen en espera este son esos pocos segundos en lo que carga el sitio web. sí hay mucha gente y el restaurante está a su máximo es cuando se cae el sitio o se tiene un ataque de DDoS. Una vez que pasas te dan un menú una mesa, un diseño, etc. esto es el Frontend, cada vez que tú le pides un platillo son datos como tu avatar, tus correos, tu puntuación, etc.

El mesero que te toma las ordenes es una API que se podría expresar los pedidos como una llamada de tipo POST, cuando te traen la cuenta un GET y cuando pides algo más es un tipo PUT esta API se conecta con un backend este es la cocina del restaurante este tiene una bodega o refrigerador que sería una base de datos.

Las herramientas, el tipo de cocina, todas las características que tenga la cocina del restaurante seria DevOps. El tipo de cocina es el Sistema Operativo del servidor (Un servidor es lo mismo que una computadora solo que sin gráficos, lo único que tienes para interactuar es una línea de comandos)

Inicia tu carrera 

Ya sea que elijas Front-End, Back-End o DevOps. De igual forma necesitarás tener cierto conocimiento y aptitudes previas para triunfar en tu camino, acá te listo las más importantes.

El camino del front-end

El desarrollo web front-end es la práctica de producir HTML, CSS y JavaScript para un sitio web o aplicación web para que el usuario pueda ver e interactuar directamente con ellos. El desafío asociado con el desarrollo de front-end es que las herramientas y técnicas utilizadas para crear el front-end de un sitio web cambian constantemente y, por lo tanto, el desarrollador debe estar constantemente al tanto de cómo se desarrolla el campo.

El objetivo de diseñar un sitio es garantizar que cuando los usuarios abren el sitio, vean la información en un formato relevante y fácil de leer. Esto se complica aún más por el hecho de que los usuarios ahora usan una gran variedad de dispositivos con diferentes tamaños de pantalla y resoluciones, lo que obliga al diseñador a tener en cuenta estos aspectos al diseñar el sitio.

Deben asegurarse de que su sitio se vea correctamente en diferentes navegadores, diferentes sistemas operativos y diferentes dispositivos, lo que requiere una planificación cuidadosa por parte del desarrollador.

El camino de back-end

El Back-End, o el “lado del servidor”, es básicamente cómo funciona el sitio, las actualizaciones y los cambios. Esto se refiere a todo lo que el usuario no puede ver en el navegador, como bases de datos y servidores. Por lo general, las personas que trabajan en el Back-End se llaman programadores o desarrolladores. Los desarrolladores Back-End están más preocupados por cosas como seguridad, estructura y administración de contenido.

Usualmente saben y pueden usar lenguajes como HTML y CSS, pero definitivamente no es su enfoque. Los desarrolladores de Back-End, o al menos desarrollo de Back-End, son necesarios para crear un sitio dinámico. Un sitio dinámico es un sitio que cambia constantemente y se actualiza en tiempo real. La mayoría de los sitios son sitios dinámicos, a diferencia de los sitios estáticos.

El Back-End “tradicional” es una combinación del servidor, las bases de datos, las APIs y los sistemas operativos que hacen funcionar el Front-End en una aplicación o página web.

El camino de DevOps

DevOps constituye una combinación de filosofías culturales, prácticas y herramientas que incrementan la capacidad de una organización de proporcionar aplicaciones y servicios a gran velocidad: desarrollar y mejorar productos con mayor rapidez que las organizaciones que utilizan procesos tradicionales de desarrollo de software y administración de la infraestructura. Esta velocidad permite a las organizaciones servir mejor a sus clientes y competir de forma más eficaz en el mercado.

Bajo un modelo de operaciones de desarrollo, los equipos de desarrollo y operaciones ya no están “aislados”. A veces, los dos equipos se fusionan en uno solo, donde los ingenieros trabajan en todo el ciclo de vida de la aplicación, desde el desarrollo y las pruebas hasta la implementación y las operaciones, y desarrollan una variedad de habilidades no limitadas a una única función.

Los equipos de control de calidad y de seguridad también se integran más con el desarrollo y las operaciones e intervienen durante todo el ciclo de vida de la aplicación.

Los equipos utilizan prácticas para automatizar los procesos que anteriormente habían sido manuales y lentos. Utilizan una pila de tecnología y herramientas que les ayudan a operar y mejorar aplicaciones de forma rápida y fiable. Además, estas herramientas también ayudan a los ingenieros a realizar de forma independiente tareas que normalmente hubieran requerido la ayuda de otros equipos (por ejemplo, implementar código o aprovisionar infraestructura), incrementando así todavía más la velocidad del equipo.

Lo nuevo del nuevo framework Svelte.JS

 ¿Que es Svelte.JS?

Svelte es un Framework de JavaScript de front-end gratuito, de código abierto, reactivo, basado en componentes que utiliza un paso de compilación al momento de realizar cambios en el DOM (Document Object Model) y creado por Rich Harris y mantenido por Harris y otros miembros del equipo central de Svelte. Svelte quiere ser el framework que en realidad no es un framework; es básicamente una herramienta para compilar componentes el momento de la construcción (build), permitiéndote cargar un único bundle.js en tu página para renderizar la aplicación. Esto significa que no hay DOM virtual, ni frameworks encima de frameworks, no framework que cargar en tiempo de ejecución.

Sapper disponible

De manera opcional puedes utilizar Sapper, un paquete que cuenta con todo lo necesario para las exigencias del mercado actual: soporte offline, renderización de vistas desde el servidor e hidratadas desde el cliente y routing, entre otros. Lo mejor de todo es que esto ocurre utilizan un mínimo tamaño, ya que esta herramienta optimiza y complia solo el Javascript necesario – tal como lo hace Svelte.

Sin virtual DOM

A diferencia de Vue, React y Angular, Svelte no trabaja con un virtual DOM. Esto se traduce en dos asuntos muy claros e interconectados: por una parte, el cliente no debe lidiar con él; y por otra, permite una mejor performance del framework.

Sin Typescript

Por el momento Svelte no ha incorporado Typescript a su sistema, por lo que no podrás beneficiarte de sus facilidades para la programación orientadas a objetos y, en cambio, deberás hacerlo con js puro.

Cabe señalar que Typescript es un excelente aliado para la creación de código escalable, ágil y de calidad para interfaces, sobre todo cuando tienes entre manos un proyecto de gran tamaño que supone la participación de muchos programadores web.

¿En qué casos resulta más conveniente Svelte?

Con su enfoque extremadamente simplificado, Svelte permite extender un gran abanico de aplicaciones web. Mientras que con React prácticamente todo el script debe determinarse desde el principio, Svelte permite añadir extensiones posteriormente sin ningún problema y sin poner en riesgo la estabilidad y el rendimiento de la aplicación. De esta manera, Svelte resulta una herramienta ideal tanto para desarrollar aplicaciones nuevas como para aumentar el rendimiento de las estructuras existentes. Los desarrolladores de SvelteJS se dirigen sobre todo a los principiantes en programación de aplicaciones y ofrecen kits de introducción con los que se pueden lograr resultados muy rápidamente. Obviamente, el uso de SvelteJS también requiere tener ciertos conocimientos previos, especialmente de CSS y JavaScript. En todo caso, la estructura ligera del framework Svelte facilita a las personas sin experiencia abrirse camino en el ámbito de la programación.

¿Que es React.JS?

Según Google ¿qué es React.JS? Es: "React es una biblioteca JavaScript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Es mantenido por Facebook y la comunidad de software libre. Han participado en el proyecto más de mil desarrolladores diferentes." 

Esa es la definición resumida y fácil de entender, ahora vamos a más profundidad. Lo primero que NO dice la definición, es que se utiliza en frontend que es la parte visual de una página web.

¿Qué es una Librería de JS?

una biblioteca JavaScript lo que significa es un paquete con Código prescrito en el lenguaje JavaScript para que sea más fácil desarrollar tus aplicaciones, AJAX está centrado en la web y React lo usa.

 

¿Qué es el open source?

"Open Source" o Código abierto quiere decir que cualquier persona puede colaborar, normalmente es para resolver problemas que contenga el código. La forma en que trabaja react el diseño de interfaces es con lo que se llama JXS produce “Componentes” de React renderizados en el DOM que son HTML en JavaScript. React no requiere usar JSX, pero la mayoría de la gente lo encuentra útil como ayuda visual cuando trabajan con interfaz de usuario dentro del código JavaScript. Esto también permite que React muestre mensajes de error o advertencia más útiles. Dentro del diseño de interfaces está el Virtual DOM.

¿Qué es el DOM virtual?

El DOM virtual (VDOM) es un concepto de programación donde una representación ideal o “virtual” de la IU se mantiene en memoria y en sincronía con el DOM “real”, mediante una biblioteca como ReactDOM. Este proceso se conoce como reconciliación.

Este enfoque hace posible la API declarativa de React: le dices a React en qué estado quieres que esté la IU, y se hará cargo de llevar el DOM a ese estado. Esto comprime la manipulación de atributos, manejo de eventos y actualización manual del DOM que de otra manera tendrías que usar para construir tu aplicación.

Ya que “DOM virtual” es más un patrón que una tecnología específica, las personas a veces le dan significados diferentes. En el mundo de React, el término “DOM virtual” es normalmente asociado con elementos de React ya que son objetos representando la interfaz de usuario. Sin embargo, React también usa objetos internos llamados “fibers” para mantener información adicional acerca del árbol de componentes. Éstos pueden ser también considerados como parte de la implementación de “DOM virtual” de React.

 

PARA consultar la documentación: https://reactjs.org/

 

Cualquier duda o sugerencia ponlo dentro de los cometarios