Javascript es el lenguaje de la web. Es un lenguaje de scripting que puedes usarlo en cualquier entorno desde aplicaciones web, móviles, aplicaciones de servidor e incluso aplicaciones de escritorio.

Curso para principiantes (Javascript del Navegador)

Javascript

En este curso de Javascript FullStack, vamos a crear una aplicacion entera usando Nodejs, Mongodb, Javascript del navegador, REST API, webpack y otras tecnologías más.

Aplicación Frontend y Backend en JS

Javascript FullStack

Nodejs es un entorno de ejecucion que permite a Javascript ejecutarse fuera del navegador permitiendo crear aplicaciones web backend, aplicaciones de Escritorio, aplicaciones Móviles e incluso Robots

Entorno de Ejecución de Javascript

Nodejs

Typescript es el Lenguaje de programación que añade tipos de datos a Javascrit, es fuertemente tipidao y orientado a objetos, como Java, C#, o C++. Pero con el objetivo de crear aplicaciones web

Lenguaje Superconjunto de Javascript

Typescript

Python es un lenguaje de programación que te permite crear desde aplicaciones web, aplicaciones de escritorio, aplicaciones cientificas, aplicaciones de ciencia de datos, hacking, hardware y más

Python para principiantes

Python

En este video vamos a aprender acerca de Next.js, un framework de React que nos permite poder crear aplicaciones web dinamicas combinando conceptos del backend y frontend de una manera integrada.

Framework de React SSR y más

Nextjs

Git es un sistema de control de versiones, que permite administrar la complejidad de tu proyecto a través del tiempo, y el trabajo simultaneo de múltiples desarrolladores, ademas de ser Open Source.

Sistema de Control de Versiones

El Stack MERN permite crear las Single Page Application o Aplicaciones de una sola página utilizando a Reactjs como tecnología del Frontend y Nodejs, Mongodb, y express como Tecnologías Backend.

Mongodb, Express, React, Node

MERN Stack, Ejemplo Práctico

Aprende los conceptos Básicos de Javascript que son necesarios para poder empezar a aprender React cómodamente. Este es un tutorial de repaso antes que empieces con esta biblioteca de desarrollo UI

React

Javascript para React

React es un biblioteca de JavaScript, para crear interfaces de usuario de aplicaciones web y aplicaciones móviles, además utiliza versiones modernas de JavaScript, EcmaScript y buenas practicas.

Biblioteca UI de Javascript

