👨🏻*💻👨🏻*💻 PLATAFORMA - [Frontend Developers] 👨🏻*💻👨🏻*💻

[Fumo Flores]

Originalmente Escrito por Mariscos Recio

Hola a todos. Tengo una landing page con bootstrap, muy sencilla, en la que realmente uso de bootstrap (además del grid, pero puedo usar flexbox en su lugar) la barra de progreso animada. Mi intención es quitar bootstrap para que sea un poco más ligera, pero me gustaría poder replicar la misma barra con el mismo efecto. ¿Alguien sabe la forma de sacar el código de dicho componente? He probado varias cosas, como coger el código de las clases que referencian a dicho componente (css), pero no hace el efecto. ¿La barra de progreso animada lleva algo de js? He intentado extraer el fuente mediante alguna aplicación web pero tampoco ha funcionado. Y he visto otras barras con css, pero no son iguales y no me agradan.
Si alguien me pudiese dar una pista sobre por donde tirar, lo agradecería.

Un saludo.

Lo que quieres es usar solo los módulos de bootstrap que vas a utilizar y quitar todo lo demás. Usar solo el grid por ejemplo. Eso lo puedes hacer de manera oficial.
https://getbootstrap.com/docs/4.4/ge...nts/#css-files

[Andrew_Ryan]

En mi empresa me han puesto a aprender Angular y me esta costando bastante, me lia un monton los componentes.

Si yo quiero hacer un dashboard, como se que cosas son componentes y que cosas no?
Cada página es un component?


Con lo fácil (aunque laborioso) es en PHP, macho.

[73nko]

Originalmente Escrito por Andrew_Ryan

En mi empresa me han puesto a aprender Angular y me esta costando bastante, me lia un monton los componentes.

Si yo quiero hacer un dashboard, como se que cosas son componentes y que cosas no?
Cada página es un component?


Con lo fácil (aunque laborioso) es en PHP, macho.

Es normal al principio! El cambio de paradigma es muy grande, pero tranquilo que va tomando sentido poco a poco.

Un componente debería ser prácticamente todo. Para tu caso, te recomiendo utilizar una librería que te de los elementos básicos ya creados, como por ejemplo angular material. Y a partir de esos componentes crear los tuyos más complejos. Por ejemplo en un dashboard. Tendrás un header que a su vez tendrá un listado de acciones, un drop down de notificaciones... Todo serán componentes.

Pd: Acabo de cruzarme con este artículo en medium que igual te aclara un poco más.
https://medium.com/@josce.james7/an-...s-c26d441e42fa

[Raikmond]

Originalmente Escrito por Andrew_Ryan

En mi empresa me han puesto a aprender Angular y me esta costando bastante, me lia un monton los componentes.

Si yo quiero hacer un dashboard, como se que cosas son componentes y que cosas no?
Cada página es un component?


Con lo fácil (aunque laborioso) es en PHP, macho.

Piensa en un componente como cada pieza de una web que podría quitarse sin hacer que todo lo demás dejase de funcionar.

Una barra de búsqueda? Componente.

Un mapa? Componente.

Una lista de posts recientes (Por ejemplo en un blog)? Componente.

Hay algunas cosas que son flexibles, y a veces puedes hacer juntar varios componentes en uno mismo si son similares o te fuesen a quedar varios componentes pequeños y triviales... Pero en general cuanto más segregado esté todo mejor, siempre que tenga sentido.

Edit: Que un componente deba funcionar de forma independiente a los demás no significa que sea absolutamente independiente. Los componentes se comunican entre sí con el decorador @Input, enviando información a otros componentes (seguro que hay más formas de hacerlo pero esa es la más básica y te servirá para la mayoría de casos). Por ejemplo, quizá tengas un listado de mapas (componente) y al hacer clic en uno se te abra el mapa como tal (otro componente)... Pero el mapa requiere que le pases desde el listado qué componente has hecho clic, para renderizarlo como tal. Si eliminamos el listado, el mapa debería estar vacío, pero no por ello significa que el componente "no funcione".

