Este reto es algo que comenzó como sarcasmo y se transformo en real, sobre todo que podemos hacer algo distinto en cuanto a la enseñanza de los conceptos que debería aprender un desarrollador frontend.
Mi nombres es Héctor de León, un programador más afín al backend, y el reto me llevara a salir de mi zona de confort en cuanto a desarrollo y a su vez enseñar con el conocimiento adquirido.
En esta entrada de este blog iré recopilando todo el camino que iré siguiendo y en mi cuenta de Twitter iré escribiendo todos los días lo aprendido por 100 días con el hashtag #100DaysAsAFrontendDev.
A su vez en mi canal de youtube iré lanzando un video semanal orientado al frontend donde resumiré lo que he aprendido en un video que espero igual, el video explique a las personas que lo vean algunos conceptos del frontend.
Podrás ir viendo el código utilizado en este repositorio: https://github.com/powerhdeleon/100DaysAsAFrontendDev
El reto de 100 días ha finalizado y puedes ver todo el roadmap y videos aquí abajo
-
Reto #100DaysAsAFrontendDev un reto inspirado en #100DaysOfCode
En este video te anuncio en que consiste el reto de programar 100 días como frontend dev.
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #100DaysAsAFrontendDev #100DaysOfCode -
¿Cómo comenzar a Programar Frontend?
En este video te enseñare como interactúa HTML con javascript y CSS.
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
00:00 Introducción
00:42 Objetivo del video
01:57 Herramientas
02:47 Creando el contenido HTML
05:20 Dando estilo con CSS
11:40 Clases y objetos en javascript
22:36 Guardar información con localStorage en javascript
26:50 Creación de elementos dinámicos con javascript
36:30 Cargar información guardada en localStorage
42:50 Eliminar información de localStorage
47:11 Más diseño con CSS
51:31 Aplicación finalizada
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #desarrolloWeb #100DaysAsAFrontendDev -
Patrón de Diseño Observador 👀 | La BASE del Paradigma de Programación Reactivo
En este video te mostrare que es el patrón de diseño Obsrvador y como es la base del paradigma reactivo.
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
00:00 Introducción
02:46 Explicación del patrón con diagrama de clases
05:00 Creación de clase Subject
10:50 Creación de ItemSubject el ConcreteSubject
14:40 Creación del observador ListObserver
17:00 Ejecución del patrón observador
20:05 Creación de segundo observador TotalObserver
23:00 Creación de formulario HTML
24:00 Modificación de observadores para funcionalidad con HTML
31:20 Creación de tercer observador DynamicObserver para envió de función de primer orden
35:30 Desubscripción de observador
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev -
¿Cómo hacer Animaciones en CSS?
En este video te mostraré como utilizar los keyframes para que puedas crear animaciones en CSS.
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev -
5 Formas para CENTRAR un DIV
En este video te mostraré 5 formas con las cuales puedes centrar un div.
00:00 Introducción
01:00 Forma incorrecta: tabla
04:04 Forma incorrecta: javascript
07:40 Forma clasica (ya hay mejores formas)
09:25 Grid
10:48 Flex
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev -
5 Cosas que Hacen los Programadores FRONTEND
En este video te mostraré 5 formas con las cuales puedes centrar un div.
00:00 Introducción
00:46 Guardado de información local
02:15 Utilización de Componentes UI
03:20 Uso de Patrones de diseño
05:57 Promesas
08:57 Preprocesadores CSS
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev -
¿Qué es el Objeto Proxy de JavaScript? 🤔
En este video te mostrare como utilizar el Objeto Proxy de Javascript para trabajar con intermediarios de acceso a objetos.
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev -
Introducción al PARADIGMA FUNCIONAL en JavaScript
En este video te explicare de que va el paradigma funcional mientras codificamos las funciones reduce, filter y map de javascript.
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
00:00 Introducción
01:31 Herramientas
02:25 Función de Primer Orden
03:20 Función de Orden Superior
05:30 Función flecha
08:00 Función filter de javascript
10:30 Inmutbilidad
11:45 Función map de javascript
12:40 Función reduce de javascript
17:30 Prototype en javascript
19:00 Programando una función filter alterna
24:50 Programando una función map alterna
28:04 Programando una función reduce alterna
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev -
Creación de Contenido HTML Dinámicamente (3 formas distintas)
En este video te explicare 3 formas para crear contenido HTML dinámicamente.
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
00:00 Introducción
00:27 Creación del formulario y CSS
05:00 Forma clásica con javascript
08:35 Templates de HTML
12:35 Template Literals
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev -
Composition en JavaScript, una alternativa a la HERENCIA en la Programación
En este video te explicare la técnica object composition, una alternativa a la herencia, esto lo haré en el lenguaje de programación javascript.
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev -
Introducción a Web Components sin Utilizar FRAMEWORKS
En este video te explicare como puedes programar tu primer Web Component sin necesidad de de ninguna biblioteca o framework.
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
00:00 Introducción
00:53 ¿Qué es un Web Component?
02:06 Creación del web component
06:06 Creación de elementos en el web component
07:29 Agregando atributos personalizables
10:41 Agregando funcionalidad
16:45 Finalizando la creación del componente
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev -
OPTIMIZA tu Programación en FRONTEND con MEMOIZATION | JAVASCRIPT ↗️
En este video te explicare que es la memoization y como puedes aplicarla en tus aplicaciones frontend.
00:00 Introducción
02:56 Explicación de Closure
06:37 Función Pura
08:40 Explicación de Memoization
16:39 Memoization en problema real
Enlace para seguimiento: https://hdeleon.net/reto-100daysasafrontenddev-un-reto-inspirado-en-100daysofcode/
Cuenta de twitter: https://twitter.com/powerhdeleon
Github: https://github.com/powerhdeleon/100DaysAsAFrontendDev
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: http://paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: https://www.youtube.com/channel/UCDUdeFslCNoM29MAlZOfdWQ/join
💻 CURSO de Patrones de Diseño en C# y ASP .Net: https://www.udemy.com/course/aprender-patrones-de-disenos-aplicados-en-asp-net/?referralCode=11528C0122AD145CE970
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
Sigueme en twitter ⇒ https://twitter.com/powerhdeleon
Sigueme en facebook ⇒ https://www.facebook.com/hdeleon666
Mi Sitio web ⇒ http://hdeleon.net
#programación #frontend #100DaysAsAFrontendDev