<p>Cuando cree mi sitio web personal llamado <a href="http://faztweb.com">faztweb.com</a>&nbsp;hace ya varios años, este inicialmente estaba conformado por un simple texto, con una imagen de fondo y algunos enlaces sociales. Pero actualmente este sitio cuenta con una REST API, un frontend compuesto por multiples páginas (<i>Multi-Page Application</i>) y muchas ideas (aplicaciones móviles y comunidades) que por una mala administración de mi tiempo, no he podido terminar lamentablemente.</p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-KD_3Mjhy-Eo/YNFVL-n15rI/AAAAAAAAAPo/-nqFNu_-ADAebYEbJEGjNfOSV0En1rQsACNcBGAsYHQ/s1024/faztweb-blog-1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="512" data-original-width="1024" height="200" src="https://1.bp.blogspot.com/-KD_3Mjhy-Eo/YNFVL-n15rI/AAAAAAAAAPo/-nqFNu_-ADAebYEbJEGjNfOSV0En1rQsACNcBGAsYHQ/w400-h200/faztweb-blog-1.jpg" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">FaztWeb.com</td></tr></tbody></table><p>Bueno, eso fue así hasta el día de hoy, en el que me he encontrado en la situación de tener que actualizar mi sitio web, y aunque no es algo que da para poder hablar mucho, creo que como mínimo me permite comentarles un poco de como trabajo en mi día a día y como me he visto forzado a tener que actualizar mi web.</p><p>Veran, una de las razones por las que no puedo darme el tiempo de poder hacer todo (crear videos, atender redes sociales, llevar proyectos, responder correos y mejorar mi web), es porque muchos de los proyectos de software que llevo actualmente, consumen mucho tiempo, tanto en desarrollo y aprendizaje. Esto me lleva a que, a diario cuando trabajo, debido a la enorme cantidad de tareas que debo realizar, me veo forzado en desarrollar varios proyectos a la vez, como forma de no aburrirme y para luego no preocuparme de que no estoy avazando lo suficiente. Es decir, en la práctica uso dos computadores, cada uno conectado a distintos servidores y abriendo varios proyectos a la vez, además de contar con un software personal que me ayuda a recordar mis tareas; todo esto con el fin de que mi trabajo sea divertido y poder ir liberandome de carga. Esto es simple para mi, pero juego con un riesgo; el riesgo de que cuando me equivoque si no estoy lo suficientemente concentrado no podre enteder al momento que hice mal. Es decir el llevar un solo proyecto ya es cuestion de prestar atencion, imagina ir avanzando con varios de esos al mismo tiempo.</p><p>Y Por si te lo preguntas, no es que avance con una mano en cada teclado, sino es que en lo personal prefiero dejar ejecutando alguna tarea en un computador, y cambio a otro computador, para ir desarrollando, mientras un programa que tengo me va listando las tareas que ya habia apuntado previamente. es un metodo personal que uso para tratar de disminuir esos pequeños lapsos de tiempo en el que se tiene que esperar a a que algo termine para continuar. no es perfecto, pero es mejor a tener que esperar y demorarme una eternidad en crear varios proyectos. A futuro espero optimizar mejor esto con algun tipo de asistente inteligente, pero por ahora estoy tan ocupado, que eso solo seria más trabajo, ironicamente.</p><p>Pero relacionado a esto de que <i>"existe mas riesgo de que me equivoque"</i> fue lo que me paso el día de ayer con mi web. El día de ayer Mientras estaba desplegando y configurando el cluster de una aplicación de un cliente, y actualizando el codigo de otro, recordé que habia pasado muchos meses desde la última vez que actualicé <a href="http://faztweb.com">faztweb.com</a>, asi que tuve la mala idea de conectarmente al servidor e intentar actualizar el sistema y el proyecto, además de cambiar algunas configuraciones.</p><p>El proyecto actual de faztweb es un proyecto simple, pero que debido a que no es una prioridad para mi, es difícil tener en mente en que parte del código me quedé. Y a pesar de que intento documentar un poco el proyecto, aun así es algo tedioso de mejorar para mi, sobretodo porque usa tecnologías que no son herramientas que me den muchas ganas de <i>codear </i>y es código que se ha ido incrementando en tamaño pero no en calidad durante bastante tiempo<i>. </i>Es decir, el proyecto&nbsp;que han visto durante mucho tiempo es una MPA, un sitio web dinamico con multiples páginas que hace uso de Express, Nodejs, Handlebars, Mongodb, Redis, Nginx, Docker, PM2, y cuenta con una REST API, APIs de terceros e incluso su propia API de GraphQL internamente. Es decir paso de ser una simple página HTML a un pequeño CMS personal, a medida que transcurrio el tiempo, todo porque me lo tome como un hobby.</p><p>Tenia muy buenas ideas con este proyecto, pero debido a que soy una sola persona y como ya les comenté faztweb.com no era una de mis prioridades, no he podido llegar a concluir muchas ideas. Y aunque inicialmente trate de trabajar con otras personas, el simple hecho de que muchas de ellas les interese mas el sueldo que el proyecto me motiva aún mas a hacerlo solo. de esta manera el proyecto, algun día se podra convertir en <i>algo más</i> y no puramente en un negocio. esto me gustaria hablarlo en otro post, o porque no, hasta en un video, pero para dejarlo claro, hasta este momento no encuentro a muchas personas que realmente les guste hacer su trabajo, sino personas que les gusta mas el incentivo, que el propio trabajo. Y de nuevo no quisiera convertir faztweb en una aplicación de venta de cursos especificamente, me gustaria mantenerlo como mi juguete personal por ahora.</p><p>Bueno volviendo al tema, el proyecto de Faztweb esta conformado por varios servidores, uno de producción para el frontend, otro de la base de datos, y otro para hacer pruebas. Algo bastante típico en desarrollo, y aunque no parezca nada complicado de administrar por separado. En fin, ayer intenté conectarme al servidor del Frontend de faztweb, pero el inconveniente que tuve, es que debido a que cambié de computador hace algunos meses atras, el nuevo PC no tenía acceso al servidor al no poseer esta la llave publica SSH, así que tuve que solicitar acceso al servidor a traves de una contraseña, y usar la consola del provedor de servicio que en mi caso es digitalocean para poder volver a entrar; que por si no lo sabian el añadir una clave ssh desde aqui es algo tedioso, porque no puedes copiar y pegar simplemente, sino que tienes que subir tu llave publica SSH a algun lugar, descargarlo dentro del servidor, cambiar la configuración del servidor SSH, clonarla a un nuevo usuario, y hacer otras pequeñas, pero molestas tareas más.</p><p>En fin un proceso que si te enfocas en esto nada mas, te puede tomar algunos minutos. Sin embargo, en mi caso mientras hacia esto, estaba obteniendo algunos errores en otra aplicación de mis clientes, y al estar enfocado en estos, cambie casi sin pensar, a la consola de faztweb, y&nbsp;<i>tipee</i> mas rápido de lo que pensé, ejecutando de manera erronea un comando que copia la carpeta .ssh usando el comando <i>rsync</i> desde un usuario invitado al usuario root, cuando quería hacer lo contrario. Esto ocasionó un error conocido como kernel panic, ropiendo la conexion SSH, y dejandome fuera del servidor, ademas de no tener backups y olvidando que ya habia cambiado el codigo del respositorio de este proyecto hace meses en github, y que probablemente daria un error con las actualizaciones si lo volviera a desplegar.</p><p>Es aqui donde realmente me puse a pensar si valia la pena recuperar el sitio y volver a ponerlo en ejecucion, es decir el código de este proyecto no es algo que me gustaba mantener, no habia herramientas que me causaran interes, y si lo volviera a poner en marcha estaria viendo el mismo sitio.</p><p>Entonces recorde que ya habia escrito codigo nuevo pero que no habia probado y dije porque no empezar de nuevo el proyecto, pero ahora trabajandolo todos los dias y ir mejorandolo continuamente.&nbsp;</p><p>Esta era la idea inicial de Faztweb, crear un proyecto que en cualquier momento pudiera cambiar todo el stack y que me permitiera probar cosas nuevas. Es así como tome la decision de no volver a ejecutar el sitio. Pero si volviendo a plantear el proyecto y rehacerlo de una mejor manera y con nuevas funcionalidades.</p><p>Así que, para empezar el día de hoy, les comento como empieza el nuevo sitio, las cosas que estoy cambiando y otras modificaciones. Los cambios son los siguientes:</p><p></p><ul style="text-align: left;"><li><b>De MPA (Multi-Page Application) a SPA (Single Page Application - SSR)</b>. Anteriormente el proyecto hacia uso de Nodejs, Express y Handlebars para renderizar las vistas, pero esto ha cambiado y ahora estoy usando Nextjs junto con React para poder facilitarme la integración con la REST API y aprovechar el uso de JSX junto con Node, ademas de poder añadir progresivamente mas caracteristicias como un Bot, un chat, y la posiblidad de que se puedna logear y hacer comentarios, de una manera más fácil. En el proyecto anterior hacerlo con MPA, hubiera tomado mucho tiempo.</li><li><b>Concentrar el backend en tan solo una REST API y una API de GraphQL</b>. Antes tenía que desarrollar el proyecto de Node conectado a Mongodb. Estos dias la aplicacion hara uso de APIs y esto me permitira eventualmente publicar una aplicación movil, ademas que me permitira eventualmente dividir la API en pequeños servicios (Microservicios) a medida que crezca.</li><li><b>Poder integrar facilmente a Servicios de Terceros</b>. Usando las herramientas de MPA, es un poco tedioso hacer funcionalidades como crear una Newsletter, hacer una pagina de contacto y el poder integrarse con otras apis como la de Google Blogger, Mailchimp, SendGrid, Cloudinary o Youtube. Por otro lado, en Nextjs es mucho más facil ya que te permite hacer las peticiones tanto desde Backend (SSR) o desde Frontend (Static Site). De hecho algo que me facinaria hacer en bre es integrar alguna caracterisitica relacionada a alguna blockchain. ya les cometaré pronto por aqí y por el canal de Youtube.&nbsp;</li></ul><p></p><p><br /></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-6e75r1Uz1Qk/YND8LXUmIDI/AAAAAAAAB6s/WMuFVSimtoYc0Tx0IeZV64xf8sXfdu4ZQCLcBGAsYHQ/s2048/localhost_3000_%2B%25281%2529.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="2048" data-original-width="1657" height="400" src="https://1.bp.blogspot.com/-6e75r1Uz1Qk/YND8LXUmIDI/AAAAAAAAB6s/WMuFVSimtoYc0Tx0IeZV64xf8sXfdu4ZQCLcBGAsYHQ/w324-h400/localhost_3000_%2B%25281%2529.png" width="324" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Un incio rápido del Nuevo Faztweb.com<br /></td></tr></tbody></table><br /><p>En fin el proyecto es muy simple, y si bien al momento de escribir este es tan solo es un pequeño landing, la siguiente semana añadiré la forma de poder listar todo el contenido, luego la forma de proporcionarles un buscador para que encuentra más facil los temas, luego la facilidad de ser notificados, luego un bot integrado, luego la forma de registrarse y poder tener perfiles, luego un chat, y así.</p><p>Al menos aprovecho este post para decirles que estoy trabajando nuevamente en el sitio y pronto podrán leer estos posts e interactuar con ellos de una manera muy fácil a traves del nuevo sitio. Ya estoy preparando nuevos cursos, contenido, posts, podcasts y me entusiasma la idea de traerles nuevos temas como AI, Machine Learning, Blockchain, Criptomonedas, Python, Go, Rust, Web Assembly, y Quantum computing. Porque el cambio de mi sitio no solo significa cambiar la apariencia sino otro intento mas por organizarme y continuar con este sitio que me gusta desarrollar, para poder seguir compartiendo información. Sin más, gracias por darte el tiempo de leer y nos vemos muy pronto cuando publique nuevo contenido.&nbsp;&nbsp;</p>