[thulias]

Hola a todos!

¿Alguien sabe cómo realizar seo en programas desarrollados con Angular?

Estoy haciendo un curso de Angular y la verdad que estoy aprendiendo muchísimo pero me he dado cuenta que los meta del head siempre son los mismos puesto que en el body de el único archivo que crea (index.html) inserta una etiqueta que es la que ejecuta todo angular dentro (<app-root>)

Un saludo y gracias!

[73nko]

Originalmente Escrito por thulias

Hola a todos!

¿Alguien sabe cómo realizar seo en programas desarrollados con Angular?

Estoy haciendo un curso de Angular y la verdad que estoy aprendiendo muchísimo pero me he dado cuenta que los meta del head siempre son los mismos puesto que en el body de el único archivo que crea (index.html) inserta una etiqueta que es la que ejecuta todo angular dentro (<app-root>)

Un saludo y gracias!

No conozco mucho angular, así que por favor si me equivoco que alguien con más saber que yo me corrija pero, creo que la forma más sencilla sería pasándole el objeto data a cada una de las rutas que crees con Angular router.

const routes: RouterConfig = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent,
data: {title: 'Login'}
},
{
path: 'home',
component: HomeComponent,
data: {title: 'Home', description: 'Esta es una web super guay de blah blah blah'}
},
];

[Andrew_Ryan]

Originalmente Escrito por 73nko

Es normal al principio! El cambio de paradigma es muy grande, pero tranquilo que va tomando sentido poco a poco.

Un componente debería ser prácticamente todo. Para tu caso, te recomiendo utilizar una librería que te de los elementos básicos ya creados, como por ejemplo angular material. Y a partir de esos componentes crear los tuyos más complejos. Por ejemplo en un dashboard. Tendrás un header que a su vez tendrá un listado de acciones, un drop down de notificaciones... Todo serán componentes.

Pd: Acabo de cruzarme con este artículo en medium que igual te aclara un poco más.
https://medium.com/@josce.james7/an-...s-c26d441e42fa

Originalmente Escrito por Raikmond

Piensa en un componente como cada pieza de una web que podría quitarse sin hacer que todo lo demás dejase de funcionar.

Una barra de búsqueda? Componente.

Un mapa? Componente.

Una lista de posts recientes (Por ejemplo en un blog)? Componente.

Hay algunas cosas que son flexibles, y a veces puedes hacer juntar varios componentes en uno mismo si son similares o te fuesen a quedar varios componentes pequeños y triviales... Pero en general cuanto más segregado esté todo mejor, siempre que tenga sentido.

Edit: Que un componente deba funcionar de forma independiente a los demás no significa que sea absolutamente independiente. Los componentes se comunican entre sí con el decorador @Input, enviando información a otros componentes (seguro que hay más formas de hacerlo pero esa es la más básica y te servirá para la mayoría de casos). Por ejemplo, quizá tengas un listado de mapas (componente) y al hacer clic en uno se te abra el mapa como tal (otro componente)... Pero el mapa requiere que le pases desde el listado qué componente has hecho clic, para renderizarlo como tal. Si eliminamos el listado, el mapa debería estar vacío, pero no por ello significa que el componente "no funcione".

Muchas gracias a los dos por la ayuda!

Entonces una web puede tener muchísimos componentes no? Es un lío en realidad porque he visto que cada componente tiene su archio component.html, su module y otro archivo más, 4 archivos por componente.

[oscar8x]

Originalmente Escrito por Andrew_Ryan

Muchas gracias a los dos por la ayuda!

Entonces una web puede tener muchísimos componentes no? Es un lío en realidad porque he visto que cada componente tiene su archio component.html, su module y otro archivo más, 4 archivos por componente.

Pero a su vez, si la aplicación es grande o pretende serlo, es muy útil por la facilidad para reutilizar los componentes sin tener que duplicar código. Además, puedes importar componentes hechos y simplemente le pasas tus parámetros y se hacen aplicaciones mucho más rápido y escalables.