Renovando FaztWeb 2021

Estos días cuando se desarrollan aplicaciones Frontend, se habla mucho de empaquetadores de módulos como Webpack, Parcel o administradores de paquetes como npm o yarn. Pero antes de que aparecieran estas soluciones se usaba en el Frontend un CLI o una herramienta de consola o terminal llamada <a href="https://bower.io/" target="_blank">Bower</a>.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-Omo1heCx7qU/XshrrNwi7-I/AAAAAAAABrE/j5ezU81bLCwG0G6FsA6lemrepzVSWjHfACLcBGAsYHQ/s1600/bower-tools.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="768" data-original-width="940" height="521" src="https://1.bp.blogspot.com/-Omo1heCx7qU/XshrrNwi7-I/AAAAAAAABrE/j5ezU81bLCwG0G6FsA6lemrepzVSWjHfACLcBGAsYHQ/s640/bower-tools.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Bower, Administrador de dependencias para el Frontend</td></tr>
</tbody></table>
<br />
Básicamente era como npm (el administrador de paquetes de Node), pero Bower tan solo instalaba dependencias relacionadas con el Frontend. Dependencias como Bootstrap, Angular.js (un framework bastante usado por entonces, ya que hoy se usa mas Angular, React, o Vue), jquery, animate.css, Font Awesome, entre muchas otras bibliotecas de Javascript, CSS o cualquier otra dependencia usada en el navegador.<br />
<br />
Estos días esta herramienta ya esta "deprecated" pero algo curioso es que aun tiene un aproximado de 40 millones de peticiones por mes, y el equipo aun sigue manteniendo los repositorios a pesar de que ellos mismos recomiendan cambiar Bower por herramientas como webpack junto con yarn o parcel.<br />
<blockquote class="twitter-tweet tw-align-center">
<div dir="ltr" lang="en">
Do you know that Bower's registry still serves 40 million requests per month, which is 2TB of data sent to 20k unique users? We're now working on freezing it so current and past Bower apps can "bower install" without problem, even in 100 years. Bower is deprecated but maintained</div>
— Bower (@bower) <a href="https://twitter.com/bower/status/1235634306564984832?ref_src=twsrc%5Etfw">March 5, 2020</a></blockquote>
<script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>