[thulias]

Originalmente Escrito por 73nko

No conozco mucho angular, así que por favor si me equivoco que alguien con más saber que yo me corrija pero, creo que la forma más sencilla sería pasándole el objeto data a cada una de las rutas que crees con Angular router.

const routes: RouterConfig = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent,
data: {title: 'Login'}
},
{
path: 'home',
component: HomeComponent,
data: {title: 'Home', description: 'Esta es una web super guay de blah blah blah'}
},
];

Eso te crearia el meta title y description ??? Y si quieres crear otros metas como el robots o link canonical se haria igual?

[angelpadre]

Originalmente Escrito por Andrew_Ryan

Muchas gracias a los dos por la ayuda!

Entonces una web puede tener muchísimos componentes no? Es un lío en realidad porque he visto que cada componente tiene su archio component.html, su module y otro archivo más, 4 archivos por componente.

Varía de un framework a otro, pero lo ideal es respetar la filosofia Single File Component ej: https://vuejs.org/v2/guide/single-file-components.html (que para eso están preparados asi) y diferenciar entre aquellos "componentes" que son vistas (pages o views) y los que son componentes al uso.

En tu proyecto los tendrás separados en sus respectivas carpetas y una vista usara varios componentes para formarse. (Y los componentes se pueden anidar entre si). Como ejemplo de vistas tendrias: login, home, etc... y por ejemplo componentes seria un botón, un navigation-menu, una barra de filtros...

[vlc90]

Hoygan, ¿alguno tiene experiencia con nestjs?

¿Ventajas y desventajas con React?

¿Todo se renderiza en el Back?, me tiene despistadisimo el hacer llamadas a apis en el propio server cuando esté server podría directamente maquetar como se lleva haciendo con lenguajes Back toda la vida.

Y ya para acabar lo más importante... Os mola o que? Lo usareis sobre React.

[73nko]

Originalmente Escrito por vlc90

Hoygan, ¿alguno tiene experiencia con nestjs?

¿Ventajas y desventajas con React?

¿Todo se renderiza en el Back?, me tiene despistadisimo el hacer llamadas a apis en el propio server cuando esté server podría directamente maquetar como se lleva haciendo con lenguajes Back toda la vida.

Y ya para acabar lo más importante... Os mola o que? Lo usareis sobre React.

NestJs es un framework de node, osea es para backend. No tiene nada que ver con react, más bien se compararía con express, aunque en este caso para mi la mayor similitud la tiene con Spring de java.

No tienes por qué renderizar en back, puedes simplemente crear una api Rest y hacer el renderizado en front con un framework al uso. Yo lo usaría antes sobre angular que sobre react, por lo parecido en sintaxis, estructura y patrones.

Ventajas. Estructura MVC, typescript by default, patrones y estructura muy parecidos a Angular, así que casan bien para tener un equipo full stack con estos dos frameworks... A mi personalmente me gusta mucho como framework de back.

Pensándolo, igual lo estás confundiendo con nextjs. Si es así me dices 😁

[vlc90]

Originalmente Escrito por 73nko

NestJs es un framework de node, osea es para backend. No tiene nada que ver con react, más bien se compararía con express, aunque en este caso para mi la mayor similitud la tiene con Spring de java.

No tienes por qué renderizar en back, puedes simplemente crear una api Rest y hacer el renderizado en front con un framework al uso. Yo lo usaría antes sobre angular que sobre react, por lo parecido en sintaxis, estructura y patrones.

Ventajas. Estructura MVC, typescript by default, patrones y estructura muy parecidos a Angular, así que casan bien para tener un equipo full stack con estos dos frameworks... A mi personalmente me gusta mucho como framework de back.

Pensándolo, igual lo estás confundiendo con nextjs. Si es así me dices ��

Así es, lo estoy confundiendo con nextjs y no es la primera vez jajaja