Me pareció interesante esto, porque al final es un ejemplo de que, no porque algo no sea muy popular, no significa que nadie lo este usando. Es decir 40 millones de peticiones no es nada despreciable.<br />
<br />
Ademas creo que es también un buen ejemplo de como un buen equipo de desarrollo responsable se encarga de dar mantenimiento aun a una herramienta que es necesaria en aplicaciones, que quizás puedan ser viejas, pero que no por eso deban dejar de funcionar o empezar a <i>romperse</i>.<br />
<br />
¿Conoces algún otro ejemplo de alguna herramienta que este <i><b>deprecated</b></i> pero que aun sigue siendo utilizada por una enorme cantidad de aplicaciones?

Bower está obsoleto pero aun está siendo Mantenido

Cada vez que quiero llevar algo a cabo, ya sea un proyecto profesional o personal, siempre trato de entender cada proceso o tema que necesito, para poder llevar a cabo lo que quiero lograr.<br />
<br />
Y esto me lleva a que siempre trato de hacerlo todo yo mismo. Por ejemplo, si me propongo a crear un programa, investigo que lenguajes de programación y herramientas de software necesito; o si me propongo a re-diseñar un sitio, estudio temas relacionados al diseño o la experiencia de usuario.<br />
<br />
Personalmente, lo veo un proceso divertido, y creo que lo que se aprende en la gran mayoría de casos puede ser bastante provechoso a futuro, incluso aunque muchas veces no lo parezca.<br />
<br />
Pero a pesar de este gusto por aprender, hay veces en las que no es posible hacerlo todo tu mismo, es por eso que en ciertas ocasiones es mejor delegar el trabajo a alguien que ha pasado más tiempo perfeccionándose en un área especifica.<br />
<br />
Esto es lo que paso con mis logotipos este año 2020. Tenia planeado cambiarlos, a medida que iba aprendiendo más de diseño y nuevas herramientas de diseño, pero a medida que a pasado el tiempo he ido planeando más y más proyectos que quiero llevar a cabo, y esto acorta mi tiempo libre para ponerme a estudiar algo nuevo. Esto no quiere decir que deje de estudiar, sino que ya no avanzo tan rápido como quiero.<br />
<br />
Es por eso que decidí delegar el diseño de mis logotipos a alguien que su trabajo principal sea Crear y Diseñar logotipos.<br />
<br />
Así que decidí contactar a Nick, de <a href="https://logosbynick.com/" target="_blank">LogosbByNick</a>. El sitio web y <a href="https://www.youtube.com/channel/UCEQXp_fcqwPcqrzNtWJ1w9w" target="_blank">el canal de youtube</a>. Conocí el trabajo de Nick, principalmente a su canal de youtube, ya que a veces buscando tutoriales de Gimp (un programa alternativo a Photoshop pero OpenSource), me encontré con su canal, el cual es muy bueno. Tiene un portafolio amplio, y de inicio su trabajo se notaba bastante profesional. Ademas que, un aspecto interesante de su trabajo es que usa software Open Source como <a href="https://www.gimp.org/" target="_blank">Gimp </a>e <a href="https://inkscape.org/" target="_blank">Inskcape</a>.<br />
<br />
Esto ultimo fue un adicional para mi, porque siempre es un gusto ver a un profesional usando herramientas Abiertas. Personalmente porque lo veo como un profesional que se enfoca en el trabajo y no en las herramientas. Digo esto porque he visto a muchos diseñadores que tan solo hablan de herramientas como Photoshop, o Ilustrator o la suite de adobe, como si fuera lo único que existiese.<br />
<br />
El trabajo que le pedí a Nick, fue crear dos logotipos. Uno para mi canal principal Fazt Tech y otro para mi canal dedicado a código (Fazt Code).<br />
<br />
Quería dos logotipos que fueran distintos pero que que estén relacionados de cierta forma.<br />
<br />
Personalmente preferí que el logotipo de "Fazt" fue más un icono de una mascara o una cabeza (algo así como el logotipo de <a href="https://about.gitlab.com/press/press-kit/" target="_blank">Gitlab</a>), a futuro les comentaré porque, pero lo quería así. En cuanto al logotipo de FaztCode quise que sea un diseño que este relacionado a código, de manera similar a los logotipos de herramientas de software tipo Git, Visual Studio Code, o un diseño que este relacionado a código.<br />
<br />
En cuanto a los colores, para los que nunca han leído un post anterior mio, mis logos de cierta manera están inspirados en los colores que una vez vi en una intro de una serie de AMC llamada Halt and Catch Fire (Serie de televisión bastante recomendada por cierto si te encantan los computadores)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/ucSUs3adMQ8/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/ucSUs3adMQ8?feature=player_embedded" width="320"></iframe></div>
<br />
Y básicamente eso fueron todos los requerimientos. Al final, basado en estos, después de que Nick propusiera algunos diseños, termine escogiendo estos dos logos:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-ST7pxd3bxsU/XklITaxhhzI/AAAAAAAABlk/wGTIDR_LBEo7tPYV25dMvdsO60QCRwbegCLcBGAsYHQ/s1600/faztcode-fazttech-logos.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="664" data-original-width="1600" height="264" src="https://1.bp.blogspot.com/-ST7pxd3bxsU/XklITaxhhzI/AAAAAAAABlk/wGTIDR_LBEo7tPYV25dMvdsO60QCRwbegCLcBGAsYHQ/s640/faztcode-fazttech-logos.png" width="640" /></a></div>
<br />
<br />
Como pueden ver el logo de "Fazt" es al final un icono de un "personaje o casco" podríamos decir y en cuanto a "Fazt Code" de cierta manera me recuerda al logo de Git. Aunque para ser exactos, si bien tenia pensado algo así a Nick nunca le pedí explicitamente ese diseño, tan solo le mande imágenes de múltiples logotipos relacionados con código y basados en esos, Nick diseñó este.<br />
<br />
Estoy contento con los logotipos obtenidos, ambos tienen relación y tienen un acabado profesional que podre aprovechar muy bien en todos los proyectos que tengo en mente por ahora. Por ejemplo:<br />
<ul>
<li><a href="https://faztweb.com/" target="_blank">Mi Sitio Web</a></li>
<li><a href="https://blog.faztweb.com/" target="_blank">Mi Blog</a></li>
<li><a href="https://www.youtube.com/fazttech" target="_blank">Mis Canales de Youtube</a></li>
<li>Redes sociales (<a href="https://twitter.com/fazttech" target="_blank">Twitter</a>, <a href="https://www.facebook.com/FaztTech/" target="_blank">Facebook</a>, <a href="https://www.instagram.com/FaztTech/" target="_blank">Instagram</a>) y Comunidades (<a href="https://discord.gg/JjcRfCB" target="_blank">Discord</a>, <a href="https://join.slack.com/t/fazt/shared_invite/enQtMzgwNzA0NjU2OTAxLTA5MjQ1N2NjNzg1NTY1Y2U3MWMyZTgxNDNkNTMxMWZjYzY5OWU0MDZkNWQyYzRkMzUwMWM2OWZjMzNmNGM0YjE" target="_blank">Slack</a>)</li>
<li>Emojis e iconos para <a href="https://www.youtube.com/channel/UCMn28O1sQGochG94HdlthbA/join" target="_blank">Usuarios Premium del canal "FaztCode"</a></li>
<li>Stickers (Algo que espero probar muy pronto)</li>
<li>Ropa (Eventualemente)</li>
</ul>
Y a medida que tenga mas ideas en mentes para proyectos creo que los logos me servirán bastante para crear la marca o la idea de que todos mis proyectos son parte de un proyecto conjunto.<br />
<br />
Finalmente me gustaría dejarles la página de <a href="https://www.youtube.com/channel/UCEQXp_fcqwPcqrzNtWJ1w9w" target="_blank">LogosByNick</a>. Se que parece propaganda, pero en realidad la recomendación la hago por el buen trabajo que realiza.<br />
<br />
Eso ha sido todo por esta publicación. Me gusta escribir de vez en cuando por aquí porque es relajante y aunque no este hablando me entretiene comentarles algo nuevo, así que pronto les comentare otras cosas más por aquí. ¡Nos vemos en próximos Posts!<br />
<br />

Nuevos Logos 2020 (FaztTech y FaztCode)

Una de las preguntas más frecuentes que siempre me hacen es: ¿Como haces para mantenerte actualizado o descubrir tantos temas?. Y la respuesta a esto, es una combinación de Libros, feeds, conferencias y en gran parte a&nbsp;<b><i>Newsletters</i></b>.<br />
<br />
Las Newsletters por si no lo conocias es tan solo una lista de recursos como Tutoriales, noticias, discusiones o en si cualquier tipo de información relacionada a un tema especifico que es enviada a traves de email.<br />
<br />
Y por lo general cuando navego en la web me suscribo a listas de todo tipo, tanto de Desarrollo web, programación, seguridad informatica, machine learning, y así. De esa manera cada dia que abro mi correo personal tengo más información de los temas que me interesan o estoy estudiando.<br />
<br />
Así que en esta publicación me gustaría compartir con ustedes algunas listas de correos que no solo me mantiene al día, si no que de vez en cuando recibo articulos bastante interesantes para pasar el rato.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-kiLqukw453w/XZYbeX5fXaI/AAAAAAAABic/gTNw2WgyBGE6flHCKr_JCxtPObKL4xG7wCLcBGAsYHQ/s1600/newsletter-code.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="900" data-original-width="1200" height="480" src="https://1.bp.blogspot.com/-kiLqukw453w/XZYbeX5fXaI/AAAAAAAABic/gTNw2WgyBGE6flHCKr_JCxtPObKL4xG7wCLcBGAsYHQ/s640/newsletter-code.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Newsletter Fazt</td></tr>
</tbody></table>
<br />
<br />
A continuación voy a separar algunas listas de correos por temas, de esta manera puedes suscribirte a las que más te interesan o lo que te dedicas.<br />
<br />
Programación en General<br />
<ul>
<li><a href="https://www.oreilly.com/emails/newsletters/" target="_blank">Oreilly Newsletter</a>:&nbsp;<a href="https://www.oreilly.com/emails/newsletters/">https://www.oreilly.com/emails/newsletters/</a>&nbsp;Esta newsletter te permite registrarte a varias listas de correos de distintos temas como por ejemplo programación, desarrolo web, infraestructura, economia, machine learning y otras más.</li>
<li><a href="https://www.hackernewsletter.com/" target="_blank">HackerNews</a>.&nbsp;Lista de noticias, tutoriales, articulos y discusiones relacionadas a tecnología en general.</li>
<li><a href="http://statuscode.com/" target="_blank">Status Newsletter</a>:&nbsp;Esta una lista de multiples Newsletters de distintos temas, bases de datos, serveless, react, javascript, ruby, mobile, golang, y más.&nbsp;</li>
<li><a href="https://assets.infoq.com/newsletter/regular/en/newsletter_sample/newsletter_sample.html" target="_blank">InfoQ</a>: Newsletter Dedicada a desarrolladores Senior.</li>
<li><a href="https://github.com/explore" target="_blank">Github Explore</a>&nbsp;Recibes emails de los proyectos más interesantes y Nuevos en Github. Aunque debes estar registrado en Github.</li>
</ul>
Desarollo Web en General<br />
<ul>
<li>Frontend Focus (Antes HTML5 Weekly):&nbsp;<a href="https://frontendfoc.us/">https://frontendfoc.us/</a>&nbsp;Newsletter para Desarrollores Web Frontend</li>
<li>CSS Weekly:&nbsp;<a href="https://css-weekly.com/">https://css-weekly.com/</a>&nbsp;Recursos para desarrolladores Web Frontend dedicados a estilizar sitios web con CSS</li>
<ul>
<li><a href="https://www.sitepoint.com/newsletter/" target="_blank">SitiPoint</a>:&nbsp;<a href="https://www.sitepoint.com/newsletter/">https://www.sitepoint.com/newsletter/</a>&nbsp;con esta newsletter obtendras información de Desarrollo web frontend, backend e incluso Blockchain.</li>
</ul>
<li><a href="https://ponyfoo.com/weekly" target="_blank">Pony Foo Weekly</a>: Newsletter de los topicos actuales más hablados de la web.</li>
</ul>
<div>
Seguridad Informática</div>
<div>
<ul>
<li><a href="https://www.schneier.com/crypto-gram/">https://www.schneier.com/crypto-gram/</a></li>
</ul>
</div>
Javascript<br />
<ul>
<li><a href="https://javascriptweekly.com/" target="_blank">Javascript Weekly</a>:&nbsp;<a href="https://javascriptweekly.com/">https://javascriptweekly.com/</a>&nbsp;Probablemente sea la newsletter más popular en torno a Javascript, semanalmente recibiras un correo con una lista de Tutoriales, noticias e incluso ofertas de trabajo relacionadas con este lenguaje tanto de Frontend como de Backend. Puedes ver algunos de sus Publicaciones aqui:&nbsp;<a href="https://javascriptweekly.com/issues">https://javascriptweekly.com/issues</a></li>
<li>GameDev.js Weekly:&nbsp;<a href="https://gamedevjsweekly.com/">https://gamedevjsweekly.com/</a>&nbsp;Newsletter para desarrolladores de Videojuegos utilizando Tecnología Web</li>
<li>React Status:&nbsp;<a href="https://react.statuscode.com/">https://react.statuscode.com/</a></li>
</ul>
Python<br /><div>
<ul>
<li>Python Weekly:&nbsp;<a href="https://www.pythonweekly.com/">https://www.pythonweekly.com/</a>&nbsp;Noticias, articulos, tutoriales y ofertas de trabajo relacionado con Python.</li>
<li><a href="https://pycoders.com/" target="_blank">PyCoders Weekly</a>:&nbsp;<a href="https://pycoders.com/">https://pycoders.com/</a></li>
</ul>
<div>
C#</div>
</div>
<div>
<ul>
<li><a href="https://csharpdigest.net/">https://csharpdigest.net/</a></li>
</ul>
<div>
Java</div>
<div>
<ul>
<li><a href="https://www.javaspecialists.eu/archive/archive.jsp">https://www.javaspecialists.eu/archive/archive.jsp</a></li>
<li><a href="https://www.javaworld.com/newsletters/signup.html">https://www.javaworld.com/newsletters/signup.html</a></li>
</ul>
</div>
<div>
Android</div>
</div>
<div>
<ul>
<li><a href="https://androidweekly.net/">https://androidweekly.net/</a></li>
</ul>
<div>
iOs</div>
<div>
<ul>
<li><a href="https://iosdevweekly.com/">https://iosdevweekly.com/</a></li>
</ul>
<div>
<br /></div>
</div>
<div>
Ademas de estas listas de correo, me gustaría darte tan solo algunos consejos basados en mis preferencias personales:</div>
</div>
<div>
<ul>
<li>No te suscribas a todas las listas de correos o newsletters. Se que cuando empiezas quieres tener disponible toda la información posible, pero no sirve de mucho tener toda la informacion a nuestra disponibilidad si no la vas a usar. Asi que te recomiendo suscribirte tan solo a los temas que te interesan, de esa manera les prestaras más atención.</li>
<li>Puedes tener un correo tan solo para suscribirte a newsletter, de esa manera si tu correo lo utilizas mucho para trabajo, no veras demasiados correos innecesarios. En mi dia a dia uso varios correos tanto para trabajo, mi sitio web (faztweb.com), correo personal y otro tan solo para newsletters. Ademas tambien es posible configurar Gmail para que recibas correos de otras cuentas. Depende de tus gustos.</li>
</ul>
<div>
Finalmente, existen muchas listas de correo, incluso tu puedes estar pensando en crear la tuya. Así que si quieres que agregue tu newsletter favorita no dudes en comentarmela y la agregaré si veo que puede ser muy util para todos.</div>
</div>