Lo que yo vi es un framework que usa React, que al fin y al cabo, React nunca fue un framework, todas las preguntas vendrian a simplificarse en sí vale la pena.

[73nko]

Originalmente Escrito por vlc90

Así es, lo estoy confundiendo con nextjs y no es la primera vez jajaja

Lo que yo vi es un framework que usa React, que al fin y al cabo, React nunca fue un framework, todas las preguntas vendrian a simplificarse en sí vale la pena.

Me lo imaginé. Las opciones para poner nombre a los frameworks de js cada vez son menos xD.

Pues la verdad no sé decirte si vale la pena o no. Yo lo uso a menudo, pero sólo para pequeños proyectos o MVP que quiera hacer. Aporta bastantes funcionalidades útiles, pero al final no es nada que no sea bastante sencillo de añadir manualmente a una aplicación de react normal, así que para algo serio prefiero añadir yo todas las features que requiera y tener un mayor control sobre ello.

[shurbega]

Me quedo por aquí , que curso de los que tenéis en el main post recomendáis más ? Frontend Masters o Full Stack Open ? Quiero meterme en Frontend y buscar algún curro de junior por remoto ya que voy a pasar un tiempo bastante largo esperando una visa y no puedo tener un trabajo presencial normal. (Tengo 6 años y medio de experiencia en Soporte Informático de segundo y tercer nivel, Administración de Sistemas e ingeniero de Data Center por lo que tengo experiencia ya con servidores, sistemas operativos, consola, algo de scripting y demás, también tengo nociones básicas de HTML, CSS y JavaScript, empecé con un curso de Udemy pero va demasiado lento y buscaba algo más dinámico y avanzado que Udemy)

Saludos!

[73nko]

Originalmente Escrito por shurbega

Me quedo por aquí , que curso de los que tenéis en el main post recomendáis más ? Frontend Masters o Full Stack Open ? Quiero meterme en Frontend y buscar algún curro de junior por remoto ya que voy a pasar un tiempo bastante largo esperando una visa y no puedo tener un trabajo presencial normal. (Tengo 6 años y medio de experiencia en Soporte Informático de segundo y tercer nivel, Administración de Sistemas e ingeniero de Data Center por lo que tengo experiencia ya con servidores, sistemas operativos, consola, algo de scripting y demás, también tengo nociones básicas de HTML, CSS y JavaScript, empecé con un curso de Udemy pero va demasiado lento y buscaba algo más dinámico y avanzado que Udemy)

Saludos!

Sin lugar a dudas, por calidad FrontEndMasters. Parece que me paguen porque siempre hablo muy bien de ellos, pero de verdad son los mejores cursos que he encontrado en internet, y mira que me he tragado cursos y he visto webs por ahí.

[shurbega]

Originalmente Escrito por 73nko

Sin lugar a dudas, por calidad FrontEndMasters. Parece que me paguen porque siempre hablo muy bien de ellos, pero de verdad son los mejores cursos que he encontrado en internet, y mira que me he tragado cursos y he visto webs por ahí.

Muchas Gracias, me pillaré la suscripción mensual entonces! Y tenéis algún grupillo de telegram o similares ?

[karl90]

Originalmente Escrito por vlc90

Hoygan, ¿alguno tiene experiencia con nestjs?

¿Ventajas y desventajas con React?

¿Todo se renderiza en el Back?, me tiene despistadisimo el hacer llamadas a apis en el propio server cuando esté server podría directamente maquetar como se lleva haciendo con lenguajes Back toda la vida.

Y ya para acabar lo más importante... Os mola o que? Lo usareis sobre React.

Originalmente Escrito por 73nko

Me lo imaginé. Las opciones para poner nombre a los frameworks de js cada vez son menos xD.