Newsletter Para Desarrolladores y Programadores (Listas de Correos para estar Al día en Desarrollo y programación)

Hace un par de semanas publiqué un vídeo en el que mostraba como es que configuro y utilizo el editor de código Atom, y como resultado obtuve muchos comentarios de personas que decían que ellos ahora están utilizando Visual Studio Code y debería hacer un vídeo de eso.<br />
<br />
Es por eso que en esta publicación voy a compartir contigo como es que configuro y utilizo en mi día a día este editor enfocado en el desarrollo web, es decir para crear aplicaciones y sitios web.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-EW9IYLNiqDA/Wv4r4sOGveI/AAAAAAAABUg/lL0B1cIEfCkrVROQXiApi92D6brGMLUPQCLcBGAs/s1600/visual-studio-code.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="720" data-original-width="1280" height="360" src="https://1.bp.blogspot.com/-EW9IYLNiqDA/Wv4r4sOGveI/AAAAAAAABUg/lL0B1cIEfCkrVROQXiApi92D6brGMLUPQCLcBGAs/s640/visual-studio-code.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Editor de Código Visual Studio Code</td></tr>
</tbody></table>
<h2>
Indice</h2>
<div>
<ol>
<li>¿Que es Visual Studio Code?</li>
<li>Instalación de Visual Studio Code</li>
<li>Configuración de Visual Studio Code</li>
<li>Plugins de Visual Studio Code</li>
<li>Más Recursos de Visual Studio Códe</li>
</ol>
</div>
<h2>
¿Qué es Visual Studio Code?</h2>
Visual Studio Code, es un editor de código Open Source creado por Microsoft y entre sus características más notables podemos encontrar:<br />
<ul>
<li>Autocompletado de Código, como forma de aumentar la velocidad de escritura de código y ayudar al programador</li>
<li>Integración con Git, brindándote a través de una interfaz gráfica con botones, el uso de este sistema de control de versiones</li>
<li>Herramientas de Depuración y Factorización de Código</li>
<li>Extensibilidad y Customizacion del editor a través de Plugins o Extensiones</li>
<li>y Soporte Multiplataforma, es decir que puedes instalarlo en Windows, Mac o cualquier distribución de Linux, sin notar ninguna diferencia.</li>
</ul>
<div>
Ademas de todas las características típicas de los editores como resaltado de sintaxis, atajos de teclado y la capacidad de modificar su configuración por defecto.</div>
<br />
Es desarrollado utilizando tecnología web, es decir HTML, CSS y Javascript, junto con Nodejs y complementos de C++. Esto es posible ya que fue creado utilizando Electron, un framework de desarrollo de aplicaciones de Escritorio utilizando tecnología web, y su editor web llamado monaco-editor. el cual puedes encontrar el código fuente de ambos proyectos en Github.<br />
<br />
<h2>
Instalación de Visual Studio Code</h2>
Como te decia visual Studio code es multiplaforma, debido a eso es muy simple instalarlo yendo al <a href="https://code.visualstudio.com/" target="_blank">sitio web oficial </a>y descargando el instalador o paquete para el sistema operativo que usas, ya que puedes instalarlo en cualquier plataforma, y esto incluye a muchas distribuciones&nbsp;<a href="https://code.visualstudio.com/docs/setup/linux" target="_blank">Linux</a>.<br />
<h2>
Configuración de Visual Studio Code</h2>
<div>
Teniendo instalado el editor voy a hacer unos pequeños cambios, entre los cuales podemos encontrar:</div>
<div>
<ul>
<li>editor.fontSize: 16, para cambiar el tamaño de fuente</li>
<li>editor.tabSize: 2, para colocar el numero de tabulaciones</li>
<li>editor.wordWrap: "on", para que el código siempre se muestre en pantalla</li>
<li>terminal.integrated.fontSize: 16, para aumentar el tamaño de fuente del terminal</li>
</ul>
</div>
<h2>
Plugins de Visual Studio Code</h2>
La mayoría de editores de código te permiten extender su funcionalidad a través de Plugins, y Visual Studio Code, no es la excepción. así que a continuación listo una serie de Plugins que he utilizo en mi dia a dia en este editor de código:<br />
<ul>
<li>bracker pair colorize</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank">Live Server</a></li>
<li>open in browser</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons" target="_blank">VsCode Icons</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank">Prettier</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" target="_blank">Debugger for Chrome</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=humao.rest-client" target="_blank">REST Client</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=in4margaret.compareit" target="_blank">Compareit</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=pnp.polacode" target="_blank">Polacode</a></li>
</ul>
<br />
Estos plugins son los que utilizo independientemente del lenguaje de programación, pero si trabajas con algún lenguaje de programación en especifico, te recomiendo probar estos:<br />
<br />
PHP<br />
<ul>
<li>php intellisense</li>
</ul>
Javascript<br />
<br />
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log" target="_blank">Turbo Console Log</a></li>
<li>Javasrcript ES6 Code Snippets</li>
</ul>
<br />
<br />
VSCode, por defecto ya trae instalado un Plugin llamado Emmet, que ayuda al autocompletado de codigo HTML. pero si quieres siempre estar al tanto de otras extensiones siempre tienes el <a href="https://marketplace.visualstudio.com/" target="_blank">marketplace de visual studio code</a>, en donde encontrarás muchos más.<br />
<br />
<h2>
Mas Recursos de Visual Studio Code</h2>
<ul>
<li><a href="https://es.wikipedia.org/wiki/Visual_Studio_Code" target="_blank">Visual Studio Code, Wikipedia</a></li>
<li><a href="https://www.smashingmagazine.com/2018/01/visual-studio-code/" target="_blank">Visual Studio Code Can do that?, Smashing Magazine</a></li>
</ul>