Pues la verdad no sé decirte si vale la pena o no. Yo lo uso a menudo, pero sólo para pequeños proyectos o MVP que quiera hacer. Aporta bastantes funcionalidades útiles, pero al final no es nada que no sea bastante sencillo de añadir manualmente a una aplicación de react normal, así que para algo serio prefiero añadir yo todas las features que requiera y tener un mayor control sobre ello.

Nosotros tenemos nextjs en la parte pública de la app web. Para qué?
Básicamente para el server side rendering, que no es poco.
Por todo lo demás... es prácticamente react. El sistema de rutas basándose en tu estructura de carpetas también está bien aunque tampoco es algo mega necesario y que eché en falta en react.

[angelpadre]

Originalmente Escrito por 73nko

Sin lugar a dudas, por calidad FrontEndMasters. Parece que me paguen porque siempre hablo muy bien de ellos, pero de verdad son los mejores cursos que he encontrado en internet, y mira que me he tragado cursos y he visto webs por ahí.

Cuanto te pagan, dinos la verdad

[Fumo Flores]

A ver si alguno me sabe responder.

Se puede coger un proyecto de Next.js (React renderizado en el servidor. Para que os hagáis una idea, su equivalente es Nuxt.js, Vue renderizado en el servidor) y usarlo con ionic? O ionic solo puede usarse con React a palo seco, en modo SPA?

Estoy pensando en usar ionic para mis futuros proyectos, para hacer de un único proyecto, una app nativa android/ios y también web.

Pero para la web necesito sí o sí que sea Server Side Rendering para el tema del SEO.


EDIT: me autorrespondo.

He estado investigando y no tiene sentido lo que digo. No se puede pasar un proyecto de React a Ionic, hay que usar como base Ionic (que usa la
React o Angular, lo que tú elijas) y de ahí despliegas app nativa de ios/android y web. Además he estado leyendo y de momento la web no soporta SSR, solo modo SPA.

Ionic está hecho para que alguien que ya sabe React o Angular, pueda crear de una sola vez una app nativa y un sitio web. Pero teniendo en cuenta que el sitio web es en modo SPA. Por lo que si tu proyecto necesita SEO no sirve.

Como punto a favor de Ionic es que permite acceder al hardware del dispositivo como bluetooth, cámara, etc. No es solo un simple webview con tu web.

[73nko]

Originalmente Escrito por Fumo Flores

A ver si alguno me sabe responder.

Se puede coger un proyecto de Next.js (React renderizado en el servidor. Para que os hagáis una idea, su equivalente es Nuxt.js, Vue renderizado en el servidor) y usarlo con ionic? O ionic solo puede usarse con React a palo seco, en modo SPA?

Estoy pensando en usar ionic para mis futuros proyectos, para hacer de un único proyecto, una app nativa android/ios y también web.

Pero para la web necesito sí o sí que sea Server Side Rendering para el tema del SEO.


EDIT: me autorrespondo.

He estado investigando y no tiene sentido lo que digo. No se puede pasar un proyecto de React a Ionic, hay que usar como base Ionic (que usa la
React o Angular, lo que tú elijas) y de ahí despliegas app nativa de ios/android y web. Además he estado leyendo y de momento la web no soporta SSR, solo modo SPA.

Ionic está hecho para que alguien que ya sabe React o Angular, pueda crear de una sola vez una app nativa y un sitio web. Pero teniendo en cuenta que el sitio web es en modo SPA. Por lo que si tu proyecto necesita SEO no sirve.

Como punto a favor de Ionic es que permite acceder al hardware del dispositivo como bluetooth, cámara, etc. No es solo un simple webview con tu web.

Genial la pregunta y la aclaración. Muchas gracias por aportar una respuesta tan buena!

[Black_Raven]

Buenísima idea la plataforma la verdad. Ojalá hubiera una más general aquí y no solo para frontend. De todos modos os felicito por el curro


Para colaborar con la plataforma os recomiendo seguir en Twitter a midudev es frontend developer y sube bastantes cursos y consejos.

Saludos y buen foro a todos.

[73nko]

Originalmente Escrito por Black_Raven

Buenísima idea la plataforma la verdad. Ojalá hubiera una más general aquí y no solo para frontend. De todos modos os felicito por el curro


Para colaborar con la plataforma os recomiendo seguir en Twitter a midudev es frontend developer y sube bastantes cursos y consejos.

Saludos y buen foro a todos.

Muchas gracias!! Sí, Miguel angel es un crack, no sólo en twitter, su podcast de WTFront está genial!

[Black_Raven]

Originalmente Escrito por 73nko

Muchas gracias!! Sí, Miguel angel es un crack, no sólo en twitter, su podcast de WTFront está genial!

Si no es mucho preguntar conoces algo parecido para fullstack o backend? Ultimamente tengo bastantes horas muertas a solas y me gustaría un formato similar para estar al día. Muchas gracias!

[King32]

Pillo sitio

[pitoche]

Muy interesante

[KoVrAx]

Sitiando

[shawx]

Originalmente Escrito por Fumo Flores

A ver si alguno me sabe responder.

Se puede coger un proyecto de Next.js (React renderizado en el servidor. Para que os hagáis una idea, su equivalente es Nuxt.js, Vue renderizado en el servidor) y usarlo con ionic? O ionic solo puede usarse con React a palo seco, en modo SPA?

Estoy pensando en usar ionic para mis futuros proyectos, para hacer de un único proyecto, una app nativa android/ios y también web.

Pero para la web necesito sí o sí que sea Server Side Rendering para el tema del SEO.


EDIT: me autorrespondo.

He estado investigando y no tiene sentido lo que digo. No se puede pasar un proyecto de React a Ionic, hay que usar como base Ionic (que usa la
React o Angular, lo que tú elijas) y de ahí despliegas app nativa de ios/android y web. Además he estado leyendo y de momento la web no soporta SSR, solo modo SPA.

Ionic está hecho para que alguien que ya sabe React o Angular, pueda crear de una sola vez una app nativa y un sitio web. Pero teniendo en cuenta que el sitio web es en modo SPA. Por lo que si tu proyecto necesita SEO no sirve.

Como punto a favor de Ionic es que permite acceder al hardware del dispositivo como bluetooth, cámara, etc. No es solo un simple webview con tu web.

Otra opción es tener una landing con su SEO correspondiente etc. Y que ésta redirija a tu app.
Algo como tuproducto.com y luego dentro de tu dominio app.tuproducto.com. De esta manera resolverías el problema y tendrías una landing con información y tal.

[Fumo Flores]

Originalmente Escrito por shawx

Otra opción es tener una landing con su SEO correspondiente etc. Y que ésta redirija a tu app.
Algo como tuproducto.com y luego dentro de tu dominio app.tuproducto.com. De esta manera resolverías el problema y tendrías una landing con información y tal.

Muy buena esa

[Raikmond]

Buenas! Hice el otro día una entrevista con una empresa canadiense para currar en remoto (aunque abrirán oficina en Madrid, supongo que para evitar subcontrata/trabajadores freelance?). Su stack es básicamente Vue, aunque están terminando migraciones desde Ember.

Podéis recomendarme recursos para prepararme la siguiente entrevista? Quisieron cerrarla lo más pronto posible por lo que me imagino que les di buenas vibras (esta entrevista fue técnica también pero mucho más simple, temas de prioridad en CSS, closure en JS, scope... Temas típicos). No estoy muy seguro de si preparármela por el lado de Vue (que no piden experiencia previa) o seguir trillándome los básicos de JS/HTML/CSS.

En principio es una entrevista que abarca desde junior hasta senior por lo que según vean mi nivel irán adaptando las preguntas, pero considero que estoy a medio camino entre junior y mid-level por lo que agradecería si me podéis pasar algún recurso fiable donde tenga todo bastante estructurado.

PD: Sé usar Google. Lo que digo es algo que sea fiable, reciente, y a poder ser cosas que puedan ser relevantes si voy a trabajar con Vue.

Gracias shurs