Desarrollo Web en Visual Studio Code

Como desarrollador web es bueno siempre tener multiples opciones de software al momento de crear aplicaciones y sitios web, y esto aplica de igual manera a los editores de código.<br />
<br />
Es por eso que el día de hoy voy a compartir contigo la configuración y que plugins uso en uno de los editores de código que más utilizo, que es Atom.<br />
<br />
Pero si en tu caso utilizas Visual Studio Code o Vim, tambien he creado publicaciones del tema, así que te recomiendo visitarlos si esos editores son lo que te interesan.<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-ZMcDZuKSEro/Wvznr4kFKnI/AAAAAAAABT0/5zHJ4yr2zI4nypZku_mDuKPgOxAOWZf8wCLcBGAs/s1600/maxresdefault.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="720" data-original-width="1280" height="360" src="https://2.bp.blogspot.com/-ZMcDZuKSEro/Wvznr4kFKnI/AAAAAAAABT0/5zHJ4yr2zI4nypZku_mDuKPgOxAOWZf8wCLcBGAs/s640/maxresdefault.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Atom, Editor de Código Libre</td></tr>
</tbody></table>
<h2>
Indice de esta publicación</h2>
<div>
Antes de empezar te voy a listar los temas que voy a tocar en esta publicación:</div>
<div>
<ol>
<li>¿Qué es Atom?</li>
<li>Instalación de Atom</li>
<li>Plugins y Extensiones de Atom</li>
<li>Vídeo Explicativo del Tema</li>
</ol>
<h2>
¿Qué es Atom?</h2>
<div>
Atom es un editor de código Abierto, desarrollado por Github. Entre algunas de las cosas que podemos considerar interesantes acerca de este editor es que es creado utilizando Tecnología web, es decir utilizando HTML, CSS, Javascript y Nodejs(con complementos de C++).</div>
<div>
<br /></div>
<div>
Esto es posible ya que Github creo un framework de desarrollo de aplicaciones de escritorio llamado <a href="https://electronjs.org/" target="_blank">Electron,js</a>, que permite desarrollar aplicaciones de escritorio multiplataforma utilizando tecnología web.</div>
<div>
<br /></div>
<div>
Y a partir de este framework desarrolló su propio editor llamado Atom, pero debido a que el Framework es Open Source, muchas otras empresas interesadas en crear Apps multiplatformas, han empezado a utilizarlos. Y que entre los más grandes ejemplos podríamos considerar a Visual Studio Code, Slack, Skype, Discord, Web Torrent, y <a href="https://electronjs.org/apps" target="_blank">muchas otras Apps</a></div>
<div>
<br /></div>
<h2>
Instalación de Atom</h2>
</div>
<div>
Instalar Atom, es un proceso muy simple, para ello tan solo tienes que visitar el sitio web Oficial de Atom, llamado <a href="http://atom.io/" target="_blank">Atom.io</a>, y descargar el instalador por defecto que te da para tu sistema operativo.</div>
<div>
<br /></div>
<div>
Dar doble click en el instalador, esperar a que termine y&nbsp; eso sería todo.</div>
<div>
<br /></div>
<h2>
Plugins y Extensiones de Atom</h2>
<div>
Una de las características de un editor de código es que se pueda añadir funcionalidad a través de plugins o extensiones, y atom, no es la excepción con esta característica.</div>
<div>
<br /></div>
<div>
Si deseas conocer que extensiones puedes instalar, tan solo tienes que visitar <a href="https://atom.io/packages" target="_blank">el sitio web de Paquetes de Atom</a>&nbsp;y empezar a escoger el que más te guste o necesites. pero a continuación te listo los que yo utilizo muy a menudo, independientemente del lenguaje de Programación:</div>
<div>
<br /></div>
<div>
<ul>
<li><a href="https://atom.io/packages/atom-live-server" target="_blank">Atom Live Server</a></li>
<li><a href="https://atom.io/packages/file-icons" target="_blank">File Icons</a></li>
<li><a href="https://atom.io/packages/open-in-browser" target="_blank">Open in Browser</a></li>
<li><a href="https://atom.io/packages/platformio-ide-terminal" target="_blank">Platformio IDE Terminal</a></li>
</ul>
<h2>
Vídeo Explicativo del Tema</h2>
</div>
<div>
Finalmente, he creado un vídeo explicativo del tema que te invito a verlo si en todo caso este proceso puede ser algo complicado o quieres ver como es el proceso de instalación de mi configuración personal y estas extensiones desde cero.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/naEQ5xkl5_c/0.jpg" src="https://www.youtube.com/embed/naEQ5xkl5_c?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<div>
<br /></div>


faztweb.com

VIDEOS

Javascript

Curso para principiantes (Javascript del Navegador)

Javascript FullStack

Aplicación Frontend y Backend en JS

NodejsNuevo

Entorno de Ejecución de Javascript

Typescript

Lenguaje Superconjunto de Javascript

Python

Python para principiantes

Nextjs

Framework de React SSR y más

Git

Sistema de Control de Versiones

MERN Stack, Ejemplo Práctico

Mongodb, Express, React, Node

Javascript para React

React

React

Biblioteca UI de Javascript

Streams

8PM - 10PM (GMT-5)

Artículos

Renovando FaztWeb 2021

Bower está obsoleto pero aun está siendo Mantenido

Nuevos Logos 2020 (FaztTech y FaztCode)

Newsletter Para Desarrolladores y Programadores (Listas de Correos para estar Al

Desarrollo Web en Visual Studio Code

Desarrollo Web en Atom